SPA\u304c\u6ce8\u76ee\u3055\u308c\u308b\u7406\u7531<\/h2>\n
Inertia\u3092\u4f7f\u7528\u3059\u308b\u3079\u304d\u7406\u7531\u3092\u8003\u3048\u308b\u524d\u306b\u3001\u307e\u305a\u306fSPA\u306e\u4eba\u6c17\u306e\u79d8\u5bc6\u306b\u3064\u3044\u3066\u89e6\u308c\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n
\u5f93\u6765\u306e\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3088\u308a\u3082\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u304c\u597d\u307e\u308c\u308b\u306e\u306f\u306a\u305c\u3067\u3057\u3087\u3046\u304b\u3002\u305d\u3057\u3066\u3001Laravel\u306e\u30d5\u30eb\u30b9\u30bf\u30c3\u30af\u958b\u767a\u8005\u304c\u3001Blade\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/a>\u306b\u5225\u308c\u3092\u544a\u3052\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u7406\u7531\u3068\u306f\u3002<\/p>\n \u7c21\u5358\u306b\u8a00\u3048\u3070\u30e6\u30fc\u30b6\u30fc\u3068\u306e\u95a2\u4fc2\u6027\u3092\u6df1\u3081\u308b\u305f\u3081\u306b\u306f\u3001\u30b9\u30d4\u30fc\u30c9\u3068\u5fdc\u7b54\u6027\u304c\u91cd\u8981\u3060\u304b\u3089\u3067\u3059\u3002<\/p>\n MPA\u306e\u5834\u5408\u3001\u30d6\u30e9\u30a6\u30b6\u306f\u5e38\u306b\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306f\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u5bfe\u3057\u3066\u591a\u6570\u306e\u30af\u30a8\u30ea\u3092\u5b9f\u884c\u3057\u307e\u3059\u3002\u30af\u30a8\u30ea\u306f\u30c6\u30fc\u30bf\u30d9\u30fc\u30b9\u3068\u30b5\u30fc\u30d0\u30fc\u306b\u51e6\u7406\u3055\u308c\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u9001\u4fe1\u3055\u308c\u305f\u5f8c\u3001\u30da\u30fc\u30b8\u304c\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3055\u308c\u307e\u3059\u3002<\/p>\n \u3068\u3053\u308d\u304cSPA\u3067\u306f\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306f\u3059\u3079\u3066\u306e\u30c7\u30fc\u30bf\u3092\u76f4\u63a5\u30da\u30fc\u30b8\u306b\u8aad\u307f\u8fbc\u3080\u305f\u3081\u3001\u30d6\u30e9\u30a6\u30b6\u306f\u30af\u30a8\u30ea\u3092\u9001\u4fe1\u3059\u308b\u5fc5\u8981\u306f\u306a\u304f\u3001\u307e\u305f\u65b0\u305f\u306aHTML\u8981\u7d20\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306b\u30da\u30fc\u30b8\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u5fc5\u8981\u3082\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n \u3053\u306e\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u3092\u683c\u6bb5\u306b\u5411\u4e0a\u3055\u305b\u308b\u5229\u4fbf\u6027\u3092\u7406\u7531\u306b\u3001\u591a\u304f\u306e\u5927\u4f01\u696d\u304c\u81ea\u793e\u30b5\u30a4\u30c8\u306e\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5316\u3092\u63a8\u9032\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n \u3057\u304b\u3057\u3001Laravel\u958b\u767a\u8005\u306b\u3068\u3063\u3066\u3001\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u4f5c\u6210\u306f\u975e\u5e38\u306b\u8907\u96d1\u306b\u306a\u308a\u307e\u3059\u3002\u3068\u8a00\u3046\u306e\u3082\u3001Blade\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u4ee3\u308f\u308a\u306bVue.js\u3084React\u3092\u4f7f\u308f\u306a\u3051\u308c\u3070\u306a\u3089\u305a\u3001\u6642\u9593\u3068\u52b4\u529b\u3092\u524a\u6e1b\u3067\u304d\u308b\u591a\u304f\u306eLaravel\u30a2\u30bb\u30c3\u30c8\u3092\u624b\u653e\u3055\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u305f\u3081\u3067\u3059\u3002<\/p>\n \u305d\u3093\u306a\u72b6\u6cc1\u3092\u6253\u7834\u3059\u308b\u305f\u3081\u306b\u767b\u5834\u3057\u305f\u306e\u304c\u3001Inertia.js\u3067\u3059\u3002<\/p>\n Inertia\u304c\u30ea\u30ea\u30fc\u30b9\u3055\u308c\u308b\u307e\u3067\u306f\u3001Laravel\u958b\u767a\u8005\u304cVue\u3067\u30a6\u30a7\u30d6SPA\u3092\u958b\u767a\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u3001Laravel\u3067API\u3092\u8a2d\u5b9a\u3057\u3066JSON\u30c7\u30fc\u30bf\u3092\u8fd4\u3057\u3001AXIOS\u306e\u3088\u3046\u306a\u3082\u306e\u3092\u4f7f\u7528\u3057\u3066\u3001Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u3055\u3089\u306b\u3001\u30eb\u30fc\u30c8\u306e\u7ba1\u7406\u306b\u306fVue Router\u306a\u3069\u304c\u5fc5\u8981\u306b\u306a\u308a\u3001Laravel\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u306f\u3001\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3084\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u540c\u69d8\u3001\u7121\u7528\u306e\u9577\u7269\u3068\u306a\u3063\u3066\u3044\u307e\u3057\u305f\u3002<\/p>\n \u3068\u3053\u308d\u304c\u3001Inertia.js\u3067\u306f\u3001\u5f93\u6765\u306e\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3068\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3092\u4f7f\u7528\u3057\u3066\u3001\u30e2\u30c0\u30f3\u306a\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8Vue\u3001React\u3001Svelte<\/a>\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Inertia\u306fLaravel\u3001Ruby on Rails\u3001Django\u958b\u767a\u8005\u5411\u3051\u306b\u8a2d\u8a08\u3055\u308c\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u306e\u4f5c\u6210\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306e\u30c7\u30fc\u30bf\u53d6\u5f97\u3001\u30d3\u30e5\u30fc\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306a\u3069\u3001\u30a2\u30d7\u30ea\u306e\u69cb\u7bc9\u306b\u5f93\u6765\u306e\u30b3\u30fc\u30c7\u30a3\u30f3\u30b0\u6280\u8853\u3092\u305d\u306e\u307e\u307e\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n Inertia.js\u3092\u4f7f\u3048\u3070\u3001Laravel\u958b\u767a\u8005\u306f\u3053\u308c\u307e\u3067\u901a\u308a\u4f5c\u696d\u304c\u884c\u3048\u307e\u3059\u3002<\/p>\n Laravel\u3068Vue\u3060\u3051\u3067SPA\u3092\u69cb\u7bc9\u3059\u308b\u3068\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306fJavaScript\u306e\u307f\u3092\u4f7f\u7528\u3057\u305f\u30da\u30fc\u30b8\u3068\u306a\u308a\u3001\u3053\u308c\u3060\u3051\u3067\u306f\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u306e\u64cd\u4f5c\u6027\u306f\u5f97\u3089\u308c\u307e\u305b\u3093\u3002\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u305f\u3073\u306b\u3001\u30da\u30fc\u30b8\u306e\u8aad\u307f\u8fbc\u307f\u306b\u3088\u3063\u3066\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u304c\u518d\u8d77\u52d5\u3059\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n \u305d\u3053\u3067\u3001Inertia\u306e\u51fa\u756a\u3067\u3059\u3002<\/p>\n Inertia\u306f\u3001\u57fa\u672c\u7684\u306b\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u3059\u3002\u30da\u30fc\u30b8\u5168\u4f53\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u30da\u30fc\u30b8\u3092\u79fb\u52d5\u3067\u304d\u307e\u3059\u3002\u79fb\u52d5\u306f\u6a19\u6e96\u7684\u306a\u30a2\u30f3\u30ab\u30fc\u30bf\u30b0\u306e\u8efd\u91cf\u30e9\u30c3\u30d1\u30fc\u3001 Inertia\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001Inertia\u304c\u305d\u306e\u30af\u30ea\u30c3\u30af\u3092\u906e\u65ad\u3057\u3001XHR\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3057\u307e\u3059\u3002\u3053\u308c\u306b\u3088\u3063\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u3067\u30da\u30fc\u30b8\u304c\u518d\u8aad\u307f\u8fbc\u307f\u3055\u308c\u308b\u3053\u3068\u304c\u306a\u304f\u306a\u308a\u3001\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u3068\u3057\u3066\u306e\u6319\u52d5\u304c\u78ba\u4fdd\u3067\u304d\u307e\u3059\u3002<\/p>\n \u4f8b\u3068\u3057\u3066\u3001\u30d6\u30ed\u30b0\u30a2\u30d7\u30ea\u300cKinsta Blog<\/strong>\u300d\u3092\u69cb\u7bc9\u3057\u306a\u304c\u3089\u3001Inertia\u3068Laravel\u3068\u306e\u7d71\u5408\u65b9\u6cd5\u3092\u3054\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002\u3053\u306e\u4f8b\u3067\u306f\u3001\u30d0\u30c3\u30af\u30a8\u30f3\u30c9\u306bLaravel\u3001JavaScript\u306e\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306bVue.js\u3001\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u306bTailwind CSS\u3068\u3044\u3046\u7d44\u307f\u5408\u308f\u305b\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n DevKinsta<\/a>\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u3053\u308c\u304b\u3089\u3054\u7d39\u4ecb\u3059\u308b\u624b\u9806\u3092\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3067\u5b9f\u969b\u306b\u8a66\u3059\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002DevKinsta\u306f\u3001\u958b\u767a\u8005\u3001\u30c7\u30b6\u30a4\u30ca\u30fc\u3001\u4ee3\u884c\u696d\u8005\u5411\u3051\u306e\u9ad8\u6a5f\u80fd\u30c4\u30fc\u30eb\u3067\u3001\u30b7\u30f3\u30b0\u30eb\u30da\u30fc\u30b8\u304a\u3088\u3073\u30de\u30eb\u30c1\u30da\u30fc\u30b8\u306eWordPress\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u3092\u69cb\u7bc9\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002WordPress\u306f\u3001Corcel<\/a>\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u3063\u3066Laravel\u3068\u7c21\u5358\u306b\u7d71\u5408\u53ef\u80fd\u3067\u3059\u3002<\/p>\n \u3053\u308c\u304b\u3089\u3054\u7d39\u4ecb\u3059\u308b\u64cd\u4f5c\u306b\u306f\u3001\u4ee5\u4e0b\u306e\u77e5\u8b58\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n \u4e0d\u5b89\u304c\u6b8b\u308b\u65b9\u306f\u3001Laravel\u306e\u5b66\u7fd2\u30b3\u30f3\u30c6\u30f3\u30c4\uff08\u6709\u6599\u30fb\u7121\u6599\uff09<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n \u4eca\u56de\u306f\u3042\u304f\u307e\u3067Inertia.js\u306e\u4f7f\u7528\u65b9\u6cd5\u304c\u4e3b\u984c\u306b\u306a\u308b\u305f\u3081\u3001\u4ee5\u4e0b\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u306f\u5b8c\u4e86\u3057\u3066\u3044\u308b\u3082\u306e\u3068\u3057\u3066\u9032\u3081\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n \/resources\/views\/show.blade.php<\/strong>:<\/p>\n database\/migrations\/create_articles_table.php<\/strong><\/p>\n database\/factories\/ArticleFactory.php<\/strong><\/p>\n \u4ee5\u4e0a\u3092\u7528\u610f\u3057\u305f\u3089\u3001\u65e9\u901fInertia.js\u3092\u5c0e\u5165\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n Inertia\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u4f5c\u696d\u306f\u3001\u5927\u304d\u304f\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\uff08Laravel\uff09\u3068\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\uff08VueJs\uff09\u306e2\u6bb5\u968e\u306b\u5206\u304b\u308c\u307e\u3059\u3002<\/p>\n Laravel9\u3067\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067Vite\u3092\u4f7f\u7528<\/a>\u3059\u308b\u305f\u3081\u3001Inertia\u306e\u516c\u5f0f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u306f\u5c11\u3057\u53e4\u3044\u3082\u306e\u3067\u3059\u304c\u3001\u4f75\u305b\u3066\u3054\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n \u307e\u305a\u6700\u521d\u306bInertia\u306e\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u30a2\u30c0\u30d7\u30bf\u30fc\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002\u30bf\u30fc\u30df\u30ca\u30eb\u3067\u4ee5\u4e0b\u306eComposer\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \u6b21\u306b\u30eb\u30fc\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u3057\u307e\u3059\u3002\u30eb\u30fc\u30c8\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306f\u3001CSS\u3068JS\u30d5\u30a1\u30a4\u30eb\u306e\u30ed\u30fc\u30c9\u306b\u4f7f\u7528\u3055\u308c\u308b\u5358\u4e00\u306eBrade\u30d5\u30a1\u30a4\u30eb\u3067\u3059\u3002\u307e\u305fJavaScript\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u8d77\u52d5\u306b\u4f7f\u7528\u3055\u308c\u308bInertia\u30eb\u30fc\u30c8\u306b\u3082\u306a\u308a\u307e\u3059\u3002<\/p>\n \u4eca\u56de\u306f\u3001\u57f7\u7b46\u6642\u70b9\u3067\u6700\u65b0\u7248\u306eLaravel 9 v9.3.1\u3092\u4f7f\u7528\u3059\u308b\u305f\u3081\u3001Vite\u3092\u6709\u52b9\u5316\u3057\u307e\u3059\u3002\/resources\/views\/app.blade.php<\/strong>\u306e\u30bf\u30b0\u5185\u306bVite\u3092\u8a18\u8ff0\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \u307e\u305f<head>\u306b\u3001 \u6b21\u306bHandleInertiaRequests<\/strong>\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u4f5c\u6210\u3057\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u516c\u958b\u3057\u307e\u3059\u3002\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30eb\u30fc\u30c8\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3067\u3001\u4ee5\u4e0b\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n \u5b8c\u4e86\u3057\u305f\u3089\u3001app\/Http\/Kernel.php<\/strong>\u3092\u958b\u304d\u3001\u30a6\u30a7\u30d6\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u306e\u6700\u5f8c\u306e\u9805\u76ee\u3068\u3057\u3066 \u6b21\u306b\u3001\u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9\u3068\u540c\u3058\u3088\u3046\u306b\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306eVue.js 3\u306e\u4f9d\u5b58\u95a2\u4fc2\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n \u7d9a\u3044\u3066Vue.js 3\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n \u30e1\u30a4\u30f3\u306eJavaScript\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3057\u3001Vue.js 3\u3001Vite\u3001Laravel\u3067Inertia.js\u3092\u521d\u671f\u5316\u3057\u307e\u3059\u3002<\/p>\n resources\/js\/app.js<\/strong><\/p>\n \u4e0a\u306e\u30b3\u30fc\u30c9\u3067\u306f\u3001Laravel\u306e\u30d7\u30e9\u30b0\u30a4\u30f3 \u3042\u3068\u306f\u3001 \u305d\u3057\u3066\u3001vite.config.js<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n \u6700\u5f8c\u306e\u30b9\u30c6\u30c3\u30d7\u306f\u3001\u4f9d\u5b58\u95a2\u4fc2\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u30d5\u30a1\u30a4\u30eb\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3067\u3059\u3002<\/p>\n \u3053\u308c\u3067\u3001Vue.js 3\u3068Vite\u3092\u4f7f\u7528\u3057\u305fLaravel 9\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u5b8c\u6210\u3057\u307e\u3057\u305f\u3002\u6b21\u306f\u52d5\u4f5c\u3092\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n \u30b9\u30c6\u30c3\u30d71\u306e\u5192\u982d\u3067\u3001\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u3068\u8a18\u4e8b\u3092\u8868\u793a\u3059\u308b2\u3064\u306eBlade\u30d5\u30a1\u30a4\u30eb\uff08index<\/strong>\u3068show<\/strong>\uff09\u306b\u3064\u3044\u3066\u89e6\u308c\u307e\u3057\u305f\u3002<\/p>\n Inertia\u306e\u4f7f\u7528\u4e2d\u306b\u5fc5\u8981\u306aBlade\u30d5\u30a1\u30a4\u30eb\u306fapp.blade.php<\/strong>\u3060\u3051\u3067\u3059\u304c\u3001\u3059\u3067\u306b\u4e00\u5ea6Inertia\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u6642\u306b\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002\u3067\u306f\u3053\u306e2\u3064\u306eBlade\u30d5\u30a1\u30a4\u30eb\u306f\u3069\u3046\u306a\u308b\u306e\u304b\u3068\u7591\u554f\u3092\u62b1\u3044\u3066\u3044\u308b\u65b9\u3082\u3044\u308b\u306f\u305a\u3067\u3059\u3002<\/p>\n \u3053\u306e2\u3064\u306eBlade\u30d5\u30a1\u30a4\u30eb\u306f\u3001blade\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089Inertia.js\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5909\u63db\u3057\u307e\u3059\u3002<\/p>\n Inertia\u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u5404\u30da\u30fc\u30b8\u306b\u306f\u3001\u81ea\u8eab\u306e\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u3068JavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u3042\u308a\u3001API\u3092\u4f7f\u7528\u305b\u305a\u306b\u3001\u30da\u30fc\u30b8\u306b\u5fc5\u8981\u306a\u30c7\u30fc\u30bf\u306e\u307f\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002Inertia\u30da\u30fc\u30b8\u306fJavaScript\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3001\u3053\u306e\u4f8b\u3067\u306fVue.js\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3067\u3059\u3002\u7279\u5225\u306a\u70b9\u306f\u7279\u306b\u306a\u3044\u305f\u3081\u3001HTML\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u3059\u3079\u3066 \u300cPages\u300d\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u3066\u30d5\u30a1\u30a4\u30eb\u3092\u79fb\u52d5\u3001\u3064\u307e\u308a.\/resources\/js\/Pages<\/strong>\u5185\u306b\u3001index.blade.php<\/strong>\u3068show.blade.php<\/strong>\u3092\u79fb\u52d5\u3057\u307e\u3059\u3002\u6b21\u306b\u30d5\u30a1\u30a4\u30eb\u62e1\u5f35\u5b50\u3092\u300c.blade.php\u300d\u304b\u3089\u300c.vue\u300d\u306b\u5909\u66f4\u3057\u3001\u540d\u524d\u306e\u6700\u521d\u306e\u6587\u5b57\u3092\u5927\u6587\u5b57\u306b\u3057\u3066\u3001\u4e2d\u8eab\u3092\u6a19\u6e96\u306eVue.js\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u5909\u63db\u3057\u307e\u3059\u3002 resources\/js\/Pages\/Index.vue<\/strong><\/p>\n resources\/js\/Pages\/Show.vue<\/strong><\/p>\n \u5404\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u30d8\u30c3\u30c0\u30fc\u3068\u30d5\u30c3\u30bf\u30fc\u3092\u30b3\u30d4\u30fc\uff06\u30da\u30fc\u30b9\u30c8\u3059\u308b\u306e\u306f\u3001\u3042\u307e\u308a\u52b9\u7387\u7684\u3068\u306f\u8a00\u3048\u307e\u305b\u3093\u3002\u305d\u3053\u3067\u3001\u6c38\u7d9a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4fdd\u5b58\u3059\u308bInertia\u306e\u57fa\u672c\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u300cLayouts\u300d\u30d5\u30a9\u30eb\u30c0\u3092\/resources\/js<\/strong>\u4e0b\u306b\u4f5c\u6210\u3057\u3001\u305d\u306e\u4e2d\u306b\u300cKinstaLayout.vue\u300d\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u3053\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3067\u30e9\u30c3\u30d7\u3055\u308c\u305f\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u4e2d\u306b\u57cb\u3081\u8fbc\u307e\u308c\u308b\u3088\u3046\u3001\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u306b\u306f\u3001\u30d8\u30c3\u30c0\u30fc\u3068\u30d5\u30c3\u30bf\u30fc\u3001 resources\/js\/Layouts\/KinstaLayout.vue<\/strong><\/p>\n \u6b21\u306b\u3053\u306e\u30ec\u30a4\u30a2\u30a6\u30c8\u3092\u30da\u30fc\u30b8\u306b\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3001\u3059\u3079\u3066\u306eHTML\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u30e9\u30c3\u30d7\u3057\u307e\u3059\u3002\u3053\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306f\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n Index.vue<\/strong><\/p>\n Show.vue<\/strong><\/p>\n \u30b9\u30c6\u30c3\u30d71\u3067\u6319\u3052\u305fArticleFactory<\/strong>\u30d5\u30a1\u30a4\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u3044\u304f\u3064\u304b\u306e\u8a18\u4e8b\u3092\u30b7\u30fc\u30c7\u30a3\u30f3\u30b0\u3057\u307e\u3059\u3002<\/p>\n database\/seeders\/databaseSeeder.php<\/strong><\/p>\n \u4ee5\u4e0b\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3001\u30c6\u30fc\u30d6\u30eb\u3092\u30de\u30a4\u30b0\u30ec\u30fc\u30b7\u30e7\u30f3\u3057\u3001\u30d5\u30a1\u30af\u30c8\u30ea\u304b\u3089\u30c0\u30df\u30fc\u30c7\u30fc\u30bf\u3092\u30b7\u30fc\u30c7\u30a3\u30f3\u30b0\u3057\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3067\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b10\u4ef6\u306e\u30c0\u30df\u30fc\u8a18\u4e8b\u304c\u4f5c\u6210\u3055\u308c\u307e\u3057\u305f\u3002Laravel\u306e\u30eb\u30fc\u30c6\u30a3\u30f3\u30b0\u3092\u4f7f\u7528\u3057\u3066\u3001\u3053\u308c\u3092\u30d3\u30e5\u30fc\u306b\u6e21\u3057\u307e\u3059\u3002Inertia\u3067\u30d3\u30e5\u30fc\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u3044\u308b\u305f\u3081\u3001\u3053\u308c\u307e\u3067\u306e\u30eb\u30fc\u30c8\u306e\u66f8\u304d\u65b9\u3068\u5c11\u3057\u5909\u308f\u308a\u307e\u3059\u3002\u300croutes\/web.php<\/strong>\u300d\u306b\u6700\u521d\u306eLaravel Inertia\u30eb\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u3001\u300c\/resources\/js\/Pages\/Index.vue<\/strong>\u300d\u304b\u3089\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u30d3\u30e5\u30fc\u3092\u8fd4\u3057\u307e\u3059\u3002<\/p>\n routes\/web.php<\/strong><\/p>\n Index\u30d5\u30a1\u30a4\u30eb\u3067\u306f\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u3092prop\u3068\u3057\u3066\u8a2d\u5b9a\u3057\u3001 resources\/js\/Pages\/Index.vue<\/strong><\/p>\n \u306a\u304a\u3001\u4eca\u56de\u306fVue.js 3\u306eComposition API\u306e \u4ee5\u4e0b\u3001\u30eb\u30fc\u30d7\u3092\u4f5c\u308a\u307e\u3059\u3002<\/p>\n Google Chrome\u306eVue DevTools<\/a>\u62e1\u5f35\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c7\u30d0\u30c3\u30b0\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u30c7\u30fc\u30bf\u304c\u3069\u306e\u3088\u3046\u306b\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3055\u308c\u308b\u304b\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n \u300carticles\u300d\u306f\u3001\u8a18\u4e8b\u306e\u914d\u5217\u3092\u542b\u3080prop\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3068\u3057\u3066\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3055\u308c\u307e\u3059\u3002\u914d\u5217\u5185\u306e\u5404\u8a18\u4e8b\u3082\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3067\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u304b\u3089\u53d6\u5f97\u3057\u305f\u30c7\u30fc\u30bf\u306b\u5bfe\u5fdc\u3059\u308b\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6301\u3061\u307e\u3059\u3002\u3064\u307e\u308a\u3001Laravel\u304b\u3089Inertia\u306b\u8ee2\u9001\u3055\u308c\u308b\u30c7\u30fc\u30bf\u306f\u3001\u3059\u3079\u3066prop\u3068\u3057\u3066\u6271\u308f\u308c\u307e\u3059\u3002<\/p>\n Tailwind\u306f\u3059\u3067\u306b\u958b\u59cb\u6642\u70b9\u3067\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001Inertia\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u6307\u793a\u3059\u308b\u3060\u3051\u3067OK\u3067\u3059\u3002tailwind.config.js<\/strong>\u3092\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u7de8\u96c6\u3057\u307e\u3059\u3002<\/p>\n \u300cresources\/js\/app.js<\/strong>\u300d\u5185\u3067CSS\u30d5\u30a1\u30a4\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305f\u3053\u3068\u3092\u78ba\u8a8d\u3057\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u30b9\u30bf\u30a4\u30ea\u30f3\u30b0\u3059\u308b\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n resources\/js\/Pages\/Index.vue<\/strong><\/p>\n resources\/js\/Layouts\/KinstaLayout.vue<\/strong><\/p>\n \u30d6\u30e9\u30a6\u30b6\u3092\u898b\u308b\u3068\u3001Vite\u304c\u3059\u3067\u306bTailwind\u3067\u30da\u30fc\u30b8\u3092\u66f4\u65b0\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n \u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u5185\u306e\u3059\u3079\u3066\u306e\u8a18\u4e8b\u3092\u8868\u793a\u3059\u308b\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u304c\u3067\u304d\u305f\u3089\u3001\u6b21\u306b\u500b\u3005\u306e\u8a18\u4e8b\u3092\u8868\u793a\u3059\u308b\u5225\u306e\u30eb\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u65b0\u305f\u306b\u30eb\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u3001URL\u306b\u300cid\u300d\u30ef\u30a4\u30eb\u30c9\u30ab\u30fc\u30c9\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n routes\/web.php<\/strong><\/p>\n \u300cArticle\u300d\u30e2\u30c7\u30eb\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001Inertia\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8Show.vue<\/strong>\u3092\u8fd4\u3059\u65b0\u3057\u3044\u30eb\u30fc\u30c8\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002\u307e\u305f\u3001Laravel\u306e\u30eb\u30fc\u30c8\u30e2\u30c7\u30eb\u30d0\u30a4\u30f3\u30c7\u30a3\u30f3\u30b0<\/a>\u306b\u3088\u308a\u3001Laravel\u304c\u81ea\u52d5\u7684\u306b\u53c2\u7167\u8a18\u4e8b\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n \u3042\u3068\u306f\u30c8\u30c3\u30d7\u30da\u30fc\u30b8\u306e\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u969b\u3001\u30da\u30fc\u30b8\u5168\u4f53\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u3053\u306e\u30eb\u30fc\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u65b9\u6cd5\u304c\u5fc5\u8981\u3067\u3059\u3002\u3053\u308c\u306f\u3001Inertia\u306e\u512a\u308c\u305f\u6a5f\u80fd Index.vue\u306e\u4e2d\u3067\u3001Inertia\u304b\u3089 Tailwind\u3067Show.vue<\/strong>\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u5c11\u3057\u8abf\u6574\u3057\u307e\u3057\u3087\u3046\u3002\u307e\u305f\u3001\u300cArticle\u300d\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u671f\u5f85\u3057\u3066\u3044\u308b\u3053\u3068\u3092\u901a\u77e5\u3057\u3001prop\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3067\u3001\u8a18\u4e8b\u306e\u30bf\u30a4\u30c8\u30eb\u3084\u300cRead more\u300d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30da\u30fc\u30b8\u3092\u66f4\u65b0\u3059\u308b\u3053\u3068\u306a\u304fShow.vue<\/strong>\u306b\u79fb\u52d5\u3067\u304d\u307e\u3059\u3002<\/p>\n \u3053\u306e\u4f8b\u3067\u306f\u3001 routes\/web.php<\/strong><\/p>\n Laravel\u3001Inertia\u3001Tailwind CSS\u3092\u4f7f\u3063\u305fSPA\u306e\u69cb\u7bc9\u4f8b\u3092\u3054\u7d39\u4ecb\u3057\u307e\u3057\u305f\u304c\u3001Inertia\u306e\u5b9f\u529b\u306f\u3053\u308c\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u3053\u3053\u304b\u3089\u306f\u3001\u958b\u767a\u8005\u3068\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u5229\u7528\u8005\u306e\u4e21\u65b9\u306b\u6709\u7528\u306aInertia\u30c6\u30af\u30cb\u30c3\u30af\u3092\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n Laravel\u306e\u30eb\u30fc\u30c8\u306b\u540d\u524d\u3092\u8ffd\u52a0\u3057\u307e\u3057\u305f\u304c\u3001\u4f7f\u7528\u3057\u3066\u3044\u306a\u3044\u3053\u3068\u306b\u304a\u6c17\u3065\u304d\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002Inertia\u3092\u4f7f\u7528\u3059\u308c\u3070\u3001\u624b\u4f5c\u696d\u3067\u5b8c\u5168\u306a\u30eb\u30fc\u30c8\u3092\u7d44\u307f\u7acb\u3066\u308b\u4ee3\u308f\u308a\u306b\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u540d\u524d\u4ed8\u304d\u30eb\u30fc\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n \u3053\u308c\u306b\u306f\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306bZiggy\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a>\u3057\u307e\u3059\u3002<\/p>\n \u6b21\u306b\u300cresources\/js\/app.js\u300d\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n \u300c\/resources\/views\/app.blade.php<\/strong>\u300d\u306ehead\u3092 \u4ee5\u4e0b2\u3064\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066\u3001NPM\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30ea\u30d5\u30ec\u30c3\u30b7\u30e5\u3057\u307e\u3059\u3002<\/p>\n \u3053\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001Inertia\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u3067\u540d\u524d\u4ed8\u304d\u30eb\u30fc\u30c8\u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002Index.vue<\/strong>\u3092\u958b\u3044\u3066\u53e4\u3044\u30eb\u30fc\u30c8\u3092\u524a\u9664\u3057\u3001\u30eb\u30fc\u30c8\u540d\u306b\u7f6e\u304d\u63db\u3048\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u5185\u3068\u540c\u3058\u3088\u3046\u306b\u901a\u5e38\u306e\u65b9\u6cd5\u3067\u30c7\u30fc\u30bf\u3092\u6e21\u3057\u307e\u3059\u3002<\/p>\n \u3053\u306e\u90e8\u5206\u3092<\/p>\n \u4ee5\u4e0b\u3067\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002<\/p>\n \u3053\u308c\u3067\u3001\u5909\u66f4\u5f8c\u3082\u3053\u308c\u307e\u3067\u3068\u540c\u3058\u3088\u3046\u306b\u52d5\u4f5c\u3057\u307e\u3059\u304c\u3001\u958b\u767a\u4f5c\u696d\u3092\u884c\u3044\u3084\u3059\u304f\u306a\u308a\u307e\u3059\u3002\u7279\u306b\u591a\u304f\u306e\u30d1\u30e9\u30e1\u30fc\u30bf\u3092\u5fc5\u8981\u3068\u3059\u308b\u30eb\u30fc\u30c8\u306e\u5834\u5408\u306b\u4fbf\u5229\u3067\u3059\u3002<\/p>\n \u30d7\u30ed\u30b0\u30ec\u30b9\u30a4\u30f3\u30b8\u30b1\u30fc\u30bf\u306f\u3001Inertia.js\u306e\u7d20\u6674\u3089\u3057\u3044\u6a5f\u80fd\u306e1\u3064\u3067\u3059\u3002SPA\u306e\u30e6\u30fc\u30b6\u30fc\u4f53\u9a13\u306f\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u3067\u3042\u308b\u3053\u3068\u304b\u3089\u3001\u5e38\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u304c\u8aad\u307f\u8fbc\u307f\u4e2d\u304b\u3069\u3046\u304b\u3092\u30d5\u30a3\u30fc\u30c9\u30d0\u30c3\u30af\u3059\u308b\u3053\u3068\u3067\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b\u512a\u308c\u305f\u4ed8\u52a0\u4fa1\u5024\u3092\u4e0e\u3048\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u6a5f\u80fd\u306f\u3001Inertia\u306e\u5225\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3067\u4f7f\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\n \u300c@inertiajs\/progress\u300d\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001NProgress<\/a>\u306e\u30e9\u30c3\u30d1\u30fc\u3067\u3001Inertia\u306e\u30a4\u30d9\u30f3\u30c8\u306b\u5fdc\u3058\u3066\u6761\u4ef6\u4ed8\u304d\u3067\u30ed\u30fc\u30c9\u30a4\u30f3\u30b8\u30b1\u30fc\u30bf\u3092\u8868\u793a\u3057\u307e\u3059\u3002\u3053\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u88cf\u5074\u306f\u7f6e\u3044\u3066\u304a\u3044\u3066\u3001\u65e9\u901f\u52d5\u4f5c\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n \u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001\u4ee5\u4e0b\u306e\u30bf\u30fc\u30df\u30ca\u30eb\u30b3\u30de\u30f3\u30c9\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3067\u304d\u307e\u3059\u3002<\/p>\nInertia\u304c\u512a\u308c\u3066\u3044\u308b\u7406\u7531<\/h2>\n
Inertia\u306e\u4ed5\u7d44\u307f<\/h2>\n
<Link><\/code>\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3088\u3063\u3066\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\nInertia\u5165\u9580<\/h2>\n
![\"Inertia.js\u3067\u4f5c\u6210\u3057\u305f\u30b5\u30f3\u30d7\u30eb\u30da\u30fc\u30b8\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-tutorial-1024x640.png\")
\u524d\u63d0\u6761\u4ef6<\/h3>\n
\n
\u30b9\u30c6\u30c3\u30d71. \u4e3b\u8981\u306a\u8981\u7d20\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
\n
kinsta-blog<\/code><\/li>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <h2>Read our latest articles<\/h2>\n\n <section>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <title>Kinsta Blog<\/title>\n <\/head>\n\n <body>\n <main>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n<\/li>\nkinsta_blog<\/code> .env<\/strong>\nDB_CONNECTION=mysql\nDB_HOST=127.0.0.1\nDB_PORT=3306\nDB_DATABASE=kinsta_blog\nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n<\/li>\n<?php\n\nnamespace AppModels;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Article extends Model\n{\n use HasFactory;\n\n protected $fillable = ['title', 'excerpt', 'body'];\n}<\/code><\/pre>\n<?php\n\nuse Illuminate\\Database\\Migrations\\Migration;\nuse Illuminate\\Database\\Schema\\Blueprint;\nuse Illuminate\\Support\\Facades\\Schema;\n\nreturn new class extends Migration\n{\n\n public function up()\n {\n Schema::create('articles', function (Blueprint $table) {\n $table->id();\n $table->string('title');\n $table->text('excerpt');\n $table->text('body');\n $table->timestamps();\n });\n }\n\n public function down()\n {\n Schema::dropIfExists('articles');\n }\n};<\/code><\/pre>\n<?php\n\nnamespace DatabaseFactories;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\Factory;\n\nclass ArticleFactory extends Factory\n{\n\n public function definition()\n {\n return [\n 'title' => $this->faker->sentence(6),\n 'excerpt' => $this->faker->paragraph(4),\n 'body' => $this->faker->paragraph(15),\n ];\n }\n}<\/code><\/pre>\n<\/li>\n<\/ol>\n\u30b9\u30c6\u30c3\u30d72. Inertia\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h3>\n
1. \u30b5\u30fc\u30d0\u30fc\u30b5\u30a4\u30c9<\/h4>\n
composer require inertiajs\/inertia-laravel<\/code><\/pre>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n <head>\n <meta charset=\"utf-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\n\n <!-- Fetch project name dynamically -->\n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n <!-- Scripts -->\n @vite('resources\/js\/app.js') @inertiaHead\n <\/head>\n\n <body class=\"font-sans antialiased\">\n @inertia\n <\/body>\n<\/html><\/code><\/pre>\n<title><\/code>\u30bf\u30b0\u306binertia<\/code>\u5c5e\u6027\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30bf\u30a4\u30c8\u30eb\u3092\u52d5\u7684\u306b\u53d6\u5f97\u3057\u3066\u3044\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n@vite<\/code>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u633f\u5165\u3057\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u3067\u3001Vite\u306f\u30a2\u30d7\u30ea\u3092\u5b9f\u88c5\u3057CSS\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u305fJavaScript\u30e1\u30a4\u30f3\u30d5\u30a1\u30a4\u30eb\u306e\u30d1\u30b9\u3092\u691c\u77e5\u3067\u304d\u307e\u3059\u3002Vite\u306f\u3001JavaScript\u3068CSS\u306e\u958b\u767a\u3092\u652f\u63f4\u3059\u308b\u30c4\u30fc\u30eb\u3067\u3001\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u3067\u306e\u958b\u767a\u4e2d\u306b\u30da\u30fc\u30b8\u3092\u66f4\u65b0\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u306e\u5909\u66f4\u3092\u78ba\u8a8d\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\nphp artisan inertia:middleware<\/code><\/pre>\nHandleInertiaRequests<\/code>\u3092\u767b\u9332\u3057\u307e\u3059\u3002<\/p>\n'web' => [\n \/\/ ...\n App\\Http\\Middleware\\HandleInertiaRequests::class,\n],<\/code><\/pre>\n2. \u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9<\/h4>\n
npm install @inertiajs\/inertia @inertiajs\/inertia-vue3\n\/\/ or\nyarn add @inertiajs\/inertia @inertiajs\/inertia-vue3<\/code><\/pre>\nnpm install vue@next<\/code><\/pre>\nimport \".\/bootstrap\";\nimport \"..\/css\/app.css\";\n\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\n\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) =>\n resolvePageComponent(\n `.\/Pages\/${name}.vue`,\n import.meta.glob(\".\/Pages\/**\/*.vue\")\n ),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .mount(el);\n },\n});<\/code><\/pre>\nresolvePageComponent<\/code>\u3092\u4f7f\u7528\u3057\u3066\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea.\/Pages\/$name.vue<\/strong>\u304b\u3089\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u89e3\u6c7a\u3059\u308b\u3088\u3046\u306b\u6307\u793a\u3057\u3066\u3044\u307e\u3059\u3002\u5f8c\u307b\u3069\u3001\u3053\u306e\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306bInertia\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u4fdd\u5b58\u3057\u307e\u3059\u3002\u3053\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u306b\u3088\u3063\u3066\u3001\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u304b\u3089\u81ea\u52d5\u3067\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u8aad\u307f\u8fbc\u3080\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\nvitejs\/plugin-vue<\/code>\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\nnpm i @vitejs\/plugin-vue<\/code><\/pre>\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\/css\/app.css\", \"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});<\/code><\/pre>\nnpm install\n\nnpm run dev<\/code><\/pre>\nInertia\u30da\u30fc\u30b8\u306e\u4f5c\u6210<\/h2>\n
<template><\/code>\u30bf\u30b0\u3067\u56f2\u307f\u3001JavaScript\u95a2\u9023\u306f\u3059\u3079\u3066<script><\/code>\u30bf\u30b0\u3067\u56f2\u307f\u307e\u3059\u3002<\/p>\n<html><\/code>\u3001<head><\/code>\u3001<body><\/code>\u30bf\u30b0\u306f\u3001\u30e1\u30a4\u30f3\u30eb\u30fc\u30c8\u306eblade\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u3059\u3067\u306b\u542b\u307e\u308c\u3066\u3044\u308b\u305f\u3081\u9664\u5916\u3057\u307e\u3059\u3002<\/p>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <h2>Read our latest articles<\/h2>\n\n <section>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\n<script setup>\n \/\/\n<\/script>\n\n<template>\n <header>\n <h1>Welcome to Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <article>\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n<\/template><\/code><\/pre>\n<slot \/><\/code>\u3092\u542b\u3080main<\/code>\u3092\u683c\u7d0d\u3057\u307e\u3059\u3002\u30d5\u30a1\u30a4\u30eb\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<script setup><\/script>\n\n<template>\n <header>\n <h1>Kinsta Blog<\/h1>\n <\/header>\n\n <main>\n <slot \/>\n <\/main>\n\n <footer>\n <h2>Join our Newsletter<\/h2>\n\n <input type=\"email\" \/>\n <\/footer>\n\n<\/template><\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n<\/script>\n\n<template>\n <KinstaLayout>\n <section>\n <h2>Read our latest articles<\/h2>\n <article>\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>Title for the blog<\/h3>\n <p>\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum rem\n itaque error vel perferendis aliquam numquam dignissimos, expedita\n perspiciatis consectetur!\n <\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n <\/template><\/code><\/pre>\n<script setup>\n import KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n<\/script>\n\n<template>\n <KinstaLayout>\n <article>\n <h1>Title for the blog<\/h1>\n\n <p>Article content goes here<\/p>\n <\/article>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nLaravel\u30eb\u30fc\u30c8\u3068Inertia\u30ec\u30f3\u30c0\u30fc<\/h2>\n
<?php\n\nnamespace Database\\Seeders;\n\nuse App\\Models\\Article;\nuse Illuminate\\Database\\Seeder;\n\nclass DatabaseSeeder extends Seeder\n{\n public function run()\n {\n Article::factory(10)->create();\n }\n}<\/code><\/pre>\nphp artisan migrate:fresh --seed<\/code><\/pre>\n<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n return Inertia::render('Index', [\n 'articles' => Article::latest()->get()\n ]);\n})->name('home');<\/code><\/pre>\nInertia<\/code>\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001Laravel\u30d8\u30eb\u30d1\u30fc\u306eview()<\/code>\u3067\u306f\u306a\u304f\u3001Inertia::render<\/code>\u3092\u4f7f\u7528\u3057\u3066\u30d3\u30e5\u30fc\u3092\u8fd4\u3057\u3066\u3044\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u307e\u305fInertia\u306f\u3001\u30eb\u30fc\u30c8\u3067\u8a00\u53ca\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u540d\u3092\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u3001\u300cresources\/js\u300d\u306ePages<\/strong>\u30d5\u30a9\u30eb\u30c0\u304b\u3089\u63a2\u3057\u307e\u3059\u3002<\/p>\nv-for<\/code>\u3067\u30eb\u30fc\u30d7\u3057\u3066\u7d50\u679c\u3092\u8868\u793a\u3057\u307e\u3059\u3002script\u30bf\u30b0\u306e\u4e2d\u3067\u3001\u6e21\u3055\u308c\u305f\u30c7\u30fc\u30bf\u3092prop\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u307e\u3059\u3002Inertia\u306b\u306f\u671f\u5f85\u3059\u308b\u30c7\u30fc\u30bf\u306e\u7a2e\u985e\u306e\u307f\u304c\u5fc5\u8981\u3067\u3001\u3053\u3053\u3067\u306f\u8a18\u4e8b\u306e\u914d\u5217\u3092\u542b\u3080articles\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6307\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script><\/code><\/pre>\nsetup<\/code>\u5f62\u5f0f\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u305f\u3081\u3001prop\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3060\u3051\u3067\u5341\u5206\u3067\u3001\u8fd4\u3059\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002Options API\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u5834\u5408\u306f\u3001\u3053\u308c\u3092\u8fd4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<template>\n <KinstaLayout>\n <h2>Read our latest articles<\/h2>\n\n <section>\n \/\/ Looping over articles\n <article v-for=\"article in articles\":key=\"article.id\">\n <div>\n <img src=\"\/images\/kinsta-logo.png\" alt=\"Article thumbnail\" \/>\n <\/div>\n\n <h3>{{article.title}}<\/h3>\n <p>{{article.excerpt}}<\/p>\n\n <a href=\"#\">Read more<\/a>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\nnpm run dev<\/code>\uff08Vite\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u306e\u3067\u8d77\u52d5\u3057\u305f\u307e\u307e\uff09\u3068\u3001php artisan serve<\/code>\u3067Laravel\u306e\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u3092\u8d77\u52d5\u3057\u3001\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u306b\u30a2\u30af\u30bb\u30b9\u3059\u308b\u3068\u3001\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u5185\u306e10\u4ef6\u306e\u8a18\u4e8b\u304c\u3059\u3079\u3066\u8868\u793a\u3055\u308c\u308b\u30da\u30fc\u30b8\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n![\"Inertia\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u691c\u8a3c\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/inspect-Inertia-passed-data-1024x543.png\")
Inertia.js\u3067\u306eTailwind CSS\u306e\u5229\u7528<\/h2>\n
\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n content: [\n \".\/storage\/framework\/views\/*.php\",\n \".\/resources\/views\/**\/*.blade.php\",\n \".\/resources\/js\/**\/*.vue\",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n};<\/code><\/pre>\nimport \"..\/css\/app.css\";<\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\n defineProps({\n articles: Object,\n });\n<\/script>\n\n<template>\n <KinstaLayout>\n <h2 class=\"text-2xl font-bold py-10\">Read our latest articles<\/h2>\n\n <section class=\"space-y-5 border-b-2 pb-10\">\n <article\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n >\n\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-32 h-32 rounded-xl object-cover\"\n alt=\"\"\n \/>\n\n <div class=\"flex flex-col text-left justify-between pl-3 space-y-5\">\n <h3\n class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n >\n <a href=\"#\">{{ article.title }}<\/a>\n <\/h3>\n <p>\n {{ article.excerpt }}\n <\/p>\n <a\n href=\"#\"\n class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n >Read more<\/a\n >\n <\/div>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup><\/script>\n\n<template>\n <header\n class=\"bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-700 w-full text-center py-4\"\n >\n <h1 class=\"text-white font-bold text-4xl\">Kinsta Blog<\/h1>\n <\/header>\n\n <main class=\"container mx-auto text-center\">\n <slot \/>\n <\/main>\n\n <footer\n class=\"bg-gradient-to-b from-transparent to-gray-300 w-full text-center mt-5 py-10 mx-auto\"\n >\n <h2 class=\"font-bold text-xl pb-5\">Join our Newsletter<\/h2>\n\n <input\n class=\"rounded-xl w-80 h-12 px-3 py-2 shadow-md\"\n type=\"email\"\n placeholder=\"Write your email..\"\n \/>\n <\/footer>\n<\/template><\/code><\/pre>\n![\"Inertia\u30d7\u30ed\u30d1\u30c6\u30a3\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-blog.gif\")
Inertia\u30ea\u30f3\u30af<\/h2>\n
<?php\n\nuse App\\Models\\Article;\nuse Illuminate\\Support\\Facades\\Route;\nuse Inertia\\Inertia;\n\nRoute::get('\/', function () {\n return Inertia::render('Index', [\n 'articles' => Article::latest()->get()\n ]);\n})->name('home');\n\nRoute::get('\/posts\/{article:id}', function (Article $article) {\n return Inertia::render('Show', [\n 'article' => $article\n ]);\n})->name('article.show');<\/code><\/pre>\n<Link><\/code>\u3067\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u5192\u982d\u3067\u8aac\u660e\u3057\u305f\u3088\u3046\u306b\u3001Inertia\u306f\u3001\u6a19\u6e96\u7684\u306a\u30a2\u30f3\u30ab\u30fc\u30bf\u30b0<a><\/code>\u306e\u30e9\u30c3\u30d1\u30fc\u3068\u3057\u3066<Link><\/code>\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002\u3053\u306e\u30e9\u30c3\u30d1\u30fc\u306f\u3001\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u30da\u30fc\u30b8\u79fb\u52d5\u304c\u76ee\u7684\u3067\u3059\u3002<Link><\/code>\u30bf\u30b0\u306f\u3001<GET><\/code>\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u5b9f\u884c\u3059\u308b\u30a2\u30f3\u30ab\u30fc\u30bf\u30b0\u3068\u3057\u3066\u632f\u308b\u821e\u3044\u307e\u3059\u304c\u3001\u540c\u6642\u306b<button><\/code>\u3084<form><\/code>\u3068\u3057\u3066\u3082\u52d5\u4f5c\u3057\u307e\u3059\u3002\u3053\u306e\u4f8b\u3067\u3069\u306e\u3088\u3046\u306b\u9069\u7528\u3067\u304d\u308b\u304b\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<Link><\/code>\u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3001\u30a2\u30f3\u30ab\u30fc\u30bf\u30b0<a><\/code>\u3092<Link><\/code>\u30bf\u30b0\u3067\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002href<\/code>\u5c5e\u6027\u306b\u306f\u3001\u8a18\u4e8b\u306e\u95b2\u89a7\u7528\u306b\u4f5c\u6210\u3057\u305f\u30eb\u30fc\u30c8URL\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\nimport { Link } from \"@inertiajs\/inertia-vue3\";\n\ndefineProps({\n articles: Object,\n});\n<\/script>\n\n<template>\n <KinstaLayout>\n <section class=\"space-y-5 border-b-2 pb-10\">\n <h2 class=\"text-2xl font-bold pt-10 mx-auto text-center\">\n Read our latest articles\n <\/h2>\n\n <article\n v-for=\"article in articles\"\n :key=\"article.id\"\n class=\"flex justify-center items-center shadow-md bg-white rounded-xl p-4 mx-auto max-w-3xl\"\n >\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-32 h-32 rounded-xl object-cover\"\n alt=\"\"\n \/>\n\n <div\n class=\"flex flex-col text-left justify-between pl-3 space-y-5\"\n >\n <h3\n class=\"text-xl font-semibold text-indigo-600 hover:text-indigo-800\"\n >\n <Link :href=\"'\/posts\/' + article.id\">{{\n article.title\n }}<\/Link>\n <\/h3>\n <p>\n {{ article.excerpt }}\n <\/p>\n <Link\n :href=\"'\/posts\/' + article.id\"\n class=\"text-indigo-600 hover:text-indigo-800 w-fit self-end font-semibold\"\n >Read more\n <\/Link>\n <\/div>\n <\/article>\n <\/section>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n<script setup>\nimport KinstaLayout from \"..\/Layouts\/KinstaLayout.vue\";\n\ndefineProps({\n article: Object,\n});\n<\/script>\n\n<template>\n <KinstaLayout>\n <article class=\"mx-auto mt-10 flex justify-center max-w-5xl border-b-2\">\n <img\n src=\"\/images\/kinsta-logo.png\"\n class=\"w-80 h-80 rounded-xl mx-auto py-5\"\n alt=\"\"\n \/>\n <div class=\"text-left flex flex-col pt-5 pb-10 px-10\">\n <h1 class=\"text-xl font-semibold mb-10\">{{ article.title }}<\/h1>\n <p>{{ article.body }}<\/p>\n <\/div>\n <\/article>\n <\/KinstaLayout>\n<\/template><\/code><\/pre>\n![\"\u52d5\u4f5c\u3059\u308bInertia\u30ea\u30f3\u30af\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/10\/kinsta-laravel-inertiajs-Link-1024x596.gif\")
<Link><\/code>\u3092\u30a2\u30f3\u30ab\u30fc\u30bf\u30b0\u3068\u3057\u3066\u4f7f\u7528\u3057\u3001\u30eb\u30fc\u30c8\u306bGET<\/code>\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3057\u3066\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u3044\u307e\u3059\u3002<Link><\/code>\u306fPOST<\/code>\u3001PUT<\/code>\u3001PATCH<\/code>\u3001DELETE<\/code>\u306b\u3082\u4f7f\u7528\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<Link href=\"\/logout\" method=\"post\" as=\"button\" type=\"button\">Logout<\/Link><\/code><\/pre>\nLaravel\u3067Inertia\u3092\u4f7f\u7528\u3059\u308b\u30d2\u30f3\u30c8<\/h2>\n
URL\u306e\u751f\u6210<\/h3>\n
composer require tightenco\/ziggy<\/code><\/pre>\nimport \".\/bootstrap\";\nimport \"..\/css\/app.css\";\n\nimport { createApp, h } from \"vue\";\nimport { createInertiaApp } from \"@inertiajs\/inertia-vue3\";\nimport { resolvePageComponent } from \"laravel-vite-plugin\/inertia-helpers\";\nimport { ZiggyVue } from \"..\/..\/vendor\/tightenco\/ziggy\/dist\/vue.m\";\n\ncreateInertiaApp({\n title: (title) => `${title} - ${appName}`,\n resolve: (name) =>\n resolvePageComponent(\n `.\/Pages\/${name}.vue`,\n import.meta.glob(\".\/Pages\/**\/*.vue\")\n ),\n setup({ el, app, props, plugin }) {\n return createApp({ render: () => h(app, props) })\n .use(plugin)\n .use(ZiggyVue, Ziggy)\n .mount(el);\n },\n});<\/code><\/pre>\n@routes<\/code>\u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3067\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n<!DOCTYPE html>\n<html lang=\"{{ str_replace('_', '-', app()->getLocale()) }}\">\n\n<head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <!-- Fetch project name dynamically -->\n <title inertia>{{ config('app.name', 'Laravel') }}<\/title>\n\n <!-- Scripts -->\n @routes\n @vite('resources\/js\/app.js')\n @inertiaHead\n<\/head>\n\n<body class=\"font-sans antialiased\">\n @inertia\n<\/body>\n\n<\/html><\/code><\/pre>\nnpm install && npm run dev<\/code><\/pre>\n<Link :href=\"'\/posts\/' + article.id\">\n {{ article.title }}\n<\/Link><\/code><\/pre>\n<Link :href=\"route('article.show', article.id)\">\n {{ article.title }}\n<\/Link><\/code><\/pre>\n\u30d7\u30ed\u30b0\u30ec\u30b9\u30a4\u30f3\u30b8\u30b1\u30fc\u30bf<\/h3>\n