{"id":3255,"date":"2025-03-24T08:46:35","date_gmt":"2025-03-23T23:46:35","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=3255"},"modified":"2025-03-24T08:47:05","modified_gmt":"2025-03-23T23:47:05","slug":"laravel%e3%81%a8vue%e3%82%92%e5%ae%8c%e5%85%a8%e9%80%a3%e6%90%ba%ef%bc%81%e5%ae%9f%e8%b7%b5%e3%81%a7%e5%ad%a6%e3%81%b6%e6%9c%80%e6%96%b0%e3%82%bb%e3%83%83%e3%83%88%e3%82%a2%e3%83%83%e3%83%97%e3%81%a8","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=3255","title":{"rendered":"Laravel\u3068Vue\u3092\u5b8c\u5168\u9023\u643a\uff01\u5b9f\u8df5\u3067\u5b66\u3076\u6700\u65b0\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3068\u958b\u767a\u30c6\u30af\u30cb\u30c3\u30af2024"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">Laravel\u3068Vue\u306e\u57fa\u672c\u6982\u5ff5\u3068\u76f8\u6027\u306e\u826f\u3055<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">Laravel\u3068Vue\u304c\u76f8\u6027\u629c\u7fa4\u306a3\u3064\u306e\u7406\u7531<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u9032\u5316\u3057\u305f\u9023\u643a\u6a5f\u80fd\u306e\u5168\u5bb9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">\u74b0\u5883\u69cb\u7bc9\u304b\u3089\u59cb\u3081\u308bLaravel\u00d7Vue\u958b\u767a<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">\u5fc5\u8981\u306a\u958b\u767a\u74b0\u5883\u3068\u30c4\u30fc\u30eb\u306e\u6e96\u5099<\/a>      <\/li>      <li>        <a href=\"#i-5\">Vite\u3092\u4f7f\u7528\u3057\u305f\u6700\u65b0\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-6\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u6ce8\u610f\u70b9<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-7\">\u5b9f\u8df5\u7684\u306aLaravel\u00d7Vue \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-8\">\u8a2d\u8a08\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/a>      <\/li>      <li>        <a href=\"#i-9\">\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u5b9f\u88c5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-10\">\u30bb\u30ad\u30e5\u30a2\u306aAPI\u901a\u4fe1\u306e\u5b9f\u88c5\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-11\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-12\">\u30d3\u30eb\u30c9\u8a2d\u5b9a\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3068\u6700\u9069\u5316<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-13\">\u672c\u756a\u74b0\u5883\u3067\u306e\u30c7\u30d7\u30ed\u30a4\u624b\u9806\u3068\u6ce8\u610f\u70b9<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-14\">\u5b9f\u8df5\u7684\u306a\u958b\u767a\u4e8b\u4f8b\u3068\u5fdc\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-15\">SPA\u958b\u767a\u306b\u304a\u3051\u308b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u8a2d\u8a08<\/a>      <\/li>      <li>        <a href=\"#i-16\">\u8a8d\u8a3c\u6a5f\u80fd\u306e\u5b9f\u88c5\u30d1\u30bf\u30fc\u30f3<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-17\">\u5b9f\u7528\u7684\u306a\u5b9f\u88c5\u4f8b<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">Laravel\u3068Vue\u306e\u57fa\u672c\u6982\u5ff5\u3068\u76f8\u6027\u306e\u826f\u3055<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">Laravel\u3068Vue\u304c\u76f8\u6027\u629c\u7fa4\u306a3\u3064\u306e\u7406\u7531<\/h3>\n\n\n\n<p>Laravel\u3068Vue.js\u306e\u7d44\u307f\u5408\u308f\u305b\u304c\u591a\u304f\u306e\u958b\u767a\u8005\u304b\u3089\u652f\u6301\u3055\u308c\u3066\u3044\u308b\u7406\u7531\u306b\u3064\u3044\u3066\u3001\u6280\u8853\u7684\u306a\u89b3\u70b9\u304b\u3089\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u7d71\u5408\u3055\u308c\u305f\u30a8\u30b3\u30b7\u30b9\u30c6\u30e0<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel Breeze\/Jetstream \u306b\u3088\u308b Vue.js \u306e\u516c\u5f0f\u30b5\u30dd\u30fc\u30c8<\/li>\n\n\n\n<li>Vite \u306b\u3088\u308b\u6700\u65b0\u306e\u30d3\u30eb\u30c9\u74b0\u5883\u306e\u6a19\u6e96\u642d\u8f09<\/li>\n\n\n\n<li>Laravel Mix \u304b\u3089 Vite \u3078\u306e\u79fb\u884c\u306b\u3088\u308b\u958b\u767a\u4f53\u9a13\u306e\u5411\u4e0a<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c7\u30fc\u30bf\u30d5\u30ed\u30fc\u306e\u4e00\u8cab\u6027<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel \u306e Eloquent \u30e2\u30c7\u30eb\u304b\u3089 Vue \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u307e\u3067\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057<\/li>\n\n\n\n<li>API Resources \u306b\u3088\u308b\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u6574\u5f62<\/li>\n\n\n\n<li>Vue.js \u306e \u30ea\u30a2\u30af\u30c6\u30a3\u30d6\u30b7\u30b9\u30c6\u30e0\u3068\u306e\u76f8\u6027\u306e\u826f\u3055<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u3068\u8a8d\u8a3c\u306e\u7d71\u5408<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel Sanctum \u306b\u3088\u308b SPA \u8a8d\u8a3c\u306e\u7c21\u5358\u306a\u5b9f\u88c5<\/li>\n\n\n\n<li>CSRF \u4fdd\u8b77\u306e\u81ea\u52d5\u9023\u643a<\/li>\n\n\n\n<li>API \u30c8\u30fc\u30af\u30f3\u7ba1\u7406\u306e\u52b9\u7387\u5316<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">\u6700\u65b0\u30d0\u30fc\u30b8\u30e7\u30f3\u3067\u9032\u5316\u3057\u305f\u9023\u643a\u6a5f\u80fd\u306e\u5168\u5bb9<\/h3>\n\n\n\n<p>Laravel 10.x \u3068 Vue 3 \u306e\u7d44\u307f\u5408\u308f\u305b\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u9769\u65b0\u7684\u306a\u9023\u643a\u6a5f\u80fd\u304c\u8ffd\u52a0\u3055\u308c\u307e\u3057\u305f\uff1a<\/p>\n\n\n\n<p><strong>1. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u901a\u4fe1\u306e\u5f37\u5316<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Laravel\u5074\u3067\u306e\u30c7\u30fc\u30bf\u53d7\u3051\u6e21\u3057\npublic function index()\n{\n    return inertia('Dashboard', [\n        'stats' =&gt; [\n            'users' =&gt; User::count(),\n            'posts' =&gt; Post::count()\n        ]\n    ]);\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Vue\u5074\u3067\u306e\u53d7\u3051\u53d6\u308a\n&lt;script setup&gt;\nimport { defineProps } from 'vue'\n\nconst props = defineProps({\n    stats: Object\n})\n&lt;\/script&gt;<\/pre>\n\n\n\n<p><strong>2. \u578b\u5b89\u5168\u6027\u306e\u5411\u4e0a<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Laravel IDE Helper \u3068\u306e\u9023\u643a\u306b\u3088\u308b\u578b\u5b9a\u7fa9\u306e\u81ea\u52d5\u751f\u6210<\/li>\n\n\n\n<li>TypeScript \u30b5\u30dd\u30fc\u30c8\u306e\u5f37\u5316<\/li>\n\n\n\n<li>PHPStorm\/VSCode \u3067\u306e\u958b\u767a\u4f53\u9a13\u306e\u5411\u4e0a<\/li>\n<\/ul>\n\n\n\n<p><strong>3. \u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Vite \u306b\u3088\u308b\u9ad8\u901f\u306a\u958b\u767a\u74b0\u5883<\/li>\n\n\n\n<li>\u5fc5\u8981\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u307f\u3092\u30d0\u30f3\u30c9\u30eb<\/li>\n\n\n\n<li>\u81ea\u52d5\u7684\u306a\u30b3\u30fc\u30c9\u5206\u5272\u306e\u5b9f\u88c5<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6a5f\u80fd\u306b\u3088\u308a\u3001\u958b\u767a\u8005\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30e1\u30ea\u30c3\u30c8\u3092\u5f97\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u958b\u767a\u901f\u5ea6\u306e\u5411\u4e0a<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u306e\u4fdd\u5b88\u6027\u306e\u6539\u5584<\/li>\n\n\n\n<li>\u30d0\u30b0\u306e\u65e9\u671f\u767a\u898b<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u6700\u9069\u5316<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">\u74b0\u5883\u69cb\u7bc9\u304b\u3089\u59cb\u3081\u308bLaravel\u00d7Vue\u958b\u767a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">\u5fc5\u8981\u306a\u958b\u767a\u74b0\u5883\u3068\u30c4\u30fc\u30eb\u306e\u6e96\u5099<\/h3>\n\n\n\n<p>\u6700\u65b0\u306eLaravel\u00d7Vue.js\u958b\u767a\u74b0\u5883\u3092\u69cb\u7bc9\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a\u30c4\u30fc\u30eb\u3068\u30d0\u30fc\u30b8\u30e7\u30f3\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>\u5fc5\u9808\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>PHP 8.1\u4ee5\u4e0a<\/li>\n\n\n\n<li>Node.js 16.0\u4ee5\u4e0a<\/li>\n\n\n\n<li>Composer 2.x<\/li>\n\n\n\n<li>Git<\/li>\n<\/ul>\n\n\n\n<p><strong>\u63a8\u5968\u958b\u767a\u30c4\u30fc\u30eb<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>IDE\/\u30a8\u30c7\u30a3\u30bf<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>VSCode + Laravel\u62e1\u5f35\u6a5f\u80fd<\/li>\n\n\n\n<li>PHPStorm\uff08\u6709\u6599\u3060\u304c\u6a5f\u80fd\u304c\u5145\u5b9f\uff09<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u958b\u767a\u74b0\u5883\u7ba1\u7406<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Docker Desktop<\/li>\n\n\n\n<li>Laravel Sail\uff08Docker\u74b0\u5883\u306e\u6a19\u6e96\u63d0\u4f9b\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">Vite\u3092\u4f7f\u7528\u3057\u305f\u6700\u65b0\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u624b\u9806<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Laravel\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u4f5c\u6210<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">composer create-project laravel\/laravel laravel-vue-app\ncd laravel-vue-app<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Laravel Breeze\/Jetstream\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Breeze\u306e\u5834\u5408\ncomposer require laravel\/breeze --dev\nphp artisan breeze:install vue\n\n# \u307e\u305f\u306f Jetstream\u306e\u5834\u5408\ncomposer require laravel\/jetstream\nphp artisan jetstream:install vue<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm install<\/pre>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u306e\u8d77\u52d5<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u30bf\u30fc\u30df\u30ca\u30eb1\nphp artisan serve\n\n# \u30bf\u30fc\u30df\u30ca\u30eb2\nnpm run dev<\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><strong>Vue.js\u306e\u8a2d\u5b9a<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nimport { defineConfig } from 'vite';\nimport laravel from 'laravel-vite-plugin';\nimport vue from '@vitejs\/plugin-vue';\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: 'resources\/js\/app.js',\n            refresh: true,\n        }),\n        vue({\n            template: {\n                transformAssetUrls: {\n                    base: null,\n                    includeAbsolute: false,\n                }\n            }\n        })\n    ],\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-6\">\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u6ce8\u610f\u70b9<\/h3>\n\n\n\n<p><strong>\u3088\u304f\u3042\u308b\u554f\u984c\u3068\u89e3\u6c7a\u65b9\u6cd5<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Node.js\u30d0\u30fc\u30b8\u30e7\u30f3\u306e\u4e92\u63db\u6027\u554f\u984c<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u89e3\u6c7a\u7b56: nvm\uff08Node Version Manager\uff09\u3092\u4f7f\u7528\u3057\u3066\u9069\u5207\u306a\u30d0\u30fc\u30b8\u30e7\u30f3\u3092\u7ba1\u7406<\/li>\n\n\n\n<li>\u63a8\u5968\u30d0\u30fc\u30b8\u30e7\u30f3: Node.js 16.x \u4ee5\u4e0a<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Vite\u306e\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u304c\u6a5f\u80fd\u3057\u306a\u3044<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.env \u30d5\u30a1\u30a4\u30eb\u306e APP_URL \u3068\u30a2\u30bb\u30c3\u30c8URL\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>vite.config.js \u306e\u8a2d\u5b9a\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">   \/\/ vite.config.js\n   export default defineConfig({\n       server: {\n           hmr: {\n               host: 'localhost'\n           }\n       }\n   });<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u8a8d\u8b58\u3055\u308c\u306a\u3044<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>resources\/js\/app.js \u3067\u306e\u6b63\u3057\u3044\u30a4\u30f3\u30dd\u30fc\u30c8\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u540d\u306e\u547d\u540d\u898f\u5247\u306e\u78ba\u8a8d<\/li>\n\n\n\n<li>\u30d5\u30a1\u30a4\u30eb\u62e1\u5f35\u5b50\uff08.vue\uff09\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<p><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u95a2\u9023\u306e\u6ce8\u610f\u70b9<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>.env \u30d5\u30a1\u30a4\u30eb\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>API\u8a8d\u8a3c\u30c8\u30fc\u30af\u30f3\u306e\u5b89\u5168\u306a\u7ba1\u7406<\/li>\n\n\n\n<li>CSRF\u30c8\u30fc\u30af\u30f3\u306e\u9069\u5207\u306a\u51e6\u7406<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-7\">\u5b9f\u8df5\u7684\u306aLaravel\u00d7Vue \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u958b\u767a<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">\u8a2d\u8a08\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/h3>\n\n\n\n<p>Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8a2d\u8a08\u306b\u304a\u3044\u3066\u3001Laravel\u74b0\u5883\u3067\u306e\u52b9\u7387\u7684\u306a\u5b9f\u88c5\u65b9\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u8a2d\u8a08\u306e\u57fa\u672c\u539f\u5247<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u826f\u3044\u4f8b\uff1a\u5358\u4e00\u8cac\u4efb\u306e\u539f\u5247\u306b\u5f93\u3063\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n\/\/ UserProfile.vue\n&lt;script setup&gt;\nimport { ref, onMounted } from 'vue'\nimport UserAvatar from '.\/UserAvatar.vue'\nimport UserStats from '.\/UserStats.vue'\n\nconst props = defineProps({\n    userId: {\n        type: Number,\n        required: true\n    }\n})\n\nconst userData = ref(null)\n\nonMounted(async () =&gt; {\n    userData.value = await fetchUserData(props.userId)\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div v-if=\"userData\"&gt;\n        &lt;UserAvatar :src=\"userData.avatar\" \/&gt;\n        &lt;UserStats :stats=\"userData.stats\" \/&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/pre>\n\n\n\n<p><strong>2. \u72b6\u614b\u7ba1\u7406\u306e\u8a2d\u8a08\u30d1\u30bf\u30fc\u30f3<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5c0f\u898f\u6a21\u30a2\u30d7\u30ea\uff1aComposition API + Provide\/Inject<\/li>\n\n\n\n<li>\u4e2d\u898f\u6a21\u30a2\u30d7\u30ea\uff1aPinia<\/li>\n\n\n\n<li>\u5927\u898f\u6a21\u30a2\u30d7\u30ea\uff1aPinia + Module\u69cb\u6210<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u5b9f\u88c5<\/h3>\n\n\n\n<p>Laravel\u00d7Vue\u3067\u306e\u52b9\u7387\u7684\u306a\u30c7\u30fc\u30bf\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0\u624b\u6cd5\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. Form\u8981\u7d20\u306e\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ UserForm.vue\n&lt;script setup&gt;\nimport { ref } from 'vue'\nimport { useForm } from '@inertiajs\/vue3'\n\nconst form = useForm({\n    name: '',\n    email: '',\n    password: '',\n    password_confirmation: ''\n})\n\nconst submit = () =&gt; {\n    form.post(route('user.store'), {\n        onSuccess: () =&gt; {\n            \/\/ \u6210\u529f\u6642\u306e\u51e6\u7406\n        }\n    })\n}\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;form @submit.prevent=\"submit\"&gt;\n        &lt;input v-model=\"form.name\" type=\"text\"&gt;\n        &lt;span v-if=\"form.errors.name\"&gt;{{ form.errors.name }}&lt;\/span&gt;\n\n        &lt;input v-model=\"form.email\" type=\"email\"&gt;\n        &lt;span v-if=\"form.errors.email\"&gt;{{ form.errors.email }}&lt;\/span&gt;\n\n        &lt;button type=\"submit\" :disabled=\"form.processing\"&gt;\n            \u9001\u4fe1\n        &lt;\/button&gt;\n    &lt;\/form&gt;\n&lt;\/template&gt;<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u30bb\u30ad\u30e5\u30a2\u306aAPI\u901a\u4fe1\u306e\u5b9f\u88c5\u65b9\u6cd5<\/h3>\n\n\n\n<p><strong>1. Sanctum\u3092\u4f7f\u7528\u3057\u305f\u8a8d\u8a3c<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Laravel\u5074\nRoute::middleware('auth:sanctum')-&gt;group(function () {\n    Route::get('\/api\/user', function (Request $request) {\n        return $request-&gt;user();\n    });\n});<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Vue\u5074\n\/\/ api.js\nimport axios from 'axios'\n\nconst api = axios.create({\n    baseURL: '\/api',\n    headers: {\n        'X-Requested-With': 'XMLHttpRequest',\n        'Content-Type': 'application\/json'\n    },\n    withCredentials: true\n})\n\n\/\/ \u30ea\u30af\u30a8\u30b9\u30c8\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\napi.interceptors.request.use(config =&gt; {\n    const token = localStorage.getItem('token')\n    if (token) {\n        config.headers['Authorization'] = `Bearer ${token}`\n    }\n    return config\n})\n\n\/\/ \u30ec\u30b9\u30dd\u30f3\u30b9\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30bf\u30fc\napi.interceptors.response.use(\n    response =&gt; response,\n    error =&gt; {\n        if (error.response.status === 401) {\n            \/\/ \u8a8d\u8a3c\u30a8\u30e9\u30fc\u6642\u306e\u51e6\u7406\n        }\n        return Promise.reject(error)\n    }\n)\n\nexport default api<\/pre>\n\n\n\n<p><strong>2. CSRF\u4fdd\u8b77\u306e\u5b9f\u88c5<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app.js\nimport axios from 'axios'\n\n\/\/ CSRF\u30c8\u30fc\u30af\u30f3\u306e\u8a2d\u5b9a\nconst token = document.head.querySelector('meta[name=\"csrf-token\"]')\nif (token) {\n    axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content\n}<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-11\">\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u3068\u30c7\u30d7\u30ed\u30a4\u30e1\u30f3\u30c8<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u30d3\u30eb\u30c9\u8a2d\u5b9a\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u3068\u6700\u9069\u5316<\/h3>\n\n\n\n<p>Laravel\u00d7Vue\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u6700\u5927\u9650\u306b\u5f15\u304d\u51fa\u3059\u305f\u3081\u306e\u8a2d\u5b9a\u3068\u6700\u9069\u5316\u624b\u6cd5\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. Vite\u30d3\u30eb\u30c9\u8a2d\u5b9a\u306e\u6700\u9069\u5316<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ vite.config.js\nimport { defineConfig } from 'vite'\nimport laravel from 'laravel-vite-plugin'\nimport vue from '@vitejs\/plugin-vue'\nimport compression from 'vite-plugin-compression'\n\nexport default defineConfig({\n    plugins: [\n        laravel({\n            input: 'resources\/js\/app.js',\n            refresh: true,\n        }),\n        vue(),\n        compression({\n            algorithm: 'gzip',\n            ext: '.gz'\n        })\n    ],\n    build: {\n        \/\/ \u30c1\u30e3\u30f3\u30af\u30b5\u30a4\u30ba\u306e\u6700\u9069\u5316\n        chunkSizeWarningLimit: 1000,\n        rollupOptions: {\n            output: {\n                manualChunks: {\n                    vendor: ['vue', 'axios', 'lodash'],\n                    \/\/ \u7279\u5b9a\u306e\u6a5f\u80fd\u3054\u3068\u306b\u30c1\u30e3\u30f3\u30af\u3092\u5206\u5272\n                    authentication: ['.\/resources\/js\/features\/auth'],\n                    dashboard: ['.\/resources\/js\/features\/dashboard']\n                }\n            }\n        },\n        \/\/ \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u751f\u6210\uff08\u672c\u756a\u74b0\u5883\u3067\u306f\u7121\u52b9\u5316\u63a8\u5968\uff09\n        sourcemap: process.env.NODE_ENV === 'development'\n    }\n})<\/pre>\n\n\n\n<p><strong>2. \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u9045\u5ef6\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u5fc5\u8981\u306a\u3068\u304d\u306e\u307f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30ed\u30fc\u30c9\nconst AdminDashboard = defineAsyncComponent(() =&gt;\n    import('.\/components\/AdminDashboard.vue')\n)\n\n\/\/ \u30b9\u30b1\u30eb\u30c8\u30f3\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u306e\u5b9f\u88c5\nconst AsyncComponent = defineAsyncComponent({\n    loader: () =&gt; import('.\/HeavyComponent.vue'),\n    loadingComponent: LoadingSpinner,\n    delay: 200,\n    timeout: 3000\n})<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">\u672c\u756a\u74b0\u5883\u3067\u306e\u30c7\u30d7\u30ed\u30a4\u624b\u9806\u3068\u6ce8\u610f\u70b9<\/h3>\n\n\n\n<p><strong>1. \u30c7\u30d7\u30ed\u30a4\u524d\u306e\u6e96\u5099\u30c1\u30a7\u30c3\u30af\u30ea\u30b9\u30c8<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u74b0\u5883\u8a2d\u5b9a\u306e\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># .env \u306e\u672c\u756a\u74b0\u5883\u7528\u8a2d\u5b9a\nAPP_ENV=production\nAPP_DEBUG=false\nVITE_API_BASE_URL=https:\/\/api.example.com<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u6700\u9069\u5316<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u8a2d\u5b9a\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\nphp artisan config:cache\n\n# \u30eb\u30fc\u30c8\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\nphp artisan route:cache\n\n# \u30d3\u30e5\u30fc\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\nphp artisan view:cache\n\n# Composer\u306e\u6700\u9069\u5316\ncomposer install --optimize-autoloader --no-dev<\/pre>\n\n\n\n<p><strong>2. \u672c\u756a\u30d3\u30eb\u30c9\u3068\u30c7\u30d7\u30ed\u30a4\u624b\u9806<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># \u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\nnpm ci\n\n# \u30d7\u30ed\u30c0\u30af\u30b7\u30e7\u30f3\u30d3\u30eb\u30c9\nnpm run build\n\n# \u30a2\u30bb\u30c3\u30c8\u306e\u78ba\u8a8d\nphp artisan storage:link<\/pre>\n\n\n\n<p><strong>3. \u30c7\u30d7\u30ed\u30a4\u5f8c\u306e\u78ba\u8a8d\u4e8b\u9805<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u30d8\u30c3\u30c0\u30fc\u306e\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/Http\/Middleware\/SecurityHeaders.php\npublic function handle($request, Closure $next)\n{\n    $response = $next($request);\n\n    $response-&gt;headers-&gt;set('X-Frame-Options', 'SAMEORIGIN');\n    $response-&gt;headers-&gt;set('X-XSS-Protection', '1; mode=block');\n    $response-&gt;headers-&gt;set('X-Content-Type-Options', 'nosniff');\n\n    return $response;\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u306e\u8a2d\u5b9a<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u8a08\u6e2c\nwindow.addEventListener('load', () =&gt; {\n    const timing = window.performance.timing;\n    const pageLoadTime = timing.loadEventEnd - timing.navigationStart;\n    console.log(`Page Load Time: ${pageLoadTime}ms`);\n});<\/pre>\n\n\n\n<p><strong>\u91cd\u8981\u306a\u6ce8\u610f\u70b9<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30ad\u30e3\u30c3\u30b7\u30e5\u6226\u7565<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>API\u30ec\u30b9\u30dd\u30f3\u30b9\u306e\u30ad\u30e3\u30c3\u30b7\u30e5\u5236\u5fa1<\/li>\n\n\n\n<li>Redis\u3092\u4f7f\u7528\u3057\u305f\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u30ad\u30e3\u30c3\u30b7\u30e5\u306e\u5b9f\u88c5<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u672c\u756a\u74b0\u5883\u3067\u306e\u9069\u5207\u306a\u30ed\u30b0\u8a2d\u5b9a<\/li>\n\n\n\n<li>Sentry\u7b49\u306e\u5916\u90e8\u30e2\u30cb\u30bf\u30ea\u30f3\u30b0\u30c4\u30fc\u30eb\u306e\u5c0e\u5165<\/li>\n\n\n\n<li>\u30b0\u30ec\u30fc\u30b9\u30d5\u30eb\u30d5\u30a7\u30a4\u30eb\u30d0\u30c3\u30af\u306e\u5b9f\u88c5<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30bb\u30ad\u30e5\u30ea\u30c6\u30a3\u5bfe\u7b56<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5168\u3066\u306eAPI\u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\u306e\u8a8d\u8a3c\u78ba\u8a8d<\/li>\n\n\n\n<li>\u74b0\u5883\u5909\u6570\u306e\u9069\u5207\u306a\u8a2d\u5b9a<\/li>\n\n\n\n<li>SSL\u306e\u8a2d\u5b9a\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-14\">\u5b9f\u8df5\u7684\u306a\u958b\u767a\u4e8b\u4f8b\u3068\u5fdc\u7528\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">SPA\u958b\u767a\u306b\u304a\u3051\u308b\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u8a2d\u8a08<\/h3>\n\n\n\n<p>Laravel\u00d7Vue\u3067\u306e\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\uff08SPA\uff09\u958b\u767a\u306b\u304a\u3051\u308b\u52b9\u679c\u7684\u306a\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u8a2d\u8a08\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. Vue Router\u306e\u57fa\u672c\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ router\/index.js\nimport { createRouter, createWebHistory } from 'vue-router'\nimport { useAuthStore } from '@\/stores\/auth'\n\nconst router = createRouter({\n    history: createWebHistory(),\n    routes: [\n        {\n            path: '\/dashboard',\n            component: () =&gt; import('@\/views\/Dashboard.vue'),\n            meta: { requiresAuth: true },\n            children: [\n                {\n                    path: 'profile',\n                    component: () =&gt; import('@\/views\/Profile.vue')\n                }\n            ]\n        }\n    ]\n})\n\n\/\/ \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u30ac\u30fc\u30c9\nrouter.beforeEach(async (to, from) =&gt; {\n    const auth = useAuthStore()\n\n    if (to.meta.requiresAuth &amp;&amp; !auth.isAuthenticated) {\n        return { path: '\/login', query: { redirect: to.fullPath } }\n    }\n})<\/pre>\n\n\n\n<p><strong>2. Laravel\u5074\u306e\u30eb\u30fc\u30c8\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ routes\/web.php\nRoute::get('\/{any}', function () {\n    return view('app');\n})-&gt;where('any', '.*');\n\n\/\/ routes\/api.php\nRoute::middleware(['auth:sanctum'])-&gt;group(function () {\n    Route::get('\/user\/profile', [ProfileController::class, 'show']);\n    Route::put('\/user\/profile', [ProfileController::class, 'update']);\n});<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u8a8d\u8a3c\u6a5f\u80fd\u306e\u5b9f\u88c5\u30d1\u30bf\u30fc\u30f3<\/h3>\n\n\n\n<p><strong>1. Sanctum\u3092\u4f7f\u7528\u3057\u305f\u8a8d\u8a3c\u30b7\u30b9\u30c6\u30e0<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ AuthController.php\npublic function login(Request $request)\n{\n    $credentials = $request-&gt;validate([\n        'email' =&gt; ['required', 'email'],\n        'password' =&gt; ['required'],\n    ]);\n\n    if (Auth::attempt($credentials)) {\n        $token = $request-&gt;user()-&gt;createToken('auth-token');\n        return response()-&gt;json([\n            'token' =&gt; $token-&gt;plainTextToken,\n            'user' =&gt; $request-&gt;user()\n        ]);\n    }\n\n    return response()-&gt;json([\n        'message' =&gt; '\u8a8d\u8a3c\u306b\u5931\u6557\u3057\u307e\u3057\u305f'\n    ], 401);\n}<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ stores\/auth.js\nimport { defineStore } from 'pinia'\nimport axios from 'axios'\n\nexport const useAuthStore = defineStore('auth', {\n    state: () =&gt; ({\n        user: null,\n        token: null\n    }),\n\n    actions: {\n        async login(credentials) {\n            try {\n                const { data } = await axios.post('\/api\/login', credentials)\n                this.user = data.user\n                this.token = data.token\n                \/\/ \u30c8\u30fc\u30af\u30f3\u306e\u4fdd\u5b58\n                localStorage.setItem('token', data.token)\n            } catch (error) {\n                throw new Error('\u30ed\u30b0\u30a4\u30f3\u306b\u5931\u6557\u3057\u307e\u3057\u305f')\n            }\n        }\n    }\n})<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-17\">\u5b9f\u7528\u7684\u306a\u5b9f\u88c5\u4f8b<\/h3>\n\n\n\n<p><strong>1. \u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u691c\u7d22\u6a5f\u80fd\u306e\u5b9f\u88c5<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- SearchComponent.vue --&gt;\n&lt;script setup&gt;\nimport { ref, watch } from 'vue'\nimport { useDebounceFn } from '@vueuse\/core'\n\nconst searchQuery = ref('')\nconst searchResults = ref([])\nconst isLoading = ref(false)\n\nconst search = useDebounceFn(async (query) =&gt; {\n    if (!query) {\n        searchResults.value = []\n        return\n    }\n\n    isLoading.value = true\n    try {\n        const { data } = await axios.get(`\/api\/search?q=${query}`)\n        searchResults.value = data\n    } catch (error) {\n        console.error('\u691c\u7d22\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error)\n    } finally {\n        isLoading.value = false\n    }\n}, 300)\n\nwatch(searchQuery, (newQuery) =&gt; {\n    search(newQuery)\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        &lt;input\n            v-model=\"searchQuery\"\n            type=\"text\"\n            placeholder=\"\u691c\u7d22...\"\n            class=\"form-input\"\n        &gt;\n\n        &lt;div v-if=\"isLoading\"&gt;\u691c\u7d22\u4e2d...&lt;\/div&gt;\n\n        &lt;ul v-else-if=\"searchResults.length\"&gt;\n            &lt;li v-for=\"result in searchResults\" :key=\"result.id\"&gt;\n                {{ result.title }}\n            &lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/pre>\n\n\n\n<p><strong>2. \u7121\u9650\u30b9\u30af\u30ed\u30fc\u30eb\u306e\u5b9f\u88c5<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!-- InfiniteScroll.vue --&gt;\n&lt;script setup&gt;\nimport { ref, onMounted } from 'vue'\nimport { useIntersectionObserver } from '@vueuse\/core'\n\nconst items = ref([])\nconst page = ref(1)\nconst loading = ref(false)\nconst hasMore = ref(true)\nconst target = ref(null)\n\nconst loadMore = async () =&gt; {\n    if (loading.value || !hasMore.value) return\n\n    loading.value = true\n    try {\n        const { data } = await axios.get(`\/api\/items?page=${page.value}`)\n        items.value.push(...data.items)\n        hasMore.value = data.hasMore\n        page.value++\n    } catch (error) {\n        console.error('\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u306b\u5931\u6557\u3057\u307e\u3057\u305f:', error)\n    } finally {\n        loading.value = false\n    }\n}\n\nuseIntersectionObserver(target, ([{ isIntersecting }]) =&gt; {\n    if (isIntersecting) {\n        loadMore()\n    }\n})\n&lt;\/script&gt;\n\n&lt;template&gt;\n    &lt;div&gt;\n        &lt;div v-for=\"item in items\" :key=\"item.id\"&gt;\n            {{ item.title }}\n        &lt;\/div&gt;\n\n        &lt;div ref=\"target\" v-if=\"hasMore\"&gt;\n            &lt;span v-if=\"loading\"&gt;\u8aad\u307f\u8fbc\u307f\u4e2d...&lt;\/span&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u5b9f\u88c5\u4f8b\u306f\u3001\u5b9f\u969b\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u3059\u3050\u306b\u6d3b\u7528\u3067\u304d\u308b\u5b9f\u8df5\u7684\u306a\u30b3\u30fc\u30c9\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u9069\u5207\u306a\u30a8\u30e9\u30fc\u30cf\u30f3\u30c9\u30ea\u30f3\u30b0\u3068\u30ed\u30fc\u30c7\u30a3\u30f3\u30b0\u72b6\u614b\u306e\u7ba1\u7406\u304c\u5b9f\u88c5\u3055\u308c\u3066\u304a\u308a\u3001\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u3092\u8003\u616e\u3057\u305f\u8a2d\u8a08\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33,12],"tags":[],"class_list":{"0":"post-3255","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-php-laravel","7":"category-php","8":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3255"}],"version-history":[{"count":2,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3255\/revisions"}],"predecessor-version":[{"id":3257,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/3255\/revisions\/3257"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}