{"id":11222,"date":"2025-07-03T18:28:52","date_gmt":"2025-07-03T09:28:52","guid":{"rendered":"https:\/\/www.moonmile.net\/blog\/?p=11222"},"modified":"2025-07-09T09:54:03","modified_gmt":"2025-07-09T00:54:03","slug":"copilot-claude-sonnet-4-%e3%81%a8-blazor-%e3%81%ae%e7%b5%84%e3%81%bf%e5%90%88%e3%82%8f%e3%81%9b","status":"publish","type":"post","link":"http:\/\/www.moonmile.net\/blog\/archives\/11222","title":{"rendered":"Copilot + Claude Sonnet 4 \u3068 Blazor \u306e\u7d44\u307f\u5408\u308f\u305b"},"content":{"rendered":"\n

\u524d\u56de\u306e\u7d9a\u304d\u3067\u3001\u6ce8\u6587\u753b\u9762\u3092 Blazor \u3092\u4f7f\u3063\u3066\u4f5c\u3063\u3066\u307f\u308b\u30c6\u30b9\u30c8\u3002React \u3068\u540c\u3058\u3088\u3046\u306b GitHub Copilot + Claude Sonnet 4  \u306e\u7d44\u307f\u5408\u308f\u305b\u3092\u4f7f\u3046\u8a33\u3002<\/p>\n\n\n\n

\u5148\u3068\u540c\u3058\u30d1\u30bf\u30fc\u30f3\u3067 Web API \u306f\u5b9f\u88c5\u6e08\u307f\u3068\u3044\u3046\u72b6\u614b\u3067\u3001\u9069\u5b9c postman \u306a\u3069\u3092\u4f7f\u3063\u3066\u9001\u53d7\u4fe1\u306e JSON \u306e\u5f62\u5f0f\u3092 Copilot \u306b\u4f1d\u3048\u3066\u4f5c\u696d\u3092\u3059\u3059\u3081\u3066\u3044\u304f\u3002<\/p>\n\n\n\n

\u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u30e2\u30fc\u30c9\u3067\u6307\u793a\u3092\u3059\u308b<\/h2>\n\n\n\n
dotnet new blazor<\/pre>\n\n\n\n
\u3067\u3001\u3072\u306a\u5f62\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u4f5c\u3063\u3066\u304b\u3089\u3001Agent \u30e2\u30fc\u30c9\u3067\u6307\u793a\u3092\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u30ab\u30c6\u30b4\u30ea\u4e00\u89a7\u306e Categories.razor \u3092\u4f5c\u3063\u3066\u3002<\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u6ce8\u6587\u30b5\u30a4\u30c8\u7cfb\u306f Claude Sonnet \u306e\u4e2d\u3067\u3082\u5b66\u7fd2\u6e08\u307f\u3060\u308d\u3046\u304b\u3089\u3001\u5b9a\u756a\u306e\u3082\u306e\u3092\u5f15\u304d\u5f53\u3066\u3066\u304f\u308c\u307e\u3059\u3002\u3053\u308c\u3001\u898b\u305f\u3053\u3068\u304c\u306a\u3044\u30da\u30fc\u30b8\u306e\u5834\u5408\u306f\u3069\u3046\u306a\u308b\u306e\u304b\u4e0d\u5b89\u306a\u3068\u3053\u308d\u304c\u3042\u308b\u306e\u3068\u540c\u6642\u306b\u3001\u5b9a\u756a\u306e\u3082\u306e\u306f\u5b9a\u756a\u306e\u30da\u30fc\u30b8\u306b\u5bc4\u305b\u3066\u304f\u308b\u306e\u3067\u7d50\u69cb\u4f59\u5206\u306a\u6a5f\u80fd\u3082\u4ed8\u3051\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u30ab\u30c6\u30b4\u30ea\u4e00\u89a7\u306f webapi \u3067 localhost:8000\/mos\/api\/categories \u3092\u547c\u3073\u51fa\u3057\u3066\u3002

\u30ec\u30b9\u30dd\u30f3\u30b9\u306e JSON \u5f62\u5f0f\u306e\u4f8b

{
    \"items\": [
        {
            \"id\": 1,
            \"slug\": \"special1\",
            \"title\": \"\u4eca\u6708\u306e\u304a\u85a6\u3081\",
            \"description\": \"\u4eca\u6708\u306e\u304a\u85a6\u3081\u5546\u54c1\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\",
            \"image\": \"\",
            \"sortid\": 1,
            \"display\": true,
            \"created_at\": \"2025-06-05T11:57:01+09:00\",
            \"updated_at\": \"2025-06-05T11:57:01+09:00\",
            \"deleted_at\": null
        },
...<\/pre>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u30ab\u30c6\u30b4\u30ea\u4e00\u89a7\u306b\u300c\u65b0\u3057\u3044\u30ab\u30c6\u30b4\u30ea\u306e\u8ffd\u52a0\u300d\u30dc\u30bf\u30f3\u3092\u4ed8\u3051\u3066\u304f\u308c\u307e\u3059\u3002\u5185\u90e8\u5b9f\u88c5\u306f\u3057\u3066\u3044\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u3053\u306e\u624b\u306e\u6c17\u306e\u5229\u3044\u305f\u6a5f\u80fd\u3063\u307d\u3044\u3082\u306e<\/strong>\u306f\u304d\u3061\u3093\u3068\u524a\u3063\u3066\u3044\u304b\u306a\u3044\u3068\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30ea\u30b9\u30af\u304c\u9ad8\u307e\u308b\u3068\u3053\u308d\u3067\u3059\u3002\u3053\u306e\u5834\u5408\u3001web api \u3067\u306f\u30ab\u30c6\u30b4\u30ea\u306e\u8ffd\u52a0\u3092\u5b9f\u88c5\u3057\u3066\u3044\u306a\u3044\u306e\u3067\u5927\u4e08\u592b\u306a\u306e\u3067\u3059\u304c\u3001\u5b9f\u88c5\u6e08\u307f\u3060\u3063\u305f\u308a\u3059\u308b\u3068\u3046\u3063\u304b\u308a\u547c\u3070\u308c\u3066\u3057\u307e\u3044\u304b\u306d\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
React \u3068\u540c\u3058\u3088\u3046\u306b\u30d7\u30ed\u30f3\u30d7\u30c8\u306e\u6307\u793a\u3092\u3060\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\u5546\u54c1\u4e00\u89a7\u306e\u5546\u54c1\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b\u3001\u5546\u54c1\u8a73\u7d30\u30da\u30fc\u30b8\u3092\u958b\u3044\u3066
web api \u306f \/products\/{id}

\u623b\u308a\u5024\u306e\u4f8b

{
    \"id\": 1,
    \"category_id\": 6,
    \"slug\": \"burger1\",
    \"name\": \"\u30e2\u30b9\u30d0\u30fc\u30ac\u30fc\",
    \"description\": \"\",
    \"image\": \"m001\",
    \"price\": 440,
    \"sortid\": 1,
    \"display\": true,
    \"created_at\": \"2024-06-19T02:49:19+09:00\",
    \"updated_at\": \"2024-06-19T02:49:19+09:00\",
    \"deleted_at\": null
}<\/pre>\n\n\n\n
\u5546\u54c1\u8a73\u7d30\u30da\u30fc\u30b8\u3067\u300c\u30ab\u30fc\u30c8\u306b\u8ffd\u52a0\u300d\u306e\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u3002
\u30ab\u30fc\u30c8\u306e\u4e2d\u8eab\u306f Cart.razor \u3067\u898b\u308c\u308b\u3088\u3046\u306b\u3057\u3066\u3002<\/pre>\n\n\n\n
\u30b7\u30e7\u30c3\u30d4\u30f3\u30b0\u30ab\u30fc\u30c8\u3067\u300c\u6ce8\u6587\u624b\u7d9a\u304d\u300d\u3078\u3092\u5b9f\u88c5\u3057\u3066\u3002
web api \u3092 POST \/orders \u3057\u3066\u3001

\u547c\u3073\u51fa\u3057JSON \u306e\u4f8b

{
    total_price: 0,
    total_quantity: 0,
    items: [
      {
        id: 1,
        price: 1000,
        quantity: 2,
      },
      {
        id: 2,
        price: 2000,
        quantity: 3,
      },
    ],
  }<\/pre>\n\n\n\n
\u3053\u3053\u307e\u3067\u30ab\u30fc\u30c8\u306e\u6a5f\u80fd\u307e\u3067\u5b9f\u88c5\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u4f55\u6545\u304b\u3001Blazor \u3067\u4f5c\u3063\u3066\u3044\u308b\u3068\u304d\u306f\u6ce8\u6587\u306e\u78ba\u8a8d\u30da\u30fc\u30b8\u3092\u4f5c\u3063\u3066\u304f\u308c\u307e\u3059\u3002\u4eca\u56de\u306e\u5834\u5408\u306f\u3001\u78ba\u8a8d\u30da\u30fc\u30b8\u304c\u3044\u3089\u306a\u304f\u3066\u3001\u76f4\u63a5\u6ce8\u6587\u306e web api \u3092\u547c\u3073\u51fa\u3057\u3066\u6b32\u3057\u3044\u306e\u3067\u3001\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u4fee\u6b63\u3092\u6307\u793a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6ce8\u6587\u78ba\u8a8d\u30da\u30fc\u30b8\u3092\u524a\u9664\u3057\u3066\u3002
\u300c\u6ce8\u6587\u624b\u7d9a\u304d\u300d\u3092\u300c\u6ce8\u6587\u3059\u308b\u300d\u306b\u5909\u66f4\u3057\u3066\u3002
\u300c\u6ce8\u6587\u3059\u308b\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3068\u304d\u306b \/orders \u3092\u547c\u3073\u51fa\u3057\u3066\u3002<\/pre>\n\n\n\n
web api \/orders \u306e\u623b\u308a\u5024\u306f

{ \"order_number\": \"00000000\" }

\u3068\u306a\u308b\u306e\u3067\u3001\u3053\u306e\u6ce8\u6587\u756a\u53f7 order_number \u3092\u8868\u793a\u3057\u3066\u3002<\/pre>\n\n\n\n
\u3053\u306e\u3042\u305f\u308a\u3092\u4e00\u6c17\u306b\u6700\u521d\u306e\u30d7\u30ed\u30f3\u30d7\u30c8\u3067\u6307\u793a\u3059\u308b\u306e\u306f\u7121\u7406\u305d\u3046\u306a\u306e\u3067\u3001\u30da\u30a2\u30d7\u30ed\u98a8\u306b\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3092\u9032\u3081\u3066\u3044\u304f\u306e\u304c\u3088\u3044\u3067\u3057\u3087\u3046\u3002\u306a\u306e\u3067\u3001\u76f4\u63a5\u30b3\u30fc\u30c9\u306f\u66f8\u3051\u306a\u304f\u3066\u3082\u30b3\u30fc\u30c9\u304c\u8aad\u3081\u308b\u3088\u3046\u306b\u306a\u3089\u306a\u3044\u3068\u99c4\u76ee\u3063\u307d\u3044\u3067\u3059\u3002<\/p>\n\n\n\n
\u305f\u3060\u3057\u3001Claude Sonnet \u304c\u5148\u884c\u304d\u3001\u4eba\u304c\u8aad\u307f\u3084\u3059\u3044\u30b3\u30fc\u30c9\u3092\u51fa\u529b\u3059\u308b\u306e\u304b\u3001\u8aad\u3080\u4eba\u306e\u80fd\u529b\u3092\u8d85\u3048\u3066\u3057\u307e\u3046\u30b3\u30fc\u30c9\u3092\u5410\u304d\u51fa\u3059\u306e\u304b\uff08\u4eba\u304c\u76f4\u305b\u306a\u3044\u30b3\u30fc\u30c9\u306b\u306a\u308b\uff09\u306f\u308f\u304b\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
\u4f59\u5206\u306a web api \u547c\u3073\u51fa\u3057\u3092\u4fee\u6b63\u3059\u308b<\/h2>\n\n\n\n
\u3042\u308b\u7a0b\u5ea6\u30b3\u30fc\u30c9\u304c\u3067\u304d\u3042\u304c\u3063\u305f\u3068\u3053\u308d\u3067\u753b\u9762\u306e\u64cd\u4f5c\u3057\u3066\u3044\u308b\u3068\u3001\u5546\u54c1\u4e00\u89a7 Product.razor \u3092\u8868\u793a\u3059\u308b\u3068\u304d\u306b\u3072\u3069\u304f\u6642\u9593\u304c\u639b\u304b\u3063\u3066\u3044\u307e\u3059\u3002dotnet run \u306e\u7d50\u679c\u3092\u307f\u308b\u3068\u3001\u540c\u3058 web api \u30924\u56de\u7a0b\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n
\u5546\u54c1\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u3068\u304d\u306b\u540c\u3058 web api \u3092 4\u56de\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\u3002
\u3053\u308c\u30921\u56de\u306b\u306a\u308b\u3088\u3046\u306b\u4fee\u6b63\u3057\u3066\u3002

info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2404.2005ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2404.2535ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2366.16ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2366.2342ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2366.8227ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2366.8871ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2374.857ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2374.9186ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2423.4487ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2423.5976ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2369.3309ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2369.4243ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/products\/slug\/special1
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2397.9347ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2398.0152ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[100]
      Start processing HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[100]
      Sending HTTP request GET http:\/\/localhost:8000\/mos\/api\/categories
info: System.Net.Http.HttpClient.Default.ClientHandler[101]
      Received HTTP response headers after 2371.7073ms - 200
info: System.Net.Http.HttpClient.Default.LogicalHandler[101]
      End processing HTTP request after 2371.7812ms - 200<\/pre>\n\n\n\n
\u3064\u307e\u308a\u3001\u8868\u9762\u4e0a\u52d5\u3044\u3066\u3044\u308b\u3063\u307d\u3044\u30b3\u30fc\u30c9\uff08\u5b9f\u969b\u306b Claude Sonnet \u306f\u52d5\u304b\u3057\u3066\u3044\u306a\u3044\u308f\u3051\u3067\u3059\u304c\uff09\u3067\u306f\u3042\u308b\u3082\u306e\u306e\u3001\u3044\u308f\u3086\u308b\u300c\u975e\u6a5f\u80fd\u8981\u4ef6\u300d\u306f\u4eba\u9593\u304c\u78ba\u8a8d\u3057\u306a\u3044\u3068\u3044\u3051\u307e\u305b\u3093\u3002Copilot \u306f\u3042\u308b\u7a0b\u5ea6\u6b63\u89e3\u306e\u30b3\u30fc\u30c9\u3092\u51fa\u3057\u3066\u306f\u304f\u308c\u307e\u3059\u304c\u3001\u5fc5\u305a\u3057\u3082\u305d\u308c\u304c\u6b63\u89e3\u3068\u306f\u9650\u3089\u306a\u3044\u306e\u3067\u3059\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u4f55\u56de\u304b\u4fee\u6b63\u3092\u7e70\u308a\u8fd4\u3059\u306e\u3067\u3059\u304c\u3001\u6700\u7d42\u7684\u306b\u306f\u5fc5\u305a2\u56de web api \u3092\u547c\u3073\u51fa\u3059\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u5b9f\u306f\u3001Blazor \u3092\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30f3\u30c0\u30ea\u30f3\u30b0\u3067\u8868\u793a\u3055\u305b\u308b\u3068\u304d\u306b\u3001<\/p>\n\n\n\n