{"id":119,"date":"2023-08-24T11:03:55","date_gmt":"2023-08-24T02:03:55","guid":{"rendered":"https:\/\/yutanpo-create.tech\/?p=119"},"modified":"2023-11-21T10:09:42","modified_gmt":"2023-11-21T01:09:42","slug":"laravel-vue_pagination","status":"publish","type":"post","link":"https:\/\/yutanpo-create.tech\/?p=119","title":{"rendered":"\u3010Vue + Laravel\u3011\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u81ea\u4f5c\u3059\u308b"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"330\" src=\"https:\/\/yutanpo-create.tech\/wp-content\/uploads\/2023\/08\/thumbnail02.png\" alt=\"\" class=\"wp-image-120\" srcset=\"https:\/\/yutanpo-create.tech\/wp-content\/uploads\/2023\/08\/thumbnail02.png 680w, https:\/\/yutanpo-create.tech\/wp-content\/uploads\/2023\/08\/thumbnail02-300x146.png 300w\" sizes=\"auto, (max-width: 680px) 100vw, 680px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u3053\u3093\u3061\u308f\u3002\u3086\u305f\u3093\u307d\u3067\u3059\u3002<br><br><br>Laravel\u306b\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u6a5f\u80fd\u304c\u3064\u3044\u3066\u304a\u308a\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306a\u3069\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u6e21\u3059\u969b\u306b\u3001\u300cpaginate(10)\u300d\u3000\u306e\u3088\u3046\u306b\u3059\u308b\u3060\u3051\u3067\u81ea\u52d5\u3067\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3057\u3066\u304f\u308c\u308b\u306e\u3067\u5927\u5909\u4fbf\u5229\u3067\u3059\u3088\u306d\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u305f\u3060\u3001Vue.js + Laravel \u3092\u4f7f\u3063\u3066\u958b\u767a\u3092\u3059\u308b\u306b\u3042\u305f\u308a<br><br><span data-color=\"#fdeae3\" style=\"background: linear-gradient(transparent 60%,rgba(253, 234, 227, 0.7) 0);\" class=\"vk_highlighter\">\u2460 \u30d5\u30ed\u30f3\u30c8\u5074\u306fVue.js\u3067\u4f5c\u308b\uff08Laravel\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\uff08View\uff09\u306f\u4f7f\u308f\u306a\u3044\uff09<br>\u2461 API\u3067\u3001Laravel\u3067\u51e6\u7406\u3057\u305f\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u8868\u793a\u3059\u308b<\/span><br><br>\u3068\u3044\u3063\u305f\u5fc5\u8981\u304c\u3042\u308b\u5834\u5408\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u306a\u3089\u554f\u984c\u306a\u304f\u8868\u793a\u3067\u304d\u308b\u300cpaginate()\u300d\u304c\u4f7f\u3048\u306a\u304f\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u30fb\u30fb\u30fb\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u3053\u306e\u3042\u305f\u308a\u3092\u89e3\u6c7a\u3059\u308b\u305f\u3081\u306b\u3001\u4eca\u56deLaravel\u3055\u3093\u306b\u306f\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u3084\u51e6\u7406\u306e\u65b9\u3092\u304a\u9858\u3044\u3057\u3001<br>\u305d\u308c\u3092API\u901a\u4fe1\uff08\u4eca\u56de\u306faxios\u3092\u4f7f\u7528\uff09\u3067\u3001Vue\u5074\u306b\u6301\u3063\u3066\u304d\u3066\u3001\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u300c\u98a8\u300d\u306e\u3082\u306e\u3092\u5b9f\u88c5\u3059\u308b\u624b\u9806\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">\u76ee\u6b21<\/p><ul class=\"toc_list\"><li><a href=\"#i\">\u524d\u63d0\u3068\u3057\u3066<\/a><\/li><li><a href=\"#Laravel\">\u4f5c\u308a\u65b9\uff08Laravel\u5074\uff09<\/a><ul><li><a href=\"#_DB\">\u3000\u2460  DB\u306b\u3042\u308b\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u7528\u30e1\u30bd\u30c3\u30c9\u306e\u4f5c\u6210<\/a><\/li><li><a href=\"#i-2\">\u3000\u2461 \u30eb\u30fc\u30c8\u306e\u8a2d\u5b9a<\/a><\/li><\/ul><\/li><li><a href=\"#Vue\">\u4f5c\u308a\u65b9\uff08Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\uff09<\/a><ul><li><a href=\"#i-3\">\u3000\u2460 \u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b<\/a><\/li><li><a href=\"#i-4\">\u3000\u2461 \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0<\/a><\/li><li><a href=\"#i-5\">\u3000\u2462 \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u51e6\u7406\u3092\u8a18\u8ff0<\/a><\/li><\/ul><\/li><\/ul><\/div>\n\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u3053\u306e\u8a18\u4e8b\u3067\u306a\u306b\u3092\u3084\u3063\u3066\u308b\u304b\u3092\u7c21\u5358\u306b\u8a00\u3046\u3068<br><br><span data-color=\"#fffd6b\" style=\"background: linear-gradient(transparent 60%,rgba(255, 253, 107, 0.7) 0);\" class=\"vk_highlighter\">\u300cVue\u5074\u304b\u3089axios\u3092\u4f7f\u3063\u3066\u3001Laravel\u5074\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3066\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3002\u305d\u306e\u30c7\u30fc\u30bf\u3092js\u3067\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u98a8\u306b\u8868\u793a\u3057\u3061\u3083\u3048\u3002\u300d<\/span><br><br>\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u3002\u4f55\u304b\u306e\u53c2\u8003\u306b\u306a\u308c\u3070\u5e78\u3044\u3067\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__title\"><div class=\"vk_heading vk_heading-style-default\"><h2 style=\"margin-bottom:2rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"i\"><span>\u524d\u63d0\u3068\u3057\u3066<\/span><\/span><\/h2><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u25cf <strong>\u5f53\u65b9\u306e\u52d5\u4f5c\u74b0\u5883(package.json\u5185\u5bb9)<\/strong><br><br>\u30fb Laravel:5.8<br>\u30fbVue.js:2.5.17<br>\u30fbaxios: 0.19.2<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u25cf <strong>\u30b5\u30f3\u30d7\u30eb\u3068\u3057\u3066\u4ee5\u4e0b\u3092\u7528\u610f<\/strong><br><br>1. TestController.php\u30fb\u30fb\u30fb\u30c7\u30fc\u30bf\u53d6\u5f97\u7528\u3001API\u901a\u4fe1\u7528\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u8a18\u8f09\u3057\u305f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc<br>2. ExampleComponent.vue\u30fb\u30fb\u30fb1\u304b\u3089API\u901a\u4fe1\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3001\u8868\u793a\u3059\u308b\u305f\u3081\u306eVue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<br><\/p>\n\n\n\n<p>\u203b\u4eca\u56de\u306f\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u304c\u76ee\u7684\u306e\u305f\u3081\u3001\u300cAPI\u7528\u306e\u30eb\u30fc\u30c8\u306e\u8a2d\u5b9a\u65b9\u6cd5\u300d\u3084\u300cVue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4f5c\u308a\u65b9\u300d\u306a\u3069\u306a\u3069\u3002<br><br>\u7d30\u304b\u3044\u90e8\u5206\u306e\u8a2d\u5b9a\u65b9\u6cd5\u306b\u3064\u3044\u3066\u7b49\u306f\u5272\u611b\u3057\u307e\u3059\u3002\u5f8c\u65e5\u3001\u305d\u3046\u3044\u3063\u305f\u90e8\u5206\u306b\u3064\u3044\u3066\u306e\u8a18\u4e8b\u3082\u51fa\u3059\u4e88\u5b9a\u3067\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u25cf  <strong>DB\u3001\u30c7\u30fc\u30bf\u3001\u30e2\u30c7\u30eb\u306b\u3064\u3044\u3066<\/strong><br><br>\u30fb\u3059\u3067\u306b DB\u306b\u300creviews\u300d\u30c6\u30fc\u30d6\u30eb\u304c\u7528\u610f\u3055\u308c\u3066\u304a\u308a\u3001\u305d\u308c\u305e\u308c\u30ab\u30e9\u30e0\u306a\u3069\u3082\u63c3\u3063\u3066\u3044\u308b\u3002<br>\u30fbReview\u30e2\u30c7\u30eb\u3082\u4f5c\u6210\u6e08\u307f\u3002\u30ea\u30ec\u30fc\u30b7\u30e7\u30f3\u306a\u3069\u3082\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u3002\u3068\u3044\u3046\u524d\u63d0\u3067\u9032\u3081\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__title\"><div class=\"vk_heading vk_heading-style-default\"><h2 style=\"margin-bottom:2rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"Laravel\"><span>\u4f5c\u308a\u65b9\uff08Laravel\u5074\uff09<\/span><\/span><\/h2><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u307e\u305a\u306f Laravel\u5074\u3001\u300cTestController.php\u300d\u304b\u3089\u4f5c\u3063\u3066\u3044\u304d\u307e\u3059\u3002<br>\u3053\u3053\u3067\u306f\u4e3b\u306b2\u3064\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u4f5c\u308b\u3053\u3068\u3068\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__subtitle\"><div class=\"vk_heading vk_heading-style-default\"><h3 style=\"margin-bottom:2rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"_DB\"><span>\u3000\u2460  DB\u306b\u3042\u308b\u30c7\u30fc\u30bf\u306e\u53d6\u5f97\u7528\u30e1\u30bd\u30c3\u30c9\u306e\u4f5c\u6210<\/span><\/span><\/h3><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u307e\u305a\u306f DB\u304b\u3089\u30c7\u30fc\u30bf\u3092\u5fc5\u8981\u306a\u5206\u3001\u53d6\u5f97\u3059\u308b\u305f\u3081\u306e\u30e1\u30bd\u30c3\u30c9\uff08\uff09\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u3010TestController.php\u3011<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-lang=\"PHP\"><code>\/\/\u3000Review\u30e2\u30c7\u30eb\u3092use\u3059\u308b\u306e\u3082\u5fd8\u308c\u305a\u306b\u3002\nclass TestController extends Controller{\n    \n    public function reviews()  {\u3000\u3000\/\/ \u2605\u2460\n       \n        $reviews = Review::all();    \/\/ \u30ec\u30d3\u30e5\u30fc\u30e2\u30c7\u30eb\u304b\u3089\u4eca\u56de\u306f\u30c7\u30fc\u30bf\u3092\u5168\u4ef6\u53d6\u5f97\u3002\n        $data = [\n            &#39;reviews&#39; =&gt; $reviews,     \/\/ Vue\u5074\u306b\u6e21\u3059$data\uff08\u4e2d\u306b\u306f&#39;reviews&#39;\u304c\u5165\u3063\u3066\u308b\uff09\u3092\u5b9a\u7fa9\n        ];\n    \n        return response()-&gt;json($data);    \/\/ \u4eca\u56de\u306fjson\u5f62\u5f0f\u3067Vue\u5074\u306b\u6e21\u3057\u307e\u3059\u3002\n    }<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u3053\u308c\u3067\u3001Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u300c$data\u300d\u304cjson\u5f62\u5f0f\u3067\u6e21\u3055\u308c\u308b\u6e96\u5099\u304c\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__subtitle\"><div class=\"vk_heading vk_heading-style-default\"><h3 style=\"margin-bottom:1.9rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"i-2\"><span>\u3000\u2461 \u30eb\u30fc\u30c8\u306e\u8a2d\u5b9a<\/span><\/span><\/h3><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>API\u901a\u4fe1\u3092\u884c\u3046\u305f\u3081\u306e\u30eb\u30fc\u30c8\u304c\u5fc5\u8981\u306b\u306a\u308a\u307e\u3059\u3002<br>\u4eca\u56de\u306fGET\u901a\u4fe1\u3067\u300c\/api\/reviews\u300d\u3068\u3044\u3046URL\u306b\u30a2\u30af\u30bb\u30b9\u304c\u3042\u3063\u305f\u5834\u5408\u3001\u2460\u306e\u30e1\u30bd\u30c3\u30c9\u3092\u547c\u3073\u51fa\u3059\u5f62\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u3010routes\/web.php\uff08\u306a\u3069\uff09\u3011<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-php\" data-lang=\"PHP\"><code>\/\/ API\u306e\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u4f7f\u7528\nRoute::middleware(&#39;api&#39;)-&gt;group(function() {\n    \/\/ \u30ec\u30d3\u30e5\u30fc\u306e\u53d6\u5f97\n    Route::get(&#39;\/api\/reviews&#39;, &#39;TestController@reviews&#39;);\n}<\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-xl--margin-top\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none\"><div class=\"vk_balloon_icon\"><figure><img decoding=\"async\" class=\"vk_balloon_icon_image vk_balloon_icon_image-type-normal \" src=\"http:\/\/yutanpo-create.tech\/wp-content\/uploads\/2023\/08\/cropped-DreamShaper_v7_A_back_view_of_a_man_looking_at_a_computer_whil_3.jpg\" alt=\"\"\/><figcaption class=\"vk_balloon_icon_name\">\u3086\u305f\u3093\u307d<\/figcaption><\/figure><\/div><div class=\"vk_balloon_content_outer\"><div class=\"vk_balloon_content  has-background-color has-vk-color-custom-2-background-color \"><span class=\"vk_balloon_content_before  has-text-color has-vk-color-custom-2-color\"><\/span><span class=\"vk_balloon_content_after \"><\/span>\n<p>\u3068\u308a\u3042\u3048\u305a\u3001Laravel\u5074\u306f\u3053\u3093\u306a\u611f\u3058\u304b\u306a\u3002<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-right vk_balloon-type-speech vk_balloon-animation-none\"><div class=\"vk_balloon_icon\"><figure><img decoding=\"async\" class=\"vk_balloon_icon_image vk_balloon_icon_image-type-normal \" src=\"http:\/\/yutanpo-create.tech\/wp-content\/uploads\/2023\/08\/\u540d\u79f0\u672a\u8a2d\u5b9a\u306e\u30c7\u30b6\u30a4\u30f3-2.png\" alt=\"\"\/><figcaption class=\"vk_balloon_icon_name\">\u306c\u3053\u5148\u751f<\/figcaption><\/figure><\/div><div class=\"vk_balloon_content_outer\"><div class=\"vk_balloon_content  has-background-color has-vk-color-custom-5-background-color \"><span class=\"vk_balloon_content_before  has-text-color has-vk-color-custom-5-color\"><\/span><span class=\"vk_balloon_content_after \"><\/span>\n<p>\u30eb\u30fc\u30c8\u306fAPI\u7528\u306b\u30d5\u30a1\u30a4\u30eb\u5206\u3051\u3066\u7ba1\u7406\u3057\u3066\u3082\u826f\u3044\u304b\u3082\u306b\u3083<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__title\"><div class=\"vk_heading vk_heading-style-default\"><h2 style=\"margin-bottom:2rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"Vue\"><span>\u4f5c\u308a\u65b9\uff08Vue\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5074\uff09<\/span><\/span><\/h2><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u6b21\u306fVue\u5074\u3067<br><br>\u30fbLaravel\u5074\u304b\u3089API\u901a\u4fe1\uff08axios\uff09\u3067\u30c7\u30fc\u30bf\u3092\u53d7\u3051\u53d6\u308b<br>\u30fb\u305d\u306e\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b<br>\u30fb\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306b\u3088\u3063\u3066\u8868\u793a\u3059\u308b\u30c7\u30fc\u30bf\u306e\u5185\u5bb9\u3092\u5909\u3048\u308b<\/p>\n\n\n\n<p>\u3068\u3044\u3046\u3053\u3068\u3092\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__subtitle\"><div class=\"vk_heading vk_heading-style-default\"><h3 style=\"margin-bottom:2rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"i-3\"><span>\u3000\u2460 \u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0\u3059\u308b<\/span><\/span><\/h3><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<p>\u3010ExampleComponent.vue\u3011<br>\u306b\u3001\u4f8b\u3048\u3070\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5f62\u3067\u3001\u53d6\u5f97\u3057\u305f\u30ec\u30d3\u30e5\u30fc\u3092\u8868\u793a\u3059\u308b\u51e6\u7406\u3092\u8a18\u8ff0\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;template&gt;\n   &lt;div&gt;\n        &lt;div v-for=&quot;review in paginatedReviews&quot; :key=&quot;review.id&quot;&gt; \n          \n            &lt;div&gt;\n              &lt;h3&gt;{{ review.title }}&lt;\/h3&gt;\u3000\/\/ \u30ec\u30d3\u30e5\u30fc\u30bf\u30a4\u30c8\u30eb\n              &lt;p&gt;{{ formatDate(review.created_at) }}&lt;\/p&gt;\u3000\/\/ \u30ec\u30d3\u30e5\u30fc\u306e\u6295\u7a3f\u65e5\n              &lt;p&gt;{{ review.score }}&lt;\/p&gt;\u3000\/\/ \u8a55\u4fa1\n              &lt;p&gt;{{ review.description }}&lt;\/p&gt;\u3000\/\/ \u30ec\u30d3\u30e5\u30fc\u5185\u5bb9\n            &lt;\/div&gt;\n         &lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__subtitle\"><div class=\"vk_heading vk_heading-style-default\"><h3 style=\"margin-bottom:2rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"i-4\"><span>\u3000\u2461 \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u30b3\u30fc\u30c9\u3092\u8a18\u8ff0<\/span><\/span><\/h3><\/div><\/div>\n\n\n\n<p>\u3055\u3089\u306b\u8ffd\u52a0\u3057\u3066\u3001\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u8868\u793a\u90e8\u5206\u3092\u8ffd\u8a18\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;!-- \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u8ffd\u52a0 --&gt;\n    &lt;div&gt;\n      &lt;button v-if=&quot;currentPage &gt; 1&quot; @click=&quot;changePage(1)&quot;&gt;\n        \uff1c\n      &lt;\/button&gt;\n      &lt;!-- \u524d\u306e\u30da\u30fc\u30b8\u30dc\u30bf\u30f3 --&gt;\n      &lt;button v-if=&quot;currentPage &gt; 2&quot; @click=&quot;changePage(currentPage - 1)&quot;&gt;\n        prev\n      &lt;\/button&gt;\n      &lt;!-- \u52d5\u7684\u306b\u5909\u5316\u3059\u308b\u30da\u30fc\u30b8\u30dc\u30bf\u30f3 --&gt;\n      &lt;button v-for=&quot;pageNumber in visiblePageNumbers&quot; :key=&quot;pageNumber&quot; :class=&quot;{ active: currentPage === pageNumber }&quot; @click=&quot;changePage(pageNumber)&quot;&gt;\n        {{ pageNumber }}\n      &lt;\/button&gt;\n      &lt;!-- \u6b21\u306e\u30da\u30fc\u30b8\u30dc\u30bf\u30f3 --&gt;\n      &lt;button v-if=&quot;currentPage &lt; totalPages - 1&quot; @click=&quot;changePage(currentPage + 1)&quot;&gt;\n        next\n      &lt;\/button&gt;\n      &lt;!-- \u6700\u7d42\u30da\u30fc\u30b8 --&gt;\n      &lt;button v-if=&quot;currentPage &lt; totalPages&quot; @click=&quot;changePage(totalPages)&quot;&gt;\n        \uff1e\n      &lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/template&gt;<\/code><\/pre><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-heading c-section__subtitle\"><div class=\"vk_heading vk_heading-style-default\"><h3 style=\"margin-bottom:2rem\" class=\"vk_heading_title vk_heading_title-style-default\"><span id=\"i-5\"><span>\u3000\u2462 \u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u306e\u51e6\u7406\u3092\u8a18\u8ff0<\/span><\/span><\/h3><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-spacer vk_spacer vk_spacer-type-margin-top\"><div class=\"vk_block-margin-md--margin-top\"><\/div><\/div>\n\n\n\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>&lt;script&gt;\nimport axios from &#39;axios&#39;;\u3000\/\/ axios\u3092\u8aad\u307f\u8fbc\u307f\nexport default {\n  data() {\n    return {\n      reviews: [],\n      currentPage: 1,\n      reviewsPerPage: 6,\u3000\/\/ 1\u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b\u30ec\u30d3\u30e5\u30fc\u306e\u6570\n    };\n  },\n  async mounted() {\n    await this.getReviews();\u3000\/\/ \u30da\u30fc\u30b8\u304c\u8aad\u307f\u8fbc\u307e\u308c\u305f\u3068\u304d\u306b\u30ec\u30d3\u30e5\u30fc\u3092API\u3067\u53d6\u5f97\n  },\n  computed: {\n\u3000\n\u3000\/\/ \u5168\u90e8\u3067\u4f55\u30da\u30fc\u30b8\u306b\u306a\u308b\u304b\n    totalPages() {\n      return Math.ceil(this.reviews.length \/ this.reviewsPerPage);\n    },\n    startIndex() {\n      return (this.currentPage - 1) * this.reviewsPerPage;\n    },\n    endIndex() {\n      return this.startIndex + this.reviewsPerPage;\n    },\n\u3000\/\/ \u30da\u30fc\u30b8\u6bce\u306b\u8868\u793a\u3059\u308b\u30ec\u30d3\u30e5\u30fc\u3092\u8a08\u7b97\u3057\u5909\u66f4\n    paginatedReviews() {\n      return this.reviews.slice(this.startIndex, this.endIndex);\n    },\n    visiblePageNumbers() {\n      const totalPages = this.totalPages;\n      const currentPage = this.currentPage;\n      const maxVisiblePages = 3;\n      if (totalPages &lt;= maxVisiblePages) {\n        return Array.from({ length: totalPages }, (_, i) =&gt; i + 1);\n      } else {\n        const middlePage = Math.floor(maxVisiblePages \/ 2) + 1;\n        if (currentPage &lt;= middlePage) {\n          return Array.from({ length: maxVisiblePages }, (_, i) =&gt; i + 1);\n        } else if (currentPage &gt;= totalPages - middlePage + 1) {\n          return Array.from({ length: maxVisiblePages }, (_, i) =&gt; totalPages - maxVisiblePages + i + 1);\n        } else {\n          return Array.from({ length: maxVisiblePages }, (_, i) =&gt; currentPage - middlePage + i);\n        }\n      }\n    },\n  },\n  methods: {\n    \/\/ API\u3067\u30ec\u30d3\u30e5\u30fc\u3092\u53d6\u5f97\u3059\u308b\u30e1\u30bd\u30c3\u30c9\n    getReviews() {\n      axios\n        .get(&#39;\/api\/reviews&#39;)\n        .then((response) =&gt; {\n          this.reviews = response.data.reviews;\n        })\n        .catch((error) =&gt; {\n          console.error(error);\n        });\n    },\n    \/\/ \u30da\u30fc\u30b8\u3092\u5909\u66f4\u3059\u308b\u30e1\u30bd\u30c3\u30c9\n    changePage(pageNumber) {\n      this.currentPage = pageNumber;\n    },\n  },\n  \n};\n&lt;\/script&gt;<\/code><\/pre><\/div>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3067\u3001Laravel\u5074\u304b\u3089API\u7d4c\u7531\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u3001Vue\u5074\u3067\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-left vk_balloon-type-speech vk_balloon-animation-none\"><div class=\"vk_balloon_icon\"><figure><img decoding=\"async\" class=\"vk_balloon_icon_image vk_balloon_icon_image-type-normal \" src=\"http:\/\/yutanpo-create.tech\/wp-content\/uploads\/2023\/08\/cropped-DreamShaper_v7_A_back_view_of_a_man_looking_at_a_computer_whil_3.jpg\" alt=\"\"\/><figcaption class=\"vk_balloon_icon_name\">\u3086\u305f\u3093\u307d<\/figcaption><\/figure><\/div><div class=\"vk_balloon_content_outer\"><div class=\"vk_balloon_content  has-background-color has-vk-color-custom-2-background-color \"><span class=\"vk_balloon_content_before  has-text-color has-vk-color-custom-2-color\"><\/span><span class=\"vk_balloon_content_after \"><\/span>\n<p>\u8868\u793a\u3059\u308b\u4ef6\u6570\u306f\u9069\u5b9c\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-vk-blocks-balloon vk_balloon vk_balloon-position-right vk_balloon-type-speech vk_balloon-animation-none\"><div class=\"vk_balloon_icon\"><figure><img decoding=\"async\" class=\"vk_balloon_icon_image vk_balloon_icon_image-type-normal \" src=\"http:\/\/yutanpo-create.tech\/wp-content\/uploads\/2023\/08\/\u540d\u79f0\u672a\u8a2d\u5b9a\u306e\u30c7\u30b6\u30a4\u30f3-2.png\" alt=\"\"\/><figcaption class=\"vk_balloon_icon_name\">\u306c\u3053\u5148\u751f<\/figcaption><\/figure><\/div><div class=\"vk_balloon_content_outer\"><div class=\"vk_balloon_content  has-background-color has-vk-color-custom-5-background-color \"><span class=\"vk_balloon_content_before  has-text-color has-vk-color-custom-5-color\"><\/span><span class=\"vk_balloon_content_after \"><\/span>\n<p>\u4f55\u304b\u306e\u30d2\u30f3\u30c8\u306b\u306a\u308c\u3070\u5b09\u3057\u3044\u306b\u3083<\/p>\n<\/div><\/div><\/div>\n<div class=\"veu_socialSet veu_socialSet-position-after veu_contentAddSection\"><script>window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src=\"https:\/\/platform.twitter.com\/widgets.js\";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,\"script\",\"twitter-wjs\"));<\/script><ul><li class=\"sb_facebook sb_icon\"><a class=\"sb_icon_inner\" href=\"\/\/www.facebook.com\/sharer.php?src=bm&u=https%3A%2F%2Fyutanpo-create.tech%2F%3Fp%3D119&amp;t=%E3%82%86%E3%81%9F%E3%82%93%E3%81%BD%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E6%97%A5%E8%A8%98\" target=\"_blank\" onclick=\"window.open(this.href,'FBwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;\"><span class=\"vk_icon_w_r_sns_fb icon_sns\"><\/span><span class=\"sns_txt\">Facebook<\/span><span class=\"veu_count_sns_fb\"><\/span><\/a><\/li><li class=\"sb_x_twitter sb_icon\"><a class=\"sb_icon_inner\" href=\"\/\/twitter.com\/intent\/tweet?url=https%3A%2F%2Fyutanpo-create.tech%2F%3Fp%3D119&amp;text=%E3%82%86%E3%81%9F%E3%82%93%E3%81%BD%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E6%97%A5%E8%A8%98\" target=\"_blank\" ><span class=\"vk_icon_w_r_sns_x_twitter icon_sns\"><\/span><span class=\"sns_txt\">X<\/span><\/a><\/li><li class=\"sb_hatena sb_icon\"><a class=\"sb_icon_inner\" href=\"\/\/b.hatena.ne.jp\/add?mode=confirm&url=https%3A%2F%2Fyutanpo-create.tech%2F%3Fp%3D119&amp;title=%E3%82%86%E3%81%9F%E3%82%93%E3%81%BD%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E6%97%A5%E8%A8%98\" target=\"_blank\"  onclick=\"window.open(this.href,'Hatenawindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;\"><span class=\"vk_icon_w_r_sns_hatena icon_sns\"><\/span><span class=\"sns_txt\">Hatena<\/span><span class=\"veu_count_sns_hb\"><\/span><\/a><\/li><li class=\"sb_pocket sb_icon\"><a class=\"sb_icon_inner\"  href=\"\/\/getpocket.com\/edit?url=https%3A%2F%2Fyutanpo-create.tech%2F%3Fp%3D119&title=%E3%82%86%E3%81%9F%E3%82%93%E3%81%BD%E3%81%AE%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E6%97%A5%E8%A8%98\" target=\"_blank\"  onclick=\"window.open(this.href,'Pokcetwindow','width=650,height=450,menubar=no,toolbar=no,scrollbars=yes');return false;\"><span class=\"vk_icon_w_r_sns_pocket icon_sns\"><\/span><span class=\"sns_txt\">Pocket<\/span><span class=\"veu_count_sns_pocket\"><\/span><\/a><\/li><li class=\"sb_copy sb_icon\"><button class=\"copy-button sb_icon_inner\"data-clipboard-text=\"\u3086\u305f\u3093\u307d\u306e\u30a8\u30f3\u30b8\u30cb\u30a2\u65e5\u8a18 https:\/\/yutanpo-create.tech\/?p=119\"><span class=\"vk_icon_w_r_sns_copy icon_sns\"><i class=\"fas fa-copy\"><\/i><\/span><span class=\"sns_txt\">Copy<\/span><\/button><\/li><\/ul><\/div><!-- [ \/.socialSet ] -->","protected":false},"excerpt":{"rendered":"<p>\u3053\u3093\u3061\u308f\u3002\u3086\u305f\u3093\u307d\u3067\u3059\u3002 Laravel\u306b\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u6a5f\u80fd\u304c\u3064\u3044\u3066\u304a\u308a\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306a\u3069\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3057\u3066\u6e21\u3059\u969b\u306b\u3001\u300cpaginate(10)\u300d\u3000\u306e\u3088\u3046\u306b\u3059\u308b\u3060\u3051\u3067\u81ea\u52d5\u3067\u30da\u30fc\u30b8\u30cd\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u88c5\u3057\u3066\u304f\u308c [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":120,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"vkexunit_cta_each_option":"","footnotes":""},"categories":[10,11,9,12,8],"tags":[14,13,17,16,18],"class_list":["post-119","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js","category-laravel","category-php","category-vue","category-programming","tag-laravel","tag-laravel5-8","tag-vue-js","tag-vue2","tag-18"],"_links":{"self":[{"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=\/wp\/v2\/posts\/119","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=119"}],"version-history":[{"count":20,"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=\/wp\/v2\/posts\/119\/revisions"}],"predecessor-version":[{"id":356,"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=\/wp\/v2\/posts\/119\/revisions\/356"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=\/wp\/v2\/media\/120"}],"wp:attachment":[{"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=119"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=119"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yutanpo-create.tech\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}