{"id":12218,"date":"2026-05-30T09:00:23","date_gmt":"2026-05-30T00:00:23","guid":{"rendered":"https:\/\/www.moonmile.net\/blog\/?p=12218"},"modified":"2026-05-29T17:07:46","modified_gmt":"2026-05-29T08:07:46","slug":"blazor-%e3%81%8b%e3%82%89-laravel-%e3%81%ae-web-api-%e5%91%bc%e3%81%b3%e5%87%ba%e3%81%97%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\/12218","title":{"rendered":"Blazor \u304b\u3089 Laravel \u306e Web API \u547c\u3073\u51fa\u3057\u306e\u7d44\u307f\u5408\u308f\u305b"},"content":{"rendered":"\n

\u5b9f\u306f\u3082\u3046\u3072\u3068\u3064\u6883\u5165\u308c\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u306e\u304c\u300cPHP&Laravel\u3067\u4f5c\u308bWeb API\u958b\u767a\u5165\u9580\u300dhttps:\/\/amzn.asia\/d\/05D3tq44<\/a> \u3060\u3063\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\u57fa\u672c .NET \u306a\u4eba\u304c\u4f55\u6545\u306b PHP\/Laravel \u306a\u306e\u304b\uff1f\u3063\u3066\u306e\u3082\u3042\u308a\u307e\u3059\u304c\u3001\u65b0\u4eba\u7814\u4fee\u3067 Vue\/Nuxt \u3068 PHP\/Laravel \u3092\u4f7f\u3063\u3066\u3044\u3066\u3067\u3059\u306d\u3001\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e Web API \u5b9f\u88c5\u672c\u304c\u306a\u3044\u306e\u3067\u3001\u6559\u79d1\u66f8\u4ee3\u308f\u308a\u306b\u66f8\u3044\u305f\u3002\u3068\u3044\u3046\u306e\u304c\u771f\u76f8\u3067\u3059\u3002\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u3060\u304b\u3089 Web API \u306e\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066 ASP.NET Core \u3067\u3082\u3044\u3044\u306e\u3067\u306f\u306a\u3044\u304b\u3001\u3068\u3044\u3046\u6c17\u3082\u3057\u307e\u3059\u3057\u3001\u66ab\u304f\u306f\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e\u5b9f\u9a13\u306f .NET \u7cfb\u3067\u3084\u3063\u3066\u3044\u307e\u3057\u305f\uff08\u65b0\u4eba\u6559\u80b2\u3067\u306f\u3001Vue\/Nuxt \u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3067\u304a\u3057\u307e\u3044\u306b\u306a\u308b\u3053\u3068\u304c\u591a\u3044\u306e\u3067\uff09\u3001\u305f\u3060\u3001HTTP \u30d7\u30ed\u30c8\u30b3\u30eb\u306e\u7d30\u304b\u3044\u3068\u3053\u308d\u3084\u3089\u8a8d\u8a3c\u3084\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u307e\u308f\u308a\u306e\u89e3\u8aac\u3068\u306a\u308b\u3068\u5b9f\u969b\u306e PHP\/Laravel \u306e\u5b9f\u88c5\u304c\u6b32\u3057\u304b\u3063\u305f\u306e\u3067\u3059\u3002<\/p>\n\n\n\n

\u5b9f\u306f\u3001\u540c\u6642\u671f\u306b\u300cAPI Platform\u3092\u6d3b\u7528\u3057\u305fPHP\u306b\u3088\u308b\u672c\u683c\u7684\u306aWeb API\u958b\u767a\u300d https:\/\/amzn.asia\/d\/09ZdjoNj \u304c\u51fa\u7248\u3055\u308c\u305f\u306e\u3067\u3001\u88ab\u3089\u306a\u304f\u3066\u3088\u304b\u3063\u305f…\u3068\u601d\u3044\u3064\u3064\u3001\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c API Platform \u3068 Laravel \u3068\u7570\u306a\u308b\u306e\u3067\u3001\u5b9f\u88c5\u306e\u9055\u3044\u304c\u826f\u304f\u5206\u304b\u308b\u3088\u3046\u306b\u306a\u308b…\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002
Web API \u306e\u672c\u306f\u3001\u8a2d\u8a08\u3084\u30c6\u30b9\u30c8\u306e\u672c\u306f\u3042\u308b\u306e\u3067\u3059\u304c\u3001\u5b9f\u969b\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u524d\u63d0\u306e\u5b9f\u88c5\u672c\u304c\u306a\u3044\u306e\u3067\u3061\u3087\u3063\u3068\u82e6\u52b4\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u304c\uff08Laravel \u672c\u3060\u3068\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u8a71\u304c\u591a\u3044\u306e\u3067\u3001Web API \u306e\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u8a71\u304c\u3061\u3087\u3063\u3074\u308a\u3057\u304b\u306a\u3044\u306e\u3067\uff09…\u679c\u305f\u3057\u3066\u3002<\/p>\n\n\n\n

\u305d\u3093\u306a\u8a33\u3067\u5b9f\u88c5\u4f8b\u304c github https:\/\/github.com\/moonmile\/webapi-sample<\/a> \u306b\u3042\u308b\u306e\u3067\u3001\u6d3b\u7528\u3057\u3066\u304f\u3060\u3055\u3044\u3068\u3044\u3046\u5f62\u3067\u7f6e\u3044\u3066\u3042\u308a\u307e\u3059\u3002\u66f8\u7c4d\u3092\u8cb7\u3046\u8cb7\u308f\u306a\u3044\u306f\u5225\u3068\u3057\u3066\u3001laravel-webapi \u3068\u3057\u3066\u300c\u56de\u8ee2\u5bff\u53f8\u6ce8\u6587\u30b5\u30a4\u30c8\u300d\u3092\u4f5c\u308b\u305f\u3081\u306e web api \u3092\u63c3\u3048\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n

\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u307b\u3046\u306f\u3001React\/React Native \u306a\u3069\u3067\u4f5c\u3063\u3066\u3042\u308a\u307e\u3059\u304c\u3001\u4ed6\u306e\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\/\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u3082\u5341\u5206\u53ef\u80fd\u3067\u3059\u3002\u3068\u3044\u3044\u307e\u3059\u304b\u3001\u3072\u3068\u307e\u305a\u3001Docker \u3067 laravel-webapi \u3092\u52d5\u304b\u3057\u3066\u304a\u3044\u3066\u3001\u5225\u9014\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u81ea\u7531\u306b\u4f5c\u308b\u3001\u3068\u3044\u3046\u958b\u767a\u74b0\u5883\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002docker-compose.yml \u3092\u7528\u610f\u3057\u3066\u3042\u308b\u306e\u3067\u3001windows \u306e Docker \u3067\u3082\u52d5\u4f5c\u304c\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066 order-tablet \u3092\u52d5\u4f5c\u3055\u305b\u308b\u3068\u3001\u3053\u3093\u306a\u753b\u9762\u304c\u3067\u307e\u3059\u3002<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

\u3053\u308c\u306f\u3001Next.js \u3067\u4f5c\u3063\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u5f53\u7136\u306e\u3053\u3068\u306a\u304c\u3089 Web API \u3055\u3048\u4f7f\u3048\u308c\u3070\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306e\u7a2e\u985e\u306f\u554f\u3044\u307e\u305b\u3093\u3002\u305d\u306e\u3042\u305f\u308a\u306f\u3001\u30ed\u30fc\u30ab\u30ebPC\u306b\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e Docker \u3092\u52d5\u304b\u3057\u3066\u3001\u81ea\u7531\u306b\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f5c\u3063\u3066\u307f\u3088\u3046\u3068\u3044\u3046\u8da3\u65e8\u306a\u308f\u3051\u3067\u3059\u304c…\u307e\u3042\u3001\u3061\u3087\u3063\u3068 amaqzon \u306e\u8a55\u304c\u306a\u304f\u3066\u82e6\u6226\u4e2d\u3067\u3059\u306d\u3002\u3044\u3084\u3001\u540c\u6642\u671f\u306e API Platform \u672c\u306e\u307b\u3046\u3082\u82e6\u6226\u4e2d\uff1f\u3063\u307d\u3044\u306e\u3067\u3001Web API \u9650\u5b9a\u3068\u3044\u3046\u306e\u304c\u5730\u5473\u306a\u306e\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

\u79c1\u3068\u3057\u3066\u306f MVC \u30d1\u30bf\u30fc\u30f3\u3068\u304b\u3001SSR\uff08\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\uff09\u306a\u3093\u304b\u306f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3068\u540c\u3058\u30d7\u30ed\u30b0\u30e9\u30e0\u8a00\u8a9e\u3067\u66f8\u3051\u308b\u306e\u3067\u697d\u3060\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u3068\u3057\u3066\u306e JavaScript\/TypeScript \u4e00\u5f37\u306a\u611f\u3058\u3092\u898b\u308b\u3068\u3067\u3059\u306d\u3001\u3058\u3083\u3042\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u3082 Node.js \u3067 TypeScript \u3067\u66f8\u304f\u306e\u304c\u30d9\u30b9\u30c8\u306a\u306e\u304b\uff1f\u3068\u3082\u8003\u3048\u3066\u3057\u307e\u3046\u308f\u3051\u3067\u3059\u3002\u305f\u3060\u3057\u3001\u5b9f\u904b\u7528\u3068\u306a\u308b\u3068\u3001Java, C#, PHP \u306a\u3069\u306a\u3069\u3068\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306e\u9078\u629e\u80a2\u304c\u3042\u308b\u306e\u304c\u4e8b\u5b9f\u306a\u306e\u3067\u3002\u307e\u3042\u3001\u4f4f\u307f\u5206\u3051\u3067\u3082\u3044\u3044\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

\u3058\u3083\u3042\u3001Blazor \u7248\u3067\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3092\u4f5c\u3063\u3066\u307f\u308b<\/strong><\/h2>\n\n\n\n

\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e Web API \u304c\u7528\u610f\u3055\u308c\u3066\u3044\u308b\u306e\u3060\u304b\u3089\u3001\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306f\u4f55\u3067\u3082\u3044\u3044\u3067\u3059\u3088\u306d\u3001\u3068\u3044\u3046\u306e\u304c\u5b9f\u60c5\u3067\u3059\u3002\u305d\u308c\u3053\u305d OpenAPI \u4ed5\u69d8\u3067\u6c7a\u307e\u3063\u3066\u3044\u308c\u3070\u3001\u8a00\u8a9e\u3084\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3092\u554f\u3044\u307e\u305b\u3093\u3002<\/p>\n\n\n\n

\u30c8\u30c3\u30d7\u30da\u30fc\u30b8<\/strong><\/h2>\n\n\n\n

React \u3084 Vue \u306e\u5834\u5408\u306f\u30c7\u30b6\u30a4\u30ca\u3092\u4f7f\u3063\u3066\u3001\u304d\u308c\u3044\u306a\u753b\u9762\u3092\u30c7\u30b6\u30a4\u30f3\u3067\u304d\u308b\u306e\u3067\u3059\u304c\u3001\u679c\u305f\u3057\u3066 Blazor \u306e\u5834\u5408\u306f\u3069\u3046\u306a\u306e\u304b\uff1f\u3000\u3053\u308c\u306f\u3001Blazor \u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f Bootstrap \u3092\u4f7f\u3046\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u306e\u3067\u3001AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3092\u4f7f\u3063\u3066 Bootstrap \u5f62\u5f0f\u3067\u66f8\u3044\u3066\u8cb0\u3046\u3068\u7dba\u9e97\u306a\u3082\u306e\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n

App.razor \u306e\u4e2d\u3067 bootstrap \u3092\u6307\u5b9a\u3057\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u90e8\u5206\u3092\u5207\u308a\u66ff\u3048\u308c\u3070 Tailwind \u306e\u307b\u3046\u3082\u7d44\u307f\u3053\u3081\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n\n\n

\n@page "\/top"\n@rendermode InteractiveServer\n@inject NavigationManager Navigation\n\n<PageTitle>\u304a\u5bff\u53f8\u6ce8\u6587\u30b7\u30b9\u30c6\u30e0<\/PageTitle>\n\n<div class="min-vh-100 bg-light d-flex align-items-center justify-content-center p-4">\n    <div class="bg-white rounded-4 shadow-lg p-5 text-center" style="max-width: 28rem; width: 100%;">\n        <div class="mb-4">\n            <h1 class="display-4 text-danger mb-2">\ud83c\udf63<\/h1>\n            <h2 class="fs-4 fw-bold mb-2">\u304a\u5bff\u53f8\u6ce8\u6587\u30b7\u30b9\u30c6\u30e0<\/h2>\n            <p class="text-secondary">\u3088\u3046\u3053\u305d\uff01\u3054\u7740\u5e2d\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3059<\/p>\n        <\/div>\n\n        <div class="mb-4">\n            <label class="form-label fw-semibold fs-5 mb-3">\n                \u3054\u5229\u7528\u4eba\u6570\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044\n            <\/label>\n            <div class="d-flex align-items-center justify-content-center gap-3">\n                <button class="btn btn-outline-secondary btn-lg" @onclick="Decrement">\n                    \u2212\n                <\/button>\n                <div class="bg-light rounded d-flex align-items-center justify-content-center"\n                     style="width: 5rem; height: 4rem;">\n                    <span class="fs-2 fw-bold">@guests<\/span>\n                <\/div>\n                <button class="btn btn-outline-secondary btn-lg" @onclick="Increment">\n                    \uff0b\n                <\/button>\n            <\/div>\n            <p class="text-muted small mt-2">\u6700\u59278\u540d\u69d8\u307e\u3067<\/p>\n        <\/div>\n\n        <button class="btn btn-primary btn-lg w-100" @onclick="startOrder">\n            \u6ce8\u6587\u958b\u59cb\n        <\/button>\n\n        <div class="mt-4 small text-muted">\n            <p>\u30c6\u30fc\u30d6\u30eb\u756a\u53f7: <span class="fw-semibold">T-001<\/span><\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n@code {\n    private int guests = 2;\n\n    private void Increment()\n    {\n        System.Diagnostics.Debug.WriteLine("click Increment");\n        if (guests < 8) guests++;\n    }\n\n    private void Decrement()\n    {\n        System.Diagnostics.Debug.WriteLine("click Decrement");\n        if (guests > 1) guests--;\n    }\n\n    private void startOrder()\n    {\n        System.Diagnostics.Debug.WriteLine("click startOrder");\n        Navigation.NavigateTo("\/categories");\n    }\n}\n<\/pre><\/div>\n\n\n
\u3053\u308c\u3092\u52d5\u4f5c\u3055\u305b\u308b\u3068\u3001\u30c8\u30c3\u30d7\u753b\u9762\u3092\u8868\u793a\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u5de6\u5074\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u30c8\u30c3\u30d7\u306b\u6301\u3063\u3066\u3044\u304f\u306e\u306f\u5f8c\u306b\u3057\u3066\u3001\u30c6\u30fc\u30d6\u30eb\u4eba\u6570\u3092\u6307\u5b9a\u3057\u3066\u300c\u6ce8\u6587\u958b\u59cb\u300d\u30dc\u30bf\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30ab\u30c6\u30b4\u30ea\u4e00\u89a7\u304c\u8868\u793a\u3055\u308c\u308b\u3068\u3053\u308d\u307e\u3067\u53ef\u80fd\u3067\u3059\u3002<\/p>\n\n\n\n
\u30c7\u30b6\u30a4\u30f3\u304c\u4e00\u7dd2\u306a\u306e\u306f\u3001React \u3067\u4f5c\u3063\u305f Tailwind \u306e\u30c7\u30b6\u30a4\u30f3\u3092 Claude Code \u3092\u4f7f\u3063\u3066 Bootstrap \u5f62\u5f0f\u306b\u76f4\u3057\u3066\u3082\u3089\u3063\u3066\u3044\u308b\u304b\u3089\u3067\u3059\u3002\u3053\u306e\u3042\u305f\u308a\u3001UI \u30c7\u30b6\u30a4\u30f3\u3092 AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u3092\u4f7f\u3063\u3066\u6a21\u7d22\u3059\u308b https:\/\/www.moonmile.net\/blog\/archives\/12182<\/a> \u3067\u8af8\u3005\u8a66\u3057\u3066\u3044\u305f\u306e\u3067\u3059\u304c\u3001\u90e8\u54c1\u3060\u3051\u7528\u610f\u3057\u3066\u30c7\u30b6\u30a4\u30f3\u3092 AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306b\u76f4\u3057\u3066\u8cb0\u3046\u3001\u3068\u3044\u3046\u65b9\u6cd5\u304c\u300c\u30c7\u30b6\u30a4\u30f3\u30bb\u30f3\u30b9\u306e\u306a\u3044\u79c1\u300d\u306f\u6700\u9069\u306a\u6c17\u304c\u3057\u307e\u3059\u3002\u3044\u3084\u3041\u3001\u3061\u307e\u3061\u307e\u3068 Bootstrap \u306e\u30af\u30e9\u30b9\u3092\u6307\u5b9a\u3059\u308b\u306e\u3082\u5927\u5909\u306a\u306e\u3067\u3001\u6700\u521d\u306e\u3072\u306a\u5f62\u3060\u3051\u7528\u610f\u3057\u3066\u304f\u308c\u308b\u306e\u306f\u52a9\u304b\u308a\u307e\u3059\u3002\u3082\u3063\u3068\u3082\u3001Bootstrap \u3060\u3068\u3069\u3046\u3057\u3066\u3082\u696d\u52d9\u30a2\u30d7\u30ea\u3061\u3063\u304f\u306b\u306a\u308b\u306e\u304c\u96e3\u70b9\u3067\u3059\u304c\u3001\u307e\u3042\u3001\u305d\u3053\u306f\u826f\u3057\u3068\u3057\u307e\u3059\u3002\u793e\u5185\u30a2\u30d7\u30ea\u306a\u3093\u304b\u306f\u3053\u308c\u3067\u5341\u5206\u3067\u3059\u3002<\/p>\n\n\n\n
\u30ab\u30c6\u30b4\u30ea\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b<\/strong><\/h2>\n\n\n\n
Laravel \u306e Web API \u3092\u5229\u7528\u3057\u3066\u30ab\u30c6\u30b4\u30ea\u4e00\u89a7\u3092\u8868\u793a\u3055\u305b\u3066\u307f\u307e\u3057\u3087\u3046\u3002
\u3072\u3068\u307e\u305a\u3001div \u30bf\u30b0\u3067\u30ab\u30c6\u30b4\u30ea\u3092\u8868\u793a\u3092\u3055\u305b\u308b\u3068\u3053\u308d\u307e\u3067\u3002<\/p>\n\n\n
\n@page "\/categories"\n@rendermode InteractiveServer\n@inject NavigationManager Navigation\n@inject HttpClient Http\n@inject IJSRuntime JSRuntime\n\n<PageTitle>\u30ab\u30c6\u30b4\u30ea\u4e00\u89a7<\/PageTitle>\n<div>\n    \u30ab\u30c6\u30b4\u30ea\u3092\u8868\u793a\n    \n    @foreach(  var it in categories) {\n        <div>\n            @it.Id : @it.Name\n        <\/div>\n    }\n<\/div>\n\n@code {\n    class Category {\n        public int Id { get; set; }\n        public string Name {get; set; } = "";\n        public string Description { get; set; } = "";\n        public int ProductsCount { get; set; }\n        public DateTime CreatedAt {get; set; }\n        public DateTime UpdatedAt {get; set; }\n    }\n    class CategoriesResponse {\n        public Category[] Data { get; set; } = default! ;\n    }\n\n    private List<Category> categories = new List<Category>();\n    protected override async Task OnInitializedAsync()\n    {\n        await onSearch();\n    }\n\n    \/\/\/ <summary>\n    \/\/\/ \u691c\u7d22\n    \/\/\/ <\/summary>\n    private async Task onSearch()\n    {\n        var res = await Http.GetFromJsonAsync<CategoriesResponse>(\n            "api\/categories");\n        if (res == null) return;\n        this.categories = res.Data.ToList();\n\n        System.Diagnostics.Debug.WriteLine( this.categories );\n\n        foreach( var it in this.categories  ) {\n            System.Diagnostics.Debug.WriteLine( it.Name );\n        }\n    }\n}\n<\/pre><\/div>\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u3053\u306e\u72b6\u614b\u304b\u3089\u3001\u30ab\u30c6\u30b4\u30ea\u306e\u8868\u793a\u3092 bootstrap \u5f62\u5f0f\u3067 AI \u30a8\u30fc\u30b8\u30a7\u30f3\u30c8\u306b\u5316\u7ca7\u3057\u3066\u3082\u3089\u3044\u307e\u3059\u3002<\/p>\n\n\n
\n<div class="container py-4">\n    <div class="mb-4">\n        <h2 class="fw-bold text-danger">\ud83c\udf63 \u30ab\u30c6\u30b4\u30ea\u4e00\u89a7<\/h2>\n        <p class="text-secondary">\u30ab\u30c6\u30b4\u30ea\u3092\u9078\u629e\u3057\u3066\u304f\u3060\u3055\u3044<\/p>\n    <\/div>\n\n    @if (isLoading)\n    {\n        <div class="d-flex justify-content-center py-5">\n            <div class="spinner-border text-danger" role="status">\n                <span class="visually-hidden">\u8aad\u307f\u8fbc\u307f\u4e2d...<\/span>\n            <\/div>\n        <\/div>\n    }\n    else if (categories.Count == 0)\n    {\n        <div class="alert alert-warning">\u30ab\u30c6\u30b4\u30ea\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<\/div>\n    }\n    else\n    {\n        <div class="row row-cols-1 row-cols-md-3 g-4">\n            @foreach (var it in categories)\n            {\n                <div class="col">\n                    <div class="card h-100 shadow-sm border-0" style="cursor: pointer;"\n                         @onclick="() => SelectCategory(it)">\n                        <div class="card-body">\n                            <h5 class="card-title fw-bold">@it.Name<\/h5>\n                            <p class="card-text text-secondary">@it.Description<\/p>\n                        <\/div>\n                        <div class="card-footer bg-white border-0 d-flex justify-content-between align-items-center">\n                            <span class="badge bg-danger rounded-pill">@it.products_count \u54c1<\/span>\n                            <small class="text-muted">\u2192<\/small>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            }\n        <\/div>\n    }\n<\/div>\n<\/pre><\/div>\n\n\n
\"\"<\/a><\/figure>\n\n\n\n
\u30b3\u30fc\u30c9\u90e8\u5206<\/p>\n\n\n
\nclass Category\n{\n    public int Id { get; set; }\n    public string Name { get; set; } = "";\n    public string Description { get; set; } = "";\n    public int products_count { get; set; }\n    public DateTime CreatedAt { get; set; }\n    public DateTime UpdatedAt { get; set; }\n}\n\nclass CategoriesResponse\n{\n    public Category[] Data { get; set; } = default!;\n}\n\nprivate List<Category> categories = new List<Category>();\nprivate bool isLoading = true;\n\nprotected override async Task OnInitializedAsync()\n{\n    await onSearch();\n}\n\nprivate async Task onSearch()\n{\n    isLoading = true;\n    var res = await Http.GetFromJsonAsync<CategoriesResponse>("api\/categories");\n    if (res != null)\n        categories = res.Data.ToList();\n    isLoading = false;\n}\n\nprivate void SelectCategory(Category category)\n{\n    System.Diagnostics.Debug.WriteLine($"Selected: {category.Name}");\n    Navigation.NavigateTo($"\/products\/{category.Id}");\n}\n<\/pre><\/div>\n\n\n
\u591a\u5206\u3001Blazor \u3067\u30d0\u30a4\u30d6\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u3057\u3066\u3082\u3053\u308c\u3050\u3089\u3044\u306f\u4e00\u6c17\u306b\u884c\u3051\u308b\u3068\u601d\u3046\u306e\u3067\u3059\u304c\u3001\u30af\u30e9\u30b9\u5316\u3057\u305f\u308a Web API \u306e\u52d5\u304d\u3092\u78ba\u8a8d\u3057\u305f\u308a\u3057\u306a\u304c\u3089\u3084\u308b\u5834\u5408\u306f\u3001\u6700\u521d\u306b Web API \u547c\u3073\u51fa\u3057\u306e C# \u30b3\u30fc\u30c9\u3060\u3051\u4f5c\u3063\u3066\u3001\u5f8c\u304b\u3089 HTML \u90e8\u5206\u3067 AI \u306b\u5316\u7ca7\u3057\u3066\u3082\u3089\u3046\u306e\u304c\u5b89\u5168\u305d\u3046\u3067\u3059\u3002
Category \u3068 CategoriesResponse \u30af\u30e9\u30b9\u306f\u5f8c\u3067 Models \u306e\u307b\u3046\u306b\u653e\u308a\u8fbc\u307f\u307e\u3059\u3002<\/p>\n\n\n\n
\u5546\u54c1\u4e00\u89a7\u3092\u8868\u793a\u3057\u3066\u3001\u30ab\u30fc\u30c8\u306b\u5165\u308c\u308b\u6a5f\u80fd\u306e\u307b\u3046\u306f\u5f8c\u65e5\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5b9f\u306f\u3082\u3046\u3072\u3068\u3064\u6883\u5165\u308c\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u306e\u304c\u300cPHP&Laravel\u3067\u4f5c\u308bWeb API\u958b\u767a\u5165\u9580\u300dhttps:\/\/amzn.asia\/d\/05D3tq44 \u3060\u3063\u305f\u308a\u3057\u307e\u3059\u3002 \u57fa\u672c .NET \u306a\u4eba\u304c\u4f55\u6545\u306b PHP\/La … \u7d9a\u304d\u3092\u8aad\u3080 →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-12218","post","type-post","status-publish","format-standard","hentry","category-dev"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts\/12218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/comments?post=12218"}],"version-history":[{"count":1,"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts\/12218\/revisions"}],"predecessor-version":[{"id":12226,"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/posts\/12218\/revisions\/12226"}],"wp:attachment":[{"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/media?parent=12218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/categories?post=12218"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.moonmile.net\/blog\/wp-json\/wp\/v2\/tags?post=12218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}