{"id":1259,"date":"2018-09-20T05:10:55","date_gmt":"2018-09-19T20:10:55","guid":{"rendered":"https:\/\/blog.capilano-fw.com\/?p=1259"},"modified":"2018-10-23T03:37:18","modified_gmt":"2018-10-22T18:37:18","slug":"%e5%ae%8c%e5%85%a8%e3%81%aa%e6%89%8b%e9%a0%86%ef%bc%81vuejs%e3%81%a7%e8%87%aa%e5%8b%95%e3%83%9a%e3%83%bc%e3%82%b8%e9%80%81%e3%82%8a%e3%81%99%e3%82%8b%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/blog.capilano-fw.com\/?p=1259","title":{"rendered":"\u5b8c\u5168\u306a\u624b\u9806\uff01VueJS\u3067\u81ea\u52d5\u30da\u30fc\u30b8\u9001\u308a\u3059\u308b\u65b9\u6cd5"},"content":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001\u4f55\u304b\u3068\u6700\u8fd1\u306fLaravel\u306e\u8a71\u984c\u3070\u304b\u308a\u8a18\u4e8b\u3092\u66f8\u3044\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u8fba\u3067\u4e00\u65e6\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u3001\u3064\u307e\u308aJavaScript\u306b\u76ee\u3092\u5411\u3051\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>\u305d\u3057\u3066\u3001\u3053\u306e\u30d6\u30ed\u30b0\u3067JS\u3068\u8a00\u3048\u3070\u3001\u30b7\u30f3\u30d7\u30eb\u30fb\u30b3\u30fc\u30c9\u3067\u9ad8\u6a5f\u80fd\u3092\u5b9f\u73fe\u3067\u304d\u308b\u300cVue.js\u300d\u3067\u3059\u3002<\/p>\n<p>\u305d\u3053\u3067\uff01<\/p>\n<p>\u4eca\u56de\u306f\u3001\u30b9\u30de\u30db\u3067\u3082\u305f\u307e\u306b\u898b\u308b<strong>\u300c\u81ea\u52d5\u30da\u30fc\u30b8\u9001\u308a\u300d\u3092\u5b9f\u73fe\u3059\u308b\u65b9\u6cd5\u3092\u9806\u3092\u8ffd\u3063\u3066\u8aac\u660e\u3057\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002<\/strong><\/p>\n<p>\u305c\u3072Vue\u958b\u767a\u306e\u53c2\u8003\u306b\u3057\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u306d\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-417 aligncenter\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/04\/9.png\" alt=\"\" width=\"370\" height=\"220\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/04\/9.png 370w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/04\/9-300x178.png 300w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/p>\n<h1>\u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n<p>\u4f8b\u3048\u3070\u3001\u81ea\u793e\u88fd\u54c1\u306e\u30ea\u30b9\u30c8\u304c\u4e00\u884c\u305a\u3064\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30da\u30fc\u30b8\u3092\u601d\u3044\u6d6e\u304b\u3079\u3066\u307f\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1260\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/product_list.png\" alt=\"\" width=\"327\" height=\"252\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/product_list.png 327w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/product_list-300x231.png 300w\" sizes=\"auto, (max-width: 327px) 100vw, 327px\" \/><\/p>\n<p>\u305d\u3057\u3066\u3001\u3053\u3046\u3044\u3046\u30b3\u30f3\u30c6\u30f3\u30c4\u306f\u4ef6\u6570\u304c\u591a\u304f\u306a\u3063\u3066\u304f\u308b\u3068<code>\u6b21\u3078<\/code>\u3068\u304b<code>\u524d\u3078<\/code>\u3068\u66f8\u3044\u305f\u30dc\u30bf\u30f3\u3084\u30ea\u30f3\u30af\u3067\u30da\u30fc\u30b8\u9001\u308a\u3092\u3057\u307e\u3059\u3088\u306d\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1261\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/next_and_prev_link.png\" alt=\"\" width=\"219\" height=\"144\" \/><\/p>\n<p>\u3082\u3061\u308d\u3093\u3053\u308c\u3067\u3082\u554f\u984c\u306f\u306a\u3044\u306e\u3067\u3059\u304c\u3001\u4f8b\u3048\u3070\u5546\u54c1\u7ba1\u7406\u306e\u30da\u30fc\u30b8\u3060\u3063\u305f\u308a\u3059\u308b\u3068\u6bce\u56de<code>\u6b21\u3078<\/code>\u3068\u3044\u3046\u30ea\u30f3\u30af\u3092\u30ab\u30c1\u30ab\u30c1\u3068\u30af\u30ea\u30c3\u30af\u3057\u7d9a\u3051\u308b\u5fc5\u8981\u304c\u3042\u3063\u3066\u3081\u3093\u3069\u3046\u3060\u3063\u305f\u308a\u3057\u307e\u3059\u3002<\/p>\n<p>\u305d\u3053\u3067\u3001\u4eca\u56de\u3084\u308a\u305f\u3044\u3053\u3068\u306f<strong>\u30da\u30fc\u30b8\u306e\u4e00\u756a\u4e0b\u307e\u3067\u6765\u305f\u3089\u81ea\u52d5\u7684\u306b\u6b21\u306e\u5546\u54c1\u30c7\u30fc\u30bf\u3092\u8868\u793a\u3059\u308b<\/strong>\u3001\u81ea\u52d5\u30da\u30fc\u30b8\u9001\u308a\u3092\u5b9f\u88c5\u3059\u308b\u65b9\u6cd5\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001\u6b21\u304b\u3089\u9806\u3092\u8ffd\u3063\u3066\u3069\u306e\u3088\u3046\u306b\u958b\u767a\u3057\u3066\u3044\u304f\u304b\u3092\u898b\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u203b HTML\u30b3\u30fc\u30c9\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306avue.js\u3092\u8aad\u307f\u8fbc\u3093\u3067\u304a\u3044\u3066\u304f\u3060\u3055\u3044\u3002\uff08\u3061\u306a\u307f\u306b\u3053\u308c\u306fcdn\u3067\u3059\uff09<\/p>\n<pre>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue@2.5.17\/dist\/vue.min.js\"&gt;&lt;\/script&gt;<\/pre>\n<p>\u203b \u5b9f\u884c\u74b0\u5883\u306fchrome 69 \u3067\u3059\u3002\u307e\u305fJavaScript\u30b3\u30fc\u30c9\u306f\u65b0\u3057\u3044\u66f8\u304d\u65b9\u306eES6\u3067\u66f8\u3044\u3066\u3044\u307e\u3059\u3002\u306a\u306e\u3067IE\uff11\uff11\u3067\u306f\u52d5\u304b\u306a\u3044\u3067\u3057\u3087\u3046\u30fb\u30fb\u30fb\u3082\u3046IE\u306f\u3082\u3046\u898b\u6368\u3066\u307e\u3057\u305f ^^;<\/p>\n<h1>\u5546\u54c1\u306e\u4e00\u89a7\u8868\u793a\u3092\u5b9f\u88c5\u3059\u308b<\/h1>\n<p>\u307e\u305a\u306f\u5546\u54c1\u306e\u4e00\u89a7\u3092\u8868\u793a\u3059\u308b\u90e8\u5206\u304c\u306a\u3051\u308c\u3070\u59cb\u307e\u308a\u307e\u305b\u3093\u306e\u3067\u3001\u3053\u306e\u90e8\u5206\u3092Vue\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u307e\u305aHTML\u306bVue\u306e\u30bf\u30fc\u30b2\u30c3\u30c8\u306b\u306a\u308b<code>id<\/code>\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre>&lt;div <strong>id=\"app\"<\/strong>&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>\u305d\u3057\u3066\u3001Vue\u306e\u57fa\u672c\u5f62\u3092<code>&lt;script&gt;\u301c&lt;\/script&gt;<\/code>\u30bf\u30b0\u5185\u306b\u66f8\u304d\u8fbc\u307f\u307e\u3059\u3002<code>#app<\/code>\u306f\u4e0a\u306e<code>id<\/code>\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre><strong>new Vue({<\/strong>\r\n<strong>    el: '#app'<\/strong>\r\n<strong>});<\/strong><\/pre>\n<p>\u6b21\u306b\u5fc5\u8981\u306a\u5909\u6570\u3092\u8ffd\u52a0\u3002<\/p>\n<pre>new Vue({\r\n    el: '#app',\r\n<strong>    data: {<\/strong>\r\n<strong>        products: [],<\/strong>\r\n<strong>        pageNumber: 1,<\/strong>\r\n<strong>        perPage: 25<\/strong>\r\n<strong>    }<\/strong>\r\n});<\/pre>\n<p>\u5909\u6570\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li>products\u3000\u30fb\u30fb\u30fb\u3000\u5546\u54c1\u30c7\u30fc\u30bf\u304c\u5165\u308b\u914d\u5217<\/li>\n<li>pageNumber\u3000\u30fb\u30fb\u30fb\u3000\u73fe\u5728\u306e\u30da\u30fc\u30b8\u756a\u53f7\uff08\u3053\u306e\u6570\u5b57\u304c\u81ea\u52d5\u3067\u5897\u3048\u308b\u3088\u3046\u306b\u3059\u308b\uff09<\/li>\n<li>perPage\u3000\u30fb\u30fb\u30fb\u3000\u30da\u30fc\u30b8\u3054\u3068\u306b\u4f55\u4ef6\u8868\u793a\u3059\u308b\u304b<\/li>\n<\/ul>\n<p>\u3067\u306f\u7d9a\u3044\u3066mounted()\u3092\u8ffd\u52a0\u3057\u3066\u30da\u30fc\u30b8\u306e\u6e96\u5099\u304c\u3067\u304d\u305f\u3089\u5373\u5b9f\u884c\u3055\u308c\u308b\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre>mounted() {\r\n\r\n    this.products = [];\r\n\r\n<strong>    for(let i = 1 ; i &lt;= 1000 ; i++) {<\/strong>\r\n\r\n<strong>        this.products.push('\u5546\u54c1\u540d - '+ i);<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n\r\n}<\/pre>\n<p>\u4e2d\u8eab\u306f\u3001products\u3092\u521d\u671f\u5316\u3057\u3066\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u5546\u54c1\u540d\u3092\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u3068\u3057\u3066\uff11\uff10\uff10\uff10\u500b\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u5546\u54c1\u540d &#8211; 1<\/li>\n<li>\u5546\u54c1\u540d &#8211; 2<\/li>\n<li>\u5546\u54c1\u540d &#8211; 3<\/li>\n<\/ul>\n<p>\u3067\u306f\u3053\u306e\u5546\u54c1\u30ea\u30b9\u30c8\u3092\u5168\u3066\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<br \/>\n\u914d\u5217\u3092\u3072\u3068\u3064\u305a\u3064\u53d6\u308a\u51fa\u3059\u306b\u306f\u3001<code>v-for<\/code>\u3092\u4f7f\u3044\u307e\u3059\u3002<\/p>\n<pre>&lt;div class=\"products\" <strong>v-for=\"product in products\"<\/strong> <strong>v-text=\"product\"<\/strong>&gt;&lt;\/div&gt;<\/pre>\n<p>\u305d\u3057\u3066\u3001\u3072\u3068\u3064\u305a\u3064\u53d6\u308a\u51fa\u3057\u305f<code>product<\/code>\u3092<code>v-text<\/code>\u3092\u4f7f\u3063\u3066\u8868\u793a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u5b9f\u884c\u7d50\u679c\u306f\u3053\u3046\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1262\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/continue_to_1000.png\" alt=\"\" width=\"428\" height=\"283\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/continue_to_1000.png 428w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/continue_to_1000-300x198.png 300w\" sizes=\"auto, (max-width: 428px) 100vw, 428px\" \/><\/p>\n<p>\u305d\u3046\u3067\u3059\u3002<br \/>\n\u3053\u306e\u307e\u307e\u3060\u3068\u4e00\u6c17\u306b1000\u4ef6\u8868\u793a\u3055\u308c\u3066\u3057\u307e\u3063\u3066\u3001\u30da\u30fc\u30b8\u9001\u308a\u306f\u5b9f\u88c5\u3067\u304d\u3066\u3044\u307e\u305b\u3093\u3002<\/p>\n<p>\u3067\u306f\u6b21\u306b<code>pageNubmer<\/code>\u304c\u5897\u3048\u308b\u3054\u3068\u306b\u8868\u793a\u3059\u308b\u4ef6\u6570\u3092\u5897\u3084\u3057\u3066\u3044\u304f\u30b3\u30fc\u30c9\u3064\u304f\u3063\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<h1>\u4e2d\u8eab\u304c\u81ea\u52d5\u7684\u306b\u5909\u66f4\u3055\u308c\u308b\u64ec\u4f3c\u7684\u306a\u914d\u5217\u3092\u3064\u304f\u308b<\/h1>\n<p>VueJS\u306b\u306f\u3001<strong>\u3042\u305f\u304b\u3082\u5909\u6570\u304b\u306e\u3088\u3046\u306b\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u308b\u300ccomputed\u300d\u3068\u3044\u3046\u53ef\u5909\u5f0f\u306e\u4fbf\u5229\u6a5f\u80fd\u304c\u3042\u308a\u307e\u3059\u3002<\/strong><\/p>\n<p>\u3053\u308c\u3092\u4f7f\u3063\u3066\u3001<code>pageNumber<\/code>\u304c\u5909\u308f\u308b\u3054\u3068\u306b\u5546\u54c1\u30ea\u30b9\u30c8\u306e\u30c7\u30fc\u30bf\u4ef6\u6570\u304c\u5909\u308f\u308b\u30b3\u30fc\u30c9\u3092\u66f8\u3044\u3066\u3044\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u540d\u524d\u306f<code>filteredProducts<\/code>\u3068\u3057\u307e\u3059\u3002<\/p>\n<pre>computed: {\r\n    filteredProducts() {\r\n\r\n        const itemCount = this.pageNumber * this.perPage;\r\n        let products = [];\r\n\r\n        for(let product of this.products) {\r\n\r\n            if(products.length === itemCount) {\r\n\r\n                break;\r\n\r\n            }\r\n\r\n            products.push(product);\r\n\r\n        }\r\n\r\n        return products;\r\n\r\n    }\r\n}<\/pre>\n<p>\u4e2d\u8eab\u306f\u3001<code>itemCount<\/code>\u304c\u8868\u793a\u3059\u308b\u5546\u54c1\u30ea\u30b9\u30c8\u306e\u4ef6\u6570\u3067\u3001\u4f8b\u3048\u3070\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<ul>\n<li>pageNumber\u304c\u300c\uff11\u300d\u306e\u3068\u304d\u3000\u30fb\u30fb\u30fb\u3000\u516850\u4ef6\u8868\u793a\u3059\u308b<\/li>\n<li>pageNumber\u304c\u300c\uff12\u300d\u306e\u3068\u304d\u3000\u30fb\u30fb\u30fb\u3000\u5168100\u4ef6\u8868\u793a\u3059\u308b<\/li>\n<li>pageNumber\u304c\u300c\uff13\u300d\u306e\u3068\u304d\u3000\u30fb\u30fb\u30fb\u3000\u5168150\u4ef6\u8868\u793a\u3059\u308b<\/li>\n<\/ul>\n<p>\u3064\u307e\u308a\u3001\u3053\u306e\u6570\u5b57\u306f<\/p>\n<p><strong>pageNumber\uff08\u73fe\u5728\u306e\u30da\u30fc\u30b8\u756a\u53f7\uff09\u3000\u00d7\u3000perPage\uff08\u30da\u30fc\u30b8\u3054\u3068\u306e\u4ef6\u6570\uff09 <\/strong><\/p>\n<p>\u306e\u7d50\u679c\u3068\u3044\u3046\u3053\u3068\u3067\u3059\u306d\u3002<\/p>\n<p>\u305d\u3057\u3066\u3001<code>for()<\/code>\u30eb\u30fc\u30d7\u306e\u90e8\u5206\u3067<code>products<\/code>\u304b\u3089\u30c7\u30fc\u30bf\u3092\u3072\u3068\u3064\u305a\u3064\u3068\u308a\u306a\u304c\u3089<code>products.length<\/code>\u3092\u30c1\u30a7\u30c3\u30af\u3057\u3066\u3001\u3082\u3057\u300c\u5168\u25cf\u4ef6\u300d\u306e\u6570\u5b57\u306b\u9054\u3057\u3066\u3044\u305f\u3089<code>break;<\/code>\u3067\u30eb\u30fc\u30d7\u3092\u629c\u3051\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u3046\u3059\u308b\u3053\u3068\u3067\u3001<code>pageNumber<\/code>\u306e\u6570\u5b57\u304c\u5909\u66f4\u306b\u306a\u3063\u305f\u3089\u81ea\u52d5\u7684\u306b\u5546\u54c1\u30ea\u30b9\u30c8\u306e\u4ef6\u6570\u304c\u5909\u66f4\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001\u3053\u306e\u64ec\u4f3c\u7684\u306a\u914d\u5217\u3092\u5148\u307b\u3069\u306e<code>v-for<\/code>\u3092\u4f7f\u3063\u3066\u8868\u793a\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre>&lt;div class=\"products\" <strong>v-for=\"product in filteredProducts\"<\/strong> v-text=\"product\"&gt;&lt;\/div&gt;<\/pre>\n<p>\u3053\u306e\u5b9f\u884c\u7d50\u679c\u306f\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1263\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/products_25.png\" alt=\"\" width=\"499\" height=\"446\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/products_25.png 499w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/products_25-300x268.png 300w\" sizes=\"auto, (max-width: 499px) 100vw, 499px\" \/><\/p>\n<p>\u3067\u306f\u3001\u30c6\u30b9\u30c8\u7684\u306b<code>pageNumber<\/code>\u3092<code>2<\/code>\u306b\u3057\u3066\u30ea\u30ed\u30fc\u30c9\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1264\" style=\"border: 3px solid #000;\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/products_50.png\" alt=\"\" width=\"157\" height=\"436\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/products_50.png 157w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/09\/products_50-108x300.png 108w\" sizes=\"auto, (max-width: 157px) 100vw, 157px\" \/><\/p>\n<p>50\u4ef6\u8868\u793a\u3055\u308c\u307e\u3057\u305f\u3002<br \/>\n\u8868\u793a\u90e8\u5206\u306f\u3053\u308c\u3067OK\u3067\u3059\u3002<\/p>\n<h1>\u30b9\u30af\u30ed\u30fc\u30eb\u30a4\u30d9\u30f3\u30c8\u3092\u5b9f\u88c5\u3059\u308b<\/h1>\n<p>\u3067\u306f\u3001\u6b21\u306b\u30b9\u30af\u30ed\u30fc\u30eb\u30fb\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u3066<strong>\u30da\u30fc\u30b8\u306e\u4e00\u756a\u4e0b\u306b\u6765\u305f\u3089\u30da\u30fc\u30b8\u756a\u53f7\u3092\u5897\u3084\u3059<\/strong>\u30b3\u30fc\u30c9\u3092\u3064\u304f\u308a\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre>mounted() {\r\n\r\n    \/\/ \u7701\u7565\r\n\r\n    <strong>window.addEventListener('scroll', this.pager);<\/strong>\r\n    <strong>this.pager();<\/strong>\r\n\r\n}<\/pre>\n<p>\u30a4\u30d9\u30f3\u30c8\u306f\u30da\u30fc\u30b8\u306e\u6e96\u5099\u304c\u3067\u304d\u305f\u6bb5\u968e\u3067<code>addEventListener()<\/code>\u3092\u4f7f\u3063\u3066\u30b9\u30af\u30ed\u30fc\u30eb\u30fb\u30a4\u30d9\u30f3\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u5b9f\u884c\u3059\u308b\u95a2\u6570\u306f<code>pager()<\/code>\u3067\u3059\u3002<\/p>\n<p>\u203b \u305f\u3060\u3057\u3001\u8868\u793a\u76f4\u5f8c\u306b\u8868\u793a\u4ef6\u6570\u304c\u5c11\u306a\u3044\u3068\u30b9\u30af\u30ed\u30fc\u30eb\u30d0\u30fc\u304c\u8868\u793a\u3055\u308c\u305a\u30b9\u30af\u30ed\u30fc\u30eb\u30fb\u30a4\u30d9\u30f3\u30c8\u304c\u4e00\u5207\u5b9f\u884c\u3055\u308c\u306a\u304f\u306a\u308b\u53ef\u80fd\u6027\u304c\u3042\u308b\u306e\u3067\u3001<code>pager()<\/code>\u306f\u8d77\u52d5\u5f8c\u306b\u76f4\u63a5\u5b9f\u884c\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001\u6b21\u306b<code>pager()<\/code>\u95a2\u6570\u3067\u3059\u3002<br \/>\n\u30b3\u30fc\u30c9\u3092\u66f8\u304f\u306e\u306f<code>methods: {}<\/code>\u5185\u3067\u3059\u3002<\/p>\n<pre>methods: {\r\n<strong>    pager() {<\/strong>\r\n\r\n<strong>        if(window.scrollY + window.innerHeight === document.documentElement.clientHeight) {<\/strong>\r\n\r\n<strong>            this.pageNumber++;<\/strong>\r\n\r\n<strong>        }<\/strong>\r\n\r\n<strong>    }<\/strong>\r\n},<\/pre>\n<p>\u30b9\u30af\u30ed\u30fc\u30eb\u3055\u308c\u308b\u3054\u3068\u306b\u95a2\u6570\u5185\u3067\u5b9f\u884c\u3057\u3066\u3044\u308b\u306e\u306f\u3001<code>if()<\/code>\u6587\u3092\u4f7f\u3063\u3066\u3001\u3082\u3057\u30b9\u30af\u30ed\u30fc\u30eb\u304c\u4e00\u756a\u4e0b\u307e\u3067\u6765\u3066\u3044\u305f\u3089<code>this.pageNumber++;<\/code>\u3067\u30da\u30fc\u30b8\u756a\u53f7\u3092\uff11\u5897\u3084\u3059\u3001\u3064\u307e\u308a\u8868\u793a\u4ef6\u6570\u3092\u81ea\u52d5\u7684\u306b\u5897\u3084\u3059\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3067\u3001\u81ea\u52d5\u30da\u30fc\u30b8\u9001\u308a\u90e8\u5206\u304c\u5b8c\u6210\u3067\u3059\u3002<\/p>\n<h1>\u305b\u3063\u304b\u304f\u306a\u306e\u3067\u300c\u8aad\u307f\u8fbc\u307f\u4e2d\u300d\u3082\u8868\u793a\u3059\u308b<\/h1>\n<p>\u4eca\u56de\u306f\u30c6\u30b9\u30c8\u306a\u306e\u3067\u76f4\u306b\u30c7\u30fc\u30bf\u3092\u8ffd\u52a0\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u901a\u5e38\u3067\u3057\u305f\u3089\u304a\u305d\u3089\u304fAjax\u901a\u4fe1\u306a\u3069\u3067\u30c7\u30fc\u30bf\u3092\u53d6\u5f97\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>\u305d\u3046\u3044\u3046\u5834\u5408\u306b\u306f\u3084\u306f\u308a\u3001\u4f55\u3082\u8868\u793a\u3055\u308c\u306a\u3044\u3068\u8a2a\u554f\u30e6\u30fc\u30b6\u30fc\u306f\u4e0d\u5b89\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u300c\u4eca\u30c7\u30fc\u30bf\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u3088\u300d\u3001\u3068\u8868\u793a\u3057\u3066\u3042\u3052\u308b\u3068\u89aa\u5207\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>\u3067\u306f\u3001\u3053\u308c\u3082Vue\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre>data: {\r\n    \/\/ \u7701\u7565\r\n    <strong>loading: false<\/strong>\r\n},<\/pre>\n<p>\u307e\u305a\u3001<code>loading<\/code>\u3068\u3044\u3046\u8aad\u307f\u8fbc\u307f\u4e2d\u304b\u3069\u3046\u304b\u3092\u5224\u65ad\u3059\u308b\u5909\u6570\u3092\u7528\u610f\u3057\u307e\u3059\u3002\uff08<code>loading<\/code>\u304c<code>true<\/code>\u306a\u3089\u8aad\u307f\u8fbc\u307f\u4e2d\u3068\u3044\u3046\u3053\u3068\u306a\u308a\u307e\u3059\u3002\uff09<\/p>\n<p>\u305d\u3057\u3066\u3001HTML\u5185\u306b\u4ee5\u4e0b\u306e\u3088\u3046\u306b<code>v-if<\/code>\u3092\u4f7f\u3063\u3066\u3001<code>loading<\/code>\u304c<code>true<\/code>\u306e\u3068\u304d\u3060\u3051\u8868\u793a\u3059\u308b\u30c6\u30ad\u30b9\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre>&lt;div <strong>v-if=\"loading\"<\/strong>&gt;[\u8aad\u307f\u8fbc\u307f\u4e2d...]&lt;\/div&gt;<\/pre>\n<p>\u3067\u306f\u3001\u3055\u3063\u304d\u306epager()\u306e\u4e2d\u306bloading\u304c\u5207\u308a\u66ff\u308f\u308b\u30b3\u30fc\u30c9\u3092\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre>pager() {\r\n\r\n    if(window.scrollY + window.innerHeight === document.documentElement.clientHeight) {\r\n\r\n        <strong>this.loading = true;<\/strong>\r\n<strong>        const timer = timer1 = setInterval(() =&gt; {<\/strong>\r\n\r\n<strong>            this.pageNumber++;<\/strong>\r\n<strong>            clearInterval(timer);<\/strong>\r\n<strong>            this.loading = false;<\/strong>\r\n\r\n<strong>        }, 1000);<\/strong>\r\n\r\n    }\r\n\r\n}<\/pre>\n<p>\u30c6\u30b9\u30c8\u306a\u306e\u3067\u3001<code>setInterval()<\/code>\u3067[\u8aad\u307f\u8fbc\u307f\u4e2d]\u3092\uff11\u79d2\uff08\uff1d1000\u30df\u30ea\u79d2\uff09\u9593\u3060\u3051\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<h1>\u4eca\u56de\u306e\u30b3\u30fc\u30c9\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3059\u308b<\/h1>\n<p>\u4eca\u56de\u306e\u8a18\u4e8b\u7528\u306b\u4f5c\u3063\u305f\u30b3\u30fc\u30c9\u3092\u7121\u6599\u3067\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3067\u304d\u307e\u3059\u3002VueJS\u306fcdn\u3067\u8aad\u307f\u8fbc\u3093\u3067\u3044\u308b\u306e\u3067\u3001zip\u30d5\u30a1\u30a4\u30eb\u3092\u5c55\u958b\u3057\u3066html\u30d5\u30a1\u30a4\u30eb\u3092\u30d6\u30e9\u30a6\u30b6\u3067\u8868\u793a\u3059\u308b\u3060\u3051\u3067\u30b5\u30f3\u30d7\u30eb\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3088\uff01<\/p>\n<a  data-e-Disable-Page-Transition=\"true\" class=\"download-link\" title=\"\" href=\"https:\/\/blog.capilano-fw.com?download=1265&amp;tmstv=1777535405\" rel=\"nofollow\" id=\"download-link-1265\" data-redirect=\"false\" >\n\tVueJS\u3067\u81ea\u52d5\u30da\u30fc\u30b8\u9001\u308a\u3059\u308b\u30b5\u30f3\u30d7\u30eb\u30b3\u30fc\u30c9<\/a>\n\n<h1>\u304a\u308f\u308a\u306b<\/h1>\n<p>\u4eca\u56de\u306fGoogle Chrome\u5411\u3051\u3068\u3057\u3066ES6\u3067\u30b3\u30fc\u30c9\u3092\u66f8\u304d\u307e\u3057\u305f\u304c\u3001\u3084\u306f\u308a\u3053\u3063\u3061\u306e\u65b9\u304c\u30b3\u30fc\u30c9\u91cf\u304c\u5c11\u306a\u304f\u306a\u3063\u3066\u3044\u3044\u3067\u3059\u306d\u3002<\/p>\n<p>\u3057\u304b\u3082\u3001\u30a2\u30ed\u30fc\u95a2\u6570\u306e\u4e2d\u3067\u3082<code>this<\/code>\u304c\u666e\u901a\u306b\u4f7f\u3048\u308b\u306e\u3067VueJS\u3068\u306e\u76f8\u6027\u3082\u3044\u3044\u3067\u3059\u3002<\/p>\n<p>\u307e\u3041\u3001<code>webpack<\/code>\u3068\u304b<code>gulp<\/code>\u3068\u3044\u3063\u305f\u30bf\u30b9\u30af\u30e9\u30f3\u30ca\u30fc\u3092\u4f7f\u3048\u3070\u3053\u306e\u554f\u984c\u306e\u89e3\u6c7a\u306f\u7c21\u5358\u306a\u3093\u3067\u3057\u3087\u3046\u3051\u3069\u3001\u500b\u4eba\u7684\u306a\u610f\u898b\u3067\u8a00\u3046\u3068\u3001\u307b\u3093\u306e\u3061\u3087\u3063\u3068\u3057\u305f\u30c6\u30ad\u30b9\u30c8\u306e\u5909\u66f4\u3060\u3051\u3067\u30bf\u30b9\u30af\u30e9\u30f3\u30ca\u30fc\u3092\u8d77\u52d5\u3057\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u72b6\u6cc1\u306f\u3069\u3046\u306a\u306e\u304b\u306a\uff1f\uff1f\u3068\u601d\u3046\u30d5\u30b7\u304c\u3042\u3063\u305f\u308a\u3057\u307e\u3059\u3002\uff08CSS\u3092\u5909\u66f4\u3059\u308b\u5834\u5408\u306f\u30c7\u30b6\u30a4\u30ca\u30fc\u3055\u3093\u306b\u3082\u30bf\u30b9\u30af\u30e9\u30f3\u30ca\u30fc\u306e\u5229\u7528\u3092\u5f37\u5236\u3059\u308b\u3053\u3068\u306b\u306a\u308b\u308f\u3051\u3067\u3059\u3057\u306d\u30fb\u30fb\u30fb\uff09<\/p>\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u305c\u3072IE\u306b\u306f\u5f15\u9000\u3057\u3066\u3082\u3089\u3063\u3066edge\u306b\u5b8c\u5168\u4ee5\u964d\u3059\u308b\u65e5\u3092\u5fc3\u5f85\u3061\u306b\u3057\u3066\u3044\u307e\u3059\u3002\uff08IE\u3057\u304b\u52d5\u304b\u306a\u3044\u30a6\u30a7\u30d6\u30a2\u30d7\u30ea\u3092\u4f7f\u3063\u3066\u696d\u52d9\u3092\u3057\u3066\u3044\u308b\u4f1a\u793e\u3055\u3093\u306f\u7d76\u5bfe\u53cd\u5bfe\u3067\u3057\u3087\u3046\u3051\u3069\u306d\u30fb\u30fb\u30fb ^^;\uff09<\/p>\n<p>\u3068\u3044\u3046\u3053\u3068\u3067\u3001\u4eca\u56de\u306fES6\u3067Vue\u3092\u66f8\u3044\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n<p>\u305c\u3072\u53c2\u8003\u306b\u306a\u308c\u3070\u5e78\u3044\u3067\u3059\uff01<\/p>\n<p>\u3067\u306f\u3067\u306f\u301c\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-418 aligncenter\" src=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/04\/35.png\" alt=\"\" width=\"370\" height=\"240\" srcset=\"https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/04\/35.png 370w, https:\/\/blog.capilano-fw.com\/wp-content\/uploads\/2018\/04\/35-300x195.png 300w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3055\u3066\u3055\u3066\u3001\u4f55\u304b\u3068\u6700\u8fd1\u306fLaravel\u306e\u8a71\u984c\u3070\u304b\u308a\u8a18\u4e8b\u3092\u66f8\u3044\u3066\u3044\u308b\u306e\u3067\u3001\u3053\u306e\u8fba\u3067\u4e00\u65e6\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b5\u30a4\u30c9\u3001\u3064\u307e\u308aJavaScript\u306b\u76ee\u3092\u5411\u3051\u3066\u307f\u308b\u3053\u3068\u306b\u3057\u307e\u3057\u305f\u3002 &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/blog.capilano-fw.com\/?p=1259\" class=\"more-link\"><span class=\"screen-reader-text\">&#8220;\u5b8c\u5168\u306a\u624b\u9806\uff01VueJS\u3067\u81ea\u52d5\u30da\u30fc\u30b8\u9001\u308a\u3059\u308b\u65b9\u6cd5&#8221; \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":1270,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,12,97],"tags":[87],"class_list":["post-1259","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-vue-js","category-97","tag-87"],"_links":{"self":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/1259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1259"}],"version-history":[{"count":5,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/1259\/revisions"}],"predecessor-version":[{"id":1715,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/posts\/1259\/revisions\/1715"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=\/wp\/v2\/media\/1270"}],"wp:attachment":[{"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.capilano-fw.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}