[{"data":1,"prerenderedAt":22841},["ShallowReactive",2],{"tag-js-2":3},{"count":4,"content":5},30,[6,1800,5919,10205,11423,14933,16574,18349,20372,22052],{"id":7,"title":8,"body":9,"category":1786,"createdAt":1788,"description":1789,"extension":1790,"index":1791,"meta":1792,"navigation":248,"path":1793,"publish":248,"seo":1794,"series":1791,"seriesTitle":1791,"stem":1795,"tag":1796,"thumbnail":1791,"updatedAt":1791,"__hash__":1799},"articles\u002Farticles\u002Fjs-deep-copy.md","jsで配列内のオブジェクトの値が連動してしまう原因と対処法",{"type":10,"value":11,"toc":1774},"minimark",[12,21,192,206,210,218,341,348,353,356,361,364,369,376,389,391,399,402,602,625,683,686,688,691,694,703,707,718,887,890,894,906,1089,1096,1305,1308,1312,1322,1329,1519,1522,1526,1529,1584,1587,1767,1770],[13,14,15,16,20],"p",{},"こんにちはjunです。vue.jsとかでアプリを作るととき、一覧ページや複数個のデータを出力する時はオブジェクトが内包された配列データを使用することが多いと思います。例としては以下のような「記事一覧」用の",[17,18,19],"code",{},"posts","データです。",[22,23,28],"pre",{"className":24,"code":25,"language":26,"meta":27,"style":27},"language-javascript shiki shiki-themes material-theme-ocean","const posts = [\n    {id:1,title:\"記事タイトル１\",content:\"...\"},\n    {id:2,title:\"記事タイトル２\",content:\"...\"},\n    {id:3,title:\"記事タイトル３\",content:\"...\"},\n    \u002F\u002F ...\n]\n","javascript","",[17,29,30,50,101,140,179,186],{"__ignoreMap":27},[31,32,35,39,43,47],"span",{"class":33,"line":34},"line",1,[31,36,38],{"class":37},"sJ14y","const",[31,40,42],{"class":41},"s0W1g"," posts ",[31,44,46],{"class":45},"sAklC","=",[31,48,49],{"class":41}," [\n",[31,51,53,56,60,63,67,70,73,75,78,82,84,86,89,91,93,96,98],{"class":33,"line":52},2,[31,54,55],{"class":45},"    {",[31,57,59],{"class":58},"s-wAU","id",[31,61,62],{"class":45},":",[31,64,66],{"class":65},"sx098","1",[31,68,69],{"class":45},",",[31,71,72],{"class":58},"title",[31,74,62],{"class":45},[31,76,77],{"class":45},"\"",[31,79,81],{"class":80},"sfyAc","記事タイトル１",[31,83,77],{"class":45},[31,85,69],{"class":45},[31,87,88],{"class":58},"content",[31,90,62],{"class":45},[31,92,77],{"class":45},[31,94,95],{"class":80},"...",[31,97,77],{"class":45},[31,99,100],{"class":45},"},\n",[31,102,104,106,108,110,113,115,117,119,121,124,126,128,130,132,134,136,138],{"class":33,"line":103},3,[31,105,55],{"class":45},[31,107,59],{"class":58},[31,109,62],{"class":45},[31,111,112],{"class":65},"2",[31,114,69],{"class":45},[31,116,72],{"class":58},[31,118,62],{"class":45},[31,120,77],{"class":45},[31,122,123],{"class":80},"記事タイトル２",[31,125,77],{"class":45},[31,127,69],{"class":45},[31,129,88],{"class":58},[31,131,62],{"class":45},[31,133,77],{"class":45},[31,135,95],{"class":80},[31,137,77],{"class":45},[31,139,100],{"class":45},[31,141,143,145,147,149,152,154,156,158,160,163,165,167,169,171,173,175,177],{"class":33,"line":142},4,[31,144,55],{"class":45},[31,146,59],{"class":58},[31,148,62],{"class":45},[31,150,151],{"class":65},"3",[31,153,69],{"class":45},[31,155,72],{"class":58},[31,157,62],{"class":45},[31,159,77],{"class":45},[31,161,162],{"class":80},"記事タイトル３",[31,164,77],{"class":45},[31,166,69],{"class":45},[31,168,88],{"class":58},[31,170,62],{"class":45},[31,172,77],{"class":45},[31,174,95],{"class":80},[31,176,77],{"class":45},[31,178,100],{"class":45},[31,180,182],{"class":33,"line":181},5,[31,183,185],{"class":184},"sC9rS","    \u002F\u002F ...\n",[31,187,189],{"class":33,"line":188},6,[31,190,191],{"class":41},"]\n",[13,193,194,195,200,201,205],{},"今回の記事で解説する内容は上記のような配列を別の変数に格納した時、スプレッド構文を使用して配列を生成したにもかかわらず、オブジェクト内の値が連動してしまったときの対処と原因について解説します。「どんなデータの状況だったか」という実装背景から話すので、ささっと原因からは知りたい人は「",[196,197,199],"a",{"href":198},"#%E5%8E%9F%E5%9B%A0","原因","」へ、解決方法だけ知りたい人は「",[196,202,204],{"href":203},"#%E5%AF%BE%E5%87%A6%E6%B3%95","対処法","」へ移動してください。",[207,208,209],"h2",{"id":209},"実装背景",[13,211,212,213,217],{},"vue.jsで編集画面を実装していた時です。編集画面は「入力された新しい値」と「登録済みの値（DBにある値）」を持たせておき、一部でその差分を確認できるようにするという",[214,215,216],"del",{},"面倒な","実装がありました。内容としては「1日の予定表」みたいなもので、以下のようなデータ構造です。",[22,219,221],{"className":24,"code":220,"language":26,"meta":27,"style":27},"const DATA_FROM_DB = response.data;\n\nconsole.log(DATA_FROM_DB);\n\u002F**\n{\n    date:\"2021-11-01\", \n    memo:\"...\",\n    todo:   \u002F\u002F この日の予定を入れる。\n    [\n        {id:1,content:\"AAAA\"},\n        {id:2,content:\"BBBB\"},\n        {id:3,content:\"CCCC\"},\n        ...\n    ]\n}\n**\u002F\n\n",[17,222,223,244,250,266,271,276,281,287,293,299,305,311,317,323,329,335],{"__ignoreMap":27},[31,224,225,227,230,232,235,238,241],{"class":33,"line":34},[31,226,38],{"class":37},[31,228,229],{"class":41}," DATA_FROM_DB ",[31,231,46],{"class":45},[31,233,234],{"class":41}," response",[31,236,237],{"class":45},".",[31,239,240],{"class":41},"data",[31,242,243],{"class":45},";\n",[31,245,246],{"class":33,"line":52},[31,247,249],{"emptyLinePlaceholder":248},true,"\n",[31,251,252,255,257,261,264],{"class":33,"line":103},[31,253,254],{"class":41},"console",[31,256,237],{"class":45},[31,258,260],{"class":259},"sdLwU","log",[31,262,263],{"class":41},"(DATA_FROM_DB)",[31,265,243],{"class":45},[31,267,268],{"class":33,"line":142},[31,269,270],{"class":184},"\u002F**\n",[31,272,273],{"class":33,"line":181},[31,274,275],{"class":184},"{\n",[31,277,278],{"class":33,"line":188},[31,279,280],{"class":184},"    date:\"2021-11-01\", \n",[31,282,284],{"class":33,"line":283},7,[31,285,286],{"class":184},"    memo:\"...\",\n",[31,288,290],{"class":33,"line":289},8,[31,291,292],{"class":184},"    todo:   \u002F\u002F この日の予定を入れる。\n",[31,294,296],{"class":33,"line":295},9,[31,297,298],{"class":184},"    [\n",[31,300,302],{"class":33,"line":301},10,[31,303,304],{"class":184},"        {id:1,content:\"AAAA\"},\n",[31,306,308],{"class":33,"line":307},11,[31,309,310],{"class":184},"        {id:2,content:\"BBBB\"},\n",[31,312,314],{"class":33,"line":313},12,[31,315,316],{"class":184},"        {id:3,content:\"CCCC\"},\n",[31,318,320],{"class":33,"line":319},13,[31,321,322],{"class":184},"        ...\n",[31,324,326],{"class":33,"line":325},14,[31,327,328],{"class":184},"    ]\n",[31,330,332],{"class":33,"line":331},15,[31,333,334],{"class":184},"}\n",[31,336,338],{"class":33,"line":337},16,[31,339,340],{"class":184},"**\u002F\n",[13,342,343,344,347],{},"上記データの ",[17,345,346],{},"DATA_FROM_DB.todo"," の変更前のデータを確認できるようにする必要があります。実装のためには別の定数なりに格納しておく必要があります。私はもちろん「参照渡し」・「値渡し」の概念は知っていたので、",[13,349,350],{},[17,351,352],{},"const OLD_TODO_DATA = DATA_FROM_DB.todo;",[13,354,355],{},"なんてことせず、",[13,357,358],{},[17,359,360],{},"const OLD_TODO_DATA = [...DATA_FROM_DB.todo];",[13,362,363],{},"とスプレッド構文を使用して新しく配列を生成しました。これで大丈夫だろと思っていましたが。。",[365,366,368],"h3",{"id":367},"事件は起きた","事件は起きた。",[13,370,371,372,375],{},"新しいTODOと元のTODOを画面上に表示させて、TODO編集をテストしていた時です。新しくTODOを変更しているはずなに、古い ",[17,373,374],{},"OLD_TODO_DATA","から表示している内容も同じ変更した値に切り替わっていました。つまり値が連動していたのです。「WHY?」と声を出してしまいました。開発ツールで見ていても同じ値になっていることが確認できました。値が参照渡しされているとすぐに気づきましたが、「スプレッド構文を使用したのに...」と対処方法ずっと考えていました。",[377,378,382,383,388],"div",{"className":379},[380,381],"alert","alert-info","\nここでは値渡しと参照渡しの概念は解説しません。知らない方は",[196,384,387],{"target":385,"href":386},"_blank","https:\u002F\u002Fwww.google.com\u002Fsearch?q=js+%E5%80%A4%E6%B8%A1%E3%81%97+%E5%8F%82%E7%85%A7%E6%B8%A1%E3%81%97&oq=js+%E5%80%A4%E6%B8%A1%E3%81%97+%E5%8F%82%E7%85%A7%E6%B8%A1%E3%81%97&aqs=chrome..69i57.290j0j7&sourceid=chrome&ie=UTF-8","「js 値渡し 参照渡し」","でググってください。\n",[207,390,199],{"id":199},[13,392,393,394,398],{},"原因は内包されたオブジェクトが参照渡しされていたからなのです。スプレッド構文は使用しましたが、これはあくまで",[395,396,397],"strong",{},"別の配列","を作っただけであり、中身のオブジェクトの参照は維持されて（コピー元を参照して）いたのです。",[13,400,401],{},"以下のような実験をコンソールでしてみます。",[22,403,405],{"className":24,"code":404,"filename":254,"language":26,"meta":27,"style":27},"> const origin =[{id:1,content:\"1111\"},{id:2,content:\"2222\"}];\n\n> const passbyval = origin;\n\n> const spred = [...origin];\n\n> origin === passbyval;\n\u002F\u002F true\n\n> origin === spred;\n\u002F\u002F false\n\n> origin[0] === spred[0];\n\u002F\u002F true\n\u002F\u002F WHY!?\n",[17,406,407,475,479,495,499,520,524,538,543,547,560,565,569,593,597],{"__ignoreMap":27},[31,408,409,412,415,418,420,423,426,428,430,432,434,436,438,440,443,445,448,450,452,454,456,458,460,462,465,467,470,473],{"class":33,"line":34},[31,410,411],{"class":45},">",[31,413,414],{"class":37}," const",[31,416,417],{"class":41}," origin ",[31,419,46],{"class":45},[31,421,422],{"class":41},"[",[31,424,425],{"class":45},"{",[31,427,59],{"class":58},[31,429,62],{"class":45},[31,431,66],{"class":65},[31,433,69],{"class":45},[31,435,88],{"class":58},[31,437,62],{"class":45},[31,439,77],{"class":45},[31,441,442],{"class":80},"1111",[31,444,77],{"class":45},[31,446,447],{"class":45},"},{",[31,449,59],{"class":58},[31,451,62],{"class":45},[31,453,112],{"class":65},[31,455,69],{"class":45},[31,457,88],{"class":58},[31,459,62],{"class":45},[31,461,77],{"class":45},[31,463,464],{"class":80},"2222",[31,466,77],{"class":45},[31,468,469],{"class":45},"}",[31,471,472],{"class":41},"]",[31,474,243],{"class":45},[31,476,477],{"class":33,"line":52},[31,478,249],{"emptyLinePlaceholder":248},[31,480,481,483,485,488,490,493],{"class":33,"line":103},[31,482,411],{"class":45},[31,484,414],{"class":37},[31,486,487],{"class":41}," passbyval ",[31,489,46],{"class":45},[31,491,492],{"class":41}," origin",[31,494,243],{"class":45},[31,496,497],{"class":33,"line":142},[31,498,249],{"emptyLinePlaceholder":248},[31,500,501,503,505,508,510,513,515,518],{"class":33,"line":181},[31,502,411],{"class":45},[31,504,414],{"class":37},[31,506,507],{"class":41}," spred ",[31,509,46],{"class":45},[31,511,512],{"class":41}," [",[31,514,95],{"class":45},[31,516,517],{"class":41},"origin]",[31,519,243],{"class":45},[31,521,522],{"class":33,"line":188},[31,523,249],{"emptyLinePlaceholder":248},[31,525,526,528,530,533,536],{"class":33,"line":283},[31,527,411],{"class":45},[31,529,417],{"class":41},[31,531,532],{"class":45},"===",[31,534,535],{"class":41}," passbyval",[31,537,243],{"class":45},[31,539,540],{"class":33,"line":289},[31,541,542],{"class":184},"\u002F\u002F true\n",[31,544,545],{"class":33,"line":295},[31,546,249],{"emptyLinePlaceholder":248},[31,548,549,551,553,555,558],{"class":33,"line":301},[31,550,411],{"class":45},[31,552,417],{"class":41},[31,554,532],{"class":45},[31,556,557],{"class":41}," spred",[31,559,243],{"class":45},[31,561,562],{"class":33,"line":307},[31,563,564],{"class":184},"\u002F\u002F false\n",[31,566,567],{"class":33,"line":313},[31,568,249],{"emptyLinePlaceholder":248},[31,570,571,573,576,579,582,584,587,589,591],{"class":33,"line":319},[31,572,411],{"class":45},[31,574,575],{"class":41}," origin[",[31,577,578],{"class":65},"0",[31,580,581],{"class":41},"] ",[31,583,532],{"class":45},[31,585,586],{"class":41}," spred[",[31,588,578],{"class":65},[31,590,472],{"class":41},[31,592,243],{"class":45},[31,594,595],{"class":33,"line":325},[31,596,542],{"class":184},[31,598,599],{"class":33,"line":331},[31,600,601],{"class":184},"\u002F\u002F WHY!?\n",[13,603,604,605,608,609,612,613,616,617,620,621,624],{},"上記が示すとおり、スプレッド構文を使用することで配列としては別物の",[17,606,607],{},"origin === copy"," は",[17,610,611],{},"false","となり、値渡しの",[17,614,615],{},"origin === passbyval ","は",[17,618,619],{},"true","となります。ただし同じindexのオブジェクトを比較すると、なんと同じになっています。値を変えてみると",[17,622,623],{},"spred","も変更されているのが分かります。",[22,626,628],{"className":24,"code":627,"filename":254,"language":26,"meta":27,"style":27},"> origin[0].content = \"changed!\";\n\n> spred[0];\n\u002F\u002F {id: 1, content: 'changed!'}\n\u002F\u002F contentが変更されている\n",[17,629,630,657,661,673,678],{"__ignoreMap":27},[31,631,632,634,636,638,640,642,645,647,650,653,655],{"class":33,"line":34},[31,633,411],{"class":45},[31,635,575],{"class":41},[31,637,578],{"class":65},[31,639,472],{"class":41},[31,641,237],{"class":45},[31,643,644],{"class":41},"content ",[31,646,46],{"class":45},[31,648,649],{"class":45}," \"",[31,651,652],{"class":80},"changed!",[31,654,77],{"class":45},[31,656,243],{"class":45},[31,658,659],{"class":33,"line":52},[31,660,249],{"emptyLinePlaceholder":248},[31,662,663,665,667,669,671],{"class":33,"line":103},[31,664,411],{"class":45},[31,666,586],{"class":41},[31,668,578],{"class":65},[31,670,472],{"class":41},[31,672,243],{"class":45},[31,674,675],{"class":33,"line":142},[31,676,677],{"class":184},"\u002F\u002F {id: 1, content: 'changed!'}\n",[31,679,680],{"class":33,"line":181},[31,681,682],{"class":184},"\u002F\u002F contentが変更されている\n",[13,684,685],{},"これが今回起きた原因です。つまり一応スプレッド構文を使用するのは配列の値をコピーするのでは確かに正しいのですが、今回のようなオブジェクトが内包されている場合は別の手法が必要です。",[207,687,204],{"id":204},[13,689,690],{},"さて上記のように配列にオブジェクトが内包されている場合は、オブジェクトの参照が維持されたままになるのは確認できました。ではスプレッド構文以外にどうやって中身を値渡しできるでしょうか？",[13,692,693],{},"この時とられる方法としては「ディープコピー」があります。今回のように配列内のオブジェクトも値渡ししたいとき、つまり配列の中の深いとこまでマルッと別物としてコピーする処理をディープコピーと言います。",[377,695,698,699,702],{"className":696},[380,697],"alert-warning","\nvanilla ES6に",[17,700,701],{},"Array.prototype.deepcopy()","みたいなディープコピーを一発で行う関数はありません。以下の３つテクニックを使用します。\n",[365,704,706],{"id":705},"_1jsonstringifyを使う","1:JSON.stringifyを使う",[13,708,709,710,713,714,717],{},"手取り早いのは",[17,711,712],{},"JSON.stringify()","を使用してコピー元をJSONにして、すぐに",[17,715,716],{},"JSON.parse()","を使用して元に戻します。この際、デコードしたJSONは全く新しい値となるので参照を断ち切ることができます。",[22,719,721],{"className":24,"code":720,"filename":254,"language":26,"meta":27,"style":27},"> const origin =[{id:1,content:\"1111\"},{id:2,content:\"2222\"}];\n\n> const copyjson = JSON.prase(JSON.stringify(origin));\n\n> copyjson;\n\u002F\u002F [{id:1,content:\"1111\"},{id:2,content:\"2222\"}]\n\n> origin === copyjson;\n\u002F\u002F false\n\n> origin[0] === copyjson[0]\n\u002F\u002F false\n\u002F\u002F よし！\n",[17,722,723,781,785,817,821,830,835,839,851,855,859,878,882],{"__ignoreMap":27},[31,724,725,727,729,731,733,735,737,739,741,743,745,747,749,751,753,755,757,759,761,763,765,767,769,771,773,775,777,779],{"class":33,"line":34},[31,726,411],{"class":45},[31,728,414],{"class":37},[31,730,417],{"class":41},[31,732,46],{"class":45},[31,734,422],{"class":41},[31,736,425],{"class":45},[31,738,59],{"class":58},[31,740,62],{"class":45},[31,742,66],{"class":65},[31,744,69],{"class":45},[31,746,88],{"class":58},[31,748,62],{"class":45},[31,750,77],{"class":45},[31,752,442],{"class":80},[31,754,77],{"class":45},[31,756,447],{"class":45},[31,758,59],{"class":58},[31,760,62],{"class":45},[31,762,112],{"class":65},[31,764,69],{"class":45},[31,766,88],{"class":58},[31,768,62],{"class":45},[31,770,77],{"class":45},[31,772,464],{"class":80},[31,774,77],{"class":45},[31,776,469],{"class":45},[31,778,472],{"class":41},[31,780,243],{"class":45},[31,782,783],{"class":33,"line":52},[31,784,249],{"emptyLinePlaceholder":248},[31,786,787,789,791,794,796,799,801,804,807,809,812,815],{"class":33,"line":103},[31,788,411],{"class":45},[31,790,414],{"class":37},[31,792,793],{"class":41}," copyjson ",[31,795,46],{"class":45},[31,797,798],{"class":41}," JSON",[31,800,237],{"class":45},[31,802,803],{"class":259},"prase",[31,805,806],{"class":41},"(JSON",[31,808,237],{"class":45},[31,810,811],{"class":259},"stringify",[31,813,814],{"class":41},"(origin))",[31,816,243],{"class":45},[31,818,819],{"class":33,"line":142},[31,820,249],{"emptyLinePlaceholder":248},[31,822,823,825,828],{"class":33,"line":181},[31,824,411],{"class":45},[31,826,827],{"class":41}," copyjson",[31,829,243],{"class":45},[31,831,832],{"class":33,"line":188},[31,833,834],{"class":184},"\u002F\u002F [{id:1,content:\"1111\"},{id:2,content:\"2222\"}]\n",[31,836,837],{"class":33,"line":283},[31,838,249],{"emptyLinePlaceholder":248},[31,840,841,843,845,847,849],{"class":33,"line":289},[31,842,411],{"class":45},[31,844,417],{"class":41},[31,846,532],{"class":45},[31,848,827],{"class":41},[31,850,243],{"class":45},[31,852,853],{"class":33,"line":295},[31,854,564],{"class":184},[31,856,857],{"class":33,"line":301},[31,858,249],{"emptyLinePlaceholder":248},[31,860,861,863,865,867,869,871,874,876],{"class":33,"line":307},[31,862,411],{"class":45},[31,864,575],{"class":41},[31,866,578],{"class":65},[31,868,581],{"class":41},[31,870,532],{"class":45},[31,872,873],{"class":41}," copyjson[",[31,875,578],{"class":65},[31,877,191],{"class":41},[31,879,880],{"class":33,"line":313},[31,881,564],{"class":184},[31,883,884],{"class":33,"line":319},[31,885,886],{"class":184},"\u002F\u002F よし！\n",[13,888,889],{},"JSONエンコードしてデコードする必要はありますが、中身がなんであろうが関係なく展開できるのは良いところです。",[365,891,893],{"id":892},"_2スプレッドとmapを組み合わせる使用箇所が限定的なので微妙","2:スプレッドとmap()を組み合わせる（使用箇所が限定的なので微妙）",[13,895,896,897,905],{},"スプレッド構文はオブジェクトにも使用できます。しかし今回は配列内にいるのが厄介です。そんな時は ",[196,898,902],{"href":899,"rel":900},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects\u002FArray\u002Fmap",[901],"nofollow",[17,903,904],{},"map()","を使用して各々のオブジェクトを展開して、新しい配列を生成します。",[22,907,909],{"className":24,"code":908,"filename":254,"language":26,"meta":27,"style":27},"> const origin =[{id:1,content:\"1111\"},{id:2,content:\"2222\"}];\n\n> const copymap = origin.map(obj => {return {...obj}});\n\n> copymap;\n\u002F\u002F [{id:1,content:\"1111\"},{id:2,content:\"2222\"}]\n\n> origin === copymap;\n\u002F\u002F false\n\n> origin[0] === copymap[0]\n\u002F\u002F false\n\u002F\u002F よし！\n",[17,910,911,969,973,1021,1025,1034,1038,1042,1054,1058,1062,1081,1085],{"__ignoreMap":27},[31,912,913,915,917,919,921,923,925,927,929,931,933,935,937,939,941,943,945,947,949,951,953,955,957,959,961,963,965,967],{"class":33,"line":34},[31,914,411],{"class":45},[31,916,414],{"class":37},[31,918,417],{"class":41},[31,920,46],{"class":45},[31,922,422],{"class":41},[31,924,425],{"class":45},[31,926,59],{"class":58},[31,928,62],{"class":45},[31,930,66],{"class":65},[31,932,69],{"class":45},[31,934,88],{"class":58},[31,936,62],{"class":45},[31,938,77],{"class":45},[31,940,442],{"class":80},[31,942,77],{"class":45},[31,944,447],{"class":45},[31,946,59],{"class":58},[31,948,62],{"class":45},[31,950,112],{"class":65},[31,952,69],{"class":45},[31,954,88],{"class":58},[31,956,62],{"class":45},[31,958,77],{"class":45},[31,960,464],{"class":80},[31,962,77],{"class":45},[31,964,469],{"class":45},[31,966,472],{"class":41},[31,968,243],{"class":45},[31,970,971],{"class":33,"line":52},[31,972,249],{"emptyLinePlaceholder":248},[31,974,975,977,979,982,984,986,988,991,994,998,1001,1004,1008,1011,1013,1016,1019],{"class":33,"line":103},[31,976,411],{"class":45},[31,978,414],{"class":37},[31,980,981],{"class":41}," copymap ",[31,983,46],{"class":45},[31,985,492],{"class":41},[31,987,237],{"class":45},[31,989,990],{"class":259},"map",[31,992,993],{"class":41},"(",[31,995,997],{"class":996},"s7ZW3","obj",[31,999,1000],{"class":37}," =>",[31,1002,1003],{"class":45}," {",[31,1005,1007],{"class":1006},"s6cf3","return",[31,1009,1010],{"class":45}," {...",[31,1012,997],{"class":41},[31,1014,1015],{"class":45},"}}",[31,1017,1018],{"class":41},")",[31,1020,243],{"class":45},[31,1022,1023],{"class":33,"line":142},[31,1024,249],{"emptyLinePlaceholder":248},[31,1026,1027,1029,1032],{"class":33,"line":181},[31,1028,411],{"class":45},[31,1030,1031],{"class":41}," copymap",[31,1033,243],{"class":45},[31,1035,1036],{"class":33,"line":188},[31,1037,834],{"class":184},[31,1039,1040],{"class":33,"line":283},[31,1041,249],{"emptyLinePlaceholder":248},[31,1043,1044,1046,1048,1050,1052],{"class":33,"line":289},[31,1045,411],{"class":45},[31,1047,417],{"class":41},[31,1049,532],{"class":45},[31,1051,1031],{"class":41},[31,1053,243],{"class":45},[31,1055,1056],{"class":33,"line":295},[31,1057,564],{"class":184},[31,1059,1060],{"class":33,"line":301},[31,1061,249],{"emptyLinePlaceholder":248},[31,1063,1064,1066,1068,1070,1072,1074,1077,1079],{"class":33,"line":307},[31,1065,411],{"class":45},[31,1067,575],{"class":41},[31,1069,578],{"class":65},[31,1071,581],{"class":41},[31,1073,532],{"class":45},[31,1075,1076],{"class":41}," copymap[",[31,1078,578],{"class":65},[31,1080,191],{"class":41},[31,1082,1083],{"class":33,"line":313},[31,1084,564],{"class":184},[31,1086,1087],{"class":33,"line":319},[31,1088,886],{"class":184},[13,1090,1091,1092,1095],{},"JSONを使うよりスマートですが、配列内がオブジェクト・配列といったiterableなものでないと使えません。今使用した",[17,1093,1094],{},"origin","のような簡単な構成であればいいですが、途中で文字列があったりなど、中身が全てiterableである保証がない場合はエラーが起きる可能性があります。あと以下の様にオブジェクトの中にオブジェクトがあるネストした場合はディープコピーできません！！",[22,1097,1099],{"className":24,"code":1098,"filename":254,"language":26,"meta":27,"style":27},"> const origin =[{id:1,content:{summery:\"detail1\",detail:\"detail1\"}},{id:2,content:{summery:\"detail2\",detail:\"detail2\"}},];\n\n> const copymap = origin.map(obj => {return {...obj}});\n\n> origin[0] === copymap[0]\n\u002F\u002F false\n\n> origin[0].content === copymap[0].content;\n\u002F\u002F true\n\u002F\u002F んっっ！？\n",[17,1100,1101,1198,1202,1238,1242,1260,1264,1268,1296,1300],{"__ignoreMap":27},[31,1102,1103,1105,1107,1109,1111,1113,1115,1117,1119,1121,1123,1125,1128,1131,1133,1135,1138,1140,1142,1145,1147,1149,1151,1153,1156,1158,1160,1162,1164,1166,1168,1170,1172,1174,1177,1179,1181,1183,1185,1187,1189,1191,1194,1196],{"class":33,"line":34},[31,1104,411],{"class":45},[31,1106,414],{"class":37},[31,1108,417],{"class":41},[31,1110,46],{"class":45},[31,1112,422],{"class":41},[31,1114,425],{"class":45},[31,1116,59],{"class":58},[31,1118,62],{"class":45},[31,1120,66],{"class":65},[31,1122,69],{"class":45},[31,1124,88],{"class":58},[31,1126,1127],{"class":45},":{",[31,1129,1130],{"class":58},"summery",[31,1132,62],{"class":45},[31,1134,77],{"class":45},[31,1136,1137],{"class":80},"detail1",[31,1139,77],{"class":45},[31,1141,69],{"class":45},[31,1143,1144],{"class":58},"detail",[31,1146,62],{"class":45},[31,1148,77],{"class":45},[31,1150,1137],{"class":80},[31,1152,77],{"class":45},[31,1154,1155],{"class":45},"}},{",[31,1157,59],{"class":58},[31,1159,62],{"class":45},[31,1161,112],{"class":65},[31,1163,69],{"class":45},[31,1165,88],{"class":58},[31,1167,1127],{"class":45},[31,1169,1130],{"class":58},[31,1171,62],{"class":45},[31,1173,77],{"class":45},[31,1175,1176],{"class":80},"detail2",[31,1178,77],{"class":45},[31,1180,69],{"class":45},[31,1182,1144],{"class":58},[31,1184,62],{"class":45},[31,1186,77],{"class":45},[31,1188,1176],{"class":80},[31,1190,77],{"class":45},[31,1192,1193],{"class":45},"}},",[31,1195,472],{"class":41},[31,1197,243],{"class":45},[31,1199,1200],{"class":33,"line":52},[31,1201,249],{"emptyLinePlaceholder":248},[31,1203,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1224,1226,1228,1230,1232,1234,1236],{"class":33,"line":103},[31,1205,411],{"class":45},[31,1207,414],{"class":37},[31,1209,981],{"class":41},[31,1211,46],{"class":45},[31,1213,492],{"class":41},[31,1215,237],{"class":45},[31,1217,990],{"class":259},[31,1219,993],{"class":41},[31,1221,997],{"class":996},[31,1223,1000],{"class":37},[31,1225,1003],{"class":45},[31,1227,1007],{"class":1006},[31,1229,1010],{"class":45},[31,1231,997],{"class":41},[31,1233,1015],{"class":45},[31,1235,1018],{"class":41},[31,1237,243],{"class":45},[31,1239,1240],{"class":33,"line":142},[31,1241,249],{"emptyLinePlaceholder":248},[31,1243,1244,1246,1248,1250,1252,1254,1256,1258],{"class":33,"line":181},[31,1245,411],{"class":45},[31,1247,575],{"class":41},[31,1249,578],{"class":65},[31,1251,581],{"class":41},[31,1253,532],{"class":45},[31,1255,1076],{"class":41},[31,1257,578],{"class":65},[31,1259,191],{"class":41},[31,1261,1262],{"class":33,"line":188},[31,1263,564],{"class":184},[31,1265,1266],{"class":33,"line":283},[31,1267,249],{"emptyLinePlaceholder":248},[31,1269,1270,1272,1274,1276,1278,1280,1282,1284,1286,1288,1290,1292,1294],{"class":33,"line":289},[31,1271,411],{"class":45},[31,1273,575],{"class":41},[31,1275,578],{"class":65},[31,1277,472],{"class":41},[31,1279,237],{"class":45},[31,1281,644],{"class":41},[31,1283,532],{"class":45},[31,1285,1076],{"class":41},[31,1287,578],{"class":65},[31,1289,472],{"class":41},[31,1291,237],{"class":45},[31,1293,88],{"class":41},[31,1295,243],{"class":45},[31,1297,1298],{"class":33,"line":295},[31,1299,542],{"class":184},[31,1301,1302],{"class":33,"line":301},[31,1303,1304],{"class":184},"\u002F\u002F んっっ！？\n",[13,1306,1307],{},"なのでこのmapとスプレッドは使うのは結構微妙です。",[365,1309,1311],{"id":1310},"_3lodashのclonedeepを使用する","3:lodashのcloneDeep()を使用する",[13,1313,1314,1315,1318,1319,1321],{},"テクニックではないのですがlodashなどのライブラリを用いると、",[17,1316,1317],{},"cloneDeep()","といったディープコピー を行うユーティリティー関数があります。面倒な場合はそれを使ってしまってもいいと思います。なんか方法１のJSONよりもlodashの",[17,1320,1317],{},"の方が早いみたいです。",[13,1323,1324],{},[196,1325,1328],{"href":1326,"rel":1327},"https:\u002F\u002Fqiita.com\u002Fsuin\u002Fitems\u002F80e687dd1789b9d9d2fd",[901],"参考：JavaScriptのディープコピー速さ比較 〜7つの手法\u002Fライブラリを比べてみた〜",[22,1330,1332],{"className":24,"code":1331,"filename":254,"language":26,"meta":27,"style":27},"> const origin =[{id:1,content:{summery:\"detail1\",detail:\"detail1\"}},{id:2,content:{summery:\"detail2\",detail:\"detail2\"}},];\n\n> const copy_ =  _.cloneDeep(origin);\n\n> origin[0] === copy_[0]\n\u002F\u002F false\n\n> origin[0].content === copy_[0].content;\n\u002F\u002F false\n\u002F\u002F よし！\n",[17,1333,1334,1424,1428,1452,1456,1475,1479,1483,1511,1515],{"__ignoreMap":27},[31,1335,1336,1338,1340,1342,1344,1346,1348,1350,1352,1354,1356,1358,1360,1362,1364,1366,1368,1370,1372,1374,1376,1378,1380,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1404,1406,1408,1410,1412,1414,1416,1418,1420,1422],{"class":33,"line":34},[31,1337,411],{"class":45},[31,1339,414],{"class":37},[31,1341,417],{"class":41},[31,1343,46],{"class":45},[31,1345,422],{"class":41},[31,1347,425],{"class":45},[31,1349,59],{"class":58},[31,1351,62],{"class":45},[31,1353,66],{"class":65},[31,1355,69],{"class":45},[31,1357,88],{"class":58},[31,1359,1127],{"class":45},[31,1361,1130],{"class":58},[31,1363,62],{"class":45},[31,1365,77],{"class":45},[31,1367,1137],{"class":80},[31,1369,77],{"class":45},[31,1371,69],{"class":45},[31,1373,1144],{"class":58},[31,1375,62],{"class":45},[31,1377,77],{"class":45},[31,1379,1137],{"class":80},[31,1381,77],{"class":45},[31,1383,1155],{"class":45},[31,1385,59],{"class":58},[31,1387,62],{"class":45},[31,1389,112],{"class":65},[31,1391,69],{"class":45},[31,1393,88],{"class":58},[31,1395,1127],{"class":45},[31,1397,1130],{"class":58},[31,1399,62],{"class":45},[31,1401,77],{"class":45},[31,1403,1176],{"class":80},[31,1405,77],{"class":45},[31,1407,69],{"class":45},[31,1409,1144],{"class":58},[31,1411,62],{"class":45},[31,1413,77],{"class":45},[31,1415,1176],{"class":80},[31,1417,77],{"class":45},[31,1419,1193],{"class":45},[31,1421,472],{"class":41},[31,1423,243],{"class":45},[31,1425,1426],{"class":33,"line":52},[31,1427,249],{"emptyLinePlaceholder":248},[31,1429,1430,1432,1434,1437,1439,1442,1444,1447,1450],{"class":33,"line":103},[31,1431,411],{"class":45},[31,1433,414],{"class":37},[31,1435,1436],{"class":41}," copy_ ",[31,1438,46],{"class":45},[31,1440,1441],{"class":41},"  _",[31,1443,237],{"class":45},[31,1445,1446],{"class":259},"cloneDeep",[31,1448,1449],{"class":41},"(origin)",[31,1451,243],{"class":45},[31,1453,1454],{"class":33,"line":142},[31,1455,249],{"emptyLinePlaceholder":248},[31,1457,1458,1460,1462,1464,1466,1468,1471,1473],{"class":33,"line":181},[31,1459,411],{"class":45},[31,1461,575],{"class":41},[31,1463,578],{"class":65},[31,1465,581],{"class":41},[31,1467,532],{"class":45},[31,1469,1470],{"class":41}," copy_[",[31,1472,578],{"class":65},[31,1474,191],{"class":41},[31,1476,1477],{"class":33,"line":188},[31,1478,564],{"class":184},[31,1480,1481],{"class":33,"line":283},[31,1482,249],{"emptyLinePlaceholder":248},[31,1484,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509],{"class":33,"line":289},[31,1486,411],{"class":45},[31,1488,575],{"class":41},[31,1490,578],{"class":65},[31,1492,472],{"class":41},[31,1494,237],{"class":45},[31,1496,644],{"class":41},[31,1498,532],{"class":45},[31,1500,1470],{"class":41},[31,1502,578],{"class":65},[31,1504,472],{"class":41},[31,1506,237],{"class":45},[31,1508,88],{"class":41},[31,1510,243],{"class":45},[31,1512,1513],{"class":33,"line":295},[31,1514,564],{"class":184},[31,1516,1517],{"class":33,"line":301},[31,1518,886],{"class":184},[13,1520,1521],{},"ちなみに方法１のJSONもネストしたオブジェクトの参照は断ち切れます。",[207,1523,1525],{"id":1524},"ライブラリかjson変換を使うといい","ライブラリかJSON変換を使うといい",[13,1527,1528],{},"以上が配列内のオブジェクトの値が連動してしまう原因と対処法です。正確には配列内にオブジェクトを含む場合や、オブジェクト内にオブジェクトを含む値コピーする時は「ディープコピー 」を使いましょうというお話です。ネストしたオブジェクトは今回解説した様に、参照が根深く残っています。アプリによっては以下のような単純な構造でなく、",[22,1530,1532],{"className":24,"code":1531,"language":26,"meta":27,"style":27},"[{id:1,content:\"1111\"},{id:2,content:\"2222\"}];\n",[17,1533,1534],{"__ignoreMap":27},[31,1535,1536,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582],{"class":33,"line":34},[31,1537,422],{"class":41},[31,1539,425],{"class":45},[31,1541,59],{"class":58},[31,1543,62],{"class":45},[31,1545,66],{"class":65},[31,1547,69],{"class":45},[31,1549,88],{"class":58},[31,1551,62],{"class":45},[31,1553,77],{"class":45},[31,1555,442],{"class":80},[31,1557,77],{"class":45},[31,1559,447],{"class":45},[31,1561,59],{"class":58},[31,1563,62],{"class":45},[31,1565,112],{"class":65},[31,1567,69],{"class":45},[31,1569,88],{"class":58},[31,1571,62],{"class":45},[31,1573,77],{"class":45},[31,1575,464],{"class":80},[31,1577,77],{"class":45},[31,1579,469],{"class":45},[31,1581,472],{"class":41},[31,1583,243],{"class":45},[13,1585,1586],{},"以下のように内包する値も複雑で、さらにオブジェクトがネストしていることもあります。",[22,1588,1590],{"className":24,"code":1589,"language":26,"meta":27,"style":27},"const origin = {\n    title: \"...\", \u002F\u002F 途中にiterableでないものがある。\n    todo:[\n            {\n                id:1,\n                \u002F\u002F オブジェクトがネストしている\n                content:{\n                    summery:\"detail1\",detail:\"detail1\"\n                }\n            },\n            {\n                id:2,\n                content:{\n                    summery:\"detail2\",detail:\"detail2\"\n                }\n            }\n        ];\n    \u002F\u002F More unpredictable properties..\n}\n",[17,1591,1592,1603,1621,1631,1636,1648,1653,1661,1687,1692,1697,1701,1711,1717,1741,1745,1750,1756,1762],{"__ignoreMap":27},[31,1593,1594,1596,1598,1600],{"class":33,"line":34},[31,1595,38],{"class":37},[31,1597,417],{"class":41},[31,1599,46],{"class":45},[31,1601,1602],{"class":45}," {\n",[31,1604,1605,1608,1610,1612,1614,1616,1618],{"class":33,"line":52},[31,1606,1607],{"class":58},"    title",[31,1609,62],{"class":45},[31,1611,649],{"class":45},[31,1613,95],{"class":80},[31,1615,77],{"class":45},[31,1617,69],{"class":45},[31,1619,1620],{"class":184}," \u002F\u002F 途中にiterableでないものがある。\n",[31,1622,1623,1626,1628],{"class":33,"line":103},[31,1624,1625],{"class":58},"    todo",[31,1627,62],{"class":45},[31,1629,1630],{"class":41},"[\n",[31,1632,1633],{"class":33,"line":142},[31,1634,1635],{"class":45},"            {\n",[31,1637,1638,1641,1643,1645],{"class":33,"line":181},[31,1639,1640],{"class":58},"                id",[31,1642,62],{"class":45},[31,1644,66],{"class":65},[31,1646,1647],{"class":45},",\n",[31,1649,1650],{"class":33,"line":188},[31,1651,1652],{"class":184},"                \u002F\u002F オブジェクトがネストしている\n",[31,1654,1655,1658],{"class":33,"line":283},[31,1656,1657],{"class":58},"                content",[31,1659,1660],{"class":45},":{\n",[31,1662,1663,1666,1668,1670,1672,1674,1676,1678,1680,1682,1684],{"class":33,"line":289},[31,1664,1665],{"class":58},"                    summery",[31,1667,62],{"class":45},[31,1669,77],{"class":45},[31,1671,1137],{"class":80},[31,1673,77],{"class":45},[31,1675,69],{"class":45},[31,1677,1144],{"class":58},[31,1679,62],{"class":45},[31,1681,77],{"class":45},[31,1683,1137],{"class":80},[31,1685,1686],{"class":45},"\"\n",[31,1688,1689],{"class":33,"line":295},[31,1690,1691],{"class":45},"                }\n",[31,1693,1694],{"class":33,"line":301},[31,1695,1696],{"class":45},"            },\n",[31,1698,1699],{"class":33,"line":307},[31,1700,1635],{"class":45},[31,1702,1703,1705,1707,1709],{"class":33,"line":313},[31,1704,1640],{"class":58},[31,1706,62],{"class":45},[31,1708,112],{"class":65},[31,1710,1647],{"class":45},[31,1712,1713,1715],{"class":33,"line":319},[31,1714,1657],{"class":58},[31,1716,1660],{"class":45},[31,1718,1719,1721,1723,1725,1727,1729,1731,1733,1735,1737,1739],{"class":33,"line":325},[31,1720,1665],{"class":58},[31,1722,62],{"class":45},[31,1724,77],{"class":45},[31,1726,1176],{"class":80},[31,1728,77],{"class":45},[31,1730,69],{"class":45},[31,1732,1144],{"class":58},[31,1734,62],{"class":45},[31,1736,77],{"class":45},[31,1738,1176],{"class":80},[31,1740,1686],{"class":45},[31,1742,1743],{"class":33,"line":331},[31,1744,1691],{"class":45},[31,1746,1747],{"class":33,"line":337},[31,1748,1749],{"class":45},"            }\n",[31,1751,1753],{"class":33,"line":1752},17,[31,1754,1755],{"class":41},"        ];\n",[31,1757,1759],{"class":33,"line":1758},18,[31,1760,1761],{"class":184},"    \u002F\u002F More unpredictable properties..\n",[31,1763,1765],{"class":33,"line":1764},19,[31,1766,334],{"class":45},[13,1768,1769],{},"上記のような状況を踏まえると、ディープコピー はJSONを用いるか大人しくライブラリを使用する方が賢明そうです。値が連動してしまう時はまず値渡し・参照渡しを疑い、その次はディープコピーがされているか（ネストしたオブジェクトがないか）を確かめてみましょう。",[1771,1772,1773],"style",{},"html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}",{"title":27,"searchDepth":103,"depth":103,"links":1775},[1776,1779,1780,1785],{"id":209,"depth":52,"text":209,"children":1777},[1778],{"id":367,"depth":103,"text":368},{"id":199,"depth":52,"text":199},{"id":204,"depth":52,"text":204,"children":1781},[1782,1783,1784],{"id":705,"depth":103,"text":706},{"id":892,"depth":103,"text":893},{"id":1310,"depth":103,"text":1311},{"id":1524,"depth":52,"text":1525},[1787],"ministack","2021-11-07","配列内のオブジェクトの値が連動するときの原因と対処法","md",null,{},"\u002Farticles\u002Fjs-deep-copy",{"title":8,"description":1789},"articles\u002Fjs-deep-copy",[1797,1798],"js","vue","TVfFMZbaj-eg5y8hB-QhEPtPjdhOPFn6vmaY0JeSo0g",{"id":1801,"title":1802,"body":1803,"category":5905,"createdAt":5907,"description":5908,"extension":1790,"index":103,"meta":5909,"navigation":248,"path":5910,"publish":248,"seo":5911,"series":5912,"seriesTitle":5913,"stem":5914,"tag":5915,"thumbnail":5917,"updatedAt":1791,"__hash__":5918},"series\u002Fseries\u002Fwell-study-webpack-3.md","ちゃんと理解するWebpack5。３：HTMLのバンドルとPUGでのページ作成",{"type":10,"value":1804,"toc":5889},[1805,1813,1816,1826,1829,1833,1849,1852,1856,1859,1867,1884,1887,1897,1903,1906,1913,2163,2166,2173,2685,2692,2723,2733,2958,2967,2978,2985,2988,2996,3058,3064,3101,3110,3268,3271,3326,3339,3343,3349,3352,3355,3358,3449,3456,3562,3565,3568,3574,3580,3601,3616,3619,3622,3628,3633,3639,3896,3899,4414,4417,4481,4493,4496,4499,4509,4538,4541,4545,4551,5886],[13,1806,1807,1808,1812],{},"こんにちはjunです。前回の記事",[196,1809,1811],{"href":1810},"\u002Fseries\u002Fwell-study-webpack\u002F2","ちゃんと理解するWebpack5。２：Babel、画像の処理と複数バンドル","の続きの記事です。前回は画像のバンドル、Bableのトランスコンパイル、そして複数バンドルを行いました。今回は残りのHTMLの取り扱い方と、テンプレートエンジンと呼ばれるPUGを用いてHTMLでページをガンガン作成していこうと思います。",[13,1814,1815],{},"シチュエーションとしては、",[1817,1818,1819,1823],"ul",{},[1820,1821,1822],"li",{},"サイト制作で上がってきたデザインからHTML・CSS・JSのテンプレートファイルを作る。",[1820,1824,1825],{},"モックとしてサービスのweb部分を作ってみる",[13,1827,1828],{},"といった感じです。とりあえず「デザイン通りに見た目と動きつくってちょ！」というような依頼が来たと思ってください。",[207,1830,1832],{"id":1831},"webpakcでhtmlを扱うには","webpakcでHTMLを扱うには",[13,1834,1835,1836,1840,1841,1844,1845,1848],{},"webpackには「html-loader」というhtmlファイルを扱うloaderがあります。",[196,1837,1839],{"href":1838},"\u002Fseries\u002Fwell-study-webpack\u002F1","ちゃんと理解するWebpack5。１","では最初ということもあり、",[17,1842,1843],{},"dist","に直接置いていましたが、ローダーを使用することでHTMLも",[17,1846,1847],{},"src","配下に置いてバンドルできます。複数対応ももちろん可能です。",[13,1850,1851],{},"今回はまず素のHTMLを扱う方法とテンプレートエンジンという効率的にHTMLを生成できるpugを用いた2つのバンドル方法を今回はお伝えします。",[207,1853,1855],{"id":1854},"単純htmlファイルをバンドルする","単純HTMLファイルをバンドルする",[13,1857,1858],{},"前回の構成に加えて",[22,1860,1865],{"className":1861,"code":1863,"language":1864},[1862],"language-text",".\n├── dist\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs\n│   ├── html \u002F\u002FNEW!!\n│   │   ├── index.html \u002F\u002FNEW!!\n│   │   └── detail.html \u002F\u002FNEW!!\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n","text",[17,1866,1863],{"__ignoreMap":27},[13,1868,1869,1872,1873,1876,1877,1880,1881,1883],{},[17,1870,1871],{},"html","というディレクトリを作成し、バンドル対象の",[17,1874,1875],{},"index.html","と",[17,1878,1879],{},"detail.html","を作成しました。目標はこの２つのファイルが",[17,1882,1843],{},"配下に配置されることです。",[365,1885,1886],{"id":1886},"html扱いに必要なloaderとpluginを入れる",[13,1888,1889,1890,1876,1893,1896],{},"最初にHTMLファイルを扱うために必要な",[17,1891,1892],{},"html-loader",[17,1894,1895],{},"HtmlWebpackPlugin","をインストールします。",[22,1898,1901],{"className":1899,"code":1900,"language":1864},[1862],"npm install -D html-loader html-webpack-plugin\n",[17,1902,1900],{"__ignoreMap":27},[365,1904,1905],{"id":1905},"ruleとloaderを追加",[13,1907,1908,1909,1912],{},"そしてwebpack.config.jsにhtmlに関する。記述を追加します。まずは",[17,1910,1911],{},"rules","にhtmlファイルのルールを追加します。",[22,1914,1917],{"className":24,"code":1915,"filename":1916,"language":26,"meta":27,"style":27},"\n\u002F\u002F rulesの配列は後で\nlet rules = [\n    \u002F\u002F ... \n    \u002F\u002F 追加↓\n    {\n        test: \u002F\\.(html)$\u002F,\n        use: {\n            loader: 'html-loader',\n        }\n    },\n    \u002F\u002F ...\n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F ...\n}\n\u002F\u002F...\n\nmodule.exports = buildDefault;\n","webpack.config.js",[17,1918,1919,1923,1928,1940,1945,1950,1955,1982,1991,2008,2013,2018,2022,2026,2030,2044,2060,2065,2081,2086,2096,2107,2112,2117,2129,2134,2139,2145,2150],{"__ignoreMap":27},[31,1920,1921],{"class":33,"line":34},[31,1922,249],{"emptyLinePlaceholder":248},[31,1924,1925],{"class":33,"line":52},[31,1926,1927],{"class":184},"\u002F\u002F rulesの配列は後で\n",[31,1929,1930,1933,1936,1938],{"class":33,"line":103},[31,1931,1932],{"class":37},"let",[31,1934,1935],{"class":41}," rules ",[31,1937,46],{"class":45},[31,1939,49],{"class":41},[31,1941,1942],{"class":33,"line":142},[31,1943,1944],{"class":184},"    \u002F\u002F ... \n",[31,1946,1947],{"class":33,"line":181},[31,1948,1949],{"class":184},"    \u002F\u002F 追加↓\n",[31,1951,1952],{"class":33,"line":188},[31,1953,1954],{"class":45},"    {\n",[31,1956,1957,1960,1962,1965,1968,1970,1972,1974,1977,1980],{"class":33,"line":283},[31,1958,1959],{"class":58},"        test",[31,1961,62],{"class":45},[31,1963,1964],{"class":45}," \u002F",[31,1966,1967],{"class":41},"\\.",[31,1969,993],{"class":45},[31,1971,1871],{"class":80},[31,1973,1018],{"class":45},[31,1975,1976],{"class":1006},"$",[31,1978,1979],{"class":45},"\u002F",[31,1981,1647],{"class":45},[31,1983,1984,1987,1989],{"class":33,"line":289},[31,1985,1986],{"class":58},"        use",[31,1988,62],{"class":45},[31,1990,1602],{"class":45},[31,1992,1993,1996,1998,2001,2003,2006],{"class":33,"line":295},[31,1994,1995],{"class":58},"            loader",[31,1997,62],{"class":45},[31,1999,2000],{"class":45}," '",[31,2002,1892],{"class":80},[31,2004,2005],{"class":45},"'",[31,2007,1647],{"class":45},[31,2009,2010],{"class":33,"line":301},[31,2011,2012],{"class":45},"        }\n",[31,2014,2015],{"class":33,"line":307},[31,2016,2017],{"class":45},"    },\n",[31,2019,2020],{"class":33,"line":313},[31,2021,185],{"class":184},[31,2023,2024],{"class":33,"line":319},[31,2025,191],{"class":41},[31,2027,2028],{"class":33,"line":325},[31,2029,249],{"emptyLinePlaceholder":248},[31,2031,2032,2034,2037,2039,2042],{"class":33,"line":331},[31,2033,38],{"class":37},[31,2035,2036],{"class":41}," buildDefault ",[31,2038,46],{"class":45},[31,2040,2041],{"class":45}," =",[31,2043,1602],{"class":45},[31,2045,2046,2049,2051,2053,2056,2058],{"class":33,"line":337},[31,2047,2048],{"class":58},"    entry",[31,2050,62],{"class":45},[31,2052,2000],{"class":45},[31,2054,2055],{"class":80},".\u002Fsrc\u002Fjs\u002Fmain.js",[31,2057,2005],{"class":45},[31,2059,1647],{"class":45},[31,2061,2062],{"class":33,"line":1752},[31,2063,2064],{"class":41},"  \n",[31,2066,2067,2070,2072,2074,2077,2079],{"class":33,"line":1758},[31,2068,2069],{"class":58},"    mode",[31,2071,62],{"class":45},[31,2073,77],{"class":45},[31,2075,2076],{"class":80},"development",[31,2078,77],{"class":45},[31,2080,1647],{"class":45},[31,2082,2083],{"class":33,"line":1764},[31,2084,2085],{"class":41},"    \n",[31,2087,2089,2092,2094],{"class":33,"line":2088},20,[31,2090,2091],{"class":58},"    module",[31,2093,62],{"class":45},[31,2095,1602],{"class":45},[31,2097,2099,2102,2104],{"class":33,"line":2098},21,[31,2100,2101],{"class":58},"        rules",[31,2103,62],{"class":45},[31,2105,2106],{"class":41}," rules\n",[31,2108,2110],{"class":33,"line":2109},22,[31,2111,2017],{"class":45},[31,2113,2115],{"class":33,"line":2114},23,[31,2116,249],{"emptyLinePlaceholder":248},[31,2118,2120,2123,2125,2127],{"class":33,"line":2119},24,[31,2121,2122],{"class":58},"    rules",[31,2124,62],{"class":45},[31,2126,1911],{"class":41},[31,2128,1647],{"class":45},[31,2130,2132],{"class":33,"line":2131},25,[31,2133,185],{"class":184},[31,2135,2137],{"class":33,"line":2136},26,[31,2138,334],{"class":45},[31,2140,2142],{"class":33,"line":2141},27,[31,2143,2144],{"class":184},"\u002F\u002F...\n",[31,2146,2148],{"class":33,"line":2147},28,[31,2149,249],{"emptyLinePlaceholder":248},[31,2151,2153,2156,2158,2161],{"class":33,"line":2152},29,[31,2154,2155],{"class":45},"module.exports",[31,2157,2041],{"class":45},[31,2159,2160],{"class":41}," buildDefault",[31,2162,243],{"class":45},[365,2164,2165],{"id":2165},"html-webpack-pluginの設定",[13,2167,2168,2169,2172],{},"とりあえずこれでwebpackはhtmlファイルを扱えるようになりました。次はentryでjsファイルを指定していたように、バンドル対象のhtmlをwebpackに読み込ませるために",[17,2170,2171],{},"html-webpack-plugin","を使用します。",[22,2174,2176],{"className":24,"code":2175,"filename":1916,"language":26,"meta":27,"style":27},"\u002F\u002F ファイル冒頭\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\n\n\u002F\u002F この２つを追加\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nlet rules = [\n    \u002F\u002F 省略... \n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F 以下略...\n}\n\n\u002F\u002F これらを追記\nconst htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n\nhtmlFiles.forEach((htmlsrc) => {\n    const htmlname = htmlsrc.split('\u002F').slice(-1)[0];\n\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${htmlname}`,\n        inject:'body',\n        template: htmlsrc,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[17,2177,2178,2183,2208,2232,2236,2241,2265,2288,2292,2302,2307,2311,2315,2327,2341,2345,2359,2363,2371,2379,2383,2387,2397,2402,2406,2410,2415,2445,2449,2472,2521,2526,2545,2558,2604,2621,2633,2645,2654,2660,2669,2674],{"__ignoreMap":27},[31,2179,2180],{"class":33,"line":34},[31,2181,2182],{"class":184},"\u002F\u002F ファイル冒頭\n",[31,2184,2185,2187,2190,2192,2195,2197,2199,2202,2204,2206],{"class":33,"line":52},[31,2186,38],{"class":37},[31,2188,2189],{"class":41}," MiniCssExtractPlugin ",[31,2191,46],{"class":45},[31,2193,2194],{"class":259}," require",[31,2196,993],{"class":41},[31,2198,2005],{"class":45},[31,2200,2201],{"class":80},"mini-css-extract-plugin",[31,2203,2005],{"class":45},[31,2205,1018],{"class":41},[31,2207,243],{"class":45},[31,2209,2210,2212,2215,2217,2219,2221,2223,2226,2228,2230],{"class":33,"line":103},[31,2211,38],{"class":37},[31,2213,2214],{"class":41}," path ",[31,2216,46],{"class":45},[31,2218,2194],{"class":259},[31,2220,993],{"class":41},[31,2222,2005],{"class":45},[31,2224,2225],{"class":80},"path",[31,2227,2005],{"class":45},[31,2229,1018],{"class":41},[31,2231,243],{"class":45},[31,2233,2234],{"class":33,"line":142},[31,2235,249],{"emptyLinePlaceholder":248},[31,2237,2238],{"class":33,"line":181},[31,2239,2240],{"class":184},"\u002F\u002F この２つを追加\n",[31,2242,2243,2245,2248,2250,2252,2254,2256,2259,2261,2263],{"class":33,"line":188},[31,2244,38],{"class":37},[31,2246,2247],{"class":41}," globule ",[31,2249,46],{"class":45},[31,2251,2194],{"class":259},[31,2253,993],{"class":41},[31,2255,2005],{"class":45},[31,2257,2258],{"class":80},"globule",[31,2260,2005],{"class":45},[31,2262,1018],{"class":41},[31,2264,243],{"class":45},[31,2266,2267,2269,2272,2274,2276,2278,2280,2282,2284,2286],{"class":33,"line":283},[31,2268,38],{"class":37},[31,2270,2271],{"class":41}," HtmlWebpackPlugin ",[31,2273,46],{"class":45},[31,2275,2194],{"class":259},[31,2277,993],{"class":41},[31,2279,2005],{"class":45},[31,2281,2171],{"class":80},[31,2283,2005],{"class":45},[31,2285,1018],{"class":41},[31,2287,243],{"class":45},[31,2289,2290],{"class":33,"line":289},[31,2291,249],{"emptyLinePlaceholder":248},[31,2293,2294,2296,2298,2300],{"class":33,"line":295},[31,2295,1932],{"class":37},[31,2297,1935],{"class":41},[31,2299,46],{"class":45},[31,2301,49],{"class":41},[31,2303,2304],{"class":33,"line":301},[31,2305,2306],{"class":184},"    \u002F\u002F 省略... \n",[31,2308,2309],{"class":33,"line":307},[31,2310,191],{"class":41},[31,2312,2313],{"class":33,"line":313},[31,2314,249],{"emptyLinePlaceholder":248},[31,2316,2317,2319,2321,2323,2325],{"class":33,"line":319},[31,2318,38],{"class":37},[31,2320,2036],{"class":41},[31,2322,46],{"class":45},[31,2324,2041],{"class":45},[31,2326,1602],{"class":45},[31,2328,2329,2331,2333,2335,2337,2339],{"class":33,"line":325},[31,2330,2048],{"class":58},[31,2332,62],{"class":45},[31,2334,2000],{"class":45},[31,2336,2055],{"class":80},[31,2338,2005],{"class":45},[31,2340,1647],{"class":45},[31,2342,2343],{"class":33,"line":331},[31,2344,2064],{"class":41},[31,2346,2347,2349,2351,2353,2355,2357],{"class":33,"line":337},[31,2348,2069],{"class":58},[31,2350,62],{"class":45},[31,2352,77],{"class":45},[31,2354,2076],{"class":80},[31,2356,77],{"class":45},[31,2358,1647],{"class":45},[31,2360,2361],{"class":33,"line":1752},[31,2362,2085],{"class":41},[31,2364,2365,2367,2369],{"class":33,"line":1758},[31,2366,2091],{"class":58},[31,2368,62],{"class":45},[31,2370,1602],{"class":45},[31,2372,2373,2375,2377],{"class":33,"line":1764},[31,2374,2101],{"class":58},[31,2376,62],{"class":45},[31,2378,2106],{"class":41},[31,2380,2381],{"class":33,"line":2088},[31,2382,2017],{"class":45},[31,2384,2385],{"class":33,"line":2098},[31,2386,249],{"emptyLinePlaceholder":248},[31,2388,2389,2391,2393,2395],{"class":33,"line":2109},[31,2390,2122],{"class":58},[31,2392,62],{"class":45},[31,2394,1911],{"class":41},[31,2396,1647],{"class":45},[31,2398,2399],{"class":33,"line":2114},[31,2400,2401],{"class":184},"    \u002F\u002F 以下略...\n",[31,2403,2404],{"class":33,"line":2119},[31,2405,334],{"class":45},[31,2407,2408],{"class":33,"line":2131},[31,2409,249],{"emptyLinePlaceholder":248},[31,2411,2412],{"class":33,"line":2136},[31,2413,2414],{"class":184},"\u002F\u002F これらを追記\n",[31,2416,2417,2419,2422,2424,2427,2429,2432,2434,2436,2439,2441,2443],{"class":33,"line":2141},[31,2418,38],{"class":37},[31,2420,2421],{"class":41}," htmlFiles ",[31,2423,46],{"class":45},[31,2425,2426],{"class":41}," globule",[31,2428,237],{"class":45},[31,2430,2431],{"class":259},"find",[31,2433,993],{"class":41},[31,2435,2005],{"class":45},[31,2437,2438],{"class":80},"src\u002Fhtml\u002F*.html",[31,2440,2005],{"class":45},[31,2442,1018],{"class":41},[31,2444,243],{"class":45},[31,2446,2447],{"class":33,"line":2147},[31,2448,249],{"emptyLinePlaceholder":248},[31,2450,2451,2454,2456,2459,2461,2463,2466,2468,2470],{"class":33,"line":2152},[31,2452,2453],{"class":41},"htmlFiles",[31,2455,237],{"class":45},[31,2457,2458],{"class":259},"forEach",[31,2460,993],{"class":41},[31,2462,993],{"class":45},[31,2464,2465],{"class":996},"htmlsrc",[31,2467,1018],{"class":45},[31,2469,1000],{"class":37},[31,2471,1602],{"class":45},[31,2473,2474,2477,2480,2482,2485,2487,2490,2492,2494,2496,2498,2500,2502,2505,2507,2510,2512,2515,2517,2519],{"class":33,"line":4},[31,2475,2476],{"class":37},"    const",[31,2478,2479],{"class":41}," htmlname",[31,2481,2041],{"class":45},[31,2483,2484],{"class":41}," htmlsrc",[31,2486,237],{"class":45},[31,2488,2489],{"class":259},"split",[31,2491,993],{"class":58},[31,2493,2005],{"class":45},[31,2495,1979],{"class":80},[31,2497,2005],{"class":45},[31,2499,1018],{"class":58},[31,2501,237],{"class":45},[31,2503,2504],{"class":259},"slice",[31,2506,993],{"class":58},[31,2508,2509],{"class":45},"-",[31,2511,66],{"class":65},[31,2513,2514],{"class":58},")[",[31,2516,578],{"class":65},[31,2518,472],{"class":58},[31,2520,243],{"class":45},[31,2522,2524],{"class":33,"line":2523},31,[31,2525,249],{"emptyLinePlaceholder":248},[31,2527,2529,2532,2534,2537,2539,2542],{"class":33,"line":2528},32,[31,2530,2531],{"class":41},"    buildDefault",[31,2533,237],{"class":45},[31,2535,2536],{"class":41},"plugins",[31,2538,237],{"class":45},[31,2540,2541],{"class":259},"push",[31,2543,2544],{"class":58},"(\n",[31,2546,2548,2551,2554,2556],{"class":33,"line":2547},33,[31,2549,2550],{"class":45},"      new",[31,2552,2553],{"class":259}," HtmlWebpackPlugin",[31,2555,993],{"class":58},[31,2557,275],{"class":45},[31,2559,2561,2564,2566,2569,2571,2573,2576,2579,2581,2583,2585,2587,2589,2591,2593,2596,2599,2602],{"class":33,"line":2560},34,[31,2562,2563],{"class":58},"        filename",[31,2565,62],{"class":45},[31,2567,2568],{"class":45}," `${",[31,2570,2225],{"class":41},[31,2572,237],{"class":45},[31,2574,2575],{"class":259},"resolve",[31,2577,2578],{"class":41},"(__dirname",[31,2580,69],{"class":45},[31,2582,2000],{"class":45},[31,2584,1843],{"class":80},[31,2586,2005],{"class":45},[31,2588,1018],{"class":41},[31,2590,469],{"class":45},[31,2592,1979],{"class":80},[31,2594,2595],{"class":45},"${",[31,2597,2598],{"class":41},"htmlname",[31,2600,2601],{"class":45},"}`",[31,2603,1647],{"class":45},[31,2605,2607,2610,2612,2614,2617,2619],{"class":33,"line":2606},35,[31,2608,2609],{"class":58},"        inject",[31,2611,62],{"class":45},[31,2613,2005],{"class":45},[31,2615,2616],{"class":80},"body",[31,2618,2005],{"class":45},[31,2620,1647],{"class":45},[31,2622,2624,2627,2629,2631],{"class":33,"line":2623},36,[31,2625,2626],{"class":58},"        template",[31,2628,62],{"class":45},[31,2630,2484],{"class":41},[31,2632,1647],{"class":45},[31,2634,2636,2639,2641],{"class":33,"line":2635},37,[31,2637,2638],{"class":58},"        minify",[31,2640,62],{"class":45},[31,2642,2644],{"class":2643},"sbqyR"," false\n",[31,2646,2648,2651],{"class":33,"line":2647},38,[31,2649,2650],{"class":45},"      }",[31,2652,2653],{"class":58},")\n",[31,2655,2657],{"class":33,"line":2656},39,[31,2658,2659],{"class":58},"    )\n",[31,2661,2663,2665,2667],{"class":33,"line":2662},40,[31,2664,469],{"class":45},[31,2666,1018],{"class":41},[31,2668,243],{"class":45},[31,2670,2672],{"class":33,"line":2671},41,[31,2673,249],{"emptyLinePlaceholder":248},[31,2675,2677,2679,2681,2683],{"class":33,"line":2676},42,[31,2678,2155],{"class":45},[31,2680,2041],{"class":45},[31,2682,2160],{"class":41},[31,2684,243],{"class":45},[13,2686,2687,2688,2691],{},"詳細の解説をします。まず最初に必要なプラグインとnode.jsのモジュールをインポートします。そして以下の記述は",[17,2689,2690],{},"src\u002Fhtml","配下にあるhtmlファイルを全て取得する処理です。",[22,2693,2695],{"className":24,"code":2694,"language":26,"meta":27,"style":27},"const htmlFiles = globule.find('src\u002Fhtml\u002F*.html');\n",[17,2696,2697],{"__ignoreMap":27},[31,2698,2699,2701,2703,2705,2707,2709,2711,2713,2715,2717,2719,2721],{"class":33,"line":34},[31,2700,38],{"class":37},[31,2702,2421],{"class":41},[31,2704,46],{"class":45},[31,2706,2426],{"class":41},[31,2708,237],{"class":45},[31,2710,2431],{"class":259},[31,2712,993],{"class":41},[31,2714,2005],{"class":45},[31,2716,2438],{"class":80},[31,2718,2005],{"class":45},[31,2720,1018],{"class":41},[31,2722,243],{"class":45},[13,2724,2725,2726,2728,2729,2732],{},"配列でhtmlファイルのパスが戻ってきますので、それらを",[17,2727,1895],{},"にファイル分だけ",[17,2730,2731],{},"new","します。",[22,2734,2736],{"className":24,"code":2735,"language":26,"meta":27,"style":27},"htmlFiles.forEach((htmlsrc) => {\n    \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n    const htmlname = htmlsrc.split('\u002F').slice(-1)[0];\n\n    \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        \u002F\u002F distのファイル名。今回はsrcと同じ。\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${htmlname}`,\n\n        \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n        inject:'body',\n\n        \u002F\u002F 対象のhtmlファイル\n        template: htmlsrc,\n\n        \u002F\u002F 圧縮するかどうか。defaultはtrue\n        minify: false\n      })\n    )\n});\n",[17,2737,2738,2758,2763,2805,2809,2814,2828,2838,2843,2881,2885,2890,2904,2908,2913,2923,2927,2932,2940,2946,2950],{"__ignoreMap":27},[31,2739,2740,2742,2744,2746,2748,2750,2752,2754,2756],{"class":33,"line":34},[31,2741,2453],{"class":41},[31,2743,237],{"class":45},[31,2745,2458],{"class":259},[31,2747,993],{"class":41},[31,2749,993],{"class":45},[31,2751,2465],{"class":996},[31,2753,1018],{"class":45},[31,2755,1000],{"class":37},[31,2757,1602],{"class":45},[31,2759,2760],{"class":33,"line":52},[31,2761,2762],{"class":184},"    \u002F\u002F ファイル名を取得 src\u002Fhtml\u002Findex.html → index.html\n",[31,2764,2765,2767,2769,2771,2773,2775,2777,2779,2781,2783,2785,2787,2789,2791,2793,2795,2797,2799,2801,2803],{"class":33,"line":103},[31,2766,2476],{"class":37},[31,2768,2479],{"class":41},[31,2770,2041],{"class":45},[31,2772,2484],{"class":41},[31,2774,237],{"class":45},[31,2776,2489],{"class":259},[31,2778,993],{"class":58},[31,2780,2005],{"class":45},[31,2782,1979],{"class":80},[31,2784,2005],{"class":45},[31,2786,1018],{"class":58},[31,2788,237],{"class":45},[31,2790,2504],{"class":259},[31,2792,993],{"class":58},[31,2794,2509],{"class":45},[31,2796,66],{"class":65},[31,2798,2514],{"class":58},[31,2800,578],{"class":65},[31,2802,472],{"class":58},[31,2804,243],{"class":45},[31,2806,2807],{"class":33,"line":142},[31,2808,249],{"emptyLinePlaceholder":248},[31,2810,2811],{"class":33,"line":181},[31,2812,2813],{"class":184},"    \u002F\u002F webpackの設定にある、pluginsに以下のプラグインインスタンスを入れる。\n",[31,2815,2816,2818,2820,2822,2824,2826],{"class":33,"line":188},[31,2817,2531],{"class":41},[31,2819,237],{"class":45},[31,2821,2536],{"class":41},[31,2823,237],{"class":45},[31,2825,2541],{"class":259},[31,2827,2544],{"class":58},[31,2829,2830,2832,2834,2836],{"class":33,"line":283},[31,2831,2550],{"class":45},[31,2833,2553],{"class":259},[31,2835,993],{"class":58},[31,2837,275],{"class":45},[31,2839,2840],{"class":33,"line":289},[31,2841,2842],{"class":184},"        \u002F\u002F distのファイル名。今回はsrcと同じ。\n",[31,2844,2845,2847,2849,2851,2853,2855,2857,2859,2861,2863,2865,2867,2869,2871,2873,2875,2877,2879],{"class":33,"line":295},[31,2846,2563],{"class":58},[31,2848,62],{"class":45},[31,2850,2568],{"class":45},[31,2852,2225],{"class":41},[31,2854,237],{"class":45},[31,2856,2575],{"class":259},[31,2858,2578],{"class":41},[31,2860,69],{"class":45},[31,2862,2000],{"class":45},[31,2864,1843],{"class":80},[31,2866,2005],{"class":45},[31,2868,1018],{"class":41},[31,2870,469],{"class":45},[31,2872,1979],{"class":80},[31,2874,2595],{"class":45},[31,2876,2598],{"class":41},[31,2878,2601],{"class":45},[31,2880,1647],{"class":45},[31,2882,2883],{"class":33,"line":301},[31,2884,249],{"emptyLinePlaceholder":248},[31,2886,2887],{"class":33,"line":307},[31,2888,2889],{"class":184},"        \u002F\u002F 自動的にバンドル対象のjs\b(main.js)とcss(style.css)を入れる。お節介ならfalseにする。\n",[31,2891,2892,2894,2896,2898,2900,2902],{"class":33,"line":313},[31,2893,2609],{"class":58},[31,2895,62],{"class":45},[31,2897,2005],{"class":45},[31,2899,2616],{"class":80},[31,2901,2005],{"class":45},[31,2903,1647],{"class":45},[31,2905,2906],{"class":33,"line":319},[31,2907,249],{"emptyLinePlaceholder":248},[31,2909,2910],{"class":33,"line":325},[31,2911,2912],{"class":184},"        \u002F\u002F 対象のhtmlファイル\n",[31,2914,2915,2917,2919,2921],{"class":33,"line":331},[31,2916,2626],{"class":58},[31,2918,62],{"class":45},[31,2920,2484],{"class":41},[31,2922,1647],{"class":45},[31,2924,2925],{"class":33,"line":337},[31,2926,249],{"emptyLinePlaceholder":248},[31,2928,2929],{"class":33,"line":1752},[31,2930,2931],{"class":184},"        \u002F\u002F 圧縮するかどうか。defaultはtrue\n",[31,2933,2934,2936,2938],{"class":33,"line":1758},[31,2935,2638],{"class":58},[31,2937,62],{"class":45},[31,2939,2644],{"class":2643},[31,2941,2942,2944],{"class":33,"line":1764},[31,2943,2650],{"class":45},[31,2945,2653],{"class":58},[31,2947,2948],{"class":33,"line":2088},[31,2949,2659],{"class":58},[31,2951,2952,2954,2956],{"class":33,"line":2098},[31,2953,469],{"class":45},[31,2955,1018],{"class":41},[31,2957,243],{"class":45},[13,2959,2960,2963,2964,2966],{},[17,2961,2962],{},"new HtmlWebpackPlugin()","では対象のHTMLファイルをwebpackに読み込ませますが、１ファイルづつなのでhtmlが複数ある場合、",[17,2965,2258],{},"などを使用して複数の対象ファイルを取得してforeachで回します。",[13,2968,2969,2970,2972,2973,1876,2975,2977],{},"こうすることで",[17,2971,2690],{},"配下のhtmlがバンドルされます。適当に内容を書いてnpm run buildしてみましょう。dist配下に",[17,2974,1875],{},[17,2976,1879],{},"が出力されるはずです。",[377,2979,2981,2984],{"className":2980},[380,381],[17,2982,2983],{},"inject:'body'","がある場合、htmlにはバンドル対象のcss\u002Fjsを読み込む為のscriptやlinkを記述する必要はありません。自動的に挿入されます。\n",[365,2986,2987],{"id":2987},"画像パスの解決",[13,2989,2990,2991,616,2993,2995],{},"HTML編の最後に画像パスの解決を行います。",[17,2992,1892],{},[17,2994,1847],{},"などロード可能な属性を見つけるとそのパスなどの解決を行おうとします。たとえば以下のようなタグある場合",[22,2997,3000],{"className":2998,"code":2999,"language":1871,"meta":27,"style":27},"language-html shiki shiki-themes material-theme-ocean","\u003C!-- バンドル前 -->\n\u003Cimg src=\"image.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\".\u002Fimage.png\"\u002F>\n",[17,3001,3002,3007,3030,3034,3039],{"__ignoreMap":27},[31,3003,3004],{"class":33,"line":34},[31,3005,3006],{"class":184},"\u003C!-- バンドル前 -->\n",[31,3008,3009,3012,3015,3018,3020,3022,3025,3027],{"class":33,"line":52},[31,3010,3011],{"class":45},"\u003C",[31,3013,3014],{"class":58},"img",[31,3016,3017],{"class":37}," src",[31,3019,46],{"class":45},[31,3021,77],{"class":45},[31,3023,3024],{"class":80},"image.png",[31,3026,77],{"class":45},[31,3028,3029],{"class":45},"\u002F>\n",[31,3031,3032],{"class":33,"line":103},[31,3033,249],{"emptyLinePlaceholder":248},[31,3035,3036],{"class":33,"line":142},[31,3037,3038],{"class":184},"\u003C!-- バンドル後 -->\n",[31,3040,3041,3043,3045,3047,3049,3051,3054,3056],{"class":33,"line":181},[31,3042,3011],{"class":45},[31,3044,3014],{"class":58},[31,3046,3017],{"class":37},[31,3048,46],{"class":45},[31,3050,77],{"class":45},[31,3052,3053],{"class":80},".\u002Fimage.png",[31,3055,77],{"class":45},[31,3057,3029],{"class":45},[13,3059,3060,3061,3063],{},"このように自動的にパスの調整を行います。相対パスだと階層が深い時大変ですので、scssではエイリアスを用いて",[17,3062,1847],{},"を指定できましたが、htmlは残念ながらできません。",[22,3065,3067],{"className":2998,"code":3066,"language":1871,"meta":27,"style":27},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"~\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- Module not found -->\n",[17,3068,3069,3073,3092,3096],{"__ignoreMap":27},[31,3070,3071],{"class":33,"line":34},[31,3072,3006],{"class":184},[31,3074,3075,3077,3079,3081,3083,3085,3088,3090],{"class":33,"line":52},[31,3076,3011],{"class":45},[31,3078,3014],{"class":58},[31,3080,3017],{"class":37},[31,3082,46],{"class":45},[31,3084,77],{"class":45},[31,3086,3087],{"class":80},"~\u002Fimg\u002Fimage.png",[31,3089,77],{"class":45},[31,3091,3029],{"class":45},[31,3093,3094],{"class":33,"line":103},[31,3095,249],{"emptyLinePlaceholder":248},[31,3097,3098],{"class":33,"line":142},[31,3099,3100],{"class":184},"\u003C!-- Module not found -->\n",[13,3102,3103,3104,3106,3107,3109],{},"しかし対処法はあります。",[17,3105,1916],{},"の",[17,3108,2575],{},"にrootsプロパティーを記述します。",[22,3111,3113],{"className":24,"code":3112,"filename":1916,"language":26,"meta":27,"style":27},"const buildDefault = {\n    resolve:{\n        extensions: ['.js', '.json', '.scss', '.css'],\n        alias: {\n            '~': path.resolve(__dirname, 'src'),\n        },\n        \u002F\u002F ↓追加！\n        roots: [path.resolve(__dirname, \"src\")],\n    },\n}\n",[17,3114,3115,3125,3132,3179,3188,3221,3226,3231,3260,3264],{"__ignoreMap":27},[31,3116,3117,3119,3121,3123],{"class":33,"line":34},[31,3118,38],{"class":37},[31,3120,2036],{"class":41},[31,3122,46],{"class":45},[31,3124,1602],{"class":45},[31,3126,3127,3130],{"class":33,"line":52},[31,3128,3129],{"class":58},"    resolve",[31,3131,1660],{"class":45},[31,3133,3134,3137,3139,3141,3143,3146,3148,3150,3152,3155,3157,3159,3161,3164,3166,3168,3170,3173,3175,3177],{"class":33,"line":103},[31,3135,3136],{"class":58},"        extensions",[31,3138,62],{"class":45},[31,3140,512],{"class":41},[31,3142,2005],{"class":45},[31,3144,3145],{"class":80},".js",[31,3147,2005],{"class":45},[31,3149,69],{"class":45},[31,3151,2000],{"class":45},[31,3153,3154],{"class":80},".json",[31,3156,2005],{"class":45},[31,3158,69],{"class":45},[31,3160,2000],{"class":45},[31,3162,3163],{"class":80},".scss",[31,3165,2005],{"class":45},[31,3167,69],{"class":45},[31,3169,2000],{"class":45},[31,3171,3172],{"class":80},".css",[31,3174,2005],{"class":45},[31,3176,472],{"class":41},[31,3178,1647],{"class":45},[31,3180,3181,3184,3186],{"class":33,"line":142},[31,3182,3183],{"class":58},"        alias",[31,3185,62],{"class":45},[31,3187,1602],{"class":45},[31,3189,3190,3193,3196,3198,3200,3203,3205,3207,3209,3211,3213,3215,3217,3219],{"class":33,"line":181},[31,3191,3192],{"class":45},"            '",[31,3194,3195],{"class":58},"~",[31,3197,2005],{"class":45},[31,3199,62],{"class":45},[31,3201,3202],{"class":41}," path",[31,3204,237],{"class":45},[31,3206,2575],{"class":259},[31,3208,2578],{"class":41},[31,3210,69],{"class":45},[31,3212,2000],{"class":45},[31,3214,1847],{"class":80},[31,3216,2005],{"class":45},[31,3218,1018],{"class":41},[31,3220,1647],{"class":45},[31,3222,3223],{"class":33,"line":188},[31,3224,3225],{"class":45},"        },\n",[31,3227,3228],{"class":33,"line":283},[31,3229,3230],{"class":184},"        \u002F\u002F ↓追加！\n",[31,3232,3233,3236,3238,3241,3243,3245,3247,3249,3251,3253,3255,3258],{"class":33,"line":289},[31,3234,3235],{"class":58},"        roots",[31,3237,62],{"class":45},[31,3239,3240],{"class":41}," [path",[31,3242,237],{"class":45},[31,3244,2575],{"class":259},[31,3246,2578],{"class":41},[31,3248,69],{"class":45},[31,3250,649],{"class":45},[31,3252,1847],{"class":80},[31,3254,77],{"class":45},[31,3256,3257],{"class":41},")]",[31,3259,1647],{"class":45},[31,3261,3262],{"class":33,"line":295},[31,3263,2017],{"class":45},[31,3265,3266],{"class":33,"line":301},[31,3267,334],{"class":45},[13,3269,3270],{},"このrootsプロパティを追加した後、パスは以下のようにします。",[22,3272,3274],{"className":2998,"code":3273,"language":1871,"meta":27,"style":27},"\u003C!-- バンドル前 -->\n\u003Cimg src=\"\u002Fimg\u002Fimage.png\"\u002F>\n\n\u003C!-- バンドル後 -->\n\u003Cimg src=\"img\u002Fimage.png\"\u002F>\n",[17,3275,3276,3280,3299,3303,3307],{"__ignoreMap":27},[31,3277,3278],{"class":33,"line":34},[31,3279,3006],{"class":184},[31,3281,3282,3284,3286,3288,3290,3292,3295,3297],{"class":33,"line":52},[31,3283,3011],{"class":45},[31,3285,3014],{"class":58},[31,3287,3017],{"class":37},[31,3289,46],{"class":45},[31,3291,77],{"class":45},[31,3293,3294],{"class":80},"\u002Fimg\u002Fimage.png",[31,3296,77],{"class":45},[31,3298,3029],{"class":45},[31,3300,3301],{"class":33,"line":103},[31,3302,249],{"emptyLinePlaceholder":248},[31,3304,3305],{"class":33,"line":142},[31,3306,3038],{"class":184},[31,3308,3309,3311,3313,3315,3317,3319,3322,3324],{"class":33,"line":181},[31,3310,3011],{"class":45},[31,3312,3014],{"class":58},[31,3314,3017],{"class":37},[31,3316,46],{"class":45},[31,3318,77],{"class":45},[31,3320,3321],{"class":80},"img\u002Fimage.png",[31,3323,77],{"class":45},[31,3325,3029],{"class":45},[13,3327,3328,3331,3332,3334,3335,3338],{},[17,3329,3330],{},"roots: [path.resolve(__dirname, \"src\")],","によって",[17,3333,3294],{},"のパスを",[17,3336,3337],{},"src\u002F","を基準に探してくれるようになります。HTMLの場合はこのようにして画像を指定します。",[207,3340,3342],{"id":3341},"pugでhtmlファイルをバンドルする","pugでHTMLファイルをバンドルする",[13,3344,3345,3346,3348],{},"ひとまず以上の設定でhtmlファイルが使用できるようになりました。",[17,3347,2690],{},"配下で必要なページ分だけのHTMLを作成して、スタイルはscss、jsも一つにまとめられてスマートに見えます。しかし、繰り返しの記述をしたりテンプレートを作成してより効率的に描きたい時もあると思います。そんな時、テンプレートエンジンと呼ばれるものを使用することでより効率よくマークアップができるようになります。今回はpugを用います。（他の候補としてEJSなどがある）",[365,3350,3351],{"id":3351},"pugの使い方",[13,3353,3354],{},"今回は詳しい説明は省略しますが、概要的に伝えます。pugは以下のような記述でhtmlのマークアップが可能です。",[13,3356,3357],{},"レイアウトテンプレートファイル",[22,3359,3364],{"className":3360,"code":3361,"filename":3362,"language":3363,"meta":27,"style":27},"language-pug shiki shiki-themes material-theme-ocean","doctype html\nhtml(lang=\"ja\")\n    block head\n        include ..\u002Fcomponents\u002Fhead_conf\n    body\n        .body-wrapper\n            block header\n                include ..\u002Fcomponents\u002Fheader\n\n            main.p-main-content\n                block content\n\n            block footer\n                include ..\u002Fcomponents\u002Ffooter\n            \n            block footerNav \n                include ..\u002Fcomponents\u002FfooterNav\n","layout\u002Fdefault.pug","pug",[17,3365,3366,3371,3376,3381,3386,3391,3396,3401,3406,3410,3415,3420,3424,3429,3434,3439,3444],{"__ignoreMap":27},[31,3367,3368],{"class":33,"line":34},[31,3369,3370],{},"doctype html\n",[31,3372,3373],{"class":33,"line":52},[31,3374,3375],{},"html(lang=\"ja\")\n",[31,3377,3378],{"class":33,"line":103},[31,3379,3380],{},"    block head\n",[31,3382,3383],{"class":33,"line":142},[31,3384,3385],{},"        include ..\u002Fcomponents\u002Fhead_conf\n",[31,3387,3388],{"class":33,"line":181},[31,3389,3390],{},"    body\n",[31,3392,3393],{"class":33,"line":188},[31,3394,3395],{},"        .body-wrapper\n",[31,3397,3398],{"class":33,"line":283},[31,3399,3400],{},"            block header\n",[31,3402,3403],{"class":33,"line":289},[31,3404,3405],{},"                include ..\u002Fcomponents\u002Fheader\n",[31,3407,3408],{"class":33,"line":295},[31,3409,249],{"emptyLinePlaceholder":248},[31,3411,3412],{"class":33,"line":301},[31,3413,3414],{},"            main.p-main-content\n",[31,3416,3417],{"class":33,"line":307},[31,3418,3419],{},"                block content\n",[31,3421,3422],{"class":33,"line":313},[31,3423,249],{"emptyLinePlaceholder":248},[31,3425,3426],{"class":33,"line":319},[31,3427,3428],{},"            block footer\n",[31,3430,3431],{"class":33,"line":325},[31,3432,3433],{},"                include ..\u002Fcomponents\u002Ffooter\n",[31,3435,3436],{"class":33,"line":331},[31,3437,3438],{},"            \n",[31,3440,3441],{"class":33,"line":337},[31,3442,3443],{},"            block footerNav \n",[31,3445,3446],{"class":33,"line":1752},[31,3447,3448],{},"                include ..\u002Fcomponents\u002FfooterNav\n",[13,3450,3451,3452,3455],{},"main配下のページ内容（上記のテンプレートファイルの",[17,3453,3454],{},"block content","に展開）",[22,3457,3460],{"className":3360,"code":3458,"filename":3459,"language":3363,"meta":27,"style":27},"extends ..\u002Flayouts\u002Fdefault.pug\ninclude ..\u002Fcomponents\u002Fbadge\n    include ..\u002Fcomponents\u002F_data\n        - var recommneds = variables.recommneds\n\nblock content\n    .p-first-view-content\n        .p-sliders.swiper(id=\"top-slider\")\n            .p-slider-wrapper.swiper-wrapper\n                .c-slider.swiper-slide\n                    .c-img-adjuster\n                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n                .c-slider.swiper-slide\n                    .c-img-adjuster\n                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n    \n    div.p-fullfilled\n        .p-row-container\n            .p-row-wrapper\n                each val,index in recommneds\n                    +badge(val,\"recommend-\"+index)\n","pages\u002Findex.pug",[17,3461,3462,3467,3472,3477,3482,3486,3491,3496,3501,3506,3511,3516,3521,3525,3529,3533,3537,3542,3547,3552,3557],{"__ignoreMap":27},[31,3463,3464],{"class":33,"line":34},[31,3465,3466],{},"extends ..\u002Flayouts\u002Fdefault.pug\n",[31,3468,3469],{"class":33,"line":52},[31,3470,3471],{},"include ..\u002Fcomponents\u002Fbadge\n",[31,3473,3474],{"class":33,"line":103},[31,3475,3476],{},"    include ..\u002Fcomponents\u002F_data\n",[31,3478,3479],{"class":33,"line":142},[31,3480,3481],{},"        - var recommneds = variables.recommneds\n",[31,3483,3484],{"class":33,"line":181},[31,3485,249],{"emptyLinePlaceholder":248},[31,3487,3488],{"class":33,"line":188},[31,3489,3490],{},"block content\n",[31,3492,3493],{"class":33,"line":283},[31,3494,3495],{},"    .p-first-view-content\n",[31,3497,3498],{"class":33,"line":289},[31,3499,3500],{},"        .p-sliders.swiper(id=\"top-slider\")\n",[31,3502,3503],{"class":33,"line":295},[31,3504,3505],{},"            .p-slider-wrapper.swiper-wrapper\n",[31,3507,3508],{"class":33,"line":301},[31,3509,3510],{},"                .c-slider.swiper-slide\n",[31,3512,3513],{"class":33,"line":307},[31,3514,3515],{},"                    .c-img-adjuster\n",[31,3517,3518],{"class":33,"line":313},[31,3519,3520],{},"                        img(src=require(\"~\u002Fimg\u002Fsample\u002Ftop_slider_img.jpg\"), alt=\"スライダーの写真\")\n",[31,3522,3523],{"class":33,"line":319},[31,3524,3510],{},[31,3526,3527],{"class":33,"line":325},[31,3528,3515],{},[31,3530,3531],{"class":33,"line":331},[31,3532,3520],{},[31,3534,3535],{"class":33,"line":337},[31,3536,2085],{},[31,3538,3539],{"class":33,"line":1752},[31,3540,3541],{},"    div.p-fullfilled\n",[31,3543,3544],{"class":33,"line":1758},[31,3545,3546],{},"        .p-row-container\n",[31,3548,3549],{"class":33,"line":1764},[31,3550,3551],{},"            .p-row-wrapper\n",[31,3553,3554],{"class":33,"line":2088},[31,3555,3556],{},"                each val,index in recommneds\n",[31,3558,3559],{"class":33,"line":2098},[31,3560,3561],{},"                    +badge(val,\"recommend-\"+index)\n",[13,3563,3564],{},"for文によるループ、テンプレート、mixinやインポートなどPHPなどバック側で行っていたような、htmlの構築ができます。laravelのbladeみたいな感じです。pugを使うことでhtmlで面倒と思っていたことは大体解消できます。変更にも強いのでpugは使うことをお勧めします。",[365,3566,3567],{"id":3567},"ディレクトリを少し変更",[13,3569,3570,3571,3573],{},"htmlの時は単に",[17,3572,2690],{},"配下にファイルを配置するだけでしたが、もう少しpugで管理しやすいように以下のように変更します。",[22,3575,3578],{"className":3576,"code":3577,"language":1864},[1862],".\n├── dist\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs\n│   ├── html\n│   │   ├── component\n│   │   ├── layout\n│   │   └── page\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n",[17,3579,3577],{"__ignoreMap":27},[13,3581,3582,69,3585,69,3588,3591,3592,3594,3595,3597,3598,3600],{},[17,3583,3584],{},"component",[17,3586,3587],{},"layout",[17,3589,3590],{},"page",",というものを追加しました。",[17,3593,3584],{},"は繰り返し使われるパーツ（ボタンとかカードとか）のpugを格納、",[17,3596,3587],{},"はhead,bodyの構成を含めたmainタグ以外の箇所のレイアウトを決めるpugを格納し、",[17,3599,3590],{},"にバンドル対象の各種ページのpugを配置します。",[13,3602,3603,3605,3606,1876,3609,3612,3613,3615],{},[17,3604,3590],{},"に先ほどの",[17,3607,3608],{},"index.pug",[17,3610,3611],{}," detail.pug","を配置して、最終的にhtmlにして",[17,3614,1843],{},"に配置します。適宜component、layoutからファイルをインポートして使用します。私は大体のプロジェクトはこれで十分なカバーできる気がします。",[365,3617,3618],{"id":3618},"webpackでpugを扱う",[13,3620,3621],{},"それではwebpackでpugを扱えるようにしましょう。以下のloaderとpluginを入れます。",[22,3623,3626],{"className":3624,"code":3625,"language":1864},[1862],"npm install -D pug-loader html-webpack-plugin\n",[17,3627,3625],{"__ignoreMap":27},[13,3629,3630,3632],{},[17,3631,2171],{}," はHTML編でここでは入っていれば入りません。",[13,3634,3635,3636,3638],{},"まずは",[17,3637,1911],{},"にpugのruleとloaderを追加します。",[22,3640,3642],{"className":24,"code":3641,"filename":1916,"language":26,"meta":27,"style":27},"\n\u002F\u002F rulesの配列は後で\nlet rules = [\n    \u002F\u002F ... \n    \u002F\u002F 追加↓\n    {\n        test: \u002F\\.pug$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n          {\n            loader: 'pug-loader',\n            options: {\n              pretty: true,\n            }\n          }\n        ]\n    }\n    \u002F\u002F ...\n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F ...\n}\n\u002F\u002F...\n\nmodule.exports = buildDefault;\n",[17,3643,3644,3648,3652,3662,3666,3670,3674,3692,3708,3716,3721,3736,3745,3757,3761,3766,3771,3776,3780,3784,3788,3800,3814,3818,3832,3836,3844,3852,3856,3860,3870,3874,3878,3882,3886],{"__ignoreMap":27},[31,3645,3646],{"class":33,"line":34},[31,3647,249],{"emptyLinePlaceholder":248},[31,3649,3650],{"class":33,"line":52},[31,3651,1927],{"class":184},[31,3653,3654,3656,3658,3660],{"class":33,"line":103},[31,3655,1932],{"class":37},[31,3657,1935],{"class":41},[31,3659,46],{"class":45},[31,3661,49],{"class":41},[31,3663,3664],{"class":33,"line":142},[31,3665,1944],{"class":184},[31,3667,3668],{"class":33,"line":181},[31,3669,1949],{"class":184},[31,3671,3672],{"class":33,"line":188},[31,3673,1954],{"class":45},[31,3675,3676,3678,3680,3682,3684,3686,3688,3690],{"class":33,"line":283},[31,3677,1959],{"class":58},[31,3679,62],{"class":45},[31,3681,1964],{"class":45},[31,3683,1967],{"class":41},[31,3685,3363],{"class":80},[31,3687,1976],{"class":1006},[31,3689,1979],{"class":45},[31,3691,1647],{"class":45},[31,3693,3694,3697,3699,3701,3704,3706],{"class":33,"line":289},[31,3695,3696],{"class":58},"        exclude",[31,3698,62],{"class":45},[31,3700,1964],{"class":45},[31,3702,3703],{"class":80},"node_modules",[31,3705,1979],{"class":45},[31,3707,1647],{"class":45},[31,3709,3710,3712,3714],{"class":33,"line":295},[31,3711,1986],{"class":58},[31,3713,62],{"class":45},[31,3715,49],{"class":41},[31,3717,3718],{"class":33,"line":301},[31,3719,3720],{"class":45},"          {\n",[31,3722,3723,3725,3727,3729,3732,3734],{"class":33,"line":307},[31,3724,1995],{"class":58},[31,3726,62],{"class":45},[31,3728,2000],{"class":45},[31,3730,3731],{"class":80},"pug-loader",[31,3733,2005],{"class":45},[31,3735,1647],{"class":45},[31,3737,3738,3741,3743],{"class":33,"line":313},[31,3739,3740],{"class":58},"            options",[31,3742,62],{"class":45},[31,3744,1602],{"class":45},[31,3746,3747,3750,3752,3755],{"class":33,"line":319},[31,3748,3749],{"class":58},"              pretty",[31,3751,62],{"class":45},[31,3753,3754],{"class":2643}," true",[31,3756,1647],{"class":45},[31,3758,3759],{"class":33,"line":325},[31,3760,1749],{"class":45},[31,3762,3763],{"class":33,"line":331},[31,3764,3765],{"class":45},"          }\n",[31,3767,3768],{"class":33,"line":337},[31,3769,3770],{"class":41},"        ]\n",[31,3772,3773],{"class":33,"line":1752},[31,3774,3775],{"class":45},"    }\n",[31,3777,3778],{"class":33,"line":1758},[31,3779,185],{"class":184},[31,3781,3782],{"class":33,"line":1764},[31,3783,191],{"class":41},[31,3785,3786],{"class":33,"line":2088},[31,3787,249],{"emptyLinePlaceholder":248},[31,3789,3790,3792,3794,3796,3798],{"class":33,"line":2098},[31,3791,38],{"class":37},[31,3793,2036],{"class":41},[31,3795,46],{"class":45},[31,3797,2041],{"class":45},[31,3799,1602],{"class":45},[31,3801,3802,3804,3806,3808,3810,3812],{"class":33,"line":2109},[31,3803,2048],{"class":58},[31,3805,62],{"class":45},[31,3807,2000],{"class":45},[31,3809,2055],{"class":80},[31,3811,2005],{"class":45},[31,3813,1647],{"class":45},[31,3815,3816],{"class":33,"line":2114},[31,3817,2064],{"class":41},[31,3819,3820,3822,3824,3826,3828,3830],{"class":33,"line":2119},[31,3821,2069],{"class":58},[31,3823,62],{"class":45},[31,3825,77],{"class":45},[31,3827,2076],{"class":80},[31,3829,77],{"class":45},[31,3831,1647],{"class":45},[31,3833,3834],{"class":33,"line":2131},[31,3835,2085],{"class":41},[31,3837,3838,3840,3842],{"class":33,"line":2136},[31,3839,2091],{"class":58},[31,3841,62],{"class":45},[31,3843,1602],{"class":45},[31,3845,3846,3848,3850],{"class":33,"line":2141},[31,3847,2101],{"class":58},[31,3849,62],{"class":45},[31,3851,2106],{"class":41},[31,3853,3854],{"class":33,"line":2147},[31,3855,2017],{"class":45},[31,3857,3858],{"class":33,"line":2152},[31,3859,249],{"emptyLinePlaceholder":248},[31,3861,3862,3864,3866,3868],{"class":33,"line":4},[31,3863,2122],{"class":58},[31,3865,62],{"class":45},[31,3867,1911],{"class":41},[31,3869,1647],{"class":45},[31,3871,3872],{"class":33,"line":2523},[31,3873,185],{"class":184},[31,3875,3876],{"class":33,"line":2528},[31,3877,334],{"class":45},[31,3879,3880],{"class":33,"line":2547},[31,3881,2144],{"class":184},[31,3883,3884],{"class":33,"line":2560},[31,3885,249],{"emptyLinePlaceholder":248},[31,3887,3888,3890,3892,3894],{"class":33,"line":2606},[31,3889,2155],{"class":45},[31,3891,2041],{"class":45},[31,3893,2160],{"class":41},[31,3895,243],{"class":45},[13,3897,3898],{},"次に",[22,3900,3902],{"className":24,"code":3901,"filename":1916,"language":26,"meta":27,"style":27},"\u002F\u002F ファイル冒頭\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\n\n\u002F\u002F この２つを追加\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n\nlet rules = [\n    \u002F\u002F 省略... \n]\n\nconst buildDefault = = {\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    rules:rules,\n    \u002F\u002F 以下略...\n}\n\n\u002F\u002F これらを追記\nconst pugFiles = globule.find('src\u002Fhtml\u002Fpage\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n\npugFiles.forEach((pug) => {\n    const html = pug.split('\u002F').slice(-1)[0].replace('.pug', '.html');\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${html}`,\n        inject:'body',\n        template: pug,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[17,3903,3904,3908,3930,3952,3956,3960,3982,4004,4008,4018,4022,4026,4030,4042,4056,4060,4074,4078,4086,4094,4098,4102,4112,4116,4120,4124,4128,4156,4185,4193,4197,4218,4287,4301,4311,4349,4363,4373,4381,4387,4391,4399,4403],{"__ignoreMap":27},[31,3905,3906],{"class":33,"line":34},[31,3907,2182],{"class":184},[31,3909,3910,3912,3914,3916,3918,3920,3922,3924,3926,3928],{"class":33,"line":52},[31,3911,38],{"class":37},[31,3913,2189],{"class":41},[31,3915,46],{"class":45},[31,3917,2194],{"class":259},[31,3919,993],{"class":41},[31,3921,2005],{"class":45},[31,3923,2201],{"class":80},[31,3925,2005],{"class":45},[31,3927,1018],{"class":41},[31,3929,243],{"class":45},[31,3931,3932,3934,3936,3938,3940,3942,3944,3946,3948,3950],{"class":33,"line":103},[31,3933,38],{"class":37},[31,3935,2214],{"class":41},[31,3937,46],{"class":45},[31,3939,2194],{"class":259},[31,3941,993],{"class":41},[31,3943,2005],{"class":45},[31,3945,2225],{"class":80},[31,3947,2005],{"class":45},[31,3949,1018],{"class":41},[31,3951,243],{"class":45},[31,3953,3954],{"class":33,"line":142},[31,3955,249],{"emptyLinePlaceholder":248},[31,3957,3958],{"class":33,"line":181},[31,3959,2240],{"class":184},[31,3961,3962,3964,3966,3968,3970,3972,3974,3976,3978,3980],{"class":33,"line":188},[31,3963,38],{"class":37},[31,3965,2247],{"class":41},[31,3967,46],{"class":45},[31,3969,2194],{"class":259},[31,3971,993],{"class":41},[31,3973,2005],{"class":45},[31,3975,2258],{"class":80},[31,3977,2005],{"class":45},[31,3979,1018],{"class":41},[31,3981,243],{"class":45},[31,3983,3984,3986,3988,3990,3992,3994,3996,3998,4000,4002],{"class":33,"line":283},[31,3985,38],{"class":37},[31,3987,2271],{"class":41},[31,3989,46],{"class":45},[31,3991,2194],{"class":259},[31,3993,993],{"class":41},[31,3995,2005],{"class":45},[31,3997,2171],{"class":80},[31,3999,2005],{"class":45},[31,4001,1018],{"class":41},[31,4003,243],{"class":45},[31,4005,4006],{"class":33,"line":289},[31,4007,249],{"emptyLinePlaceholder":248},[31,4009,4010,4012,4014,4016],{"class":33,"line":295},[31,4011,1932],{"class":37},[31,4013,1935],{"class":41},[31,4015,46],{"class":45},[31,4017,49],{"class":41},[31,4019,4020],{"class":33,"line":301},[31,4021,2306],{"class":184},[31,4023,4024],{"class":33,"line":307},[31,4025,191],{"class":41},[31,4027,4028],{"class":33,"line":313},[31,4029,249],{"emptyLinePlaceholder":248},[31,4031,4032,4034,4036,4038,4040],{"class":33,"line":319},[31,4033,38],{"class":37},[31,4035,2036],{"class":41},[31,4037,46],{"class":45},[31,4039,2041],{"class":45},[31,4041,1602],{"class":45},[31,4043,4044,4046,4048,4050,4052,4054],{"class":33,"line":325},[31,4045,2048],{"class":58},[31,4047,62],{"class":45},[31,4049,2000],{"class":45},[31,4051,2055],{"class":80},[31,4053,2005],{"class":45},[31,4055,1647],{"class":45},[31,4057,4058],{"class":33,"line":331},[31,4059,2064],{"class":41},[31,4061,4062,4064,4066,4068,4070,4072],{"class":33,"line":337},[31,4063,2069],{"class":58},[31,4065,62],{"class":45},[31,4067,77],{"class":45},[31,4069,2076],{"class":80},[31,4071,77],{"class":45},[31,4073,1647],{"class":45},[31,4075,4076],{"class":33,"line":1752},[31,4077,2085],{"class":41},[31,4079,4080,4082,4084],{"class":33,"line":1758},[31,4081,2091],{"class":58},[31,4083,62],{"class":45},[31,4085,1602],{"class":45},[31,4087,4088,4090,4092],{"class":33,"line":1764},[31,4089,2101],{"class":58},[31,4091,62],{"class":45},[31,4093,2106],{"class":41},[31,4095,4096],{"class":33,"line":2088},[31,4097,2017],{"class":45},[31,4099,4100],{"class":33,"line":2098},[31,4101,249],{"emptyLinePlaceholder":248},[31,4103,4104,4106,4108,4110],{"class":33,"line":2109},[31,4105,2122],{"class":58},[31,4107,62],{"class":45},[31,4109,1911],{"class":41},[31,4111,1647],{"class":45},[31,4113,4114],{"class":33,"line":2114},[31,4115,2401],{"class":184},[31,4117,4118],{"class":33,"line":2119},[31,4119,334],{"class":45},[31,4121,4122],{"class":33,"line":2131},[31,4123,249],{"emptyLinePlaceholder":248},[31,4125,4126],{"class":33,"line":2136},[31,4127,2414],{"class":184},[31,4129,4130,4132,4135,4137,4139,4141,4143,4145,4147,4150,4152,4154],{"class":33,"line":2141},[31,4131,38],{"class":37},[31,4133,4134],{"class":41}," pugFiles ",[31,4136,46],{"class":45},[31,4138,2426],{"class":41},[31,4140,237],{"class":45},[31,4142,2431],{"class":259},[31,4144,993],{"class":41},[31,4146,2005],{"class":45},[31,4148,4149],{"class":80},"src\u002Fhtml\u002Fpage\u002F*",[31,4151,2005],{"class":45},[31,4153,69],{"class":45},[31,4155,1602],{"class":45},[31,4157,4158,4161,4163,4166,4168,4171,4173,4175,4177,4180,4182],{"class":33,"line":2147},[31,4159,4160],{"class":58},"    ignore",[31,4162,62],{"class":45},[31,4164,4165],{"class":41}," [ ",[31,4167,2005],{"class":45},[31,4169,4170],{"class":80},"src\u002Fhtml\u002Fcomponents\u002F*",[31,4172,2005],{"class":45},[31,4174,69],{"class":45},[31,4176,2005],{"class":45},[31,4178,4179],{"class":80},"src\u002Fhtml.layouts\u002F*",[31,4181,2005],{"class":45},[31,4183,4184],{"class":41}," ]\n",[31,4186,4187,4189,4191],{"class":33,"line":2152},[31,4188,469],{"class":45},[31,4190,1018],{"class":41},[31,4192,243],{"class":45},[31,4194,4195],{"class":33,"line":4},[31,4196,249],{"emptyLinePlaceholder":248},[31,4198,4199,4202,4204,4206,4208,4210,4212,4214,4216],{"class":33,"line":2523},[31,4200,4201],{"class":41},"pugFiles",[31,4203,237],{"class":45},[31,4205,2458],{"class":259},[31,4207,993],{"class":41},[31,4209,993],{"class":45},[31,4211,3363],{"class":996},[31,4213,1018],{"class":45},[31,4215,1000],{"class":37},[31,4217,1602],{"class":45},[31,4219,4220,4222,4225,4227,4230,4232,4234,4236,4238,4240,4242,4244,4246,4248,4250,4252,4254,4256,4258,4260,4262,4265,4267,4269,4272,4274,4276,4278,4281,4283,4285],{"class":33,"line":2528},[31,4221,2476],{"class":37},[31,4223,4224],{"class":41}," html",[31,4226,2041],{"class":45},[31,4228,4229],{"class":41}," pug",[31,4231,237],{"class":45},[31,4233,2489],{"class":259},[31,4235,993],{"class":58},[31,4237,2005],{"class":45},[31,4239,1979],{"class":80},[31,4241,2005],{"class":45},[31,4243,1018],{"class":58},[31,4245,237],{"class":45},[31,4247,2504],{"class":259},[31,4249,993],{"class":58},[31,4251,2509],{"class":45},[31,4253,66],{"class":65},[31,4255,2514],{"class":58},[31,4257,578],{"class":65},[31,4259,472],{"class":58},[31,4261,237],{"class":45},[31,4263,4264],{"class":259},"replace",[31,4266,993],{"class":58},[31,4268,2005],{"class":45},[31,4270,4271],{"class":80},".pug",[31,4273,2005],{"class":45},[31,4275,69],{"class":45},[31,4277,2000],{"class":45},[31,4279,4280],{"class":80},".html",[31,4282,2005],{"class":45},[31,4284,1018],{"class":58},[31,4286,243],{"class":45},[31,4288,4289,4291,4293,4295,4297,4299],{"class":33,"line":2547},[31,4290,2531],{"class":41},[31,4292,237],{"class":45},[31,4294,2536],{"class":41},[31,4296,237],{"class":45},[31,4298,2541],{"class":259},[31,4300,2544],{"class":58},[31,4302,4303,4305,4307,4309],{"class":33,"line":2560},[31,4304,2550],{"class":45},[31,4306,2553],{"class":259},[31,4308,993],{"class":58},[31,4310,275],{"class":45},[31,4312,4313,4315,4317,4319,4321,4323,4325,4327,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347],{"class":33,"line":2606},[31,4314,2563],{"class":58},[31,4316,62],{"class":45},[31,4318,2568],{"class":45},[31,4320,2225],{"class":41},[31,4322,237],{"class":45},[31,4324,2575],{"class":259},[31,4326,2578],{"class":41},[31,4328,69],{"class":45},[31,4330,2000],{"class":45},[31,4332,1843],{"class":80},[31,4334,2005],{"class":45},[31,4336,1018],{"class":41},[31,4338,469],{"class":45},[31,4340,1979],{"class":80},[31,4342,2595],{"class":45},[31,4344,1871],{"class":41},[31,4346,2601],{"class":45},[31,4348,1647],{"class":45},[31,4350,4351,4353,4355,4357,4359,4361],{"class":33,"line":2623},[31,4352,2609],{"class":58},[31,4354,62],{"class":45},[31,4356,2005],{"class":45},[31,4358,2616],{"class":80},[31,4360,2005],{"class":45},[31,4362,1647],{"class":45},[31,4364,4365,4367,4369,4371],{"class":33,"line":2635},[31,4366,2626],{"class":58},[31,4368,62],{"class":45},[31,4370,4229],{"class":41},[31,4372,1647],{"class":45},[31,4374,4375,4377,4379],{"class":33,"line":2647},[31,4376,2638],{"class":58},[31,4378,62],{"class":45},[31,4380,2644],{"class":2643},[31,4382,4383,4385],{"class":33,"line":2656},[31,4384,2650],{"class":45},[31,4386,2653],{"class":58},[31,4388,4389],{"class":33,"line":2662},[31,4390,2659],{"class":58},[31,4392,4393,4395,4397],{"class":33,"line":2671},[31,4394,469],{"class":45},[31,4396,1018],{"class":41},[31,4398,243],{"class":45},[31,4400,4401],{"class":33,"line":2676},[31,4402,249],{"emptyLinePlaceholder":248},[31,4404,4406,4408,4410,4412],{"class":33,"line":4405},43,[31,4407,2155],{"class":45},[31,4409,2041],{"class":45},[31,4411,2160],{"class":41},[31,4413,243],{"class":45},[13,4415,4416],{},"詳細はHTML編の記述を見てください。HTML編と似ていますが、",[22,4418,4420],{"className":24,"code":4419,"language":26,"meta":27,"style":27},"const pugFiles = globule.find('src\u002Fhtml\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n",[17,4421,4422,4449,4473],{"__ignoreMap":27},[31,4423,4424,4426,4428,4430,4432,4434,4436,4438,4440,4443,4445,4447],{"class":33,"line":34},[31,4425,38],{"class":37},[31,4427,4134],{"class":41},[31,4429,46],{"class":45},[31,4431,2426],{"class":41},[31,4433,237],{"class":45},[31,4435,2431],{"class":259},[31,4437,993],{"class":41},[31,4439,2005],{"class":45},[31,4441,4442],{"class":80},"src\u002Fhtml\u002F*",[31,4444,2005],{"class":45},[31,4446,69],{"class":45},[31,4448,1602],{"class":45},[31,4450,4451,4453,4455,4457,4459,4461,4463,4465,4467,4469,4471],{"class":33,"line":52},[31,4452,4160],{"class":58},[31,4454,62],{"class":45},[31,4456,4165],{"class":41},[31,4458,2005],{"class":45},[31,4460,4170],{"class":80},[31,4462,2005],{"class":45},[31,4464,69],{"class":45},[31,4466,2005],{"class":45},[31,4468,4179],{"class":80},[31,4470,2005],{"class":45},[31,4472,4184],{"class":41},[31,4474,4475,4477,4479],{"class":33,"line":103},[31,4476,469],{"class":45},[31,4478,1018],{"class":41},[31,4480,243],{"class":45},[13,4482,4483,4485,4486,4489,4490,4492],{},[17,4484,2258],{},"では",[17,4487,4488],{},"ignore","を指定して全てのpugファイルを拾わないようにします。（今回の構成ならfindするディレクトリを ",[17,4491,4149],{}," にしてもいいかもしれません）",[13,4494,4495],{},"基本的にはこれでpugは使えるようになります。",[365,4497,4498],{"id":4498},"pugでの画像パスの解決",[13,4500,4501,4502,4504,4505,4508],{},"HTMLでは",[17,4503,2575],{},"で",[17,4506,4507],{},"roots","を指定していました。pugではそれらの指定は特に必要なく、以下のように指定します。",[22,4510,4512],{"className":3360,"code":4511,"language":3363,"meta":27,"style":27},"\u002F\u002F- OK\nimg(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n\n\u002F\u002F- NG\nimg(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[17,4513,4514,4519,4524,4528,4533],{"__ignoreMap":27},[31,4515,4516],{"class":33,"line":34},[31,4517,4518],{},"\u002F\u002F- OK\n",[31,4520,4521],{"class":33,"line":52},[31,4522,4523],{},"img(src=require(\"~\u002Fimg\u002Fsample.png\"), alt=\"\")\n",[31,4525,4526],{"class":33,"line":103},[31,4527,249],{"emptyLinePlaceholder":248},[31,4529,4530],{"class":33,"line":142},[31,4531,4532],{},"\u002F\u002F- NG\n",[31,4534,4535],{"class":33,"line":181},[31,4536,4537],{},"img(src=\"~\u002Fimg\u002Fsample.png\", alt=\"\")\n",[13,4539,4540],{},"pugではnode.jsやjsの記述が利用できる為、requireを用いてエイリアスと一緒にパスの解決ができます。",[207,4542,4544],{"id":4543},"以上","以上！",[13,4546,4547,4548,4550],{},"以上でwebpackを用いたjs,scss,画像,htmlのバンドルは以上となります。vueやtypecriptの導入を考えるとさらに深い理解は必要そうですが、ひとまずHTMLのマークアップ程度であれば今回の構成を用いれば十分な気がします。vue・typesciptもいずれやってみようと思います。また今回使用した",[17,4549,1916],{},"は以下の通りとなります。参考にどうぞ。",[22,4552,4554],{"className":24,"code":4553,"filename":1916,"language":26,"meta":27,"style":27},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\nconst globule = require('globule');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\n  \nlet rules = [\n    {\n        test: \u002F\\.(sa|sc|c)ss$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n            MiniCssExtractPlugin.loader,\n            {\n                loader: 'css-loader',\n                options: { url: true }\n            },\n            'sass-loader',\n        ],\n    },\n    {\n        test: \u002F\\.(png|jpg|gif|svg)$\u002Fi,\n        generator: {\n            filename: 'img\u002F[name][ext][query]'\n        },\n        type: 'asset\u002Fresource'\n    },\n    {\n        test: \u002F\\.(html)$\u002F,\n        use: {\n            loader: 'html-loader',\n        }\n     },\n    {\n        test: \u002F\\.pug$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n          {\n            loader: 'pug-loader',\n            options: {\n              pretty: true,\n            }\n          }\n        ]\n    }\n]\n\nif(process.env.es5){\n    rules.push(\n        {\n            test: \u002F\\.m?js$\u002F,\n            exclude: \u002F(node_modules|bower_components)\u002F,\n            use: {\n              loader: 'babel-loader',\n              options: {\n                presets: ['@babel\u002Fpreset-env']\n              }\n            },\n            generator: {\n              filename: '[name].js'\n            }\n        }\n    )\n}\n\nconst buildDefault = {\n    entry:['.\u002Fsrc\u002Findex.js'],\n  \n    mode:process.env.mode,\n    \n    module: {\n        rules: rules\n    },\n    resolve:{\n        extensions: ['.js', '.json', '.scss', '.css'],\n        alias: {\n          '~': path.resolve(__dirname, 'src'),\n        },\n        roots: [path.resolve(__dirname, \"src\")],\n    },\n    \u002F\u002F ファイルの出力設定\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        filename: '[name].js',\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: '[name].css'\n        }),\n    ]\n};\n\nconst pugFiles = globule.find('src\u002Fhtml\u002F*', {\n    ignore: [ 'src\u002Fhtml\u002Fcomponents\u002F*','src\u002Fhtml.layouts\u002F*' ]\n});\n\npugFiles.forEach((pug) => {\n    const html = pug.split('\u002F').slice(-1)[0].replace('.pug', '.html');\n    buildDefault.plugins.push(\n      new HtmlWebpackPlugin({\n        filename: `${path.resolve(__dirname, 'dist')}\u002F${html}`,\n        inject:'body',\n        template: pug,\n        minify: false\n      })\n    )\n});\n\nmodule.exports = buildDefault;\n",[17,4555,4556,4578,4600,4622,4644,4648,4658,4662,4699,4713,4721,4733,4737,4753,4772,4776,4787,4794,4798,4802,4843,4852,4867,4871,4885,4889,4893,4915,4923,4937,4941,4946,4950,4968,4982,4990,4994,5008,5016,5026,5030,5034,5038,5042,5047,5052,5073,5084,5090,5116,5139,5149,5166,5176,5195,5201,5206,5216,5231,5236,5241,5246,5251,5256,5267,5287,5292,5313,5318,5327,5336,5341,5348,5391,5400,5432,5437,5464,5469,5475,5485,5491,5514,5529,5534,5544,5557,5571,5581,5586,5592,5597,5624,5649,5658,5663,5684,5749,5764,5775,5814,5829,5840,5849,5856,5861,5870,5875],{"__ignoreMap":27},[31,4557,4558,4560,4562,4564,4566,4568,4570,4572,4574,4576],{"class":33,"line":34},[31,4559,38],{"class":37},[31,4561,2189],{"class":41},[31,4563,46],{"class":45},[31,4565,2194],{"class":259},[31,4567,993],{"class":41},[31,4569,2005],{"class":45},[31,4571,2201],{"class":80},[31,4573,2005],{"class":45},[31,4575,1018],{"class":41},[31,4577,243],{"class":45},[31,4579,4580,4582,4584,4586,4588,4590,4592,4594,4596,4598],{"class":33,"line":52},[31,4581,38],{"class":37},[31,4583,2214],{"class":41},[31,4585,46],{"class":45},[31,4587,2194],{"class":259},[31,4589,993],{"class":41},[31,4591,2005],{"class":45},[31,4593,2225],{"class":80},[31,4595,2005],{"class":45},[31,4597,1018],{"class":41},[31,4599,243],{"class":45},[31,4601,4602,4604,4606,4608,4610,4612,4614,4616,4618,4620],{"class":33,"line":103},[31,4603,38],{"class":37},[31,4605,2247],{"class":41},[31,4607,46],{"class":45},[31,4609,2194],{"class":259},[31,4611,993],{"class":41},[31,4613,2005],{"class":45},[31,4615,2258],{"class":80},[31,4617,2005],{"class":45},[31,4619,1018],{"class":41},[31,4621,243],{"class":45},[31,4623,4624,4626,4628,4630,4632,4634,4636,4638,4640,4642],{"class":33,"line":142},[31,4625,38],{"class":37},[31,4627,2271],{"class":41},[31,4629,46],{"class":45},[31,4631,2194],{"class":259},[31,4633,993],{"class":41},[31,4635,2005],{"class":45},[31,4637,2171],{"class":80},[31,4639,2005],{"class":45},[31,4641,1018],{"class":41},[31,4643,243],{"class":45},[31,4645,4646],{"class":33,"line":181},[31,4647,2064],{"class":41},[31,4649,4650,4652,4654,4656],{"class":33,"line":188},[31,4651,1932],{"class":37},[31,4653,1935],{"class":41},[31,4655,46],{"class":45},[31,4657,49],{"class":41},[31,4659,4660],{"class":33,"line":283},[31,4661,1954],{"class":45},[31,4663,4664,4666,4668,4670,4672,4674,4677,4680,4683,4685,4688,4690,4693,4695,4697],{"class":33,"line":289},[31,4665,1959],{"class":58},[31,4667,62],{"class":45},[31,4669,1964],{"class":45},[31,4671,1967],{"class":41},[31,4673,993],{"class":45},[31,4675,4676],{"class":80},"sa",[31,4678,4679],{"class":45},"|",[31,4681,4682],{"class":80},"sc",[31,4684,4679],{"class":45},[31,4686,4687],{"class":80},"c",[31,4689,1018],{"class":45},[31,4691,4692],{"class":80},"ss",[31,4694,1976],{"class":1006},[31,4696,1979],{"class":45},[31,4698,1647],{"class":45},[31,4700,4701,4703,4705,4707,4709,4711],{"class":33,"line":295},[31,4702,3696],{"class":58},[31,4704,62],{"class":45},[31,4706,1964],{"class":45},[31,4708,3703],{"class":80},[31,4710,1979],{"class":45},[31,4712,1647],{"class":45},[31,4714,4715,4717,4719],{"class":33,"line":301},[31,4716,1986],{"class":58},[31,4718,62],{"class":45},[31,4720,49],{"class":41},[31,4722,4723,4726,4728,4731],{"class":33,"line":307},[31,4724,4725],{"class":41},"            MiniCssExtractPlugin",[31,4727,237],{"class":45},[31,4729,4730],{"class":41},"loader",[31,4732,1647],{"class":45},[31,4734,4735],{"class":33,"line":313},[31,4736,1635],{"class":45},[31,4738,4739,4742,4744,4746,4749,4751],{"class":33,"line":319},[31,4740,4741],{"class":58},"                loader",[31,4743,62],{"class":45},[31,4745,2000],{"class":45},[31,4747,4748],{"class":80},"css-loader",[31,4750,2005],{"class":45},[31,4752,1647],{"class":45},[31,4754,4755,4758,4760,4762,4765,4767,4769],{"class":33,"line":325},[31,4756,4757],{"class":58},"                options",[31,4759,62],{"class":45},[31,4761,1003],{"class":45},[31,4763,4764],{"class":58}," url",[31,4766,62],{"class":45},[31,4768,3754],{"class":2643},[31,4770,4771],{"class":45}," }\n",[31,4773,4774],{"class":33,"line":331},[31,4775,1696],{"class":45},[31,4777,4778,4780,4783,4785],{"class":33,"line":337},[31,4779,3192],{"class":45},[31,4781,4782],{"class":80},"sass-loader",[31,4784,2005],{"class":45},[31,4786,1647],{"class":45},[31,4788,4789,4792],{"class":33,"line":1752},[31,4790,4791],{"class":41},"        ]",[31,4793,1647],{"class":45},[31,4795,4796],{"class":33,"line":1758},[31,4797,2017],{"class":45},[31,4799,4800],{"class":33,"line":1764},[31,4801,1954],{"class":45},[31,4803,4804,4806,4808,4810,4812,4814,4817,4819,4822,4824,4827,4829,4832,4834,4836,4838,4841],{"class":33,"line":2088},[31,4805,1959],{"class":58},[31,4807,62],{"class":45},[31,4809,1964],{"class":45},[31,4811,1967],{"class":41},[31,4813,993],{"class":45},[31,4815,4816],{"class":80},"png",[31,4818,4679],{"class":45},[31,4820,4821],{"class":80},"jpg",[31,4823,4679],{"class":45},[31,4825,4826],{"class":80},"gif",[31,4828,4679],{"class":45},[31,4830,4831],{"class":80},"svg",[31,4833,1018],{"class":45},[31,4835,1976],{"class":1006},[31,4837,1979],{"class":45},[31,4839,4840],{"class":65},"i",[31,4842,1647],{"class":45},[31,4844,4845,4848,4850],{"class":33,"line":2098},[31,4846,4847],{"class":58},"        generator",[31,4849,62],{"class":45},[31,4851,1602],{"class":45},[31,4853,4854,4857,4859,4861,4864],{"class":33,"line":2109},[31,4855,4856],{"class":58},"            filename",[31,4858,62],{"class":45},[31,4860,2000],{"class":45},[31,4862,4863],{"class":80},"img\u002F[name][ext][query]",[31,4865,4866],{"class":45},"'\n",[31,4868,4869],{"class":33,"line":2114},[31,4870,3225],{"class":45},[31,4872,4873,4876,4878,4880,4883],{"class":33,"line":2119},[31,4874,4875],{"class":58},"        type",[31,4877,62],{"class":45},[31,4879,2000],{"class":45},[31,4881,4882],{"class":80},"asset\u002Fresource",[31,4884,4866],{"class":45},[31,4886,4887],{"class":33,"line":2131},[31,4888,2017],{"class":45},[31,4890,4891],{"class":33,"line":2136},[31,4892,1954],{"class":45},[31,4894,4895,4897,4899,4901,4903,4905,4907,4909,4911,4913],{"class":33,"line":2141},[31,4896,1959],{"class":58},[31,4898,62],{"class":45},[31,4900,1964],{"class":45},[31,4902,1967],{"class":41},[31,4904,993],{"class":45},[31,4906,1871],{"class":80},[31,4908,1018],{"class":45},[31,4910,1976],{"class":1006},[31,4912,1979],{"class":45},[31,4914,1647],{"class":45},[31,4916,4917,4919,4921],{"class":33,"line":2147},[31,4918,1986],{"class":58},[31,4920,62],{"class":45},[31,4922,1602],{"class":45},[31,4924,4925,4927,4929,4931,4933,4935],{"class":33,"line":2152},[31,4926,1995],{"class":58},[31,4928,62],{"class":45},[31,4930,2000],{"class":45},[31,4932,1892],{"class":80},[31,4934,2005],{"class":45},[31,4936,1647],{"class":45},[31,4938,4939],{"class":33,"line":4},[31,4940,2012],{"class":45},[31,4942,4943],{"class":33,"line":2523},[31,4944,4945],{"class":45},"     },\n",[31,4947,4948],{"class":33,"line":2528},[31,4949,1954],{"class":45},[31,4951,4952,4954,4956,4958,4960,4962,4964,4966],{"class":33,"line":2547},[31,4953,1959],{"class":58},[31,4955,62],{"class":45},[31,4957,1964],{"class":45},[31,4959,1967],{"class":41},[31,4961,3363],{"class":80},[31,4963,1976],{"class":1006},[31,4965,1979],{"class":45},[31,4967,1647],{"class":45},[31,4969,4970,4972,4974,4976,4978,4980],{"class":33,"line":2560},[31,4971,3696],{"class":58},[31,4973,62],{"class":45},[31,4975,1964],{"class":45},[31,4977,3703],{"class":80},[31,4979,1979],{"class":45},[31,4981,1647],{"class":45},[31,4983,4984,4986,4988],{"class":33,"line":2606},[31,4985,1986],{"class":58},[31,4987,62],{"class":45},[31,4989,49],{"class":41},[31,4991,4992],{"class":33,"line":2623},[31,4993,3720],{"class":45},[31,4995,4996,4998,5000,5002,5004,5006],{"class":33,"line":2635},[31,4997,1995],{"class":58},[31,4999,62],{"class":45},[31,5001,2000],{"class":45},[31,5003,3731],{"class":80},[31,5005,2005],{"class":45},[31,5007,1647],{"class":45},[31,5009,5010,5012,5014],{"class":33,"line":2647},[31,5011,3740],{"class":58},[31,5013,62],{"class":45},[31,5015,1602],{"class":45},[31,5017,5018,5020,5022,5024],{"class":33,"line":2656},[31,5019,3749],{"class":58},[31,5021,62],{"class":45},[31,5023,3754],{"class":2643},[31,5025,1647],{"class":45},[31,5027,5028],{"class":33,"line":2662},[31,5029,1749],{"class":45},[31,5031,5032],{"class":33,"line":2671},[31,5033,3765],{"class":45},[31,5035,5036],{"class":33,"line":2676},[31,5037,3770],{"class":41},[31,5039,5040],{"class":33,"line":4405},[31,5041,3775],{"class":45},[31,5043,5045],{"class":33,"line":5044},44,[31,5046,191],{"class":41},[31,5048,5050],{"class":33,"line":5049},45,[31,5051,249],{"emptyLinePlaceholder":248},[31,5053,5055,5058,5061,5063,5066,5068,5071],{"class":33,"line":5054},46,[31,5056,5057],{"class":1006},"if",[31,5059,5060],{"class":41},"(process",[31,5062,237],{"class":45},[31,5064,5065],{"class":41},"env",[31,5067,237],{"class":45},[31,5069,5070],{"class":41},"es5)",[31,5072,275],{"class":45},[31,5074,5076,5078,5080,5082],{"class":33,"line":5075},47,[31,5077,2122],{"class":41},[31,5079,237],{"class":45},[31,5081,2541],{"class":259},[31,5083,2544],{"class":58},[31,5085,5087],{"class":33,"line":5086},48,[31,5088,5089],{"class":45},"        {\n",[31,5091,5093,5096,5098,5100,5102,5105,5108,5110,5112,5114],{"class":33,"line":5092},49,[31,5094,5095],{"class":58},"            test",[31,5097,62],{"class":45},[31,5099,1964],{"class":45},[31,5101,1967],{"class":41},[31,5103,5104],{"class":80},"m",[31,5106,5107],{"class":45},"?",[31,5109,1797],{"class":80},[31,5111,1976],{"class":1006},[31,5113,1979],{"class":45},[31,5115,1647],{"class":45},[31,5117,5119,5122,5124,5127,5129,5131,5134,5137],{"class":33,"line":5118},50,[31,5120,5121],{"class":58},"            exclude",[31,5123,62],{"class":45},[31,5125,5126],{"class":45}," \u002F(",[31,5128,3703],{"class":80},[31,5130,4679],{"class":45},[31,5132,5133],{"class":80},"bower_components",[31,5135,5136],{"class":45},")\u002F",[31,5138,1647],{"class":45},[31,5140,5142,5145,5147],{"class":33,"line":5141},51,[31,5143,5144],{"class":58},"            use",[31,5146,62],{"class":45},[31,5148,1602],{"class":45},[31,5150,5152,5155,5157,5159,5162,5164],{"class":33,"line":5151},52,[31,5153,5154],{"class":58},"              loader",[31,5156,62],{"class":45},[31,5158,2000],{"class":45},[31,5160,5161],{"class":80},"babel-loader",[31,5163,2005],{"class":45},[31,5165,1647],{"class":45},[31,5167,5169,5172,5174],{"class":33,"line":5168},53,[31,5170,5171],{"class":58},"              options",[31,5173,62],{"class":45},[31,5175,1602],{"class":45},[31,5177,5179,5182,5184,5186,5188,5191,5193],{"class":33,"line":5178},54,[31,5180,5181],{"class":58},"                presets",[31,5183,62],{"class":45},[31,5185,512],{"class":58},[31,5187,2005],{"class":45},[31,5189,5190],{"class":80},"@babel\u002Fpreset-env",[31,5192,2005],{"class":45},[31,5194,191],{"class":58},[31,5196,5198],{"class":33,"line":5197},55,[31,5199,5200],{"class":45},"              }\n",[31,5202,5204],{"class":33,"line":5203},56,[31,5205,1696],{"class":45},[31,5207,5209,5212,5214],{"class":33,"line":5208},57,[31,5210,5211],{"class":58},"            generator",[31,5213,62],{"class":45},[31,5215,1602],{"class":45},[31,5217,5219,5222,5224,5226,5229],{"class":33,"line":5218},58,[31,5220,5221],{"class":58},"              filename",[31,5223,62],{"class":45},[31,5225,2000],{"class":45},[31,5227,5228],{"class":80},"[name].js",[31,5230,4866],{"class":45},[31,5232,5234],{"class":33,"line":5233},59,[31,5235,1749],{"class":45},[31,5237,5239],{"class":33,"line":5238},60,[31,5240,2012],{"class":45},[31,5242,5244],{"class":33,"line":5243},61,[31,5245,2659],{"class":58},[31,5247,5249],{"class":33,"line":5248},62,[31,5250,334],{"class":45},[31,5252,5254],{"class":33,"line":5253},63,[31,5255,249],{"emptyLinePlaceholder":248},[31,5257,5259,5261,5263,5265],{"class":33,"line":5258},64,[31,5260,38],{"class":37},[31,5262,2036],{"class":41},[31,5264,46],{"class":45},[31,5266,1602],{"class":45},[31,5268,5270,5272,5274,5276,5278,5281,5283,5285],{"class":33,"line":5269},65,[31,5271,2048],{"class":58},[31,5273,62],{"class":45},[31,5275,422],{"class":41},[31,5277,2005],{"class":45},[31,5279,5280],{"class":80},".\u002Fsrc\u002Findex.js",[31,5282,2005],{"class":45},[31,5284,472],{"class":41},[31,5286,1647],{"class":45},[31,5288,5290],{"class":33,"line":5289},66,[31,5291,2064],{"class":41},[31,5293,5295,5297,5299,5302,5304,5306,5308,5311],{"class":33,"line":5294},67,[31,5296,2069],{"class":58},[31,5298,62],{"class":45},[31,5300,5301],{"class":41},"process",[31,5303,237],{"class":45},[31,5305,5065],{"class":41},[31,5307,237],{"class":45},[31,5309,5310],{"class":41},"mode",[31,5312,1647],{"class":45},[31,5314,5316],{"class":33,"line":5315},68,[31,5317,2085],{"class":41},[31,5319,5321,5323,5325],{"class":33,"line":5320},69,[31,5322,2091],{"class":58},[31,5324,62],{"class":45},[31,5326,1602],{"class":45},[31,5328,5330,5332,5334],{"class":33,"line":5329},70,[31,5331,2101],{"class":58},[31,5333,62],{"class":45},[31,5335,2106],{"class":41},[31,5337,5339],{"class":33,"line":5338},71,[31,5340,2017],{"class":45},[31,5342,5344,5346],{"class":33,"line":5343},72,[31,5345,3129],{"class":58},[31,5347,1660],{"class":45},[31,5349,5351,5353,5355,5357,5359,5361,5363,5365,5367,5369,5371,5373,5375,5377,5379,5381,5383,5385,5387,5389],{"class":33,"line":5350},73,[31,5352,3136],{"class":58},[31,5354,62],{"class":45},[31,5356,512],{"class":41},[31,5358,2005],{"class":45},[31,5360,3145],{"class":80},[31,5362,2005],{"class":45},[31,5364,69],{"class":45},[31,5366,2000],{"class":45},[31,5368,3154],{"class":80},[31,5370,2005],{"class":45},[31,5372,69],{"class":45},[31,5374,2000],{"class":45},[31,5376,3163],{"class":80},[31,5378,2005],{"class":45},[31,5380,69],{"class":45},[31,5382,2000],{"class":45},[31,5384,3172],{"class":80},[31,5386,2005],{"class":45},[31,5388,472],{"class":41},[31,5390,1647],{"class":45},[31,5392,5394,5396,5398],{"class":33,"line":5393},74,[31,5395,3183],{"class":58},[31,5397,62],{"class":45},[31,5399,1602],{"class":45},[31,5401,5403,5406,5408,5410,5412,5414,5416,5418,5420,5422,5424,5426,5428,5430],{"class":33,"line":5402},75,[31,5404,5405],{"class":45},"          '",[31,5407,3195],{"class":58},[31,5409,2005],{"class":45},[31,5411,62],{"class":45},[31,5413,3202],{"class":41},[31,5415,237],{"class":45},[31,5417,2575],{"class":259},[31,5419,2578],{"class":41},[31,5421,69],{"class":45},[31,5423,2000],{"class":45},[31,5425,1847],{"class":80},[31,5427,2005],{"class":45},[31,5429,1018],{"class":41},[31,5431,1647],{"class":45},[31,5433,5435],{"class":33,"line":5434},76,[31,5436,3225],{"class":45},[31,5438,5440,5442,5444,5446,5448,5450,5452,5454,5456,5458,5460,5462],{"class":33,"line":5439},77,[31,5441,3235],{"class":58},[31,5443,62],{"class":45},[31,5445,3240],{"class":41},[31,5447,237],{"class":45},[31,5449,2575],{"class":259},[31,5451,2578],{"class":41},[31,5453,69],{"class":45},[31,5455,649],{"class":45},[31,5457,1847],{"class":80},[31,5459,77],{"class":45},[31,5461,3257],{"class":41},[31,5463,1647],{"class":45},[31,5465,5467],{"class":33,"line":5466},78,[31,5468,2017],{"class":45},[31,5470,5472],{"class":33,"line":5471},79,[31,5473,5474],{"class":184},"    \u002F\u002F ファイルの出力設定\n",[31,5476,5478,5481,5483],{"class":33,"line":5477},80,[31,5479,5480],{"class":58},"    output",[31,5482,62],{"class":45},[31,5484,1602],{"class":45},[31,5486,5488],{"class":33,"line":5487},81,[31,5489,5490],{"class":184},"        \u002F\u002F  出力ファイルのディレクトリ名\n",[31,5492,5494,5497,5499,5501,5504,5506,5509,5512],{"class":33,"line":5493},82,[31,5495,5496],{"class":58},"        path",[31,5498,62],{"class":45},[31,5500,2568],{"class":45},[31,5502,5503],{"class":41},"__dirname",[31,5505,469],{"class":45},[31,5507,5508],{"class":80},"\u002Fdist",[31,5510,5511],{"class":45},"`",[31,5513,1647],{"class":45},[31,5515,5517,5519,5521,5523,5525,5527],{"class":33,"line":5516},83,[31,5518,2563],{"class":58},[31,5520,62],{"class":45},[31,5522,2000],{"class":45},[31,5524,5228],{"class":80},[31,5526,2005],{"class":45},[31,5528,1647],{"class":45},[31,5530,5532],{"class":33,"line":5531},84,[31,5533,2017],{"class":45},[31,5535,5537,5540,5542],{"class":33,"line":5536},85,[31,5538,5539],{"class":58},"    plugins",[31,5541,62],{"class":45},[31,5543,49],{"class":41},[31,5545,5547,5550,5553,5555],{"class":33,"line":5546},86,[31,5548,5549],{"class":45},"        new",[31,5551,5552],{"class":259}," MiniCssExtractPlugin",[31,5554,993],{"class":41},[31,5556,275],{"class":45},[31,5558,5560,5562,5564,5566,5569],{"class":33,"line":5559},87,[31,5561,4856],{"class":58},[31,5563,62],{"class":45},[31,5565,2000],{"class":45},[31,5567,5568],{"class":80},"[name].css",[31,5570,4866],{"class":45},[31,5572,5574,5577,5579],{"class":33,"line":5573},88,[31,5575,5576],{"class":45},"        }",[31,5578,1018],{"class":41},[31,5580,1647],{"class":45},[31,5582,5584],{"class":33,"line":5583},89,[31,5585,328],{"class":41},[31,5587,5589],{"class":33,"line":5588},90,[31,5590,5591],{"class":45},"};\n",[31,5593,5595],{"class":33,"line":5594},91,[31,5596,249],{"emptyLinePlaceholder":248},[31,5598,5600,5602,5604,5606,5608,5610,5612,5614,5616,5618,5620,5622],{"class":33,"line":5599},92,[31,5601,38],{"class":37},[31,5603,4134],{"class":41},[31,5605,46],{"class":45},[31,5607,2426],{"class":41},[31,5609,237],{"class":45},[31,5611,2431],{"class":259},[31,5613,993],{"class":41},[31,5615,2005],{"class":45},[31,5617,4442],{"class":80},[31,5619,2005],{"class":45},[31,5621,69],{"class":45},[31,5623,1602],{"class":45},[31,5625,5627,5629,5631,5633,5635,5637,5639,5641,5643,5645,5647],{"class":33,"line":5626},93,[31,5628,4160],{"class":58},[31,5630,62],{"class":45},[31,5632,4165],{"class":41},[31,5634,2005],{"class":45},[31,5636,4170],{"class":80},[31,5638,2005],{"class":45},[31,5640,69],{"class":45},[31,5642,2005],{"class":45},[31,5644,4179],{"class":80},[31,5646,2005],{"class":45},[31,5648,4184],{"class":41},[31,5650,5652,5654,5656],{"class":33,"line":5651},94,[31,5653,469],{"class":45},[31,5655,1018],{"class":41},[31,5657,243],{"class":45},[31,5659,5661],{"class":33,"line":5660},95,[31,5662,249],{"emptyLinePlaceholder":248},[31,5664,5666,5668,5670,5672,5674,5676,5678,5680,5682],{"class":33,"line":5665},96,[31,5667,4201],{"class":41},[31,5669,237],{"class":45},[31,5671,2458],{"class":259},[31,5673,993],{"class":41},[31,5675,993],{"class":45},[31,5677,3363],{"class":996},[31,5679,1018],{"class":45},[31,5681,1000],{"class":37},[31,5683,1602],{"class":45},[31,5685,5687,5689,5691,5693,5695,5697,5699,5701,5703,5705,5707,5709,5711,5713,5715,5717,5719,5721,5723,5725,5727,5729,5731,5733,5735,5737,5739,5741,5743,5745,5747],{"class":33,"line":5686},97,[31,5688,2476],{"class":37},[31,5690,4224],{"class":41},[31,5692,2041],{"class":45},[31,5694,4229],{"class":41},[31,5696,237],{"class":45},[31,5698,2489],{"class":259},[31,5700,993],{"class":58},[31,5702,2005],{"class":45},[31,5704,1979],{"class":80},[31,5706,2005],{"class":45},[31,5708,1018],{"class":58},[31,5710,237],{"class":45},[31,5712,2504],{"class":259},[31,5714,993],{"class":58},[31,5716,2509],{"class":45},[31,5718,66],{"class":65},[31,5720,2514],{"class":58},[31,5722,578],{"class":65},[31,5724,472],{"class":58},[31,5726,237],{"class":45},[31,5728,4264],{"class":259},[31,5730,993],{"class":58},[31,5732,2005],{"class":45},[31,5734,4271],{"class":80},[31,5736,2005],{"class":45},[31,5738,69],{"class":45},[31,5740,2000],{"class":45},[31,5742,4280],{"class":80},[31,5744,2005],{"class":45},[31,5746,1018],{"class":58},[31,5748,243],{"class":45},[31,5750,5752,5754,5756,5758,5760,5762],{"class":33,"line":5751},98,[31,5753,2531],{"class":41},[31,5755,237],{"class":45},[31,5757,2536],{"class":41},[31,5759,237],{"class":45},[31,5761,2541],{"class":259},[31,5763,2544],{"class":58},[31,5765,5767,5769,5771,5773],{"class":33,"line":5766},99,[31,5768,2550],{"class":45},[31,5770,2553],{"class":259},[31,5772,993],{"class":58},[31,5774,275],{"class":45},[31,5776,5778,5780,5782,5784,5786,5788,5790,5792,5794,5796,5798,5800,5802,5804,5806,5808,5810,5812],{"class":33,"line":5777},100,[31,5779,2563],{"class":58},[31,5781,62],{"class":45},[31,5783,2568],{"class":45},[31,5785,2225],{"class":41},[31,5787,237],{"class":45},[31,5789,2575],{"class":259},[31,5791,2578],{"class":41},[31,5793,69],{"class":45},[31,5795,2000],{"class":45},[31,5797,1843],{"class":80},[31,5799,2005],{"class":45},[31,5801,1018],{"class":41},[31,5803,469],{"class":45},[31,5805,1979],{"class":80},[31,5807,2595],{"class":45},[31,5809,1871],{"class":41},[31,5811,2601],{"class":45},[31,5813,1647],{"class":45},[31,5815,5817,5819,5821,5823,5825,5827],{"class":33,"line":5816},101,[31,5818,2609],{"class":58},[31,5820,62],{"class":45},[31,5822,2005],{"class":45},[31,5824,2616],{"class":80},[31,5826,2005],{"class":45},[31,5828,1647],{"class":45},[31,5830,5832,5834,5836,5838],{"class":33,"line":5831},102,[31,5833,2626],{"class":58},[31,5835,62],{"class":45},[31,5837,4229],{"class":41},[31,5839,1647],{"class":45},[31,5841,5843,5845,5847],{"class":33,"line":5842},103,[31,5844,2638],{"class":58},[31,5846,62],{"class":45},[31,5848,2644],{"class":2643},[31,5850,5852,5854],{"class":33,"line":5851},104,[31,5853,2650],{"class":45},[31,5855,2653],{"class":58},[31,5857,5859],{"class":33,"line":5858},105,[31,5860,2659],{"class":58},[31,5862,5864,5866,5868],{"class":33,"line":5863},106,[31,5865,469],{"class":45},[31,5867,1018],{"class":41},[31,5869,243],{"class":45},[31,5871,5873],{"class":33,"line":5872},107,[31,5874,249],{"emptyLinePlaceholder":248},[31,5876,5878,5880,5882,5884],{"class":33,"line":5877},108,[31,5879,2155],{"class":45},[31,5881,2041],{"class":45},[31,5883,2160],{"class":41},[31,5885,243],{"class":45},[1771,5887,5888],{},"html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}",{"title":27,"searchDepth":103,"depth":103,"links":5890},[5891,5892,5898,5904],{"id":1831,"depth":52,"text":1832},{"id":1854,"depth":52,"text":1855,"children":5893},[5894,5895,5896,5897],{"id":1886,"depth":103,"text":1886},{"id":1905,"depth":103,"text":1905},{"id":2165,"depth":103,"text":2165},{"id":2987,"depth":103,"text":2987},{"id":3341,"depth":52,"text":3342,"children":5899},[5900,5901,5902,5903],{"id":3351,"depth":103,"text":3351},{"id":3567,"depth":103,"text":3567},{"id":3618,"depth":103,"text":3618},{"id":4498,"depth":103,"text":4498},{"id":4543,"depth":52,"text":4544},[5906],"devstack","2021-10-30","HTMLファイルの取り扱いとPUGを使い方",{},"\u002Fseries\u002Fwell-study-webpack-3",{"title":1802,"description":5908},"well-study-webpack","ちゃんと理解するWebpack5。","series\u002Fwell-study-webpack-3",[1797,5916,1871],"webpack","_mix\u002Flogo-on-white-bg-768x299.png","EsG5Dg5_6qbSZmEa8Ezu5AMWNTpxDesebmF7q4Bkix4",{"id":5920,"title":5921,"body":5922,"category":10196,"createdAt":10197,"description":5921,"extension":1790,"index":1791,"meta":10198,"navigation":248,"path":10199,"publish":248,"seo":10200,"series":1791,"seriesTitle":1791,"stem":10201,"tag":10202,"thumbnail":10203,"updatedAt":1791,"__hash__":10204},"articles\u002Farticles\u002Fpinterest-like-style.md","ピンタレストみたいなカードスタイルで動的に要素を追加する方法",{"type":10,"value":5923,"toc":10177},[5924,5927,5932,5935,5938,5947,5950,5953,6119,6136,6139,6634,6638,6642,6645,6656,6660,6677,6681,6688,6691,6694,6697,6700,6703,7010,7017,7020,7023,7027,7030,7303,7308,7311,7318,8768,8771,8789,8792,8796,9080,9086,9089,9570,9583,9586,9633,9636,9639,10026,10039,10042,10161,10164,10167,10174],[13,5925,5926],{},"こんにちはjunです。突然ですがPinterest（ピンタレスト）ってご存知ですが、以下のような感じのスタイルで画像や動画が一覧で検索できるサービスです。",[5928,5929],"image-render",{":src":5930,":width":5931},"'pinterest-like-style\u002Fpinterest.png'","'100%'",[13,5933,5934],{},"よくある一覧系のレイアウトは基本的に列と高さを揃えた規則的な物が多い中、ピンタレストは高さが変則であり縦方向に詰めるレイアウトになっています。",[13,5936,5937],{},"ごちゃごちゃとした感じですが、コンテンツがいっぱいあって無駄がないスタイルが好きです。私が関わったあるプロジェクトでこのデザインをやろうとしましたがそこそこ難しかったです。バックから情報を取ってくる仕様だったため、動的に要素を追加してくことを前提として実装の解説をしていきます。コード自体の説明は「実装方法」から行います。",[13,5939,5940,5941,5946],{},"また完成したデモは",[196,5942,5945],{"href":5943,"rel":5944},"https:\u002F\u002Fapps.jun-app.com\u002Fpinterestlike\u002F",[901],"こちら","にあります。",[207,5948,5949],{"id":5949},"構造",[13,5951,5952],{},"構造は以下の通りとします。",[22,5954,5956],{"className":2998,"code":5955,"language":1871,"meta":27,"style":27},"\u003Cdiv class=\"p-cards-render\" id=\"card-container\">\n    \u003Cdiv class=\"c-card-container u-animate\">\n        \u003Cimg src=\".\u002Fred.png\" class=\"c-card-img\">\n    \u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\">\n        \u003Cimg src=\".\u002Fred.png\" class=\"c-card-img\">\n    \u003C\u002Fdiv>\n    \u003C!-- c-card-containerが基本コンポーネント -->\n\u003C\u002Fdiv>\n",[17,5957,5958,5991,6011,6042,6051,6069,6097,6105,6110],{"__ignoreMap":27},[31,5959,5960,5962,5964,5967,5969,5971,5974,5976,5979,5981,5983,5986,5988],{"class":33,"line":34},[31,5961,3011],{"class":45},[31,5963,377],{"class":58},[31,5965,5966],{"class":37}," class",[31,5968,46],{"class":45},[31,5970,77],{"class":45},[31,5972,5973],{"class":80},"p-cards-render",[31,5975,77],{"class":45},[31,5977,5978],{"class":37}," id",[31,5980,46],{"class":45},[31,5982,77],{"class":45},[31,5984,5985],{"class":80},"card-container",[31,5987,77],{"class":45},[31,5989,5990],{"class":45},">\n",[31,5992,5993,5996,5998,6000,6002,6004,6007,6009],{"class":33,"line":52},[31,5994,5995],{"class":45},"    \u003C",[31,5997,377],{"class":58},[31,5999,5966],{"class":37},[31,6001,46],{"class":45},[31,6003,77],{"class":45},[31,6005,6006],{"class":80},"c-card-container u-animate",[31,6008,77],{"class":45},[31,6010,5990],{"class":45},[31,6012,6013,6016,6018,6020,6022,6024,6027,6029,6031,6033,6035,6038,6040],{"class":33,"line":103},[31,6014,6015],{"class":45},"        \u003C",[31,6017,3014],{"class":58},[31,6019,3017],{"class":37},[31,6021,46],{"class":45},[31,6023,77],{"class":45},[31,6025,6026],{"class":80},".\u002Fred.png",[31,6028,77],{"class":45},[31,6030,5966],{"class":37},[31,6032,46],{"class":45},[31,6034,77],{"class":45},[31,6036,6037],{"class":80},"c-card-img",[31,6039,77],{"class":45},[31,6041,5990],{"class":45},[31,6043,6044,6047,6049],{"class":33,"line":142},[31,6045,6046],{"class":45},"    \u003C\u002F",[31,6048,377],{"class":58},[31,6050,5990],{"class":45},[31,6052,6053,6055,6057,6059,6061,6063,6065,6067],{"class":33,"line":181},[31,6054,5995],{"class":45},[31,6056,377],{"class":58},[31,6058,5966],{"class":37},[31,6060,46],{"class":45},[31,6062,77],{"class":45},[31,6064,6006],{"class":80},[31,6066,77],{"class":45},[31,6068,5990],{"class":45},[31,6070,6071,6073,6075,6077,6079,6081,6083,6085,6087,6089,6091,6093,6095],{"class":33,"line":188},[31,6072,6015],{"class":45},[31,6074,3014],{"class":58},[31,6076,3017],{"class":37},[31,6078,46],{"class":45},[31,6080,77],{"class":45},[31,6082,6026],{"class":80},[31,6084,77],{"class":45},[31,6086,5966],{"class":37},[31,6088,46],{"class":45},[31,6090,77],{"class":45},[31,6092,6037],{"class":80},[31,6094,77],{"class":45},[31,6096,5990],{"class":45},[31,6098,6099,6101,6103],{"class":33,"line":283},[31,6100,6046],{"class":45},[31,6102,377],{"class":58},[31,6104,5990],{"class":45},[31,6106,6107],{"class":33,"line":289},[31,6108,6109],{"class":184},"    \u003C!-- c-card-containerが基本コンポーネント -->\n",[31,6111,6112,6115,6117],{"class":33,"line":295},[31,6113,6114],{"class":45},"\u003C\u002F",[31,6116,377],{"class":58},[31,6118,5990],{"class":45},[13,6120,6121,6123,6124,6127,6128,6131,6132,6135],{},[17,6122,5985],{},"はカード全体の列を定義するコンテナです。",[17,6125,6126],{},"c-card-container","は１カードのコンテナーで他のカードとの隙間やレイアウトの定義をしています。そしてカードのコンテナには",[17,6129,6130],{},"\u003Cimg>","がラップされ、",[17,6133,6134],{},"width:100%; height:100%;","がかかっています。今回表示する画像は一面一色に塗り潰された画像です。（background-colorでもよかったのですが）",[13,6137,6138],{},"最終的なcssは以下の通りです。",[22,6140,6144],{"className":6141,"code":6142,"language":6143,"meta":27,"style":27},"language-css shiki shiki-themes material-theme-ocean","*{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n}\n\n#card-add{\n    position: fixed;\n    left: 20px;\n    top: 50%;\n}\n\n.p-main-container{\n    max-width: 660px;\n    margin: 0 auto;\n    padding: 30px 0px;\n    min-height: 100vh;\n}\n\n.p-cards-render{\n    margin: 0 -5px;\n    display: flex;\n    flex-wrap: wrap;\n    position: relative;\n}\n\n.p-cards-render .c-card-container{\n    position: absolute;\n    top: 0px;\n    width: 33.3%;\n    display: block;\n    padding: 0 5px 10px 5px;\n}\n\n\n.c-card-container .c-card-img{\n    width: 100%;\n    box-shadow: 0px 2px 4px #ccc;\n    border-radius: 30px;\n    height: 0%;\n    display: block;\n    opacity: 0;\n    transition: all 0.4s;\n}\n.c-card-container.u-animate .c-card-img{\n    height: 100%;\n    opacity: 1;\n    transition: all 0.4s;\n}\n","css",[17,6145,6146,6154,6167,6178,6190,6194,6198,6208,6220,6232,6244,6248,6252,6261,6273,6286,6300,6312,6316,6320,6328,6341,6353,6365,6376,6380,6384,6397,6408,6418,6430,6441,6459,6463,6467,6471,6483,6494,6517,6528,6540,6550,6561,6576,6580,6597,6607,6618,6630],{"__ignoreMap":27},[31,6147,6148,6152],{"class":33,"line":34},[31,6149,6151],{"class":6150},"s5Dmg","*",[31,6153,275],{"class":45},[31,6155,6156,6160,6162,6165],{"class":33,"line":52},[31,6157,6159],{"class":6158},"s6YsC","    margin",[31,6161,62],{"class":45},[31,6163,6164],{"class":65}," 0",[31,6166,243],{"class":45},[31,6168,6169,6172,6174,6176],{"class":33,"line":103},[31,6170,6171],{"class":6158},"    padding",[31,6173,62],{"class":45},[31,6175,6164],{"class":65},[31,6177,243],{"class":45},[31,6179,6180,6183,6185,6188],{"class":33,"line":142},[31,6181,6182],{"class":6158},"    box-sizing",[31,6184,62],{"class":45},[31,6186,6187],{"class":41}," border-box",[31,6189,243],{"class":45},[31,6191,6192],{"class":33,"line":181},[31,6193,334],{"class":45},[31,6195,6196],{"class":33,"line":188},[31,6197,249],{"emptyLinePlaceholder":248},[31,6199,6200,6203,6206],{"class":33,"line":283},[31,6201,6202],{"class":45},"#",[31,6204,6205],{"class":65},"card-add",[31,6207,275],{"class":45},[31,6209,6210,6213,6215,6218],{"class":33,"line":289},[31,6211,6212],{"class":6158},"    position",[31,6214,62],{"class":45},[31,6216,6217],{"class":41}," fixed",[31,6219,243],{"class":45},[31,6221,6222,6225,6227,6230],{"class":33,"line":295},[31,6223,6224],{"class":6158},"    left",[31,6226,62],{"class":45},[31,6228,6229],{"class":65}," 20px",[31,6231,243],{"class":45},[31,6233,6234,6237,6239,6242],{"class":33,"line":301},[31,6235,6236],{"class":6158},"    top",[31,6238,62],{"class":45},[31,6240,6241],{"class":65}," 50%",[31,6243,243],{"class":45},[31,6245,6246],{"class":33,"line":307},[31,6247,334],{"class":45},[31,6249,6250],{"class":33,"line":313},[31,6251,249],{"emptyLinePlaceholder":248},[31,6253,6254,6256,6259],{"class":33,"line":319},[31,6255,237],{"class":45},[31,6257,6258],{"class":6150},"p-main-container",[31,6260,275],{"class":45},[31,6262,6263,6266,6268,6271],{"class":33,"line":325},[31,6264,6265],{"class":6158},"    max-width",[31,6267,62],{"class":45},[31,6269,6270],{"class":65}," 660px",[31,6272,243],{"class":45},[31,6274,6275,6277,6279,6281,6284],{"class":33,"line":331},[31,6276,6159],{"class":6158},[31,6278,62],{"class":45},[31,6280,6164],{"class":65},[31,6282,6283],{"class":41}," auto",[31,6285,243],{"class":45},[31,6287,6288,6290,6292,6295,6298],{"class":33,"line":337},[31,6289,6171],{"class":6158},[31,6291,62],{"class":45},[31,6293,6294],{"class":65}," 30px",[31,6296,6297],{"class":65}," 0px",[31,6299,243],{"class":45},[31,6301,6302,6305,6307,6310],{"class":33,"line":1752},[31,6303,6304],{"class":6158},"    min-height",[31,6306,62],{"class":45},[31,6308,6309],{"class":65}," 100vh",[31,6311,243],{"class":45},[31,6313,6314],{"class":33,"line":1758},[31,6315,334],{"class":45},[31,6317,6318],{"class":33,"line":1764},[31,6319,249],{"emptyLinePlaceholder":248},[31,6321,6322,6324,6326],{"class":33,"line":2088},[31,6323,237],{"class":45},[31,6325,5973],{"class":6150},[31,6327,275],{"class":45},[31,6329,6330,6332,6334,6336,6339],{"class":33,"line":2098},[31,6331,6159],{"class":6158},[31,6333,62],{"class":45},[31,6335,6164],{"class":65},[31,6337,6338],{"class":65}," -5px",[31,6340,243],{"class":45},[31,6342,6343,6346,6348,6351],{"class":33,"line":2109},[31,6344,6345],{"class":6158},"    display",[31,6347,62],{"class":45},[31,6349,6350],{"class":41}," flex",[31,6352,243],{"class":45},[31,6354,6355,6358,6360,6363],{"class":33,"line":2114},[31,6356,6357],{"class":6158},"    flex-wrap",[31,6359,62],{"class":45},[31,6361,6362],{"class":41}," wrap",[31,6364,243],{"class":45},[31,6366,6367,6369,6371,6374],{"class":33,"line":2119},[31,6368,6212],{"class":6158},[31,6370,62],{"class":45},[31,6372,6373],{"class":41}," relative",[31,6375,243],{"class":45},[31,6377,6378],{"class":33,"line":2131},[31,6379,334],{"class":45},[31,6381,6382],{"class":33,"line":2136},[31,6383,249],{"emptyLinePlaceholder":248},[31,6385,6386,6388,6390,6393,6395],{"class":33,"line":2141},[31,6387,237],{"class":45},[31,6389,5973],{"class":6150},[31,6391,6392],{"class":45}," .",[31,6394,6126],{"class":6150},[31,6396,275],{"class":45},[31,6398,6399,6401,6403,6406],{"class":33,"line":2147},[31,6400,6212],{"class":6158},[31,6402,62],{"class":45},[31,6404,6405],{"class":41}," absolute",[31,6407,243],{"class":45},[31,6409,6410,6412,6414,6416],{"class":33,"line":2152},[31,6411,6236],{"class":6158},[31,6413,62],{"class":45},[31,6415,6297],{"class":65},[31,6417,243],{"class":45},[31,6419,6420,6423,6425,6428],{"class":33,"line":4},[31,6421,6422],{"class":6158},"    width",[31,6424,62],{"class":45},[31,6426,6427],{"class":65}," 33.3%",[31,6429,243],{"class":45},[31,6431,6432,6434,6436,6439],{"class":33,"line":2523},[31,6433,6345],{"class":6158},[31,6435,62],{"class":45},[31,6437,6438],{"class":41}," block",[31,6440,243],{"class":45},[31,6442,6443,6445,6447,6449,6452,6455,6457],{"class":33,"line":2528},[31,6444,6171],{"class":6158},[31,6446,62],{"class":45},[31,6448,6164],{"class":65},[31,6450,6451],{"class":65}," 5px",[31,6453,6454],{"class":65}," 10px",[31,6456,6451],{"class":65},[31,6458,243],{"class":45},[31,6460,6461],{"class":33,"line":2547},[31,6462,334],{"class":45},[31,6464,6465],{"class":33,"line":2560},[31,6466,249],{"emptyLinePlaceholder":248},[31,6468,6469],{"class":33,"line":2606},[31,6470,249],{"emptyLinePlaceholder":248},[31,6472,6473,6475,6477,6479,6481],{"class":33,"line":2623},[31,6474,237],{"class":45},[31,6476,6126],{"class":6150},[31,6478,6392],{"class":45},[31,6480,6037],{"class":6150},[31,6482,275],{"class":45},[31,6484,6485,6487,6489,6492],{"class":33,"line":2635},[31,6486,6422],{"class":6158},[31,6488,62],{"class":45},[31,6490,6491],{"class":65}," 100%",[31,6493,243],{"class":45},[31,6495,6496,6499,6501,6503,6506,6509,6512,6515],{"class":33,"line":2647},[31,6497,6498],{"class":6158},"    box-shadow",[31,6500,62],{"class":45},[31,6502,6297],{"class":65},[31,6504,6505],{"class":65}," 2px",[31,6507,6508],{"class":65}," 4px",[31,6510,6511],{"class":45}," #",[31,6513,6514],{"class":41},"ccc",[31,6516,243],{"class":45},[31,6518,6519,6522,6524,6526],{"class":33,"line":2656},[31,6520,6521],{"class":6158},"    border-radius",[31,6523,62],{"class":45},[31,6525,6294],{"class":65},[31,6527,243],{"class":45},[31,6529,6530,6533,6535,6538],{"class":33,"line":2662},[31,6531,6532],{"class":6158},"    height",[31,6534,62],{"class":45},[31,6536,6537],{"class":65}," 0%",[31,6539,243],{"class":45},[31,6541,6542,6544,6546,6548],{"class":33,"line":2671},[31,6543,6345],{"class":6158},[31,6545,62],{"class":45},[31,6547,6438],{"class":41},[31,6549,243],{"class":45},[31,6551,6552,6555,6557,6559],{"class":33,"line":2676},[31,6553,6554],{"class":6158},"    opacity",[31,6556,62],{"class":45},[31,6558,6164],{"class":65},[31,6560,243],{"class":45},[31,6562,6563,6566,6568,6571,6574],{"class":33,"line":4405},[31,6564,6565],{"class":6158},"    transition",[31,6567,62],{"class":45},[31,6569,6570],{"class":41}," all ",[31,6572,6573],{"class":65},"0.4s",[31,6575,243],{"class":45},[31,6577,6578],{"class":33,"line":5044},[31,6579,334],{"class":45},[31,6581,6582,6584,6586,6588,6591,6593,6595],{"class":33,"line":5049},[31,6583,237],{"class":45},[31,6585,6126],{"class":6150},[31,6587,237],{"class":45},[31,6589,6590],{"class":6150},"u-animate",[31,6592,6392],{"class":45},[31,6594,6037],{"class":6150},[31,6596,275],{"class":45},[31,6598,6599,6601,6603,6605],{"class":33,"line":5054},[31,6600,6532],{"class":6158},[31,6602,62],{"class":45},[31,6604,6491],{"class":65},[31,6606,243],{"class":45},[31,6608,6609,6611,6613,6616],{"class":33,"line":5075},[31,6610,6554],{"class":6158},[31,6612,62],{"class":45},[31,6614,6615],{"class":65}," 1",[31,6617,243],{"class":45},[31,6619,6620,6622,6624,6626,6628],{"class":33,"line":5086},[31,6621,6565],{"class":6158},[31,6623,62],{"class":45},[31,6625,6570],{"class":41},[31,6627,6573],{"class":65},[31,6629,243],{"class":45},[31,6631,6632],{"class":33,"line":5092},[31,6633,334],{"class":45},[207,6635,6637],{"id":6636},"表示数が不明な場合cssだけでは不可能だった","表示数が不明な場合CSSだけでは不可能だった",[365,6639,6641],{"id":6640},"flexでいけんじゃね","flexでいけんじゃね...？!",[13,6643,6644],{},"最初はそれぞれの要素にを縦方向に詰められればいいだけだろと思いました。",[13,6646,6647,6648,6651,6652,6655],{},"そのためカードコンテナーを ",[17,6649,6650],{},"display:inline-block;"," にして ",[17,6653,6654],{},"vertical-align:top;","を指定しましたが下図の様になっていしまいます。",[5928,6657],{":src":6658,":width":6659,":center":619},"'pinterest-like-style\u002Fdisplay-inline.png'","'300px'",[13,6661,6662,6663,1876,6665,6668,6669,6672,6673,6676],{},"カードコンテナーを ",[17,6664,6650],{},[17,6666,6667],{},"algin-self:flex-start;","を指定しても同様の結果となります。",[17,6670,6671],{},"flex","や",[17,6674,6675],{},"inline-block","の仕様上仕方ないです。",[365,6678,6680],{"id":6679},"display-gridならいけるが","display gridならいけるが...",[13,6682,6683,6684,6687],{},"flexは縦方向の制御が難しく、ピンタレストの様なスタイルをcssで実現するためには",[17,6685,6686],{},"display:grid;","というグリットレイアウトを指定する必要があります。",[13,6689,6690],{},"今回はGridの説明は省きます。グリットレイアウトは各要素の縦方向の位置を定義できるので、柔軟なレイアウトを実現できます。",[13,6692,6693],{},"しかし、グリットレイアウトは列数、行数、各要素の占有列・行を指定する必要があります。そのため動的に要素を追加する場合はJavascriptで各要素の位置スタイルを調整する必要があります。",[207,6695,6696],{"id":6696},"実装方法",[365,6698,6699],{"id":6699},"概要",[13,6701,6702],{},"それでは実装の概要について解説します。CSS（インラインスタイル）をカード要素に指定します。いろいろ方法はありますが、ピンタレスト公式でも以下の様なスタイルが要素に当てられています。",[22,6704,6706],{"className":2998,"code":6705,"language":1871,"meta":27,"style":27},"\u003Cdiv class=\"p-cards-render\" id=\"card-container\">\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"06p17111s5\" style=\"height:309px; transform:translate(0%,0px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"l1dq533ms9g\" style=\"height:246px; transform:translate(100%,0px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"k6n2ebd918g\" style=\"height:306px; transform:translate(200%,0px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"2j3vvgc373g\" style=\"height:161px; transform:translate(0%,309px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"tagrso5m40o\" style=\"height:255px; transform:translate(100%,246px);\">\u003C\u002Fdiv>\n    \u003Cdiv class=\"c-card-container u-animate\" id=\"89opa7i1eng\" style=\"height:288px; transform:translate(200%,306px);\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[17,6707,6708,6736,6782,6826,6870,6914,6958,7002],{"__ignoreMap":27},[31,6709,6710,6712,6714,6716,6718,6720,6722,6724,6726,6728,6730,6732,6734],{"class":33,"line":34},[31,6711,3011],{"class":45},[31,6713,377],{"class":58},[31,6715,5966],{"class":37},[31,6717,46],{"class":45},[31,6719,77],{"class":45},[31,6721,5973],{"class":80},[31,6723,77],{"class":45},[31,6725,5978],{"class":37},[31,6727,46],{"class":45},[31,6729,77],{"class":45},[31,6731,5985],{"class":80},[31,6733,77],{"class":45},[31,6735,5990],{"class":45},[31,6737,6738,6740,6742,6744,6746,6748,6750,6752,6754,6756,6758,6761,6763,6766,6768,6770,6773,6775,6778,6780],{"class":33,"line":52},[31,6739,5995],{"class":45},[31,6741,377],{"class":58},[31,6743,5966],{"class":37},[31,6745,46],{"class":45},[31,6747,77],{"class":45},[31,6749,6006],{"class":80},[31,6751,77],{"class":45},[31,6753,5978],{"class":37},[31,6755,46],{"class":45},[31,6757,77],{"class":45},[31,6759,6760],{"class":80},"06p17111s5",[31,6762,77],{"class":45},[31,6764,6765],{"class":37}," style",[31,6767,46],{"class":45},[31,6769,77],{"class":45},[31,6771,6772],{"class":80},"height:309px; transform:translate(0%,0px);",[31,6774,77],{"class":45},[31,6776,6777],{"class":45},">\u003C\u002F",[31,6779,377],{"class":58},[31,6781,5990],{"class":45},[31,6783,6784,6786,6788,6790,6792,6794,6796,6798,6800,6802,6804,6807,6809,6811,6813,6815,6818,6820,6822,6824],{"class":33,"line":103},[31,6785,5995],{"class":45},[31,6787,377],{"class":58},[31,6789,5966],{"class":37},[31,6791,46],{"class":45},[31,6793,77],{"class":45},[31,6795,6006],{"class":80},[31,6797,77],{"class":45},[31,6799,5978],{"class":37},[31,6801,46],{"class":45},[31,6803,77],{"class":45},[31,6805,6806],{"class":80},"l1dq533ms9g",[31,6808,77],{"class":45},[31,6810,6765],{"class":37},[31,6812,46],{"class":45},[31,6814,77],{"class":45},[31,6816,6817],{"class":80},"height:246px; transform:translate(100%,0px);",[31,6819,77],{"class":45},[31,6821,6777],{"class":45},[31,6823,377],{"class":58},[31,6825,5990],{"class":45},[31,6827,6828,6830,6832,6834,6836,6838,6840,6842,6844,6846,6848,6851,6853,6855,6857,6859,6862,6864,6866,6868],{"class":33,"line":142},[31,6829,5995],{"class":45},[31,6831,377],{"class":58},[31,6833,5966],{"class":37},[31,6835,46],{"class":45},[31,6837,77],{"class":45},[31,6839,6006],{"class":80},[31,6841,77],{"class":45},[31,6843,5978],{"class":37},[31,6845,46],{"class":45},[31,6847,77],{"class":45},[31,6849,6850],{"class":80},"k6n2ebd918g",[31,6852,77],{"class":45},[31,6854,6765],{"class":37},[31,6856,46],{"class":45},[31,6858,77],{"class":45},[31,6860,6861],{"class":80},"height:306px; transform:translate(200%,0px);",[31,6863,77],{"class":45},[31,6865,6777],{"class":45},[31,6867,377],{"class":58},[31,6869,5990],{"class":45},[31,6871,6872,6874,6876,6878,6880,6882,6884,6886,6888,6890,6892,6895,6897,6899,6901,6903,6906,6908,6910,6912],{"class":33,"line":181},[31,6873,5995],{"class":45},[31,6875,377],{"class":58},[31,6877,5966],{"class":37},[31,6879,46],{"class":45},[31,6881,77],{"class":45},[31,6883,6006],{"class":80},[31,6885,77],{"class":45},[31,6887,5978],{"class":37},[31,6889,46],{"class":45},[31,6891,77],{"class":45},[31,6893,6894],{"class":80},"2j3vvgc373g",[31,6896,77],{"class":45},[31,6898,6765],{"class":37},[31,6900,46],{"class":45},[31,6902,77],{"class":45},[31,6904,6905],{"class":80},"height:161px; transform:translate(0%,309px);",[31,6907,77],{"class":45},[31,6909,6777],{"class":45},[31,6911,377],{"class":58},[31,6913,5990],{"class":45},[31,6915,6916,6918,6920,6922,6924,6926,6928,6930,6932,6934,6936,6939,6941,6943,6945,6947,6950,6952,6954,6956],{"class":33,"line":188},[31,6917,5995],{"class":45},[31,6919,377],{"class":58},[31,6921,5966],{"class":37},[31,6923,46],{"class":45},[31,6925,77],{"class":45},[31,6927,6006],{"class":80},[31,6929,77],{"class":45},[31,6931,5978],{"class":37},[31,6933,46],{"class":45},[31,6935,77],{"class":45},[31,6937,6938],{"class":80},"tagrso5m40o",[31,6940,77],{"class":45},[31,6942,6765],{"class":37},[31,6944,46],{"class":45},[31,6946,77],{"class":45},[31,6948,6949],{"class":80},"height:255px; transform:translate(100%,246px);",[31,6951,77],{"class":45},[31,6953,6777],{"class":45},[31,6955,377],{"class":58},[31,6957,5990],{"class":45},[31,6959,6960,6962,6964,6966,6968,6970,6972,6974,6976,6978,6980,6983,6985,6987,6989,6991,6994,6996,6998,7000],{"class":33,"line":283},[31,6961,5995],{"class":45},[31,6963,377],{"class":58},[31,6965,5966],{"class":37},[31,6967,46],{"class":45},[31,6969,77],{"class":45},[31,6971,6006],{"class":80},[31,6973,77],{"class":45},[31,6975,5978],{"class":37},[31,6977,46],{"class":45},[31,6979,77],{"class":45},[31,6981,6982],{"class":80},"89opa7i1eng",[31,6984,77],{"class":45},[31,6986,6765],{"class":37},[31,6988,46],{"class":45},[31,6990,77],{"class":45},[31,6992,6993],{"class":80},"height:288px; transform:translate(200%,306px);",[31,6995,77],{"class":45},[31,6997,6777],{"class":45},[31,6999,377],{"class":58},[31,7001,5990],{"class":45},[31,7003,7004,7006,7008],{"class":33,"line":289},[31,7005,6114],{"class":45},[31,7007,377],{"class":58},[31,7009,5990],{"class":45},[13,7011,7012,7013,7016],{},"それぞのコンテナーに対して",[17,7014,7015],{},"height:246px; transform:translate(200%,306px);","というものあります。まず固有の高さを指定し、そしてtransformを使用して位置を変更しています。",[13,7018,7019],{},"要素が追加される度に始点（left:0;,top:0;）から移動させ、位置を指定してあげます。2021年7月時点のCSSではこの様にしないと、数不明・ここの高さが不明な要素に対してピンタレストのようなスタイルを適用することができません。",[13,7021,7022],{},"では次はそれを実装するjavascriptを書いていきます。",[365,7024,7026],{"id":7025},"htmlの前準備","HTMLの前準備",[13,7028,7029],{},"HTMLは以下の様にしておきます。",[22,7031,7033],{"className":2998,"code":7032,"language":1871,"meta":27,"style":27},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n        \u003Cmeta charset=\"utf-8\"> \n        \u003Ctitle>Pinterest like Style\u003C\u002Ftitle>\n        \u003Clink rel=\"stylesheet\" href=\".\u002Fstyle.css\">\n    \u003C\u002Fhead>\n    \u003Cbody>\n        \u003Cdiv class=\"p-main-container\">\n            \u003Cdiv class=\"p-cards-render\" id=\"card-container\">\n\n            \u003C\u002Fdiv>\n            \u003Cbutton id='card-add'>ADD!\u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n    \u003C\u002Fbody>\n    \u003Cscript src=\".\u002Fcard.js\" type=\"text\u002Fjavascript\">\u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[17,7034,7035,7047,7055,7064,7088,7105,7138,7146,7154,7172,7201,7205,7214,7242,7251,7259,7295],{"__ignoreMap":27},[31,7036,7037,7040,7043,7045],{"class":33,"line":34},[31,7038,7039],{"class":45},"\u003C!",[31,7041,7042],{"class":58},"DOCTYPE",[31,7044,4224],{"class":37},[31,7046,5990],{"class":45},[31,7048,7049,7051,7053],{"class":33,"line":52},[31,7050,3011],{"class":45},[31,7052,1871],{"class":58},[31,7054,5990],{"class":45},[31,7056,7057,7059,7062],{"class":33,"line":103},[31,7058,5995],{"class":45},[31,7060,7061],{"class":58},"head",[31,7063,5990],{"class":45},[31,7065,7066,7068,7071,7074,7076,7078,7081,7083,7085],{"class":33,"line":142},[31,7067,6015],{"class":45},[31,7069,7070],{"class":58},"meta",[31,7072,7073],{"class":37}," charset",[31,7075,46],{"class":45},[31,7077,77],{"class":45},[31,7079,7080],{"class":80},"utf-8",[31,7082,77],{"class":45},[31,7084,411],{"class":45},[31,7086,7087],{"class":41}," \n",[31,7089,7090,7092,7094,7096,7099,7101,7103],{"class":33,"line":181},[31,7091,6015],{"class":45},[31,7093,72],{"class":58},[31,7095,411],{"class":45},[31,7097,7098],{"class":41},"Pinterest like Style",[31,7100,6114],{"class":45},[31,7102,72],{"class":58},[31,7104,5990],{"class":45},[31,7106,7107,7109,7112,7115,7117,7119,7122,7124,7127,7129,7131,7134,7136],{"class":33,"line":188},[31,7108,6015],{"class":45},[31,7110,7111],{"class":58},"link",[31,7113,7114],{"class":37}," rel",[31,7116,46],{"class":45},[31,7118,77],{"class":45},[31,7120,7121],{"class":80},"stylesheet",[31,7123,77],{"class":45},[31,7125,7126],{"class":37}," href",[31,7128,46],{"class":45},[31,7130,77],{"class":45},[31,7132,7133],{"class":80},".\u002Fstyle.css",[31,7135,77],{"class":45},[31,7137,5990],{"class":45},[31,7139,7140,7142,7144],{"class":33,"line":283},[31,7141,6046],{"class":45},[31,7143,7061],{"class":58},[31,7145,5990],{"class":45},[31,7147,7148,7150,7152],{"class":33,"line":289},[31,7149,5995],{"class":45},[31,7151,2616],{"class":58},[31,7153,5990],{"class":45},[31,7155,7156,7158,7160,7162,7164,7166,7168,7170],{"class":33,"line":295},[31,7157,6015],{"class":45},[31,7159,377],{"class":58},[31,7161,5966],{"class":37},[31,7163,46],{"class":45},[31,7165,77],{"class":45},[31,7167,6258],{"class":80},[31,7169,77],{"class":45},[31,7171,5990],{"class":45},[31,7173,7174,7177,7179,7181,7183,7185,7187,7189,7191,7193,7195,7197,7199],{"class":33,"line":301},[31,7175,7176],{"class":45},"            \u003C",[31,7178,377],{"class":58},[31,7180,5966],{"class":37},[31,7182,46],{"class":45},[31,7184,77],{"class":45},[31,7186,5973],{"class":80},[31,7188,77],{"class":45},[31,7190,5978],{"class":37},[31,7192,46],{"class":45},[31,7194,77],{"class":45},[31,7196,5985],{"class":80},[31,7198,77],{"class":45},[31,7200,5990],{"class":45},[31,7202,7203],{"class":33,"line":307},[31,7204,249],{"emptyLinePlaceholder":248},[31,7206,7207,7210,7212],{"class":33,"line":313},[31,7208,7209],{"class":45},"            \u003C\u002F",[31,7211,377],{"class":58},[31,7213,5990],{"class":45},[31,7215,7216,7218,7221,7223,7225,7227,7229,7231,7233,7236,7238,7240],{"class":33,"line":319},[31,7217,7176],{"class":45},[31,7219,7220],{"class":58},"button",[31,7222,5978],{"class":37},[31,7224,46],{"class":45},[31,7226,2005],{"class":45},[31,7228,6205],{"class":80},[31,7230,2005],{"class":45},[31,7232,411],{"class":45},[31,7234,7235],{"class":41},"ADD!",[31,7237,6114],{"class":45},[31,7239,7220],{"class":58},[31,7241,5990],{"class":45},[31,7243,7244,7247,7249],{"class":33,"line":325},[31,7245,7246],{"class":45},"        \u003C\u002F",[31,7248,377],{"class":58},[31,7250,5990],{"class":45},[31,7252,7253,7255,7257],{"class":33,"line":331},[31,7254,6046],{"class":45},[31,7256,2616],{"class":58},[31,7258,5990],{"class":45},[31,7260,7261,7263,7266,7268,7270,7272,7275,7277,7280,7282,7284,7287,7289,7291,7293],{"class":33,"line":337},[31,7262,5995],{"class":45},[31,7264,7265],{"class":58},"script",[31,7267,3017],{"class":37},[31,7269,46],{"class":45},[31,7271,77],{"class":45},[31,7273,7274],{"class":80},".\u002Fcard.js",[31,7276,77],{"class":45},[31,7278,7279],{"class":37}," type",[31,7281,46],{"class":45},[31,7283,77],{"class":45},[31,7285,7286],{"class":80},"text\u002Fjavascript",[31,7288,77],{"class":45},[31,7290,6777],{"class":45},[31,7292,7265],{"class":58},[31,7294,5990],{"class":45},[31,7296,7297,7299,7301],{"class":33,"line":1752},[31,7298,6114],{"class":45},[31,7300,1871],{"class":58},[31,7302,5990],{"class":45},[13,7304,7305,7307],{},[17,7306,5985],{},"にカードが挿入されていきます。ADD！というボタンを押すことで今回はカードが追加されていくことにします。",[365,7309,7310],{"id":7310},"javascriptはこの通り",[13,7312,7313,7314,7317],{},"同じディレクトリに",[17,7315,7316],{},"card.js","をおいておきます。いきなりですが、全て見せます。完成形は以下の通りです。",[22,7319,7321],{"className":24,"code":7320,"language":26,"meta":27,"style":27},"\u002F\u002F カード情報を格納\nlet elements = [];\n\n\u002F\u002F カードの初期値\nlet elementInit = {\n    id:undefined,\n    color:undefined,\n    selfHeight:0,\n    y:0\n};\n\n\u002F\u002F 列数\nlet row = 3;\n\n\u002F\u002F 挿入先コンテナ\nconst cardsContainer = document.getElementById('card-container');\n\n\u002F\u002F 追加ボタン\nconst cardsAddBtn = document.getElementById('card-add');\n\n\u002F\u002F　カード高さの最大値と最小値\nconst heightMax = 400;\nconst heightMin = 100;\n\n\u002F\u002F 色のパターンとカード間の隙間（px）\nconst colors = ['red','yellow','green','orange','blue','purple'];\nconst cardGap = 10;\n\n\u002F\u002F 追加ボタンにイベントリスナーを付与\ncardsAddBtn.addEventListener('click',()=>{\n    return onClickAdd();\n})\n\n\u002F\u002F イベントリスナーの内容\nlet onClickAdd = ()=>{\n    let card = createCard();\n    insertCard(card.dom);\n    scanAdd(card.id);\n}\n\n\u002F\u002F カードのDOMを新規作成\nlet createCard = ()=>{\n    let info = {...elementInit};\n\n    \u002F\u002F カードの要素をdivで作成\n    let contain = document.createElement(\"DIV\");\n    contain.setAttribute('class','c-card-container');\n\n    \u002F\u002F IDをランダムに作成、記録\n    let idname = Math.random().toString(32).substring(2);\n    contain.setAttribute('id',idname);\n    info.id = idname;\n\n    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n    \u002F\u002F colorsの値と画像名が同じ。\n    let card = document.createElement(\"IMG\");\n    let color = colors[Math.floor(Math.random() * colors.length)];\n    info.color = color;\n\n    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n    card.setAttribute('src','.\u002F'+color+'.png');\n    card.setAttribute('class','c-card-img');\n\n    \u002F\u002F カードに対して不明な高さを与える\n    info.selfHeight = Math.floor(Math.random()*(heightMax+1-heightMin))+heightMin;\n    \n    \u002F\u002F カードDIVにIMGを追加\n    contain.appendChild(card);\n\n    \u002F\u002F elementsに記録。DOMとIDを返す\n    elements.push(info);\n    return {dom:contain,id:idname};\n}\n\n\u002F\u002F カードコンテナーにカードを追加する\nlet insertCard = (cardDom)=>{\n    cardsContainer.appendChild(cardDom);\n}\n\n\u002F\u002F これが大切\n\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\nlet scanAdd = (id) =>{\n    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n    let index = elements.findIndex(ele=>{return ele.id===id});\n    let ele = elements[index]\n\n    \u002F\u002F DOMを取得\n    let dom = document.getElementById(ele.id);\n\n    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n    let height = ele.selfHeight\n    ele.y = (index \u003C row)?height:elements[index - row].y + height;\n    let x = (index%(row)*100) + '%';\n    let y = (index \u003C row)?0:elements[index - row].y;\n    \n    \u002F\u002F 位置をずらすスタイルを適用\n    dom.setAttribute('style',`height:${height}px; transform:translate(${x},${y}px);`)\n\n    \u002F\u002F アニメーション用のスタイルを追加\n    setTimeout(()=>{\n        dom.classList.add('u-animate')\n    },500);\n}\n",[17,7322,7323,7328,7342,7346,7351,7362,7370,7377,7388,7398,7402,7406,7411,7425,7429,7434,7463,7467,7472,7499,7503,7508,7522,7536,7540,7545,7612,7626,7630,7635,7662,7675,7681,7685,7690,7706,7723,7742,7759,7763,7767,7772,7787,7803,7807,7812,7841,7872,7876,7881,7925,7950,7965,7969,7974,7979,8006,8052,8067,8071,8076,8120,8148,8152,8157,8209,8213,8218,8235,8239,8244,8262,8285,8289,8293,8298,8319,8336,8340,8344,8349,8354,8373,8378,8423,8440,8444,8449,8476,8480,8485,8501,8557,8598,8641,8645,8650,8705,8709,8714,8727,8752,8764],{"__ignoreMap":27},[31,7324,7325],{"class":33,"line":34},[31,7326,7327],{"class":184},"\u002F\u002F カード情報を格納\n",[31,7329,7330,7332,7335,7337,7340],{"class":33,"line":52},[31,7331,1932],{"class":37},[31,7333,7334],{"class":41}," elements ",[31,7336,46],{"class":45},[31,7338,7339],{"class":41}," []",[31,7341,243],{"class":45},[31,7343,7344],{"class":33,"line":103},[31,7345,249],{"emptyLinePlaceholder":248},[31,7347,7348],{"class":33,"line":142},[31,7349,7350],{"class":184},"\u002F\u002F カードの初期値\n",[31,7352,7353,7355,7358,7360],{"class":33,"line":181},[31,7354,1932],{"class":37},[31,7356,7357],{"class":41}," elementInit ",[31,7359,46],{"class":45},[31,7361,1602],{"class":45},[31,7363,7364,7367],{"class":33,"line":188},[31,7365,7366],{"class":58},"    id",[31,7368,7369],{"class":45},":undefined,\n",[31,7371,7372,7375],{"class":33,"line":283},[31,7373,7374],{"class":58},"    color",[31,7376,7369],{"class":45},[31,7378,7379,7382,7384,7386],{"class":33,"line":289},[31,7380,7381],{"class":58},"    selfHeight",[31,7383,62],{"class":45},[31,7385,578],{"class":65},[31,7387,1647],{"class":45},[31,7389,7390,7393,7395],{"class":33,"line":295},[31,7391,7392],{"class":58},"    y",[31,7394,62],{"class":45},[31,7396,7397],{"class":65},"0\n",[31,7399,7400],{"class":33,"line":301},[31,7401,5591],{"class":45},[31,7403,7404],{"class":33,"line":307},[31,7405,249],{"emptyLinePlaceholder":248},[31,7407,7408],{"class":33,"line":313},[31,7409,7410],{"class":184},"\u002F\u002F 列数\n",[31,7412,7413,7415,7418,7420,7423],{"class":33,"line":319},[31,7414,1932],{"class":37},[31,7416,7417],{"class":41}," row ",[31,7419,46],{"class":45},[31,7421,7422],{"class":65}," 3",[31,7424,243],{"class":45},[31,7426,7427],{"class":33,"line":325},[31,7428,249],{"emptyLinePlaceholder":248},[31,7430,7431],{"class":33,"line":331},[31,7432,7433],{"class":184},"\u002F\u002F 挿入先コンテナ\n",[31,7435,7436,7438,7441,7443,7446,7448,7451,7453,7455,7457,7459,7461],{"class":33,"line":337},[31,7437,38],{"class":37},[31,7439,7440],{"class":41}," cardsContainer ",[31,7442,46],{"class":45},[31,7444,7445],{"class":41}," document",[31,7447,237],{"class":45},[31,7449,7450],{"class":259},"getElementById",[31,7452,993],{"class":41},[31,7454,2005],{"class":45},[31,7456,5985],{"class":80},[31,7458,2005],{"class":45},[31,7460,1018],{"class":41},[31,7462,243],{"class":45},[31,7464,7465],{"class":33,"line":1752},[31,7466,249],{"emptyLinePlaceholder":248},[31,7468,7469],{"class":33,"line":1758},[31,7470,7471],{"class":184},"\u002F\u002F 追加ボタン\n",[31,7473,7474,7476,7479,7481,7483,7485,7487,7489,7491,7493,7495,7497],{"class":33,"line":1764},[31,7475,38],{"class":37},[31,7477,7478],{"class":41}," cardsAddBtn ",[31,7480,46],{"class":45},[31,7482,7445],{"class":41},[31,7484,237],{"class":45},[31,7486,7450],{"class":259},[31,7488,993],{"class":41},[31,7490,2005],{"class":45},[31,7492,6205],{"class":80},[31,7494,2005],{"class":45},[31,7496,1018],{"class":41},[31,7498,243],{"class":45},[31,7500,7501],{"class":33,"line":2088},[31,7502,249],{"emptyLinePlaceholder":248},[31,7504,7505],{"class":33,"line":2098},[31,7506,7507],{"class":184},"\u002F\u002F　カード高さの最大値と最小値\n",[31,7509,7510,7512,7515,7517,7520],{"class":33,"line":2109},[31,7511,38],{"class":37},[31,7513,7514],{"class":41}," heightMax ",[31,7516,46],{"class":45},[31,7518,7519],{"class":65}," 400",[31,7521,243],{"class":45},[31,7523,7524,7526,7529,7531,7534],{"class":33,"line":2114},[31,7525,38],{"class":37},[31,7527,7528],{"class":41}," heightMin ",[31,7530,46],{"class":45},[31,7532,7533],{"class":65}," 100",[31,7535,243],{"class":45},[31,7537,7538],{"class":33,"line":2119},[31,7539,249],{"emptyLinePlaceholder":248},[31,7541,7542],{"class":33,"line":2131},[31,7543,7544],{"class":184},"\u002F\u002F 色のパターンとカード間の隙間（px）\n",[31,7546,7547,7549,7552,7554,7556,7558,7561,7563,7565,7567,7570,7572,7574,7576,7579,7581,7583,7585,7588,7590,7592,7594,7597,7599,7601,7603,7606,7608,7610],{"class":33,"line":2136},[31,7548,38],{"class":37},[31,7550,7551],{"class":41}," colors ",[31,7553,46],{"class":45},[31,7555,512],{"class":41},[31,7557,2005],{"class":45},[31,7559,7560],{"class":80},"red",[31,7562,2005],{"class":45},[31,7564,69],{"class":45},[31,7566,2005],{"class":45},[31,7568,7569],{"class":80},"yellow",[31,7571,2005],{"class":45},[31,7573,69],{"class":45},[31,7575,2005],{"class":45},[31,7577,7578],{"class":80},"green",[31,7580,2005],{"class":45},[31,7582,69],{"class":45},[31,7584,2005],{"class":45},[31,7586,7587],{"class":80},"orange",[31,7589,2005],{"class":45},[31,7591,69],{"class":45},[31,7593,2005],{"class":45},[31,7595,7596],{"class":80},"blue",[31,7598,2005],{"class":45},[31,7600,69],{"class":45},[31,7602,2005],{"class":45},[31,7604,7605],{"class":80},"purple",[31,7607,2005],{"class":45},[31,7609,472],{"class":41},[31,7611,243],{"class":45},[31,7613,7614,7616,7619,7621,7624],{"class":33,"line":2141},[31,7615,38],{"class":37},[31,7617,7618],{"class":41}," cardGap ",[31,7620,46],{"class":45},[31,7622,7623],{"class":65}," 10",[31,7625,243],{"class":45},[31,7627,7628],{"class":33,"line":2147},[31,7629,249],{"emptyLinePlaceholder":248},[31,7631,7632],{"class":33,"line":2152},[31,7633,7634],{"class":184},"\u002F\u002F 追加ボタンにイベントリスナーを付与\n",[31,7636,7637,7640,7642,7645,7647,7649,7652,7654,7657,7660],{"class":33,"line":4},[31,7638,7639],{"class":41},"cardsAddBtn",[31,7641,237],{"class":45},[31,7643,7644],{"class":259},"addEventListener",[31,7646,993],{"class":41},[31,7648,2005],{"class":45},[31,7650,7651],{"class":80},"click",[31,7653,2005],{"class":45},[31,7655,7656],{"class":45},",()",[31,7658,7659],{"class":37},"=>",[31,7661,275],{"class":45},[31,7663,7664,7667,7670,7673],{"class":33,"line":2523},[31,7665,7666],{"class":1006},"    return",[31,7668,7669],{"class":259}," onClickAdd",[31,7671,7672],{"class":58},"()",[31,7674,243],{"class":45},[31,7676,7677,7679],{"class":33,"line":2528},[31,7678,469],{"class":45},[31,7680,2653],{"class":41},[31,7682,7683],{"class":33,"line":2547},[31,7684,249],{"emptyLinePlaceholder":248},[31,7686,7687],{"class":33,"line":2560},[31,7688,7689],{"class":184},"\u002F\u002F イベントリスナーの内容\n",[31,7691,7692,7694,7697,7699,7702,7704],{"class":33,"line":2606},[31,7693,1932],{"class":37},[31,7695,7696],{"class":41}," onClickAdd ",[31,7698,46],{"class":45},[31,7700,7701],{"class":45}," ()",[31,7703,7659],{"class":37},[31,7705,275],{"class":45},[31,7707,7708,7711,7714,7716,7719,7721],{"class":33,"line":2623},[31,7709,7710],{"class":37},"    let",[31,7712,7713],{"class":41}," card",[31,7715,2041],{"class":45},[31,7717,7718],{"class":259}," createCard",[31,7720,7672],{"class":58},[31,7722,243],{"class":45},[31,7724,7725,7728,7730,7733,7735,7738,7740],{"class":33,"line":2635},[31,7726,7727],{"class":259},"    insertCard",[31,7729,993],{"class":58},[31,7731,7732],{"class":41},"card",[31,7734,237],{"class":45},[31,7736,7737],{"class":41},"dom",[31,7739,1018],{"class":58},[31,7741,243],{"class":45},[31,7743,7744,7747,7749,7751,7753,7755,7757],{"class":33,"line":2647},[31,7745,7746],{"class":259},"    scanAdd",[31,7748,993],{"class":58},[31,7750,7732],{"class":41},[31,7752,237],{"class":45},[31,7754,59],{"class":41},[31,7756,1018],{"class":58},[31,7758,243],{"class":45},[31,7760,7761],{"class":33,"line":2656},[31,7762,334],{"class":45},[31,7764,7765],{"class":33,"line":2662},[31,7766,249],{"emptyLinePlaceholder":248},[31,7768,7769],{"class":33,"line":2671},[31,7770,7771],{"class":184},"\u002F\u002F カードのDOMを新規作成\n",[31,7773,7774,7776,7779,7781,7783,7785],{"class":33,"line":2676},[31,7775,1932],{"class":37},[31,7777,7778],{"class":41}," createCard ",[31,7780,46],{"class":45},[31,7782,7701],{"class":45},[31,7784,7659],{"class":37},[31,7786,275],{"class":45},[31,7788,7789,7791,7794,7796,7798,7801],{"class":33,"line":4405},[31,7790,7710],{"class":37},[31,7792,7793],{"class":41}," info",[31,7795,2041],{"class":45},[31,7797,1010],{"class":45},[31,7799,7800],{"class":41},"elementInit",[31,7802,5591],{"class":45},[31,7804,7805],{"class":33,"line":5044},[31,7806,249],{"emptyLinePlaceholder":248},[31,7808,7809],{"class":33,"line":5049},[31,7810,7811],{"class":184},"    \u002F\u002F カードの要素をdivで作成\n",[31,7813,7814,7816,7819,7821,7823,7825,7828,7830,7832,7835,7837,7839],{"class":33,"line":5054},[31,7815,7710],{"class":37},[31,7817,7818],{"class":41}," contain",[31,7820,2041],{"class":45},[31,7822,7445],{"class":41},[31,7824,237],{"class":45},[31,7826,7827],{"class":259},"createElement",[31,7829,993],{"class":58},[31,7831,77],{"class":45},[31,7833,7834],{"class":80},"DIV",[31,7836,77],{"class":45},[31,7838,1018],{"class":58},[31,7840,243],{"class":45},[31,7842,7843,7846,7848,7851,7853,7855,7858,7860,7862,7864,7866,7868,7870],{"class":33,"line":5075},[31,7844,7845],{"class":41},"    contain",[31,7847,237],{"class":45},[31,7849,7850],{"class":259},"setAttribute",[31,7852,993],{"class":58},[31,7854,2005],{"class":45},[31,7856,7857],{"class":80},"class",[31,7859,2005],{"class":45},[31,7861,69],{"class":45},[31,7863,2005],{"class":45},[31,7865,6126],{"class":80},[31,7867,2005],{"class":45},[31,7869,1018],{"class":58},[31,7871,243],{"class":45},[31,7873,7874],{"class":33,"line":5086},[31,7875,249],{"emptyLinePlaceholder":248},[31,7877,7878],{"class":33,"line":5092},[31,7879,7880],{"class":184},"    \u002F\u002F IDをランダムに作成、記録\n",[31,7882,7883,7885,7888,7890,7893,7895,7898,7900,7902,7905,7907,7910,7912,7914,7917,7919,7921,7923],{"class":33,"line":5118},[31,7884,7710],{"class":37},[31,7886,7887],{"class":41}," idname",[31,7889,2041],{"class":45},[31,7891,7892],{"class":41}," Math",[31,7894,237],{"class":45},[31,7896,7897],{"class":259},"random",[31,7899,7672],{"class":58},[31,7901,237],{"class":45},[31,7903,7904],{"class":259},"toString",[31,7906,993],{"class":58},[31,7908,7909],{"class":65},"32",[31,7911,1018],{"class":58},[31,7913,237],{"class":45},[31,7915,7916],{"class":259},"substring",[31,7918,993],{"class":58},[31,7920,112],{"class":65},[31,7922,1018],{"class":58},[31,7924,243],{"class":45},[31,7926,7927,7929,7931,7933,7935,7937,7939,7941,7943,7946,7948],{"class":33,"line":5141},[31,7928,7845],{"class":41},[31,7930,237],{"class":45},[31,7932,7850],{"class":259},[31,7934,993],{"class":58},[31,7936,2005],{"class":45},[31,7938,59],{"class":80},[31,7940,2005],{"class":45},[31,7942,69],{"class":45},[31,7944,7945],{"class":41},"idname",[31,7947,1018],{"class":58},[31,7949,243],{"class":45},[31,7951,7952,7955,7957,7959,7961,7963],{"class":33,"line":5151},[31,7953,7954],{"class":41},"    info",[31,7956,237],{"class":45},[31,7958,59],{"class":41},[31,7960,2041],{"class":45},[31,7962,7887],{"class":41},[31,7964,243],{"class":45},[31,7966,7967],{"class":33,"line":5168},[31,7968,249],{"emptyLinePlaceholder":248},[31,7970,7971],{"class":33,"line":5178},[31,7972,7973],{"class":184},"    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n",[31,7975,7976],{"class":33,"line":5197},[31,7977,7978],{"class":184},"    \u002F\u002F colorsの値と画像名が同じ。\n",[31,7980,7981,7983,7985,7987,7989,7991,7993,7995,7997,8000,8002,8004],{"class":33,"line":5203},[31,7982,7710],{"class":37},[31,7984,7713],{"class":41},[31,7986,2041],{"class":45},[31,7988,7445],{"class":41},[31,7990,237],{"class":45},[31,7992,7827],{"class":259},[31,7994,993],{"class":58},[31,7996,77],{"class":45},[31,7998,7999],{"class":80},"IMG",[31,8001,77],{"class":45},[31,8003,1018],{"class":58},[31,8005,243],{"class":45},[31,8007,8008,8010,8013,8015,8018,8020,8023,8025,8028,8030,8032,8034,8036,8039,8041,8043,8045,8048,8050],{"class":33,"line":5208},[31,8009,7710],{"class":37},[31,8011,8012],{"class":41}," color",[31,8014,2041],{"class":45},[31,8016,8017],{"class":41}," colors",[31,8019,422],{"class":58},[31,8021,8022],{"class":41},"Math",[31,8024,237],{"class":45},[31,8026,8027],{"class":259},"floor",[31,8029,993],{"class":58},[31,8031,8022],{"class":41},[31,8033,237],{"class":45},[31,8035,7897],{"class":259},[31,8037,8038],{"class":58},"() ",[31,8040,6151],{"class":45},[31,8042,8017],{"class":41},[31,8044,237],{"class":45},[31,8046,8047],{"class":41},"length",[31,8049,3257],{"class":58},[31,8051,243],{"class":45},[31,8053,8054,8056,8058,8061,8063,8065],{"class":33,"line":5218},[31,8055,7954],{"class":41},[31,8057,237],{"class":45},[31,8059,8060],{"class":41},"color",[31,8062,2041],{"class":45},[31,8064,8012],{"class":41},[31,8066,243],{"class":45},[31,8068,8069],{"class":33,"line":5233},[31,8070,249],{"emptyLinePlaceholder":248},[31,8072,8073],{"class":33,"line":5238},[31,8074,8075],{"class":184},"    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n",[31,8077,8078,8081,8083,8085,8087,8089,8091,8093,8095,8097,8100,8102,8105,8107,8109,8111,8114,8116,8118],{"class":33,"line":5243},[31,8079,8080],{"class":41},"    card",[31,8082,237],{"class":45},[31,8084,7850],{"class":259},[31,8086,993],{"class":58},[31,8088,2005],{"class":45},[31,8090,1847],{"class":80},[31,8092,2005],{"class":45},[31,8094,69],{"class":45},[31,8096,2005],{"class":45},[31,8098,8099],{"class":80},".\u002F",[31,8101,2005],{"class":45},[31,8103,8104],{"class":45},"+",[31,8106,8060],{"class":41},[31,8108,8104],{"class":45},[31,8110,2005],{"class":45},[31,8112,8113],{"class":80},".png",[31,8115,2005],{"class":45},[31,8117,1018],{"class":58},[31,8119,243],{"class":45},[31,8121,8122,8124,8126,8128,8130,8132,8134,8136,8138,8140,8142,8144,8146],{"class":33,"line":5248},[31,8123,8080],{"class":41},[31,8125,237],{"class":45},[31,8127,7850],{"class":259},[31,8129,993],{"class":58},[31,8131,2005],{"class":45},[31,8133,7857],{"class":80},[31,8135,2005],{"class":45},[31,8137,69],{"class":45},[31,8139,2005],{"class":45},[31,8141,6037],{"class":80},[31,8143,2005],{"class":45},[31,8145,1018],{"class":58},[31,8147,243],{"class":45},[31,8149,8150],{"class":33,"line":5253},[31,8151,249],{"emptyLinePlaceholder":248},[31,8153,8154],{"class":33,"line":5258},[31,8155,8156],{"class":184},"    \u002F\u002F カードに対して不明な高さを与える\n",[31,8158,8159,8161,8163,8166,8168,8170,8172,8174,8176,8178,8180,8182,8184,8186,8188,8191,8193,8195,8197,8200,8203,8205,8207],{"class":33,"line":5269},[31,8160,7954],{"class":41},[31,8162,237],{"class":45},[31,8164,8165],{"class":41},"selfHeight",[31,8167,2041],{"class":45},[31,8169,7892],{"class":41},[31,8171,237],{"class":45},[31,8173,8027],{"class":259},[31,8175,993],{"class":58},[31,8177,8022],{"class":41},[31,8179,237],{"class":45},[31,8181,7897],{"class":259},[31,8183,7672],{"class":58},[31,8185,6151],{"class":45},[31,8187,993],{"class":58},[31,8189,8190],{"class":41},"heightMax",[31,8192,8104],{"class":45},[31,8194,66],{"class":65},[31,8196,2509],{"class":45},[31,8198,8199],{"class":41},"heightMin",[31,8201,8202],{"class":58},"))",[31,8204,8104],{"class":45},[31,8206,8199],{"class":41},[31,8208,243],{"class":45},[31,8210,8211],{"class":33,"line":5289},[31,8212,2085],{"class":58},[31,8214,8215],{"class":33,"line":5294},[31,8216,8217],{"class":184},"    \u002F\u002F カードDIVにIMGを追加\n",[31,8219,8220,8222,8224,8227,8229,8231,8233],{"class":33,"line":5315},[31,8221,7845],{"class":41},[31,8223,237],{"class":45},[31,8225,8226],{"class":259},"appendChild",[31,8228,993],{"class":58},[31,8230,7732],{"class":41},[31,8232,1018],{"class":58},[31,8234,243],{"class":45},[31,8236,8237],{"class":33,"line":5320},[31,8238,249],{"emptyLinePlaceholder":248},[31,8240,8241],{"class":33,"line":5329},[31,8242,8243],{"class":184},"    \u002F\u002F elementsに記録。DOMとIDを返す\n",[31,8245,8246,8249,8251,8253,8255,8258,8260],{"class":33,"line":5338},[31,8247,8248],{"class":41},"    elements",[31,8250,237],{"class":45},[31,8252,2541],{"class":259},[31,8254,993],{"class":58},[31,8256,8257],{"class":41},"info",[31,8259,1018],{"class":58},[31,8261,243],{"class":45},[31,8263,8264,8266,8268,8270,8272,8275,8277,8279,8281,8283],{"class":33,"line":5343},[31,8265,7666],{"class":1006},[31,8267,1003],{"class":45},[31,8269,7737],{"class":58},[31,8271,62],{"class":45},[31,8273,8274],{"class":41},"contain",[31,8276,69],{"class":45},[31,8278,59],{"class":58},[31,8280,62],{"class":45},[31,8282,7945],{"class":41},[31,8284,5591],{"class":45},[31,8286,8287],{"class":33,"line":5350},[31,8288,334],{"class":45},[31,8290,8291],{"class":33,"line":5393},[31,8292,249],{"emptyLinePlaceholder":248},[31,8294,8295],{"class":33,"line":5402},[31,8296,8297],{"class":184},"\u002F\u002F カードコンテナーにカードを追加する\n",[31,8299,8300,8302,8305,8307,8310,8313,8315,8317],{"class":33,"line":5434},[31,8301,1932],{"class":37},[31,8303,8304],{"class":41}," insertCard ",[31,8306,46],{"class":45},[31,8308,8309],{"class":45}," (",[31,8311,8312],{"class":996},"cardDom",[31,8314,1018],{"class":45},[31,8316,7659],{"class":37},[31,8318,275],{"class":45},[31,8320,8321,8324,8326,8328,8330,8332,8334],{"class":33,"line":5439},[31,8322,8323],{"class":41},"    cardsContainer",[31,8325,237],{"class":45},[31,8327,8226],{"class":259},[31,8329,993],{"class":58},[31,8331,8312],{"class":41},[31,8333,1018],{"class":58},[31,8335,243],{"class":45},[31,8337,8338],{"class":33,"line":5466},[31,8339,334],{"class":45},[31,8341,8342],{"class":33,"line":5471},[31,8343,249],{"emptyLinePlaceholder":248},[31,8345,8346],{"class":33,"line":5477},[31,8347,8348],{"class":184},"\u002F\u002F これが大切\n",[31,8350,8351],{"class":33,"line":5487},[31,8352,8353],{"class":184},"\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\n",[31,8355,8356,8358,8361,8363,8365,8367,8369,8371],{"class":33,"line":5493},[31,8357,1932],{"class":37},[31,8359,8360],{"class":41}," scanAdd ",[31,8362,46],{"class":45},[31,8364,8309],{"class":45},[31,8366,59],{"class":996},[31,8368,1018],{"class":45},[31,8370,1000],{"class":37},[31,8372,275],{"class":45},[31,8374,8375],{"class":33,"line":5516},[31,8376,8377],{"class":184},"    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n",[31,8379,8380,8382,8385,8387,8390,8392,8395,8397,8400,8402,8404,8406,8409,8411,8413,8415,8417,8419,8421],{"class":33,"line":5531},[31,8381,7710],{"class":37},[31,8383,8384],{"class":41}," index",[31,8386,2041],{"class":45},[31,8388,8389],{"class":41}," elements",[31,8391,237],{"class":45},[31,8393,8394],{"class":259},"findIndex",[31,8396,993],{"class":58},[31,8398,8399],{"class":996},"ele",[31,8401,7659],{"class":37},[31,8403,425],{"class":45},[31,8405,1007],{"class":1006},[31,8407,8408],{"class":41}," ele",[31,8410,237],{"class":45},[31,8412,59],{"class":41},[31,8414,532],{"class":45},[31,8416,59],{"class":41},[31,8418,469],{"class":45},[31,8420,1018],{"class":58},[31,8422,243],{"class":45},[31,8424,8425,8427,8429,8431,8433,8435,8438],{"class":33,"line":5536},[31,8426,7710],{"class":37},[31,8428,8408],{"class":41},[31,8430,2041],{"class":45},[31,8432,8389],{"class":41},[31,8434,422],{"class":58},[31,8436,8437],{"class":41},"index",[31,8439,191],{"class":58},[31,8441,8442],{"class":33,"line":5546},[31,8443,249],{"emptyLinePlaceholder":248},[31,8445,8446],{"class":33,"line":5559},[31,8447,8448],{"class":184},"    \u002F\u002F DOMを取得\n",[31,8450,8451,8453,8456,8458,8460,8462,8464,8466,8468,8470,8472,8474],{"class":33,"line":5573},[31,8452,7710],{"class":37},[31,8454,8455],{"class":41}," dom",[31,8457,2041],{"class":45},[31,8459,7445],{"class":41},[31,8461,237],{"class":45},[31,8463,7450],{"class":259},[31,8465,993],{"class":58},[31,8467,8399],{"class":41},[31,8469,237],{"class":45},[31,8471,59],{"class":41},[31,8473,1018],{"class":58},[31,8475,243],{"class":45},[31,8477,8478],{"class":33,"line":5583},[31,8479,249],{"emptyLinePlaceholder":248},[31,8481,8482],{"class":33,"line":5588},[31,8483,8484],{"class":184},"    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n",[31,8486,8487,8489,8492,8494,8496,8498],{"class":33,"line":5594},[31,8488,7710],{"class":37},[31,8490,8491],{"class":41}," height",[31,8493,2041],{"class":45},[31,8495,8408],{"class":41},[31,8497,237],{"class":45},[31,8499,8500],{"class":41},"selfHeight\n",[31,8502,8503,8506,8508,8511,8513,8515,8517,8520,8523,8525,8527,8530,8532,8535,8537,8539,8542,8544,8546,8548,8550,8553,8555],{"class":33,"line":5599},[31,8504,8505],{"class":41},"    ele",[31,8507,237],{"class":45},[31,8509,8510],{"class":41},"y",[31,8512,2041],{"class":45},[31,8514,8309],{"class":58},[31,8516,8437],{"class":41},[31,8518,8519],{"class":45}," \u003C",[31,8521,8522],{"class":41}," row",[31,8524,1018],{"class":58},[31,8526,5107],{"class":45},[31,8528,8529],{"class":41},"height",[31,8531,62],{"class":45},[31,8533,8534],{"class":41},"elements",[31,8536,422],{"class":58},[31,8538,8437],{"class":41},[31,8540,8541],{"class":45}," -",[31,8543,8522],{"class":41},[31,8545,472],{"class":58},[31,8547,237],{"class":45},[31,8549,8510],{"class":41},[31,8551,8552],{"class":45}," +",[31,8554,8491],{"class":41},[31,8556,243],{"class":45},[31,8558,8559,8561,8564,8566,8568,8570,8573,8575,8578,8580,8582,8585,8588,8590,8592,8594,8596],{"class":33,"line":5626},[31,8560,7710],{"class":37},[31,8562,8563],{"class":41}," x",[31,8565,2041],{"class":45},[31,8567,8309],{"class":58},[31,8569,8437],{"class":41},[31,8571,8572],{"class":45},"%",[31,8574,993],{"class":58},[31,8576,8577],{"class":41},"row",[31,8579,1018],{"class":58},[31,8581,6151],{"class":45},[31,8583,8584],{"class":65},"100",[31,8586,8587],{"class":58},") ",[31,8589,8104],{"class":45},[31,8591,2000],{"class":45},[31,8593,8572],{"class":80},[31,8595,2005],{"class":45},[31,8597,243],{"class":45},[31,8599,8600,8602,8605,8607,8609,8611,8613,8615,8617,8619,8621,8623,8625,8627,8629,8631,8633,8635,8637,8639],{"class":33,"line":5651},[31,8601,7710],{"class":37},[31,8603,8604],{"class":41}," y",[31,8606,2041],{"class":45},[31,8608,8309],{"class":58},[31,8610,8437],{"class":41},[31,8612,8519],{"class":45},[31,8614,8522],{"class":41},[31,8616,1018],{"class":58},[31,8618,5107],{"class":45},[31,8620,578],{"class":65},[31,8622,62],{"class":45},[31,8624,8534],{"class":41},[31,8626,422],{"class":58},[31,8628,8437],{"class":41},[31,8630,8541],{"class":45},[31,8632,8522],{"class":41},[31,8634,472],{"class":58},[31,8636,237],{"class":45},[31,8638,8510],{"class":41},[31,8640,243],{"class":45},[31,8642,8643],{"class":33,"line":5660},[31,8644,2085],{"class":58},[31,8646,8647],{"class":33,"line":5665},[31,8648,8649],{"class":184},"    \u002F\u002F 位置をずらすスタイルを適用\n",[31,8651,8652,8655,8657,8659,8661,8663,8665,8667,8669,8671,8674,8676,8678,8680,8683,8685,8688,8690,8692,8694,8696,8698,8701,8703],{"class":33,"line":5686},[31,8653,8654],{"class":41},"    dom",[31,8656,237],{"class":45},[31,8658,7850],{"class":259},[31,8660,993],{"class":58},[31,8662,2005],{"class":45},[31,8664,1771],{"class":80},[31,8666,2005],{"class":45},[31,8668,69],{"class":45},[31,8670,5511],{"class":45},[31,8672,8673],{"class":80},"height:",[31,8675,2595],{"class":45},[31,8677,8529],{"class":41},[31,8679,469],{"class":45},[31,8681,8682],{"class":80},"px; transform:translate(",[31,8684,2595],{"class":45},[31,8686,8687],{"class":41},"x",[31,8689,469],{"class":45},[31,8691,69],{"class":80},[31,8693,2595],{"class":45},[31,8695,8510],{"class":41},[31,8697,469],{"class":45},[31,8699,8700],{"class":80},"px);",[31,8702,5511],{"class":45},[31,8704,2653],{"class":58},[31,8706,8707],{"class":33,"line":5751},[31,8708,249],{"emptyLinePlaceholder":248},[31,8710,8711],{"class":33,"line":5766},[31,8712,8713],{"class":184},"    \u002F\u002F アニメーション用のスタイルを追加\n",[31,8715,8716,8719,8721,8723,8725],{"class":33,"line":5777},[31,8717,8718],{"class":259},"    setTimeout",[31,8720,993],{"class":58},[31,8722,7672],{"class":45},[31,8724,7659],{"class":37},[31,8726,275],{"class":45},[31,8728,8729,8732,8734,8737,8739,8742,8744,8746,8748,8750],{"class":33,"line":5816},[31,8730,8731],{"class":41},"        dom",[31,8733,237],{"class":45},[31,8735,8736],{"class":41},"classList",[31,8738,237],{"class":45},[31,8740,8741],{"class":259},"add",[31,8743,993],{"class":58},[31,8745,2005],{"class":45},[31,8747,6590],{"class":80},[31,8749,2005],{"class":45},[31,8751,2653],{"class":58},[31,8753,8754,8757,8760,8762],{"class":33,"line":5831},[31,8755,8756],{"class":45},"    },",[31,8758,8759],{"class":65},"500",[31,8761,1018],{"class":58},[31,8763,243],{"class":45},[31,8765,8766],{"class":33,"line":5842},[31,8767,334],{"class":45},[13,8769,8770],{},"大まかな流れとしては以下の通りです。",[8772,8773,8774,8777,8780,8783,8786],"ol",{},[1820,8775,8776],{},"列数、カード座標情報などの初期値と格納する配列の定義。",[1820,8778,8779],{},"ボタンに対するイベントリスナーの定義、ボタンを押したら以下を発火。",[1820,8781,8782],{},"新しいカードを作成する",[1820,8784,8785],{},"カードをコンテナに追加",[1820,8787,8788],{},"追加数、列数に応じて追加したカードの位置を決定",[13,8790,8791],{},"それでは細かく解説していきます。",[8793,8794,8795],"h4",{"id":8795},"定数などの準備",[22,8797,8799],{"className":24,"code":8798,"language":26,"meta":27,"style":27},"\u002F\u002F カード情報を格納\nlet elements = [];\n\n\u002F\u002F カードの初期値\nlet elementInit = {\n    id:undefined,\n    color:undefined,\n    selfHeight:0,\n    y:0,\n    x:0\n};\n\n\u002F\u002F 列数\nlet row = 3;\n\n\u002F\u002F 挿入先コンテナ\nconst cardsContainer = document.getElementById('card-container');\n\n\u002F\u002F 追加ボタン\nconst cardsAddBtn = document.getElementById('card-add');\n\n\u002F\u002F　カード高さの最大値と最小値\nconst heightMax = 400;\nconst heightMin = 100;\n\n\u002F\u002F 色のパターンとカード間の隙間（px）\nconst colors = ['red','yellow','green','orange','blue','purple'];\nconst cardGap = 10;\n",[17,8800,8801,8805,8817,8821,8825,8835,8841,8847,8857,8867,8876,8880,8884,8888,8900,8904,8908,8934,8938,8942,8968,8972,8976,8988,9000,9004,9008,9068],{"__ignoreMap":27},[31,8802,8803],{"class":33,"line":34},[31,8804,7327],{"class":184},[31,8806,8807,8809,8811,8813,8815],{"class":33,"line":52},[31,8808,1932],{"class":37},[31,8810,7334],{"class":41},[31,8812,46],{"class":45},[31,8814,7339],{"class":41},[31,8816,243],{"class":45},[31,8818,8819],{"class":33,"line":103},[31,8820,249],{"emptyLinePlaceholder":248},[31,8822,8823],{"class":33,"line":142},[31,8824,7350],{"class":184},[31,8826,8827,8829,8831,8833],{"class":33,"line":181},[31,8828,1932],{"class":37},[31,8830,7357],{"class":41},[31,8832,46],{"class":45},[31,8834,1602],{"class":45},[31,8836,8837,8839],{"class":33,"line":188},[31,8838,7366],{"class":58},[31,8840,7369],{"class":45},[31,8842,8843,8845],{"class":33,"line":283},[31,8844,7374],{"class":58},[31,8846,7369],{"class":45},[31,8848,8849,8851,8853,8855],{"class":33,"line":289},[31,8850,7381],{"class":58},[31,8852,62],{"class":45},[31,8854,578],{"class":65},[31,8856,1647],{"class":45},[31,8858,8859,8861,8863,8865],{"class":33,"line":295},[31,8860,7392],{"class":58},[31,8862,62],{"class":45},[31,8864,578],{"class":65},[31,8866,1647],{"class":45},[31,8868,8869,8872,8874],{"class":33,"line":301},[31,8870,8871],{"class":58},"    x",[31,8873,62],{"class":45},[31,8875,7397],{"class":65},[31,8877,8878],{"class":33,"line":307},[31,8879,5591],{"class":45},[31,8881,8882],{"class":33,"line":313},[31,8883,249],{"emptyLinePlaceholder":248},[31,8885,8886],{"class":33,"line":319},[31,8887,7410],{"class":184},[31,8889,8890,8892,8894,8896,8898],{"class":33,"line":325},[31,8891,1932],{"class":37},[31,8893,7417],{"class":41},[31,8895,46],{"class":45},[31,8897,7422],{"class":65},[31,8899,243],{"class":45},[31,8901,8902],{"class":33,"line":331},[31,8903,249],{"emptyLinePlaceholder":248},[31,8905,8906],{"class":33,"line":337},[31,8907,7433],{"class":184},[31,8909,8910,8912,8914,8916,8918,8920,8922,8924,8926,8928,8930,8932],{"class":33,"line":1752},[31,8911,38],{"class":37},[31,8913,7440],{"class":41},[31,8915,46],{"class":45},[31,8917,7445],{"class":41},[31,8919,237],{"class":45},[31,8921,7450],{"class":259},[31,8923,993],{"class":41},[31,8925,2005],{"class":45},[31,8927,5985],{"class":80},[31,8929,2005],{"class":45},[31,8931,1018],{"class":41},[31,8933,243],{"class":45},[31,8935,8936],{"class":33,"line":1758},[31,8937,249],{"emptyLinePlaceholder":248},[31,8939,8940],{"class":33,"line":1764},[31,8941,7471],{"class":184},[31,8943,8944,8946,8948,8950,8952,8954,8956,8958,8960,8962,8964,8966],{"class":33,"line":2088},[31,8945,38],{"class":37},[31,8947,7478],{"class":41},[31,8949,46],{"class":45},[31,8951,7445],{"class":41},[31,8953,237],{"class":45},[31,8955,7450],{"class":259},[31,8957,993],{"class":41},[31,8959,2005],{"class":45},[31,8961,6205],{"class":80},[31,8963,2005],{"class":45},[31,8965,1018],{"class":41},[31,8967,243],{"class":45},[31,8969,8970],{"class":33,"line":2098},[31,8971,249],{"emptyLinePlaceholder":248},[31,8973,8974],{"class":33,"line":2109},[31,8975,7507],{"class":184},[31,8977,8978,8980,8982,8984,8986],{"class":33,"line":2114},[31,8979,38],{"class":37},[31,8981,7514],{"class":41},[31,8983,46],{"class":45},[31,8985,7519],{"class":65},[31,8987,243],{"class":45},[31,8989,8990,8992,8994,8996,8998],{"class":33,"line":2119},[31,8991,38],{"class":37},[31,8993,7528],{"class":41},[31,8995,46],{"class":45},[31,8997,7533],{"class":65},[31,8999,243],{"class":45},[31,9001,9002],{"class":33,"line":2131},[31,9003,249],{"emptyLinePlaceholder":248},[31,9005,9006],{"class":33,"line":2136},[31,9007,7544],{"class":184},[31,9009,9010,9012,9014,9016,9018,9020,9022,9024,9026,9028,9030,9032,9034,9036,9038,9040,9042,9044,9046,9048,9050,9052,9054,9056,9058,9060,9062,9064,9066],{"class":33,"line":2141},[31,9011,38],{"class":37},[31,9013,7551],{"class":41},[31,9015,46],{"class":45},[31,9017,512],{"class":41},[31,9019,2005],{"class":45},[31,9021,7560],{"class":80},[31,9023,2005],{"class":45},[31,9025,69],{"class":45},[31,9027,2005],{"class":45},[31,9029,7569],{"class":80},[31,9031,2005],{"class":45},[31,9033,69],{"class":45},[31,9035,2005],{"class":45},[31,9037,7578],{"class":80},[31,9039,2005],{"class":45},[31,9041,69],{"class":45},[31,9043,2005],{"class":45},[31,9045,7587],{"class":80},[31,9047,2005],{"class":45},[31,9049,69],{"class":45},[31,9051,2005],{"class":45},[31,9053,7596],{"class":80},[31,9055,2005],{"class":45},[31,9057,69],{"class":45},[31,9059,2005],{"class":45},[31,9061,7605],{"class":80},[31,9063,2005],{"class":45},[31,9065,472],{"class":41},[31,9067,243],{"class":45},[31,9069,9070,9072,9074,9076,9078],{"class":33,"line":2147},[31,9071,38],{"class":37},[31,9073,7618],{"class":41},[31,9075,46],{"class":45},[31,9077,7623],{"class":65},[31,9079,243],{"class":45},[13,9081,9082,9083,9085],{},"ここでは追加する際に必要な定数やDOMを定義しておきます。\n",[17,9084,8534],{},"には作成したカードコンテンツを記録しておきます。列＋１番目以降（今回は４番目以降）の高さを調整するときなどに使用します。",[8793,9087,9088],{"id":9088},"カードの作成関数を設定",[22,9090,9092],{"className":24,"code":9091,"language":26,"meta":27,"style":27},"\u002F\u002F カードのDOMを新規作成\nlet createCard = ()=>{\n    let info = {...elementInit};\n\n    \u002F\u002F カードの要素をdivで作成\n    let contain = document.createElement(\"DIV\");\n    contain.setAttribute('class','c-card-container');\n\n    \u002F\u002F IDをランダムに作成、記録\n    let idname = Math.random().toString(32).substring(2);\n    contain.setAttribute('id',idname);\n    info.id = idname;\n\n    \u002F\u002F カードに表示される画像（一色塗り潰し）を設定、記録\n    \u002F\u002F colorsの値と画像名が同じ。\n    let card = document.createElement(\"IMG\");\n    let color = colors[Math.floor(Math.random() * colors.length)];\n    info.color = color;\n\n    \u002F\u002F IMG要素にカラーの画像とクラス名を付与\n    card.setAttribute('src','.\u002F'+color+'.png');\n    card.setAttribute('class','c-card-img');\n\n    \u002F\u002F カードに対して不明な高さを与える\n    info.selfHeight = Math.floor(Math.random()*(heightMax+1-heightMin))+heightMin;\n    \n    \u002F\u002F カードDIVにIMGを追加\n    contain.appendChild(card);\n\n    \u002F\u002F elementsに記録。DOMとIDを返す\n    elements.push(info);\n    return {dom:contain,id:idname};\n}\n",[17,9093,9094,9098,9112,9126,9130,9134,9160,9188,9192,9196,9234,9258,9272,9276,9280,9284,9310,9350,9364,9368,9372,9412,9440,9444,9448,9496,9500,9504,9520,9524,9528,9544,9566],{"__ignoreMap":27},[31,9095,9096],{"class":33,"line":34},[31,9097,7771],{"class":184},[31,9099,9100,9102,9104,9106,9108,9110],{"class":33,"line":52},[31,9101,1932],{"class":37},[31,9103,7778],{"class":41},[31,9105,46],{"class":45},[31,9107,7701],{"class":45},[31,9109,7659],{"class":37},[31,9111,275],{"class":45},[31,9113,9114,9116,9118,9120,9122,9124],{"class":33,"line":103},[31,9115,7710],{"class":37},[31,9117,7793],{"class":41},[31,9119,2041],{"class":45},[31,9121,1010],{"class":45},[31,9123,7800],{"class":41},[31,9125,5591],{"class":45},[31,9127,9128],{"class":33,"line":142},[31,9129,249],{"emptyLinePlaceholder":248},[31,9131,9132],{"class":33,"line":181},[31,9133,7811],{"class":184},[31,9135,9136,9138,9140,9142,9144,9146,9148,9150,9152,9154,9156,9158],{"class":33,"line":188},[31,9137,7710],{"class":37},[31,9139,7818],{"class":41},[31,9141,2041],{"class":45},[31,9143,7445],{"class":41},[31,9145,237],{"class":45},[31,9147,7827],{"class":259},[31,9149,993],{"class":58},[31,9151,77],{"class":45},[31,9153,7834],{"class":80},[31,9155,77],{"class":45},[31,9157,1018],{"class":58},[31,9159,243],{"class":45},[31,9161,9162,9164,9166,9168,9170,9172,9174,9176,9178,9180,9182,9184,9186],{"class":33,"line":283},[31,9163,7845],{"class":41},[31,9165,237],{"class":45},[31,9167,7850],{"class":259},[31,9169,993],{"class":58},[31,9171,2005],{"class":45},[31,9173,7857],{"class":80},[31,9175,2005],{"class":45},[31,9177,69],{"class":45},[31,9179,2005],{"class":45},[31,9181,6126],{"class":80},[31,9183,2005],{"class":45},[31,9185,1018],{"class":58},[31,9187,243],{"class":45},[31,9189,9190],{"class":33,"line":289},[31,9191,249],{"emptyLinePlaceholder":248},[31,9193,9194],{"class":33,"line":295},[31,9195,7880],{"class":184},[31,9197,9198,9200,9202,9204,9206,9208,9210,9212,9214,9216,9218,9220,9222,9224,9226,9228,9230,9232],{"class":33,"line":301},[31,9199,7710],{"class":37},[31,9201,7887],{"class":41},[31,9203,2041],{"class":45},[31,9205,7892],{"class":41},[31,9207,237],{"class":45},[31,9209,7897],{"class":259},[31,9211,7672],{"class":58},[31,9213,237],{"class":45},[31,9215,7904],{"class":259},[31,9217,993],{"class":58},[31,9219,7909],{"class":65},[31,9221,1018],{"class":58},[31,9223,237],{"class":45},[31,9225,7916],{"class":259},[31,9227,993],{"class":58},[31,9229,112],{"class":65},[31,9231,1018],{"class":58},[31,9233,243],{"class":45},[31,9235,9236,9238,9240,9242,9244,9246,9248,9250,9252,9254,9256],{"class":33,"line":307},[31,9237,7845],{"class":41},[31,9239,237],{"class":45},[31,9241,7850],{"class":259},[31,9243,993],{"class":58},[31,9245,2005],{"class":45},[31,9247,59],{"class":80},[31,9249,2005],{"class":45},[31,9251,69],{"class":45},[31,9253,7945],{"class":41},[31,9255,1018],{"class":58},[31,9257,243],{"class":45},[31,9259,9260,9262,9264,9266,9268,9270],{"class":33,"line":313},[31,9261,7954],{"class":41},[31,9263,237],{"class":45},[31,9265,59],{"class":41},[31,9267,2041],{"class":45},[31,9269,7887],{"class":41},[31,9271,243],{"class":45},[31,9273,9274],{"class":33,"line":319},[31,9275,249],{"emptyLinePlaceholder":248},[31,9277,9278],{"class":33,"line":325},[31,9279,7973],{"class":184},[31,9281,9282],{"class":33,"line":331},[31,9283,7978],{"class":184},[31,9285,9286,9288,9290,9292,9294,9296,9298,9300,9302,9304,9306,9308],{"class":33,"line":337},[31,9287,7710],{"class":37},[31,9289,7713],{"class":41},[31,9291,2041],{"class":45},[31,9293,7445],{"class":41},[31,9295,237],{"class":45},[31,9297,7827],{"class":259},[31,9299,993],{"class":58},[31,9301,77],{"class":45},[31,9303,7999],{"class":80},[31,9305,77],{"class":45},[31,9307,1018],{"class":58},[31,9309,243],{"class":45},[31,9311,9312,9314,9316,9318,9320,9322,9324,9326,9328,9330,9332,9334,9336,9338,9340,9342,9344,9346,9348],{"class":33,"line":1752},[31,9313,7710],{"class":37},[31,9315,8012],{"class":41},[31,9317,2041],{"class":45},[31,9319,8017],{"class":41},[31,9321,422],{"class":58},[31,9323,8022],{"class":41},[31,9325,237],{"class":45},[31,9327,8027],{"class":259},[31,9329,993],{"class":58},[31,9331,8022],{"class":41},[31,9333,237],{"class":45},[31,9335,7897],{"class":259},[31,9337,8038],{"class":58},[31,9339,6151],{"class":45},[31,9341,8017],{"class":41},[31,9343,237],{"class":45},[31,9345,8047],{"class":41},[31,9347,3257],{"class":58},[31,9349,243],{"class":45},[31,9351,9352,9354,9356,9358,9360,9362],{"class":33,"line":1758},[31,9353,7954],{"class":41},[31,9355,237],{"class":45},[31,9357,8060],{"class":41},[31,9359,2041],{"class":45},[31,9361,8012],{"class":41},[31,9363,243],{"class":45},[31,9365,9366],{"class":33,"line":1764},[31,9367,249],{"emptyLinePlaceholder":248},[31,9369,9370],{"class":33,"line":2088},[31,9371,8075],{"class":184},[31,9373,9374,9376,9378,9380,9382,9384,9386,9388,9390,9392,9394,9396,9398,9400,9402,9404,9406,9408,9410],{"class":33,"line":2098},[31,9375,8080],{"class":41},[31,9377,237],{"class":45},[31,9379,7850],{"class":259},[31,9381,993],{"class":58},[31,9383,2005],{"class":45},[31,9385,1847],{"class":80},[31,9387,2005],{"class":45},[31,9389,69],{"class":45},[31,9391,2005],{"class":45},[31,9393,8099],{"class":80},[31,9395,2005],{"class":45},[31,9397,8104],{"class":45},[31,9399,8060],{"class":41},[31,9401,8104],{"class":45},[31,9403,2005],{"class":45},[31,9405,8113],{"class":80},[31,9407,2005],{"class":45},[31,9409,1018],{"class":58},[31,9411,243],{"class":45},[31,9413,9414,9416,9418,9420,9422,9424,9426,9428,9430,9432,9434,9436,9438],{"class":33,"line":2109},[31,9415,8080],{"class":41},[31,9417,237],{"class":45},[31,9419,7850],{"class":259},[31,9421,993],{"class":58},[31,9423,2005],{"class":45},[31,9425,7857],{"class":80},[31,9427,2005],{"class":45},[31,9429,69],{"class":45},[31,9431,2005],{"class":45},[31,9433,6037],{"class":80},[31,9435,2005],{"class":45},[31,9437,1018],{"class":58},[31,9439,243],{"class":45},[31,9441,9442],{"class":33,"line":2114},[31,9443,249],{"emptyLinePlaceholder":248},[31,9445,9446],{"class":33,"line":2119},[31,9447,8156],{"class":184},[31,9449,9450,9452,9454,9456,9458,9460,9462,9464,9466,9468,9470,9472,9474,9476,9478,9480,9482,9484,9486,9488,9490,9492,9494],{"class":33,"line":2131},[31,9451,7954],{"class":41},[31,9453,237],{"class":45},[31,9455,8165],{"class":41},[31,9457,2041],{"class":45},[31,9459,7892],{"class":41},[31,9461,237],{"class":45},[31,9463,8027],{"class":259},[31,9465,993],{"class":58},[31,9467,8022],{"class":41},[31,9469,237],{"class":45},[31,9471,7897],{"class":259},[31,9473,7672],{"class":58},[31,9475,6151],{"class":45},[31,9477,993],{"class":58},[31,9479,8190],{"class":41},[31,9481,8104],{"class":45},[31,9483,66],{"class":65},[31,9485,2509],{"class":45},[31,9487,8199],{"class":41},[31,9489,8202],{"class":58},[31,9491,8104],{"class":45},[31,9493,8199],{"class":41},[31,9495,243],{"class":45},[31,9497,9498],{"class":33,"line":2136},[31,9499,2085],{"class":58},[31,9501,9502],{"class":33,"line":2141},[31,9503,8217],{"class":184},[31,9505,9506,9508,9510,9512,9514,9516,9518],{"class":33,"line":2147},[31,9507,7845],{"class":41},[31,9509,237],{"class":45},[31,9511,8226],{"class":259},[31,9513,993],{"class":58},[31,9515,7732],{"class":41},[31,9517,1018],{"class":58},[31,9519,243],{"class":45},[31,9521,9522],{"class":33,"line":2152},[31,9523,249],{"emptyLinePlaceholder":248},[31,9525,9526],{"class":33,"line":4},[31,9527,8243],{"class":184},[31,9529,9530,9532,9534,9536,9538,9540,9542],{"class":33,"line":2523},[31,9531,8248],{"class":41},[31,9533,237],{"class":45},[31,9535,2541],{"class":259},[31,9537,993],{"class":58},[31,9539,8257],{"class":41},[31,9541,1018],{"class":58},[31,9543,243],{"class":45},[31,9545,9546,9548,9550,9552,9554,9556,9558,9560,9562,9564],{"class":33,"line":2528},[31,9547,7666],{"class":1006},[31,9549,1003],{"class":45},[31,9551,7737],{"class":58},[31,9553,62],{"class":45},[31,9555,8274],{"class":41},[31,9557,69],{"class":45},[31,9559,59],{"class":58},[31,9561,62],{"class":45},[31,9563,7945],{"class":41},[31,9565,5591],{"class":45},[31,9567,9568],{"class":33,"line":2547},[31,9569,334],{"class":45},[13,9571,9572,9573,9576,9577,9579,9580,9582],{},"カードの作成関数",[17,9574,9575],{},"createCard()","を作ります。ここはカードの要素を作成して、ランダムなIDを付与します。変数",[17,9578,8257],{},"にはカードの高さ、IDを記録して",[17,9581,8534],{},"に入れておきます。",[8793,9584,9585],{"id":9585},"要素の挿入関数を作成",[22,9587,9589],{"className":24,"code":9588,"language":26,"meta":27,"style":27},"\u002F\u002F カードコンテナーにカードを追加する\nlet insertCard = (cardDom)=>{\n    cardsContainer.appendChild(cardDom);\n}\n",[17,9590,9591,9595,9613,9629],{"__ignoreMap":27},[31,9592,9593],{"class":33,"line":34},[31,9594,8297],{"class":184},[31,9596,9597,9599,9601,9603,9605,9607,9609,9611],{"class":33,"line":52},[31,9598,1932],{"class":37},[31,9600,8304],{"class":41},[31,9602,46],{"class":45},[31,9604,8309],{"class":45},[31,9606,8312],{"class":996},[31,9608,1018],{"class":45},[31,9610,7659],{"class":37},[31,9612,275],{"class":45},[31,9614,9615,9617,9619,9621,9623,9625,9627],{"class":33,"line":103},[31,9616,8323],{"class":41},[31,9618,237],{"class":45},[31,9620,8226],{"class":259},[31,9622,993],{"class":58},[31,9624,8312],{"class":41},[31,9626,1018],{"class":58},[31,9628,243],{"class":45},[31,9630,9631],{"class":33,"line":142},[31,9632,334],{"class":45},[13,9634,9635],{},"ここは作成したカードのDOMをカードコンテナに挿入します。",[8793,9637,9638],{"id":9638},"挿入されたカードの高さと位置を決定",[22,9640,9642],{"className":24,"code":9641,"language":26,"meta":27,"style":27},"\u002F\u002F これが大切\n\u002F\u002F IDで紐づいたDOMに対して高さと位置を決定させる。\nlet scanAdd = (id) =>{\n    \u002F\u002F elementsから対象カードのIDの番号、情報を取得\n    let index = elements.findIndex(ele=>{return ele.id===id});\n    let ele = elements[index]\n\n    \u002F\u002F DOMを取得\n    let dom = document.getElementById(ele.id);\n\n    \u002F\u002F index、つまりカードが何晩目かと列数でx,yの位置を決定する。\n    let height = ele.selfHeight\n    ele.y = (index \u003C row)?height:elements[index - row].y + height;\n    let x = (index%(row)*100) + '%';\n    let y = (index \u003C row)?0:elements[index - row].y;\n    \n    \u002F\u002F 位置をずらすスタイルを適用\n    dom.setAttribute('style',`height:${height}px; transform:translate(${x},${y}px);`)\n\n    \u002F\u002F アニメーション用のスタイルを追加\n    setTimeout(()=>{\n        dom.classList.add('u-animate')\n    },500);\n}\n",[17,9643,9644,9648,9652,9670,9674,9714,9730,9734,9738,9764,9768,9772,9786,9834,9870,9912,9916,9920,9970,9974,9978,9990,10012,10022],{"__ignoreMap":27},[31,9645,9646],{"class":33,"line":34},[31,9647,8348],{"class":184},[31,9649,9650],{"class":33,"line":52},[31,9651,8353],{"class":184},[31,9653,9654,9656,9658,9660,9662,9664,9666,9668],{"class":33,"line":103},[31,9655,1932],{"class":37},[31,9657,8360],{"class":41},[31,9659,46],{"class":45},[31,9661,8309],{"class":45},[31,9663,59],{"class":996},[31,9665,1018],{"class":45},[31,9667,1000],{"class":37},[31,9669,275],{"class":45},[31,9671,9672],{"class":33,"line":142},[31,9673,8377],{"class":184},[31,9675,9676,9678,9680,9682,9684,9686,9688,9690,9692,9694,9696,9698,9700,9702,9704,9706,9708,9710,9712],{"class":33,"line":181},[31,9677,7710],{"class":37},[31,9679,8384],{"class":41},[31,9681,2041],{"class":45},[31,9683,8389],{"class":41},[31,9685,237],{"class":45},[31,9687,8394],{"class":259},[31,9689,993],{"class":58},[31,9691,8399],{"class":996},[31,9693,7659],{"class":37},[31,9695,425],{"class":45},[31,9697,1007],{"class":1006},[31,9699,8408],{"class":41},[31,9701,237],{"class":45},[31,9703,59],{"class":41},[31,9705,532],{"class":45},[31,9707,59],{"class":41},[31,9709,469],{"class":45},[31,9711,1018],{"class":58},[31,9713,243],{"class":45},[31,9715,9716,9718,9720,9722,9724,9726,9728],{"class":33,"line":188},[31,9717,7710],{"class":37},[31,9719,8408],{"class":41},[31,9721,2041],{"class":45},[31,9723,8389],{"class":41},[31,9725,422],{"class":58},[31,9727,8437],{"class":41},[31,9729,191],{"class":58},[31,9731,9732],{"class":33,"line":283},[31,9733,249],{"emptyLinePlaceholder":248},[31,9735,9736],{"class":33,"line":289},[31,9737,8448],{"class":184},[31,9739,9740,9742,9744,9746,9748,9750,9752,9754,9756,9758,9760,9762],{"class":33,"line":295},[31,9741,7710],{"class":37},[31,9743,8455],{"class":41},[31,9745,2041],{"class":45},[31,9747,7445],{"class":41},[31,9749,237],{"class":45},[31,9751,7450],{"class":259},[31,9753,993],{"class":58},[31,9755,8399],{"class":41},[31,9757,237],{"class":45},[31,9759,59],{"class":41},[31,9761,1018],{"class":58},[31,9763,243],{"class":45},[31,9765,9766],{"class":33,"line":301},[31,9767,249],{"emptyLinePlaceholder":248},[31,9769,9770],{"class":33,"line":307},[31,9771,8484],{"class":184},[31,9773,9774,9776,9778,9780,9782,9784],{"class":33,"line":313},[31,9775,7710],{"class":37},[31,9777,8491],{"class":41},[31,9779,2041],{"class":45},[31,9781,8408],{"class":41},[31,9783,237],{"class":45},[31,9785,8500],{"class":41},[31,9787,9788,9790,9792,9794,9796,9798,9800,9802,9804,9806,9808,9810,9812,9814,9816,9818,9820,9822,9824,9826,9828,9830,9832],{"class":33,"line":319},[31,9789,8505],{"class":41},[31,9791,237],{"class":45},[31,9793,8510],{"class":41},[31,9795,2041],{"class":45},[31,9797,8309],{"class":58},[31,9799,8437],{"class":41},[31,9801,8519],{"class":45},[31,9803,8522],{"class":41},[31,9805,1018],{"class":58},[31,9807,5107],{"class":45},[31,9809,8529],{"class":41},[31,9811,62],{"class":45},[31,9813,8534],{"class":41},[31,9815,422],{"class":58},[31,9817,8437],{"class":41},[31,9819,8541],{"class":45},[31,9821,8522],{"class":41},[31,9823,472],{"class":58},[31,9825,237],{"class":45},[31,9827,8510],{"class":41},[31,9829,8552],{"class":45},[31,9831,8491],{"class":41},[31,9833,243],{"class":45},[31,9835,9836,9838,9840,9842,9844,9846,9848,9850,9852,9854,9856,9858,9860,9862,9864,9866,9868],{"class":33,"line":325},[31,9837,7710],{"class":37},[31,9839,8563],{"class":41},[31,9841,2041],{"class":45},[31,9843,8309],{"class":58},[31,9845,8437],{"class":41},[31,9847,8572],{"class":45},[31,9849,993],{"class":58},[31,9851,8577],{"class":41},[31,9853,1018],{"class":58},[31,9855,6151],{"class":45},[31,9857,8584],{"class":65},[31,9859,8587],{"class":58},[31,9861,8104],{"class":45},[31,9863,2000],{"class":45},[31,9865,8572],{"class":80},[31,9867,2005],{"class":45},[31,9869,243],{"class":45},[31,9871,9872,9874,9876,9878,9880,9882,9884,9886,9888,9890,9892,9894,9896,9898,9900,9902,9904,9906,9908,9910],{"class":33,"line":331},[31,9873,7710],{"class":37},[31,9875,8604],{"class":41},[31,9877,2041],{"class":45},[31,9879,8309],{"class":58},[31,9881,8437],{"class":41},[31,9883,8519],{"class":45},[31,9885,8522],{"class":41},[31,9887,1018],{"class":58},[31,9889,5107],{"class":45},[31,9891,578],{"class":65},[31,9893,62],{"class":45},[31,9895,8534],{"class":41},[31,9897,422],{"class":58},[31,9899,8437],{"class":41},[31,9901,8541],{"class":45},[31,9903,8522],{"class":41},[31,9905,472],{"class":58},[31,9907,237],{"class":45},[31,9909,8510],{"class":41},[31,9911,243],{"class":45},[31,9913,9914],{"class":33,"line":337},[31,9915,2085],{"class":58},[31,9917,9918],{"class":33,"line":1752},[31,9919,8649],{"class":184},[31,9921,9922,9924,9926,9928,9930,9932,9934,9936,9938,9940,9942,9944,9946,9948,9950,9952,9954,9956,9958,9960,9962,9964,9966,9968],{"class":33,"line":1758},[31,9923,8654],{"class":41},[31,9925,237],{"class":45},[31,9927,7850],{"class":259},[31,9929,993],{"class":58},[31,9931,2005],{"class":45},[31,9933,1771],{"class":80},[31,9935,2005],{"class":45},[31,9937,69],{"class":45},[31,9939,5511],{"class":45},[31,9941,8673],{"class":80},[31,9943,2595],{"class":45},[31,9945,8529],{"class":41},[31,9947,469],{"class":45},[31,9949,8682],{"class":80},[31,9951,2595],{"class":45},[31,9953,8687],{"class":41},[31,9955,469],{"class":45},[31,9957,69],{"class":80},[31,9959,2595],{"class":45},[31,9961,8510],{"class":41},[31,9963,469],{"class":45},[31,9965,8700],{"class":80},[31,9967,5511],{"class":45},[31,9969,2653],{"class":58},[31,9971,9972],{"class":33,"line":1764},[31,9973,249],{"emptyLinePlaceholder":248},[31,9975,9976],{"class":33,"line":2088},[31,9977,8713],{"class":184},[31,9979,9980,9982,9984,9986,9988],{"class":33,"line":2098},[31,9981,8718],{"class":259},[31,9983,993],{"class":58},[31,9985,7672],{"class":45},[31,9987,7659],{"class":37},[31,9989,275],{"class":45},[31,9991,9992,9994,9996,9998,10000,10002,10004,10006,10008,10010],{"class":33,"line":2109},[31,9993,8731],{"class":41},[31,9995,237],{"class":45},[31,9997,8736],{"class":41},[31,9999,237],{"class":45},[31,10001,8741],{"class":259},[31,10003,993],{"class":58},[31,10005,2005],{"class":45},[31,10007,6590],{"class":80},[31,10009,2005],{"class":45},[31,10011,2653],{"class":58},[31,10013,10014,10016,10018,10020],{"class":33,"line":2114},[31,10015,8756],{"class":45},[31,10017,8759],{"class":65},[31,10019,1018],{"class":58},[31,10021,243],{"class":45},[31,10023,10024],{"class":33,"line":2119},[31,10025,334],{"class":45},[13,10027,10028,10031,10032,10034,10035,10038],{},[17,10029,10030],{},"scanAdd()","では対象のID（DOMのID）に基づいて",[17,10033,8534],{},"から高さを設定する対象のカードと、そのカードの１行上のカードの情報を取得します。例えば５番目のカードの場合、２番目のカードの高さを用いてY座標を決定します。この関数ではその情報を元にしてカードに高さを与え、また表示する位置のx,y座標を決定して",[17,10036,10037],{},"translate","の値を決定します。",[8793,10040,10041],{"id":10041},"関数の連結とイベントリスナー",[22,10043,10045],{"className":24,"code":10044,"language":26,"meta":27,"style":27},"\u002F\u002F 追加ボタンにイベントリスナーを付与\ncardsAddBtn.addEventListener('click',()=>{\n    return onClickAdd();\n})\n\n\u002F\u002F イベントリスナーの内容\nlet onClickAdd = ()=>{\n    let card = createCard();\n    insertCard(card.dom);\n    scanAdd(card.id);\n}\n",[17,10046,10047,10051,10073,10083,10089,10093,10097,10111,10125,10141,10157],{"__ignoreMap":27},[31,10048,10049],{"class":33,"line":34},[31,10050,7634],{"class":184},[31,10052,10053,10055,10057,10059,10061,10063,10065,10067,10069,10071],{"class":33,"line":52},[31,10054,7639],{"class":41},[31,10056,237],{"class":45},[31,10058,7644],{"class":259},[31,10060,993],{"class":41},[31,10062,2005],{"class":45},[31,10064,7651],{"class":80},[31,10066,2005],{"class":45},[31,10068,7656],{"class":45},[31,10070,7659],{"class":37},[31,10072,275],{"class":45},[31,10074,10075,10077,10079,10081],{"class":33,"line":103},[31,10076,7666],{"class":1006},[31,10078,7669],{"class":259},[31,10080,7672],{"class":58},[31,10082,243],{"class":45},[31,10084,10085,10087],{"class":33,"line":142},[31,10086,469],{"class":45},[31,10088,2653],{"class":41},[31,10090,10091],{"class":33,"line":181},[31,10092,249],{"emptyLinePlaceholder":248},[31,10094,10095],{"class":33,"line":188},[31,10096,7689],{"class":184},[31,10098,10099,10101,10103,10105,10107,10109],{"class":33,"line":283},[31,10100,1932],{"class":37},[31,10102,7696],{"class":41},[31,10104,46],{"class":45},[31,10106,7701],{"class":45},[31,10108,7659],{"class":37},[31,10110,275],{"class":45},[31,10112,10113,10115,10117,10119,10121,10123],{"class":33,"line":289},[31,10114,7710],{"class":37},[31,10116,7713],{"class":41},[31,10118,2041],{"class":45},[31,10120,7718],{"class":259},[31,10122,7672],{"class":58},[31,10124,243],{"class":45},[31,10126,10127,10129,10131,10133,10135,10137,10139],{"class":33,"line":295},[31,10128,7727],{"class":259},[31,10130,993],{"class":58},[31,10132,7732],{"class":41},[31,10134,237],{"class":45},[31,10136,7737],{"class":41},[31,10138,1018],{"class":58},[31,10140,243],{"class":45},[31,10142,10143,10145,10147,10149,10151,10153,10155],{"class":33,"line":301},[31,10144,7746],{"class":259},[31,10146,993],{"class":58},[31,10148,7732],{"class":41},[31,10150,237],{"class":45},[31,10152,59],{"class":41},[31,10154,1018],{"class":58},[31,10156,243],{"class":45},[31,10158,10159],{"class":33,"line":307},[31,10160,334],{"class":45},[13,10162,10163],{},"最後に上記の関数を連結し、イベントリスナーのコールバックに設定します。イベントリスナーはカードの追加ボタンに付与されています。",[365,10165,10166],{"id":10166},"実装後の動き",[13,10168,10169,10170,10173],{},"完成したデモは",[196,10171,5945],{"href":5943,"rel":10172},[901],"にあります。「ADD!」というボタンをクリックするとアニメーションつきでカードが追加されていきます。",[1771,10175,10176],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}",{"title":27,"searchDepth":103,"depth":103,"links":10178},[10179,10180,10184],{"id":5949,"depth":52,"text":5949},{"id":6636,"depth":52,"text":6637,"children":10181},[10182,10183],{"id":6640,"depth":103,"text":6641},{"id":6679,"depth":103,"text":6680},{"id":6696,"depth":52,"text":6696,"children":10185},[10186,10187,10188,10195],{"id":6699,"depth":103,"text":6699},{"id":7025,"depth":103,"text":7026},{"id":7310,"depth":103,"text":7310,"children":10189},[10190,10191,10192,10193,10194],{"id":8795,"depth":142,"text":8795},{"id":9088,"depth":142,"text":9088},{"id":9585,"depth":142,"text":9585},{"id":9638,"depth":142,"text":9638},{"id":10041,"depth":142,"text":10041},{"id":10166,"depth":103,"text":10166},[5906],"2021-07-14",{},"\u002Farticles\u002Fpinterest-like-style",{"title":5921,"description":5921},"articles\u002Fpinterest-like-style",[1871,6143,1797],"pinterest-like-style\u002Fthumbnail.png","Kk6is-f7e7A8CgIICoPK0ixaA9U5aJL-fp-oIvtU9PM",{"id":10206,"title":10207,"body":10208,"category":11412,"createdAt":11413,"description":11414,"extension":1790,"index":1791,"meta":11415,"navigation":248,"path":11416,"publish":248,"seo":11417,"series":1791,"seriesTitle":1791,"stem":11418,"tag":11419,"thumbnail":11421,"updatedAt":1791,"__hash__":11422},"articles\u002Farticles\u002Fstatic-site-search.md","AWS Cloud Searchを使用して静的コンテンツに検索機能をつける",{"type":10,"value":10209,"toc":11397},[10210,10213,10216,10219,10222,10225,10228,10245,10248,10251,10254,10263,10266,10269,10272,10275,10278,10281,10294,10297,10506,10512,10515,10523,10526,10529,10685,10692,10695,10698,10701,10704,10707,10711,10720,10723,10726,10734,10737,10744,10747,10754,10882,10885,10889,10892,11112,11122,11125,11128,11131,11134,11145,11148,11157,11161,11164,11167,11217,11220,11223,11226,11229,11232,11235,11238,11379,11382,11385,11388,11391,11394],[13,10211,10212],{},"こんにちはjunです。静的書き出しブログを作って数ヶ月後、ようやくこのブログにも「検索機能」を実装しました。静的ファイルの場合は検索といった動的な機能をつける際には工夫が必要です。",[13,10214,10215],{},"wordpressなどでは自身のプログラムとデータベースを用いて検索を行いますが、静的ブログではその２つがないので別途で準備する必要があります。つまり検索プログラムと検索対象のファイルをどこかに置き、さらにサイトからAjaxを用いてアクセスできるようにします。",[13,10217,10218],{},"私のサイトでは検索エンジンに「AWS Cloudsearch」というものを用いて実装しています。今回の記事でも同じようにCloudsearchを用いての解説を行います。",[207,10220,10221],{"id":10221},"全体の概要",[5928,10223],{":src":10224,":width":5931},"'static-site-search\u002Fcloudsearch_build.jpg'",[13,10226,10227],{},"概要は上図のような感じです。検索機能自体はcloudsearchに任せ、cloudsearchを叩くAPI gatewayを通じてブラウザからアクセスします。これらの構成を実現するために以下の手順の実装が必要となります。",[8772,10229,10230,10233,10236,10239,10242],{},[1820,10231,10232],{},"cloudsearchのインスタンス作成",[1820,10234,10235],{},"検索対象のドキュメント（JSON）をcloudsearchにアップロード",[1820,10237,10238],{},"API gateqwayからcloudsearchを叩くように連携",[1820,10240,10241],{},"ウェブサイトから検索クエリを持たせたリクエストでAPIを叩く",[1820,10243,10244],{},"結果をサイトに表示",[13,10246,10247],{},"それぞれの手順通りに説明していきます。",[207,10249,10250],{"id":10250},"cloudsearchのセットアップ",[365,10252,10253],{"id":10253},"cloudsearchのインスタンスを作成",[13,10255,10256,10257,10262],{},"AWSのアカウント作成などは省略します。AWSのメニューから",[196,10258,10261],{"href":10259,"rel":10260},"https:\u002F\u002Fap-northeast-1.console.aws.amazon.com\u002Fcloudsearch",[901],"cloudsearch","に移動します。リージョンを確認して、「Create a new search domain」をクリックして検索インスタンスを作成します。ここでいうドメインはURLのドメインという意味でなく、「Domain」は検索の区分みたいなものです。",[5928,10264],{":src":10265,":width":5931},"'static-site-search\u002Fcloudsearch_start.png'",[13,10267,10268],{},"インスタンスの大きさなどを選択できますが、今回は一番小さいものにしておきます。Desired Instance Typeをsearch.small、Desired Replication Countを１にしました。",[365,10270,10271],{"id":10271},"インデックスフィールドの登録",[13,10273,10274],{},"次に検索対象のインデックスフィールドを登録します。",[5928,10276],{":src":10277,":width":5931},"'static-site-search\u002Fset_document_key_config.png'",[13,10279,10280],{},"ここでいうインデックスフィールドとはタイトル、内容、カテゴリー、作成日時といった各ドキュメントの属性のことをいいます。インデックスフィールドを設定することでタイトルで検索、内容で検索、特定日時からの検索といった複雑な検索ができます。RDBでいうところのカラムみたいなものです。",[13,10282,10283,10284,10287,10288,10293],{},"もしドキュメントがある場合は",[17,10285,10286],{},"Analyze sample file(s) from my local machine","を選択しファイルをアップロードします。使用できるファイルは",[196,10289,10292],{"href":10290,"rel":10291},"https:\u002F\u002Fdocs.aws.amazon.com\u002Fja_jp\u002Fcloudsearch\u002Flatest\u002Fdeveloperguide\u002Fpreparing-data.html",[901],"XML,JSON,CSVがサポートされています。（詳細はこちら）","アップロードされたファイルから共通のインデックスフィールドを自動で設定してくれます。",[13,10295,10296],{},"私の場合は以下のようなcloudsearchの使用に従った構成でサンプルJSONを予め作成しておきました。",[22,10298,10302],{"className":10299,"code":10300,"language":10301,"meta":27,"style":27},"language-JSON shiki shiki-themes material-theme-ocean","[\n    {\n        \"type\":\"add\",\n        \"id\":\"bag-html-break-tag\",\n        \"fields\":{\n            \"description\":\"white-space： pre;で要素内で生じる、文章の隙間、インテンドの原因。\",\n            \"title\":\"white-space： pre;で要素内で生じる文章の隙間、インテンドの原因。\",\n            \"category\":[\"ministack\"],\n            \"tag\":[\"html\",\"css\",\"vue\"],\n            \"path\":\"https:\u002F\u002Fjun-app.com\u002Farticles\u002Fbag-html-break-tag\",\n            \"content\":\"~~~~~~~~~\"\n        }\n    }\n]\n","JSON",[17,10303,10304,10308,10312,10332,10351,10362,10383,10402,10423,10458,10477,10494,10498,10502],{"__ignoreMap":27},[31,10305,10306],{"class":33,"line":34},[31,10307,1630],{"class":45},[31,10309,10310],{"class":33,"line":52},[31,10311,1954],{"class":45},[31,10313,10314,10317,10320,10322,10324,10326,10328,10330],{"class":33,"line":103},[31,10315,10316],{"class":45},"        \"",[31,10318,10319],{"class":37},"type",[31,10321,77],{"class":45},[31,10323,62],{"class":45},[31,10325,77],{"class":45},[31,10327,8741],{"class":80},[31,10329,77],{"class":45},[31,10331,1647],{"class":45},[31,10333,10334,10336,10338,10340,10342,10344,10347,10349],{"class":33,"line":142},[31,10335,10316],{"class":45},[31,10337,59],{"class":37},[31,10339,77],{"class":45},[31,10341,62],{"class":45},[31,10343,77],{"class":45},[31,10345,10346],{"class":80},"bag-html-break-tag",[31,10348,77],{"class":45},[31,10350,1647],{"class":45},[31,10352,10353,10355,10358,10360],{"class":33,"line":181},[31,10354,10316],{"class":45},[31,10356,10357],{"class":37},"fields",[31,10359,77],{"class":45},[31,10361,1660],{"class":45},[31,10363,10364,10367,10370,10372,10374,10376,10379,10381],{"class":33,"line":188},[31,10365,10366],{"class":45},"            \"",[31,10368,10369],{"class":6150},"description",[31,10371,77],{"class":45},[31,10373,62],{"class":45},[31,10375,77],{"class":45},[31,10377,10378],{"class":80},"white-space： pre;で要素内で生じる、文章の隙間、インテンドの原因。",[31,10380,77],{"class":45},[31,10382,1647],{"class":45},[31,10384,10385,10387,10389,10391,10393,10395,10398,10400],{"class":33,"line":283},[31,10386,10366],{"class":45},[31,10388,72],{"class":6150},[31,10390,77],{"class":45},[31,10392,62],{"class":45},[31,10394,77],{"class":45},[31,10396,10397],{"class":80},"white-space： pre;で要素内で生じる文章の隙間、インテンドの原因。",[31,10399,77],{"class":45},[31,10401,1647],{"class":45},[31,10403,10404,10406,10409,10411,10414,10416,10418,10420],{"class":33,"line":289},[31,10405,10366],{"class":45},[31,10407,10408],{"class":6150},"category",[31,10410,77],{"class":45},[31,10412,10413],{"class":45},":[",[31,10415,77],{"class":45},[31,10417,1787],{"class":80},[31,10419,77],{"class":45},[31,10421,10422],{"class":45},"],\n",[31,10424,10425,10427,10430,10432,10434,10436,10438,10440,10442,10444,10446,10448,10450,10452,10454,10456],{"class":33,"line":295},[31,10426,10366],{"class":45},[31,10428,10429],{"class":6150},"tag",[31,10431,77],{"class":45},[31,10433,10413],{"class":45},[31,10435,77],{"class":45},[31,10437,1871],{"class":80},[31,10439,77],{"class":45},[31,10441,69],{"class":45},[31,10443,77],{"class":45},[31,10445,6143],{"class":80},[31,10447,77],{"class":45},[31,10449,69],{"class":45},[31,10451,77],{"class":45},[31,10453,1798],{"class":80},[31,10455,77],{"class":45},[31,10457,10422],{"class":45},[31,10459,10460,10462,10464,10466,10468,10470,10473,10475],{"class":33,"line":301},[31,10461,10366],{"class":45},[31,10463,2225],{"class":6150},[31,10465,77],{"class":45},[31,10467,62],{"class":45},[31,10469,77],{"class":45},[31,10471,10472],{"class":80},"https:\u002F\u002Fjun-app.com\u002Farticles\u002Fbag-html-break-tag",[31,10474,77],{"class":45},[31,10476,1647],{"class":45},[31,10478,10479,10481,10483,10485,10487,10489,10492],{"class":33,"line":307},[31,10480,10366],{"class":45},[31,10482,88],{"class":6150},[31,10484,77],{"class":45},[31,10486,62],{"class":45},[31,10488,77],{"class":45},[31,10490,10491],{"class":80},"~~~~~~~~~",[31,10493,1686],{"class":45},[31,10495,10496],{"class":33,"line":313},[31,10497,2012],{"class":45},[31,10499,10500],{"class":33,"line":319},[31,10501,3775],{"class":45},[31,10503,10504],{"class":33,"line":325},[31,10505,191],{"class":45},[13,10507,10508,10509,10511],{},"この場合、",[17,10510,10357],{},"にある項目が自動に読みとれ、以下のように設定されます。",[5928,10513],{":src":10514,":width":5931},"'static-site-search\u002Fconf_key.png'",[13,10516,10517,10518,10522],{},"インデックスフィールドの設定詳細は",[196,10519,5945],{"href":10520,"rel":10521},"https:\u002F\u002Fdocs.aws.amazon.com\u002Fja_jp\u002Fcloudsearch\u002Flatest\u002Fdeveloperguide\u002Fconfiguring-index-fields.html",[901],"を参考にしてください。",[365,10524,10525],{"id":10525},"アクセスポリシーの追加",[13,10527,10528],{},"次にこのcloudsearchインスタンスに対するアクセスポリシーを設定します。",[22,10530,10534],{"className":10531,"code":10532,"language":10533,"meta":27,"style":27},"language-json shiki shiki-themes material-theme-ocean","{\n  \"Version\": \"2012-10-17\",\n  \"Statement\": [\n    {\n      \"Effect\": \"Allow\",\n      \"Principal\": {\n        \"AWS\": \"*\"\n      },\n      \"Action\": [\n        \"cloudsearch:search\",\n        \"cloudsearch:suggest\"\n      ]\n    }\n  ]\n}\n","json",[17,10535,10536,10540,10561,10574,10578,10599,10612,10629,10634,10647,10658,10667,10672,10676,10681],{"__ignoreMap":27},[31,10537,10538],{"class":33,"line":34},[31,10539,275],{"class":45},[31,10541,10542,10545,10548,10550,10552,10554,10557,10559],{"class":33,"line":52},[31,10543,10544],{"class":45},"  \"",[31,10546,10547],{"class":37},"Version",[31,10549,77],{"class":45},[31,10551,62],{"class":45},[31,10553,649],{"class":45},[31,10555,10556],{"class":80},"2012-10-17",[31,10558,77],{"class":45},[31,10560,1647],{"class":45},[31,10562,10563,10565,10568,10570,10572],{"class":33,"line":103},[31,10564,10544],{"class":45},[31,10566,10567],{"class":37},"Statement",[31,10569,77],{"class":45},[31,10571,62],{"class":45},[31,10573,49],{"class":45},[31,10575,10576],{"class":33,"line":142},[31,10577,1954],{"class":45},[31,10579,10580,10583,10586,10588,10590,10592,10595,10597],{"class":33,"line":181},[31,10581,10582],{"class":45},"      \"",[31,10584,10585],{"class":6150},"Effect",[31,10587,77],{"class":45},[31,10589,62],{"class":45},[31,10591,649],{"class":45},[31,10593,10594],{"class":80},"Allow",[31,10596,77],{"class":45},[31,10598,1647],{"class":45},[31,10600,10601,10603,10606,10608,10610],{"class":33,"line":188},[31,10602,10582],{"class":45},[31,10604,10605],{"class":6150},"Principal",[31,10607,77],{"class":45},[31,10609,62],{"class":45},[31,10611,1602],{"class":45},[31,10613,10614,10616,10619,10621,10623,10625,10627],{"class":33,"line":283},[31,10615,10316],{"class":45},[31,10617,10618],{"class":65},"AWS",[31,10620,77],{"class":45},[31,10622,62],{"class":45},[31,10624,649],{"class":45},[31,10626,6151],{"class":80},[31,10628,1686],{"class":45},[31,10630,10631],{"class":33,"line":289},[31,10632,10633],{"class":45},"      },\n",[31,10635,10636,10638,10641,10643,10645],{"class":33,"line":295},[31,10637,10582],{"class":45},[31,10639,10640],{"class":6150},"Action",[31,10642,77],{"class":45},[31,10644,62],{"class":45},[31,10646,49],{"class":45},[31,10648,10649,10651,10654,10656],{"class":33,"line":301},[31,10650,10316],{"class":45},[31,10652,10653],{"class":80},"cloudsearch:search",[31,10655,77],{"class":45},[31,10657,1647],{"class":45},[31,10659,10660,10662,10665],{"class":33,"line":307},[31,10661,10316],{"class":45},[31,10663,10664],{"class":80},"cloudsearch:suggest",[31,10666,1686],{"class":45},[31,10668,10669],{"class":33,"line":313},[31,10670,10671],{"class":45},"      ]\n",[31,10673,10674],{"class":33,"line":319},[31,10675,3775],{"class":45},[31,10677,10678],{"class":33,"line":325},[31,10679,10680],{"class":45},"  ]\n",[31,10682,10683],{"class":33,"line":331},[31,10684,334],{"class":45},[13,10686,10687,10688,10691],{},"もう少し厳密にしたい人は ",[17,10689,10690],{},"\"AWS\": \"*\"","をロールベースにするなどします。これでAWSのサービス、すなわちAPI gatewayがこのcloudsearchの検索機能を使用できるようになりました。",[365,10693,10694],{"id":10694},"セットアップ完了",[13,10696,10697],{},"最後に確認をして適用します。設定の適用には10分ぐらい時間がかかるので気長に待ちます。この時は他の文書をアップロードするなどもできなくなります。",[5928,10699],{":src":10700,":width":5931},"'static-site-search\u002Ffirst_setuop_complete.png'",[13,10702,10703],{},"このLOADINGという文字がACTIVEに変われば他の操作ができるようになります。",[5928,10705],{":src":10706,":width":5931},"'static-site-search\u002Floading.png'",[207,10708,10710],{"id":10709},"api-gatewayの準備","API gatewayの準備",[13,10712,10713,10714,10719],{},"cloudsearchの処理が完了する間、API gatewayも実装しましょう。公式では",[196,10715,10718],{"href":10716,"rel":10717},"https:\u002F\u002Fdocs.aws.amazon.com\u002Fja_jp\u002Fcloudsearch\u002Flatest\u002Fdeveloperguide\u002Fapi-gateway.html",[901],"「Amazon CloudSearch と API Gateway の統合」"," こちらの記事が大変参考になります。",[13,10721,10722],{},"新しいAPIの作成まで行ったら、GETメソッドのAPIを選択します。そして「統合リクエスト」を選択します。ここでリクエストをAWSのサービスに連絡させます。",[5928,10724],{":src":10725,":width":6659,":center":619},"'static-site-search\u002Fapi_setting.png'",[13,10727,10728,10729,10733],{},"上記の黒塗りにした箇所はcloudsearchのダッシュボードにある値を入れます。「AWSサブドメイン」は「Search Endpoint」、「実行ロール」はAPI gatewayがcloudsearchを叩くためのロールのARNを入れます。そのロールの作成は",[196,10730,5945],{"href":10731,"rel":10732},"https:\u002F\u002Fdocs.aws.amazon.com\u002Fja_jp\u002Fcloudsearch\u002Flatest\u002Fdeveloperguide\u002Fapi-gateway.html#api-gateway-pre",[901]," を確認してください。",[5928,10735],{":src":10736,":width":6659,":center":619},"'static-site-search\u002Fdashboard.png'",[13,10738,10739,10740,10743],{},"最後に「URL クエリ文字列パラメータ」に「q」という名前でAPI gatewaryに含まれる ",[17,10741,10742],{},"method.request.querystring.q","をマッピングします。こうすることでクライアントからきたcloudsearchのクエリが、API gatewayを通じて実際のcloudsearchに渡されるようになりました。",[13,10745,10746],{},"次に「統合リクエスト」から一つ前の画面に戻って「メソッドリクエスト」の画面を開き、「リクエストの検証」の項目で「クエリ文字列パラメーターおよびヘッダーの検証」を選択します。そして先ほど設定したクエリパラメータ「q」を必須にするため、「URL クエリ文字列パラメータ」を開いて名前に「q」として必須にして確定します。こうすることで必ずリクエストにはcloudsearchで検索を行うためのクエリ文が含まれるようになりました。",[13,10748,10749,10750,10753],{},"テストを行い、クエリ文字列に",[17,10751,10752],{},"q=test","みたいに入れて送ってみましょう。ステータスが200で以下のようなレスポンスボディがあればcloudsearchが検索結果を返しています。",[22,10755,10757],{"className":10531,"code":10756,"language":10533,"meta":27,"style":27},"{\n  \"status\": {\n    \"rid\": \"~~~~~~\",\n    \"time-ms\": 1\n  },\n  \"hits\": {\n    \"found\": 0,\n    \"start\": 0,\n    \"hit\": []\n  }\n}\n",[17,10758,10759,10763,10776,10797,10811,10816,10829,10844,10859,10873,10878],{"__ignoreMap":27},[31,10760,10761],{"class":33,"line":34},[31,10762,275],{"class":45},[31,10764,10765,10767,10770,10772,10774],{"class":33,"line":52},[31,10766,10544],{"class":45},[31,10768,10769],{"class":37},"status",[31,10771,77],{"class":45},[31,10773,62],{"class":45},[31,10775,1602],{"class":45},[31,10777,10778,10781,10784,10786,10788,10790,10793,10795],{"class":33,"line":103},[31,10779,10780],{"class":45},"    \"",[31,10782,10783],{"class":6150},"rid",[31,10785,77],{"class":45},[31,10787,62],{"class":45},[31,10789,649],{"class":45},[31,10791,10792],{"class":80},"~~~~~~",[31,10794,77],{"class":45},[31,10796,1647],{"class":45},[31,10798,10799,10801,10804,10806,10808],{"class":33,"line":142},[31,10800,10780],{"class":45},[31,10802,10803],{"class":6150},"time-ms",[31,10805,77],{"class":45},[31,10807,62],{"class":45},[31,10809,10810],{"class":65}," 1\n",[31,10812,10813],{"class":33,"line":181},[31,10814,10815],{"class":45},"  },\n",[31,10817,10818,10820,10823,10825,10827],{"class":33,"line":188},[31,10819,10544],{"class":45},[31,10821,10822],{"class":37},"hits",[31,10824,77],{"class":45},[31,10826,62],{"class":45},[31,10828,1602],{"class":45},[31,10830,10831,10833,10836,10838,10840,10842],{"class":33,"line":283},[31,10832,10780],{"class":45},[31,10834,10835],{"class":6150},"found",[31,10837,77],{"class":45},[31,10839,62],{"class":45},[31,10841,6164],{"class":65},[31,10843,1647],{"class":45},[31,10845,10846,10848,10851,10853,10855,10857],{"class":33,"line":289},[31,10847,10780],{"class":45},[31,10849,10850],{"class":6150},"start",[31,10852,77],{"class":45},[31,10854,62],{"class":45},[31,10856,6164],{"class":65},[31,10858,1647],{"class":45},[31,10860,10861,10863,10866,10868,10870],{"class":33,"line":295},[31,10862,10780],{"class":45},[31,10864,10865],{"class":6150},"hit",[31,10867,77],{"class":45},[31,10869,62],{"class":45},[31,10871,10872],{"class":45}," []\n",[31,10874,10875],{"class":33,"line":301},[31,10876,10877],{"class":45},"  }\n",[31,10879,10880],{"class":33,"line":307},[31,10881,334],{"class":45},[13,10883,10884],{},"何も文書をアップロードしていなければhitしませんし、そしてCloudsearchがLOADINGだと返してくれないことがあります。テストが完了したらAPIをデプロイしてAPI gatewayの設定は完了です。あとはクライアントから適当に叩いてください。",[207,10886,10888],{"id":10887},"文書ページをアップロードする","文書（ページ）をアップロードする",[13,10890,10891],{},"それでは検索させる文書、静的ページの内容をアップロードしましょう。先述の通り以下のような形式のJSONにまとめます。",[22,10893,10895],{"className":10299,"code":10894,"language":10301,"meta":27,"style":27},"[\n    \u002F\u002F ここから\n    {\n        \"type\":\"add\",\n        \"id\":\"bag-html-break-tag\",\n        \"fields\":{\n            \"description\":\"white-space： pre;で要素内で生じる、文章の隙間、インテンドの原因。\",\n            \"title\":\"white-space： pre;で要素内で生じる文章の隙間、インテンドの原因。\",\n            \"category\":[\"ministack\"],\n            \"tag\":[\"html\",\"css\",\"vue\"],\n            \"path\":\"https:\u002F\u002Fjun-app.com\u002Farticles\u002Fbag-html-break-tag\",\n            \"content\":\"~~~~~~~~~\"\n        }\n    },\n    \u002F\u002F　これで１件の文書を追加するという意味。\n    {\n        ...\n    },\n    ...\n]\n",[17,10896,10897,10901,10906,10910,10928,10946,10956,10974,10992,11010,11044,11062,11078,11082,11086,11091,11095,11099,11103,11108],{"__ignoreMap":27},[31,10898,10899],{"class":33,"line":34},[31,10900,1630],{"class":45},[31,10902,10903],{"class":33,"line":52},[31,10904,10905],{"class":184},"    \u002F\u002F ここから\n",[31,10907,10908],{"class":33,"line":103},[31,10909,1954],{"class":45},[31,10911,10912,10914,10916,10918,10920,10922,10924,10926],{"class":33,"line":142},[31,10913,10316],{"class":45},[31,10915,10319],{"class":37},[31,10917,77],{"class":45},[31,10919,62],{"class":45},[31,10921,77],{"class":45},[31,10923,8741],{"class":80},[31,10925,77],{"class":45},[31,10927,1647],{"class":45},[31,10929,10930,10932,10934,10936,10938,10940,10942,10944],{"class":33,"line":181},[31,10931,10316],{"class":45},[31,10933,59],{"class":37},[31,10935,77],{"class":45},[31,10937,62],{"class":45},[31,10939,77],{"class":45},[31,10941,10346],{"class":80},[31,10943,77],{"class":45},[31,10945,1647],{"class":45},[31,10947,10948,10950,10952,10954],{"class":33,"line":188},[31,10949,10316],{"class":45},[31,10951,10357],{"class":37},[31,10953,77],{"class":45},[31,10955,1660],{"class":45},[31,10957,10958,10960,10962,10964,10966,10968,10970,10972],{"class":33,"line":283},[31,10959,10366],{"class":45},[31,10961,10369],{"class":6150},[31,10963,77],{"class":45},[31,10965,62],{"class":45},[31,10967,77],{"class":45},[31,10969,10378],{"class":80},[31,10971,77],{"class":45},[31,10973,1647],{"class":45},[31,10975,10976,10978,10980,10982,10984,10986,10988,10990],{"class":33,"line":289},[31,10977,10366],{"class":45},[31,10979,72],{"class":6150},[31,10981,77],{"class":45},[31,10983,62],{"class":45},[31,10985,77],{"class":45},[31,10987,10397],{"class":80},[31,10989,77],{"class":45},[31,10991,1647],{"class":45},[31,10993,10994,10996,10998,11000,11002,11004,11006,11008],{"class":33,"line":295},[31,10995,10366],{"class":45},[31,10997,10408],{"class":6150},[31,10999,77],{"class":45},[31,11001,10413],{"class":45},[31,11003,77],{"class":45},[31,11005,1787],{"class":80},[31,11007,77],{"class":45},[31,11009,10422],{"class":45},[31,11011,11012,11014,11016,11018,11020,11022,11024,11026,11028,11030,11032,11034,11036,11038,11040,11042],{"class":33,"line":301},[31,11013,10366],{"class":45},[31,11015,10429],{"class":6150},[31,11017,77],{"class":45},[31,11019,10413],{"class":45},[31,11021,77],{"class":45},[31,11023,1871],{"class":80},[31,11025,77],{"class":45},[31,11027,69],{"class":45},[31,11029,77],{"class":45},[31,11031,6143],{"class":80},[31,11033,77],{"class":45},[31,11035,69],{"class":45},[31,11037,77],{"class":45},[31,11039,1798],{"class":80},[31,11041,77],{"class":45},[31,11043,10422],{"class":45},[31,11045,11046,11048,11050,11052,11054,11056,11058,11060],{"class":33,"line":307},[31,11047,10366],{"class":45},[31,11049,2225],{"class":6150},[31,11051,77],{"class":45},[31,11053,62],{"class":45},[31,11055,77],{"class":45},[31,11057,10472],{"class":80},[31,11059,77],{"class":45},[31,11061,1647],{"class":45},[31,11063,11064,11066,11068,11070,11072,11074,11076],{"class":33,"line":313},[31,11065,10366],{"class":45},[31,11067,88],{"class":6150},[31,11069,77],{"class":45},[31,11071,62],{"class":45},[31,11073,77],{"class":45},[31,11075,10491],{"class":80},[31,11077,1686],{"class":45},[31,11079,11080],{"class":33,"line":319},[31,11081,2012],{"class":45},[31,11083,11084],{"class":33,"line":325},[31,11085,2017],{"class":45},[31,11087,11088],{"class":33,"line":331},[31,11089,11090],{"class":184},"    \u002F\u002F　これで１件の文書を追加するという意味。\n",[31,11092,11093],{"class":33,"line":337},[31,11094,1954],{"class":45},[31,11096,11097],{"class":33,"line":1752},[31,11098,322],{"class":41},[31,11100,11101],{"class":33,"line":1758},[31,11102,2017],{"class":45},[31,11104,11105],{"class":33,"line":1764},[31,11106,11107],{"class":41},"    ...\n",[31,11109,11110],{"class":33,"line":2088},[31,11111,191],{"class":45},[13,11113,11114,11115,69,11117,69,11119,11121],{},"ここでアップロードの際には上記のような",[17,11116,10319],{},[17,11118,59],{},[17,11120,10357],{}," の3つのプロパティーを持つ必要があります。idは重複すると上書きされてしまうので、必ず異なるようにします。また後からわかるように何らかの規則があると、削除や上書きが簡単になります。私の場合は記事のマークダウンファイルの名前から取っています。私のブログはnuxt contentを使用しているのでnode.jsをいじってうんちゃらしています。頑張って文書分のjsonを用意してください。",[365,11123,11124],{"id":11124},"json化する際の注意点",[13,11126,11127],{},"文書のアップロードを行う時に失敗すると以下のような画面が表示されます。",[5928,11129],{":src":11130,":width":5931,":center":619},"'static-site-search\u002Ffailed.png'",[13,11132,11133],{},"アップロードが失敗する原因と対策としてこの英文の通り",[8772,11135,11136,11139,11142],{},[1820,11137,11138],{},"cloudsearchがACTIVEでなくLOADINGやNEED INDEX状態であるので、ACTIVEになるまで待つこと。（またはindex optionsでインデックスを走らせる）",[1820,11140,11141],{},"single valueとして定義されたフィールドになっているのに、文書に複数の値が入っている。（自分もよくわからん）",[1820,11143,11144],{},"cloudserachで定義されていないフィールドが文書にある。またはその逆。フィールドの設定をもう一度見直すか、文書のフィールドを設定し直す。",[13,11146,11147],{},"となります。",[13,11149,11150,11151,11156],{},"ただしフィールドなどを正しくしても何度も治らず、いろいろ検索しました。すると",[196,11152,11155],{"href":11153,"rel":11154},"https:\u002F\u002Fdocs.aws.amazon.com\u002Fja_jp\u002Fcloudsearch\u002Flatest\u002Fdeveloperguide\u002Fpreparing-data.html#:~:text=JSON%20%E3%83%90%E3%83%83%E3%83%81%E3%81%A8%20XML%20%E3%83%90%E3%83%83%E3%83%81%E3%81%AB%E3%81%AF%E3%81%A9%E3%81%A1%E3%82%89%E3%82%82%E3%80%81XML%20%E3%81%A7%E6%9C%89%E5%8A%B9%E3%81%AA%20UTF-8%20%E6%96%87%E5%AD%97%E3%81%AE%E3%81%BF%E3%82%92%E5%90%AB%E3%82%81%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82",[901],"公式ドキュメントのこの箇所","に解決策と思われる内容がありました。",[377,11158,11160],{"className":11159},[380,381],"\nJSON バッチと XML バッチにはどちらも、XML で有効な UTF-8 文字のみを含めることができます。有効な文字は、制御文字のタブ（0009）、復帰（000D）、改行（000A）、および Unicode と ISO\u002FIEC 10646 での有効な文字です。FFFE、FFFF、サロゲートブロックの D800–DBFF と DC00–DFFF は無効で、エラーが発生します （詳細については、『Extensible Markup Language (XML) 1.0 (Fifth Edition)』 を参照してください)。無効な文字に一致する次の正規表現を使用して、無効な文字を削除することができます。\u002F[^\\u0009\\u000a\\u000d\\u0020-\\uD7FF\\uE000-\\uFFFD]\u002F 。\n",[13,11162,11163],{},"つまり作成したJSONに無効なURF-8文字列が含まれており、エラーが起きていたのです。アップロードエラーには表示されないのでかなり詰まりました。",[13,11165,11166],{},"今回のjsonの場合、titleとcontentに対して上記の正規表現を使って無効な文字列を削除してます。node.jsの場合は以下の通りです。",[22,11168,11170],{"className":24,"code":11169,"language":26,"meta":27,"style":27},"data = data.replace(\n    \u002F[^\\u0009\\u000a\\u000d\\u0020-\\uD7FF\\uE000-\\uFFFD]\u002Fg, \n    ''\n);\n",[17,11171,11172,11188,11206,11211],{"__ignoreMap":27},[31,11173,11174,11177,11179,11182,11184,11186],{"class":33,"line":34},[31,11175,11176],{"class":41},"data ",[31,11178,46],{"class":45},[31,11180,11181],{"class":41}," data",[31,11183,237],{"class":45},[31,11185,4264],{"class":259},[31,11187,2544],{"class":41},[31,11189,11190,11193,11196,11199,11202,11204],{"class":33,"line":52},[31,11191,11192],{"class":45},"    \u002F[^",[31,11194,11195],{"class":80},"\\u0009\\u000a\\u000d\\u0020-\\uD7FF\\uE000-\\uFFFD",[31,11197,11198],{"class":45},"]\u002F",[31,11200,11201],{"class":65},"g",[31,11203,69],{"class":45},[31,11205,7087],{"class":41},[31,11207,11208],{"class":33,"line":103},[31,11209,11210],{"class":45},"    ''\n",[31,11212,11213,11215],{"class":33,"line":142},[31,11214,1018],{"class":41},[31,11216,243],{"class":45},[13,11218,11219],{},"こうして直したjsonは無事、なんとかアップロードできました。どうやって見つけたかというと、１文書だけをいくつかのパターンに分けてアップロードすると、できるものとできないものがあって「使用される文字列が原因か？」となったのが決定打でした。",[365,11221,11222],{"id":11222},"テスト",[13,11224,11225],{},"Run a Test Searchにてクエリをテストして、文章がきちんと検索されているか、アップロードされているかをチェックしましょう。",[207,11227,11228],{"id":11228},"クライアント側の実装",[13,11230,11231],{},"これで検索機能の準備ができたので、API gatewayから必要なエンドポイントなどを取得してアクセスしてみましょう。",[5928,11233],{":src":11234,":width":5931,":center":619},"'static-site-search\u002Fpage_sample.png'",[13,11236,11237],{},"ページ上ではこのようなUIとして、入力したキーワードで検索できるようにします。cloudsearchは複雑なクエリを組むこともできるのですが、今回は単純なものにします。",[22,11239,11241],{"className":24,"code":11240,"language":26,"meta":27,"style":27},"await fetch('https:\u002F\u002Fsample.sa-sample-1.amazonaws.com\u002Fv1?q='+this.query,{\n        method:'GET',\n        headers: {\n        'Content-Type': 'application\u002Fjson'\n        },\n    })\n.then(response => response.json())\n.then(jsondata => {\n    this.result = jsondata\n)\n",[17,11242,11243,11269,11285,11294,11313,11317,11324,11347,11362,11375],{"__ignoreMap":27},[31,11244,11245,11248,11251,11253,11255,11258,11260,11263,11266],{"class":33,"line":34},[31,11246,11247],{"class":1006},"await",[31,11249,11250],{"class":259}," fetch",[31,11252,993],{"class":41},[31,11254,2005],{"class":45},[31,11256,11257],{"class":80},"https:\u002F\u002Fsample.sa-sample-1.amazonaws.com\u002Fv1?q=",[31,11259,2005],{"class":45},[31,11261,11262],{"class":45},"+this.",[31,11264,11265],{"class":41},"query",[31,11267,11268],{"class":45},",{\n",[31,11270,11271,11274,11276,11278,11281,11283],{"class":33,"line":52},[31,11272,11273],{"class":58},"        method",[31,11275,62],{"class":45},[31,11277,2005],{"class":45},[31,11279,11280],{"class":80},"GET",[31,11282,2005],{"class":45},[31,11284,1647],{"class":45},[31,11286,11287,11290,11292],{"class":33,"line":103},[31,11288,11289],{"class":58},"        headers",[31,11291,62],{"class":45},[31,11293,1602],{"class":45},[31,11295,11296,11299,11302,11304,11306,11308,11311],{"class":33,"line":142},[31,11297,11298],{"class":45},"        '",[31,11300,11301],{"class":58},"Content-Type",[31,11303,2005],{"class":45},[31,11305,62],{"class":45},[31,11307,2000],{"class":45},[31,11309,11310],{"class":80},"application\u002Fjson",[31,11312,4866],{"class":45},[31,11314,11315],{"class":33,"line":181},[31,11316,3225],{"class":45},[31,11318,11319,11322],{"class":33,"line":188},[31,11320,11321],{"class":45},"    }",[31,11323,2653],{"class":41},[31,11325,11326,11328,11331,11333,11336,11338,11340,11342,11344],{"class":33,"line":283},[31,11327,237],{"class":45},[31,11329,11330],{"class":259},"then",[31,11332,993],{"class":41},[31,11334,11335],{"class":996},"response",[31,11337,1000],{"class":37},[31,11339,234],{"class":41},[31,11341,237],{"class":45},[31,11343,10533],{"class":259},[31,11345,11346],{"class":41},"())\n",[31,11348,11349,11351,11353,11355,11358,11360],{"class":33,"line":289},[31,11350,237],{"class":45},[31,11352,11330],{"class":259},[31,11354,993],{"class":41},[31,11356,11357],{"class":996},"jsondata",[31,11359,1000],{"class":37},[31,11361,1602],{"class":45},[31,11363,11364,11367,11370,11372],{"class":33,"line":295},[31,11365,11366],{"class":45},"    this.",[31,11368,11369],{"class":41},"result",[31,11371,2041],{"class":45},[31,11373,11374],{"class":41}," jsondata\n",[31,11376,11377],{"class":33,"line":301},[31,11378,2653],{"class":58},[13,11380,11381],{},"方法は単純でバリデーションを行った後に、API gatewayのエンドポイントにクエリ付きでアクセスします。",[5928,11383],{":src":11384,":width":5931,":center":619},"'static-site-search\u002Fresult.png'",[13,11386,11387],{},"ページのURLなどもフィールドを含まれており、レスポンスで返すようにしています。それを用いてこのように一覧のリンクを作れば検索機能は実装完了です。",[13,11389,11390],{},"今回は検索エンジンにAWS cloudsearchを使用しましたが、他にも文書検索サービスはたくさんあります。商用で利用する場合は検索文書を自動的にアップロードしたりする機能や、より複雑なクエリの構築、キャッシュの利用が必要となります。",[13,11392,11393],{},"以上が静的ページに検索機能を持たせる方法です。最後見てくださりありがとうございました。",[1771,11395,11396],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}",{"title":27,"searchDepth":103,"depth":103,"links":11398},[11399,11400,11406,11407,11411],{"id":10221,"depth":52,"text":10221},{"id":10250,"depth":52,"text":10250,"children":11401},[11402,11403,11404,11405],{"id":10253,"depth":103,"text":10253},{"id":10271,"depth":103,"text":10271},{"id":10525,"depth":103,"text":10525},{"id":10694,"depth":103,"text":10694},{"id":10709,"depth":52,"text":10710},{"id":10887,"depth":52,"text":10888,"children":11408},[11409,11410],{"id":11124,"depth":103,"text":11124},{"id":11222,"depth":103,"text":11222},{"id":11228,"depth":52,"text":11228},[5906],"2021-06-28","Google Search以外にも方法があります！AWS Cloud Searchを使って静的サイトに検索機能をつける。",{},"\u002Farticles\u002Fstatic-site-search",{"title":10207,"description":11414},"articles\u002Fstatic-site-search",[11420,1797],"aws","static-site-search\u002Fthumbnail.png","CvPv7DEIqq4ZRH1_F9I9qcalQq9c5xGj_OltNaXdZ3k",{"id":11424,"title":1811,"body":11425,"category":14924,"createdAt":14925,"description":14926,"extension":1790,"index":52,"meta":14927,"navigation":248,"path":14928,"publish":248,"seo":14929,"series":5912,"seriesTitle":5913,"stem":14930,"tag":14931,"thumbnail":5917,"updatedAt":1791,"__hash__":14932},"series\u002Fseries\u002Fwell-study-webpack-2.md",{"type":10,"value":11426,"toc":14903},[11427,11431,11437,11447,11450,11453,11456,11467,11473,11482,11514,11524,11585,11591,11786,11796,11799,11813,11823,11826,11829,11832,11838,11844,12417,12420,12423,12426,12564,12567,12574,12587,12590,12658,12667,12686,12692,12698,12704,12720,12723,12732,12769,12772,12784,12787,12790,12800,13291,13305,13308,13310,13313,13316,13319,13325,13328,13511,13514,13532,13536,13539,13545,13558,13841,13844,13850,13853,13856,13867,13962,13976,14433,14457,14459,14462,14470,14477,14480,14495,14501,14510,14514,14527,14686,14692,14763,14773,14873,14895,14897,14900],[377,11428,11430],{"className":11429},[380,381],"\n2021年10月30日：修正事項があっため追記しました。\n",[13,11432,1807,11433,11436],{},[196,11434,11435],{"href":1838},"ちゃんと理解するWebpack5。１：webpack基礎とSass・jsのバンドル","の続きの記事です。前回はjsファイルのバンドル、scssのコンパイルを行いました。今回はそこから",[1817,11438,11439,11441,11444],{},[1820,11440,2987],{},[1820,11442,11443],{},"babelを用いたトランスコンパイル",[1820,11445,11446],{},"複数のバンドルファイルを出力",[13,11448,11449],{},"以上を解説したいと思います。これらができればひとまず意図通りのwebコンテンツが作れるようになります。コードは前回のものから発展させて使用します。それではまず画像パスの解決から行っていきます。",[207,11451,11452],{"id":11452},"webpackで画像を取り扱う",[365,11454,11455],{"id":11455},"画像が必要なシチュエーションを準備",[13,11457,11458,11459,11462,11463,11466],{},"sassでは背景画像などで画像のパスが必要となることがあります。",[17,11460,11461],{},"\u002Fsrc","に",[17,11464,11465],{},"imgs","ディレクトリを作成します。",[22,11468,11471],{"className":11469,"code":11470,"language":1864},[1862],".\n├── dist\n│   ├── bundle.js\n│   ├── index.html\n│   └── style.css\n├── package-lock.json\n├── package.json\n├── src\n│   ├── imgs    \u002F\u002F new!\n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n",[17,11472,11470],{"__ignoreMap":27},[13,11474,11475,11477,11478,11481],{},[17,11476,3014],{},"ディレクトリにに画像を配置していきます。適当な画像sample.jpgをおいておき、sassにも適当な",[17,11479,11480],{},"background-image","を設定します。",[22,11483,11488],{"className":11484,"code":11485,"filename":11486,"language":11487,"meta":27,"style":27},"language-sass shiki shiki-themes material-theme-ocean",".image-box{\n    width: 100px;\n    height: 100px;\n    background-image: url('~\u002Fimgs\u002Fsample.jpg');\n}\n","\u002Fsrc\u002Fsass\u002Fcomponent.scss","sass",[17,11489,11490,11495,11500,11505,11510],{"__ignoreMap":27},[31,11491,11492],{"class":33,"line":34},[31,11493,11494],{},".image-box{\n",[31,11496,11497],{"class":33,"line":52},[31,11498,11499],{},"    width: 100px;\n",[31,11501,11502],{"class":33,"line":103},[31,11503,11504],{},"    height: 100px;\n",[31,11506,11507],{"class":33,"line":142},[31,11508,11509],{},"    background-image: url('~\u002Fimgs\u002Fsample.jpg');\n",[31,11511,11512],{"class":33,"line":181},[31,11513,334],{},[13,11515,11516,11519,11520,11523],{},[17,11517,11518],{},"url('..\u002Fimgs\u002Fsample.jpg');","のような相対パスでなく",[17,11521,11522],{},"url('~\u002Fimgs\u002Fsample.jpg');","としたのは運用上のテクニックです。後でこの説明をしますので、ひとまずこんなパスにしておきます。まだ設定していませんが、試しにビルドしてみます。",[22,11525,11528],{"className":6141,"code":11526,"filename":11527,"language":6143,"meta":27,"style":27},".image-box {\n  width: 100px;\n  height: 100px;\n  background-image: url(\"~\u002Fimgs\u002Fsample.jpg\"); }\n","dist\u002Fstyle.css",[17,11529,11530,11539,11551,11562],{"__ignoreMap":27},[31,11531,11532,11534,11537],{"class":33,"line":34},[31,11533,237],{"class":45},[31,11535,11536],{"class":6150},"image-box",[31,11538,1602],{"class":45},[31,11540,11541,11544,11546,11549],{"class":33,"line":52},[31,11542,11543],{"class":6158},"  width",[31,11545,62],{"class":45},[31,11547,11548],{"class":65}," 100px",[31,11550,243],{"class":45},[31,11552,11553,11556,11558,11560],{"class":33,"line":103},[31,11554,11555],{"class":6158},"  height",[31,11557,62],{"class":45},[31,11559,11548],{"class":65},[31,11561,243],{"class":45},[31,11563,11564,11567,11569,11571,11573,11575,11578,11580,11583],{"class":33,"line":142},[31,11565,11566],{"class":6158},"  background-image",[31,11568,62],{"class":45},[31,11570,4764],{"class":259},[31,11572,993],{"class":45},[31,11574,77],{"class":45},[31,11576,11577],{"class":80},"~\u002Fimgs\u002Fsample.jpg",[31,11579,77],{"class":45},[31,11581,11582],{"class":45},");",[31,11584,4771],{"class":45},[13,11586,11587,11590],{},[17,11588,11589],{},"component.scss","で定義した通りのURLとなりましたが、もちろん不正なので404となります。",[22,11592,11595],{"className":2998,"code":11593,"filename":11594,"language":1871,"meta":27,"style":27},"    ...\n    \u003Cbody>\n        \u003Cmain>\n            \u003Cdiv id='app'>\n\n            \u003C\u002Fdiv>\n            \u003Cinput type=\"text\" value=\"\" id=\"inputs\">\n            \u003Cbutton id=\"submmit\" >追加する\u003C\u002Fbutton>\n            \u003Cdiv class='box'>\u003C\u002Fdiv>\n            \u003Cdiv class='image-box'>\u003C\u002Fdiv>\n        \u003C\u002Fmain>\n    \u003C\u002Fbody>\n    ...\n    \u003C!-- Failed to load resource: net::ERR_FILE_NOT_FOUND \u002F~\u002Fimgs\u002Fsample.jpg-->\n","\u002Fdist\u002Findex.html",[17,11596,11597,11601,11609,11618,11637,11641,11649,11687,11716,11739,11761,11769,11777,11781],{"__ignoreMap":27},[31,11598,11599],{"class":33,"line":34},[31,11600,11107],{"class":41},[31,11602,11603,11605,11607],{"class":33,"line":52},[31,11604,5995],{"class":45},[31,11606,2616],{"class":58},[31,11608,5990],{"class":45},[31,11610,11611,11613,11616],{"class":33,"line":103},[31,11612,6015],{"class":45},[31,11614,11615],{"class":58},"main",[31,11617,5990],{"class":45},[31,11619,11620,11622,11624,11626,11628,11630,11633,11635],{"class":33,"line":142},[31,11621,7176],{"class":45},[31,11623,377],{"class":58},[31,11625,5978],{"class":37},[31,11627,46],{"class":45},[31,11629,2005],{"class":45},[31,11631,11632],{"class":80},"app",[31,11634,2005],{"class":45},[31,11636,5990],{"class":45},[31,11638,11639],{"class":33,"line":181},[31,11640,249],{"emptyLinePlaceholder":248},[31,11642,11643,11645,11647],{"class":33,"line":188},[31,11644,7209],{"class":45},[31,11646,377],{"class":58},[31,11648,5990],{"class":45},[31,11650,11651,11653,11656,11658,11660,11662,11664,11666,11669,11671,11674,11676,11678,11680,11683,11685],{"class":33,"line":283},[31,11652,7176],{"class":45},[31,11654,11655],{"class":58},"input",[31,11657,7279],{"class":37},[31,11659,46],{"class":45},[31,11661,77],{"class":45},[31,11663,1864],{"class":80},[31,11665,77],{"class":45},[31,11667,11668],{"class":37}," value",[31,11670,46],{"class":45},[31,11672,11673],{"class":45},"\"\"",[31,11675,5978],{"class":37},[31,11677,46],{"class":45},[31,11679,77],{"class":45},[31,11681,11682],{"class":80},"inputs",[31,11684,77],{"class":45},[31,11686,5990],{"class":45},[31,11688,11689,11691,11693,11695,11697,11699,11702,11704,11707,11710,11712,11714],{"class":33,"line":289},[31,11690,7176],{"class":45},[31,11692,7220],{"class":58},[31,11694,5978],{"class":37},[31,11696,46],{"class":45},[31,11698,77],{"class":45},[31,11700,11701],{"class":80},"submmit",[31,11703,77],{"class":45},[31,11705,11706],{"class":45}," >",[31,11708,11709],{"class":41},"追加する",[31,11711,6114],{"class":45},[31,11713,7220],{"class":58},[31,11715,5990],{"class":45},[31,11717,11718,11720,11722,11724,11726,11728,11731,11733,11735,11737],{"class":33,"line":295},[31,11719,7176],{"class":45},[31,11721,377],{"class":58},[31,11723,5966],{"class":37},[31,11725,46],{"class":45},[31,11727,2005],{"class":45},[31,11729,11730],{"class":80},"box",[31,11732,2005],{"class":45},[31,11734,6777],{"class":45},[31,11736,377],{"class":58},[31,11738,5990],{"class":45},[31,11740,11741,11743,11745,11747,11749,11751,11753,11755,11757,11759],{"class":33,"line":301},[31,11742,7176],{"class":45},[31,11744,377],{"class":58},[31,11746,5966],{"class":37},[31,11748,46],{"class":45},[31,11750,2005],{"class":45},[31,11752,11536],{"class":80},[31,11754,2005],{"class":45},[31,11756,6777],{"class":45},[31,11758,377],{"class":58},[31,11760,5990],{"class":45},[31,11762,11763,11765,11767],{"class":33,"line":307},[31,11764,7246],{"class":45},[31,11766,11615],{"class":58},[31,11768,5990],{"class":45},[31,11770,11771,11773,11775],{"class":33,"line":313},[31,11772,6046],{"class":45},[31,11774,2616],{"class":58},[31,11776,5990],{"class":45},[31,11778,11779],{"class":33,"line":319},[31,11780,11107],{"class":41},[31,11782,11783],{"class":33,"line":325},[31,11784,11785],{"class":184},"    \u003C!-- Failed to load resource: net::ERR_FILE_NOT_FOUND \u002F~\u002Fimgs\u002Fsample.jpg-->\n",[13,11787,11788,11789,11792,11793,11795],{},"相対リンクでやってもdist配下ににimgsディレクトリと画像そのものがないので、404となります。そのためwebpackを用いて",[17,11790,11791],{},"\u002Fsrc\u002Fimgs","と配下の画像をdistに移動し、",[17,11794,11522],{},"のようなパスを変換させてあげる必要があります。",[365,11797,11798],{"id":11798},"webpack4と5の違い",[13,11800,11801,11802,11805,11806,11805,11809,11812],{},"webpack4では画像の処理に",[17,11803,11804],{},"url-loader","、",[17,11807,11808],{},"raw-loader",[17,11810,11811],{},"file-loader","を使用していましたが、webpack5ではすでにwebpackに搭載されているAsset Modulesで行います。ただバージョン4の書き方もまだ主流なので、今回は4と5の方法を紹介し、最終的には5の方法で実装しようと思います。",[13,11814,11815,11816,11818,11819,11822],{},"なお、目指す形としては",[17,11817,5508],{},"配下に",[17,11820,11821],{},"\u002Fimgs","というディレクトリが作られ、そこに配下の画像が移動され、sassの画像パスが正しくなっているように設定します。",[365,11824,11825],{"id":11825},"webpack4の設定でやってみる",[8793,11827,11828],{"id":11828},"loaderをインストールとconfigの記述を変更",[13,11830,11831],{},"それでは従来の方法での説明をまずは行います。最初に必要なloaderをインストールします。",[22,11833,11836],{"className":11834,"code":11835,"language":1864},[1862],"npm i -D url-loader file-loader\n",[17,11837,11835],{"__ignoreMap":27},[13,11839,11840,11841,11843],{},"この2つを用いてパスの解決とファイルの移動を行うことができます。そして",[17,11842,1916],{},"を以下のように変更します。",[22,11845,11847],{"className":24,"code":11846,"filename":1916,"language":26,"meta":27,"style":27},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path'); \u002F\u002F 追加\nmodule.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: .\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: [\n            {\n                test: \u002F\\.(sa|sc|c)ss$\u002F,\n                exclude: \u002Fnode_modules\u002F,\n                use: [\n                    MiniCssExtractPlugin.loader,\n                    {\n                        loader: 'css-loader',\n                        options: { url: true }　\u002F\u002F trueに変更\n                    },\n                    'sass-loader',\n                ]\n            },\n            {   \u002F\u002F追加\n                test: \u002F\\.(png|jpg|gif)$\u002Fi,\n                use: [\n                  {\n                    loader: 'url-loader',\n                    options: {\n                      limit: 8192,\n                      name:'.\u002Fimgs\u002F[name].[ext]'\n                    }\n                  },\n                ],\n               type: 'javascript\u002Fauto' \u002F\u002F 大切\n            },\n        ],\n    },\n    resolve:{　\u002F\u002F追加\n        alias: {\n          '~': path.resolve(__dirname, 'src')\n        }\n    },\n    \u002F\u002F ファイルの出力設定\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        \u002F\u002F 出力ファイル名\n        filename: \"bundle.js\"\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: 'style.css'\n        })\n    ]\n};\n",[17,11848,11849,11871,11897,11905,11910,11937,11941,11954,11958,11966,11974,11978,12011,12026,12035,12046,12051,12066,12087,12092,12103,12108,12112,12120,12152,12160,12165,12180,12189,12201,12215,12220,12225,12232,12249,12253,12259,12263,12272,12280,12308,12312,12316,12320,12328,12332,12350,12355,12368,12372,12380,12390,12403,12409,12413],{"__ignoreMap":27},[31,11850,11851,11853,11855,11857,11859,11861,11863,11865,11867,11869],{"class":33,"line":34},[31,11852,38],{"class":37},[31,11854,2189],{"class":41},[31,11856,46],{"class":45},[31,11858,2194],{"class":259},[31,11860,993],{"class":41},[31,11862,2005],{"class":45},[31,11864,2201],{"class":80},[31,11866,2005],{"class":45},[31,11868,1018],{"class":41},[31,11870,243],{"class":45},[31,11872,11873,11875,11877,11879,11881,11883,11885,11887,11889,11891,11894],{"class":33,"line":52},[31,11874,38],{"class":37},[31,11876,2214],{"class":41},[31,11878,46],{"class":45},[31,11880,2194],{"class":259},[31,11882,993],{"class":41},[31,11884,2005],{"class":45},[31,11886,2225],{"class":80},[31,11888,2005],{"class":45},[31,11890,1018],{"class":41},[31,11892,11893],{"class":45},";",[31,11895,11896],{"class":184}," \u002F\u002F 追加\n",[31,11898,11899,11901,11903],{"class":33,"line":103},[31,11900,2155],{"class":45},[31,11902,2041],{"class":45},[31,11904,1602],{"class":45},[31,11906,11907],{"class":33,"line":142},[31,11908,11909],{"class":184},"    \u002F\u002Fバンドル対象のファイル\n",[31,11911,11912,11914,11916,11919,11921,11923,11925,11927,11929,11931,11933,11935],{"class":33,"line":181},[31,11913,2048],{"class":58},[31,11915,62],{"class":45},[31,11917,11918],{"class":45}," .\u002F",[31,11920,1847],{"class":41},[31,11922,1979],{"class":45},[31,11924,1797],{"class":41},[31,11926,1979],{"class":45},[31,11928,11615],{"class":41},[31,11930,237],{"class":45},[31,11932,1797],{"class":41},[31,11934,2005],{"class":45},[31,11936,1647],{"class":80},[31,11938,11939],{"class":33,"line":188},[31,11940,2064],{"class":41},[31,11942,11943,11946,11948,11950,11952],{"class":33,"line":283},[31,11944,11945],{"class":41},"    mode:",[31,11947,77],{"class":45},[31,11949,2076],{"class":80},[31,11951,77],{"class":45},[31,11953,1647],{"class":45},[31,11955,11956],{"class":33,"line":289},[31,11957,2085],{"class":41},[31,11959,11960,11962,11964],{"class":33,"line":295},[31,11961,2091],{"class":58},[31,11963,62],{"class":45},[31,11965,1602],{"class":45},[31,11967,11968,11970,11972],{"class":33,"line":301},[31,11969,2101],{"class":58},[31,11971,62],{"class":45},[31,11973,49],{"class":41},[31,11975,11976],{"class":33,"line":307},[31,11977,1635],{"class":45},[31,11979,11980,11983,11985,11987,11989,11991,11993,11995,11997,11999,12001,12003,12005,12007,12009],{"class":33,"line":313},[31,11981,11982],{"class":58},"                test",[31,11984,62],{"class":45},[31,11986,1964],{"class":45},[31,11988,1967],{"class":41},[31,11990,993],{"class":45},[31,11992,4676],{"class":80},[31,11994,4679],{"class":45},[31,11996,4682],{"class":80},[31,11998,4679],{"class":45},[31,12000,4687],{"class":80},[31,12002,1018],{"class":45},[31,12004,4692],{"class":80},[31,12006,1976],{"class":1006},[31,12008,1979],{"class":45},[31,12010,1647],{"class":45},[31,12012,12013,12016,12018,12020,12022,12024],{"class":33,"line":319},[31,12014,12015],{"class":58},"                exclude",[31,12017,62],{"class":45},[31,12019,1964],{"class":45},[31,12021,3703],{"class":80},[31,12023,1979],{"class":45},[31,12025,1647],{"class":45},[31,12027,12028,12031,12033],{"class":33,"line":325},[31,12029,12030],{"class":58},"                use",[31,12032,62],{"class":45},[31,12034,49],{"class":41},[31,12036,12037,12040,12042,12044],{"class":33,"line":331},[31,12038,12039],{"class":41},"                    MiniCssExtractPlugin",[31,12041,237],{"class":45},[31,12043,4730],{"class":41},[31,12045,1647],{"class":45},[31,12047,12048],{"class":33,"line":337},[31,12049,12050],{"class":45},"                    {\n",[31,12052,12053,12056,12058,12060,12062,12064],{"class":33,"line":1752},[31,12054,12055],{"class":58},"                        loader",[31,12057,62],{"class":45},[31,12059,2000],{"class":45},[31,12061,4748],{"class":80},[31,12063,2005],{"class":45},[31,12065,1647],{"class":45},[31,12067,12068,12071,12073,12075,12077,12079,12081,12084],{"class":33,"line":1758},[31,12069,12070],{"class":58},"                        options",[31,12072,62],{"class":45},[31,12074,1003],{"class":45},[31,12076,4764],{"class":58},[31,12078,62],{"class":45},[31,12080,3754],{"class":2643},[31,12082,12083],{"class":45}," }",[31,12085,12086],{"class":184},"　\u002F\u002F trueに変更\n",[31,12088,12089],{"class":33,"line":1764},[31,12090,12091],{"class":45},"                    },\n",[31,12093,12094,12097,12099,12101],{"class":33,"line":2088},[31,12095,12096],{"class":45},"                    '",[31,12098,4782],{"class":80},[31,12100,2005],{"class":45},[31,12102,1647],{"class":45},[31,12104,12105],{"class":33,"line":2098},[31,12106,12107],{"class":41},"                ]\n",[31,12109,12110],{"class":33,"line":2109},[31,12111,1696],{"class":45},[31,12113,12114,12117],{"class":33,"line":2114},[31,12115,12116],{"class":45},"            {",[31,12118,12119],{"class":184},"   \u002F\u002F追加\n",[31,12121,12122,12124,12126,12128,12130,12132,12134,12136,12138,12140,12142,12144,12146,12148,12150],{"class":33,"line":2119},[31,12123,11982],{"class":58},[31,12125,62],{"class":45},[31,12127,1964],{"class":45},[31,12129,1967],{"class":41},[31,12131,993],{"class":45},[31,12133,4816],{"class":80},[31,12135,4679],{"class":45},[31,12137,4821],{"class":80},[31,12139,4679],{"class":45},[31,12141,4826],{"class":80},[31,12143,1018],{"class":45},[31,12145,1976],{"class":1006},[31,12147,1979],{"class":45},[31,12149,4840],{"class":65},[31,12151,1647],{"class":45},[31,12153,12154,12156,12158],{"class":33,"line":2131},[31,12155,12030],{"class":58},[31,12157,62],{"class":45},[31,12159,49],{"class":41},[31,12161,12162],{"class":33,"line":2136},[31,12163,12164],{"class":45},"                  {\n",[31,12166,12167,12170,12172,12174,12176,12178],{"class":33,"line":2141},[31,12168,12169],{"class":58},"                    loader",[31,12171,62],{"class":45},[31,12173,2000],{"class":45},[31,12175,11804],{"class":80},[31,12177,2005],{"class":45},[31,12179,1647],{"class":45},[31,12181,12182,12185,12187],{"class":33,"line":2147},[31,12183,12184],{"class":58},"                    options",[31,12186,62],{"class":45},[31,12188,1602],{"class":45},[31,12190,12191,12194,12196,12199],{"class":33,"line":2152},[31,12192,12193],{"class":58},"                      limit",[31,12195,62],{"class":45},[31,12197,12198],{"class":65}," 8192",[31,12200,1647],{"class":45},[31,12202,12203,12206,12208,12210,12213],{"class":33,"line":4},[31,12204,12205],{"class":58},"                      name",[31,12207,62],{"class":45},[31,12209,2005],{"class":45},[31,12211,12212],{"class":80},".\u002Fimgs\u002F[name].[ext]",[31,12214,4866],{"class":45},[31,12216,12217],{"class":33,"line":2523},[31,12218,12219],{"class":45},"                    }\n",[31,12221,12222],{"class":33,"line":2528},[31,12223,12224],{"class":45},"                  },\n",[31,12226,12227,12230],{"class":33,"line":2547},[31,12228,12229],{"class":41},"                ]",[31,12231,1647],{"class":45},[31,12233,12234,12237,12239,12241,12244,12246],{"class":33,"line":2560},[31,12235,12236],{"class":58},"               type",[31,12238,62],{"class":45},[31,12240,2000],{"class":45},[31,12242,12243],{"class":80},"javascript\u002Fauto",[31,12245,2005],{"class":45},[31,12247,12248],{"class":184}," \u002F\u002F 大切\n",[31,12250,12251],{"class":33,"line":2606},[31,12252,1696],{"class":45},[31,12254,12255,12257],{"class":33,"line":2623},[31,12256,4791],{"class":41},[31,12258,1647],{"class":45},[31,12260,12261],{"class":33,"line":2635},[31,12262,2017],{"class":45},[31,12264,12265,12267,12269],{"class":33,"line":2647},[31,12266,3129],{"class":58},[31,12268,1127],{"class":45},[31,12270,12271],{"class":184},"　\u002F\u002F追加\n",[31,12273,12274,12276,12278],{"class":33,"line":2656},[31,12275,3183],{"class":58},[31,12277,62],{"class":45},[31,12279,1602],{"class":45},[31,12281,12282,12284,12286,12288,12290,12292,12294,12296,12298,12300,12302,12304,12306],{"class":33,"line":2662},[31,12283,5405],{"class":45},[31,12285,3195],{"class":58},[31,12287,2005],{"class":45},[31,12289,62],{"class":45},[31,12291,3202],{"class":41},[31,12293,237],{"class":45},[31,12295,2575],{"class":259},[31,12297,2578],{"class":41},[31,12299,69],{"class":45},[31,12301,2000],{"class":45},[31,12303,1847],{"class":80},[31,12305,2005],{"class":45},[31,12307,2653],{"class":41},[31,12309,12310],{"class":33,"line":2671},[31,12311,2012],{"class":45},[31,12313,12314],{"class":33,"line":2676},[31,12315,2017],{"class":45},[31,12317,12318],{"class":33,"line":4405},[31,12319,5474],{"class":184},[31,12321,12322,12324,12326],{"class":33,"line":5044},[31,12323,5480],{"class":58},[31,12325,62],{"class":45},[31,12327,1602],{"class":45},[31,12329,12330],{"class":33,"line":5049},[31,12331,5490],{"class":184},[31,12333,12334,12336,12338,12340,12342,12344,12346,12348],{"class":33,"line":5054},[31,12335,5496],{"class":58},[31,12337,62],{"class":45},[31,12339,2568],{"class":45},[31,12341,5503],{"class":41},[31,12343,469],{"class":45},[31,12345,5508],{"class":80},[31,12347,5511],{"class":45},[31,12349,1647],{"class":45},[31,12351,12352],{"class":33,"line":5075},[31,12353,12354],{"class":184},"        \u002F\u002F 出力ファイル名\n",[31,12356,12357,12359,12361,12363,12366],{"class":33,"line":5086},[31,12358,2563],{"class":58},[31,12360,62],{"class":45},[31,12362,649],{"class":45},[31,12364,12365],{"class":80},"bundle.js",[31,12367,1686],{"class":45},[31,12369,12370],{"class":33,"line":5092},[31,12371,2017],{"class":45},[31,12373,12374,12376,12378],{"class":33,"line":5118},[31,12375,5539],{"class":58},[31,12377,62],{"class":45},[31,12379,49],{"class":41},[31,12381,12382,12384,12386,12388],{"class":33,"line":5141},[31,12383,5549],{"class":45},[31,12385,5552],{"class":259},[31,12387,993],{"class":41},[31,12389,275],{"class":45},[31,12391,12392,12394,12396,12398,12401],{"class":33,"line":5151},[31,12393,4856],{"class":58},[31,12395,62],{"class":45},[31,12397,2000],{"class":45},[31,12399,12400],{"class":80},"style.css",[31,12402,4866],{"class":45},[31,12404,12405,12407],{"class":33,"line":5168},[31,12406,5576],{"class":45},[31,12408,2653],{"class":41},[31,12410,12411],{"class":33,"line":5178},[31,12412,328],{"class":41},[31,12414,12415],{"class":33,"line":5197},[31,12416,5591],{"class":45},[13,12418,12419],{},"それでは細かい説明をします。",[8793,12421,12422],{"id":12422},"file-loaderの設定",[13,12424,12425],{},"file-loaderではjpg,png,gifの拡張子を見つけた時の処理を記述します。",[22,12427,12429],{"className":24,"code":12428,"filename":1916,"language":26,"meta":27,"style":27},"{\n    test: \u002F\\.(png|jpg|gif)$\u002Fi,\n    use: [\n        {\n        loader: 'url-loader',\n        options: {\n            limit: 8192,\n            name:'.\u002Fimgs\u002F[name].[ext]'\n        }\n        },\n    ],\n    type: 'javascript\u002Fauto' \u002F\u002F大切\n},\n",[17,12430,12431,12435,12468,12477,12481,12496,12505,12516,12529,12533,12537,12544,12560],{"__ignoreMap":27},[31,12432,12433],{"class":33,"line":34},[31,12434,275],{"class":45},[31,12436,12437,12440,12442,12444,12446,12448,12450,12452,12454,12456,12458,12460,12462,12464,12466],{"class":33,"line":52},[31,12438,12439],{"class":6150},"    test",[31,12441,62],{"class":45},[31,12443,1964],{"class":45},[31,12445,1967],{"class":41},[31,12447,993],{"class":45},[31,12449,4816],{"class":80},[31,12451,4679],{"class":45},[31,12453,4821],{"class":80},[31,12455,4679],{"class":45},[31,12457,4826],{"class":80},[31,12459,1018],{"class":45},[31,12461,1976],{"class":1006},[31,12463,1979],{"class":45},[31,12465,4840],{"class":65},[31,12467,1647],{"class":45},[31,12469,12470,12473,12475],{"class":33,"line":103},[31,12471,12472],{"class":6150},"    use",[31,12474,62],{"class":45},[31,12476,49],{"class":58},[31,12478,12479],{"class":33,"line":142},[31,12480,5089],{"class":45},[31,12482,12483,12486,12488,12490,12492,12494],{"class":33,"line":181},[31,12484,12485],{"class":58},"        loader",[31,12487,62],{"class":45},[31,12489,2000],{"class":45},[31,12491,11804],{"class":80},[31,12493,2005],{"class":45},[31,12495,1647],{"class":45},[31,12497,12498,12501,12503],{"class":33,"line":188},[31,12499,12500],{"class":58},"        options",[31,12502,62],{"class":45},[31,12504,1602],{"class":45},[31,12506,12507,12510,12512,12514],{"class":33,"line":283},[31,12508,12509],{"class":58},"            limit",[31,12511,62],{"class":45},[31,12513,12198],{"class":65},[31,12515,1647],{"class":45},[31,12517,12518,12521,12523,12525,12527],{"class":33,"line":289},[31,12519,12520],{"class":58},"            name",[31,12522,62],{"class":45},[31,12524,2005],{"class":45},[31,12526,12212],{"class":80},[31,12528,4866],{"class":45},[31,12530,12531],{"class":33,"line":295},[31,12532,2012],{"class":45},[31,12534,12535],{"class":33,"line":301},[31,12536,3225],{"class":45},[31,12538,12539,12542],{"class":33,"line":307},[31,12540,12541],{"class":58},"    ]",[31,12543,1647],{"class":45},[31,12545,12546,12549,12551,12553,12555,12557],{"class":33,"line":313},[31,12547,12548],{"class":6150},"    type",[31,12550,62],{"class":45},[31,12552,2000],{"class":45},[31,12554,12243],{"class":80},[31,12556,2005],{"class":45},[31,12558,12559],{"class":184}," \u002F\u002F大切\n",[31,12561,12562],{"class":33,"line":319},[31,12563,100],{"class":45},[13,12565,12566],{},"loaderにはurl-loaderを指定してファイルをURIに変換できるようにします。",[13,12568,12569,12570,12573],{},"distでは画像はimgsディレクトリ配下に格納させますので、",[17,12571,12572],{},"name:'.\u002Fimgs\u002F[name].[ext]'","としておきます。sass,jsの画像ファイルの参照もこのディレクトリ構成にあったパスに変更してくれます。",[13,12575,12576,12577,12580,12581,12586],{},"webpack5で従来の方法を使う場合、",[17,12578,12579],{},"type: 'javascript\u002Fauto'","を忘れないようにしてください。",[196,12582,12585],{"href":12583,"rel":12584},"https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Fasset-modules\u002F",[901],"公式ドキュメントの記述はこちら。"," webpack5にはAsset Moduleというものがすでにあり、それがfile-loader達と似たような働きを行います。もし先ほどの記述がないと二重で処理が入るなどがしておかしくなります。",[8793,12588,12589],{"id":12589},"エイリアスの設定",[22,12591,12593],{"className":24,"code":12592,"filename":1916,"language":26,"meta":27,"style":27},"{\n    resolve:{　\u002F\u002F追加\n        alias: {\n          '~': path.resolve(__dirname, 'src')\n        }\n    },\n},\n",[17,12594,12595,12599,12607,12615,12646,12650,12654],{"__ignoreMap":27},[31,12596,12597],{"class":33,"line":34},[31,12598,275],{"class":45},[31,12600,12601,12603,12605],{"class":33,"line":52},[31,12602,3129],{"class":6150},[31,12604,1127],{"class":45},[31,12606,12271],{"class":184},[31,12608,12609,12611,12613],{"class":33,"line":103},[31,12610,3183],{"class":6150},[31,12612,62],{"class":45},[31,12614,1602],{"class":45},[31,12616,12617,12619,12621,12623,12626,12628,12630,12632,12634,12636,12638,12640,12642,12644],{"class":33,"line":142},[31,12618,5405],{"class":45},[31,12620,3195],{"class":80},[31,12622,2005],{"class":45},[31,12624,12625],{"class":58},": ",[31,12627,2225],{"class":41},[31,12629,237],{"class":45},[31,12631,2575],{"class":259},[31,12633,993],{"class":58},[31,12635,5503],{"class":41},[31,12637,69],{"class":45},[31,12639,2000],{"class":45},[31,12641,1847],{"class":80},[31,12643,2005],{"class":45},[31,12645,2653],{"class":58},[31,12647,12648],{"class":33,"line":181},[31,12649,2012],{"class":45},[31,12651,12652],{"class":33,"line":188},[31,12653,2017],{"class":45},[31,12655,12656],{"class":33,"line":283},[31,12657,100],{"class":45},[13,12659,12660,12662,12663,12666],{},[17,12661,2575],{},"ではwebpackがデフォルトで持っている、名前解決に新しい設定を追加したり、変更することができます。ここでは先ほど",[17,12664,12665],{},"~\u002Fimg\u002Ftest.png","みたいな書き方をしたパスを正しいパスに変換する処理を書いています。",[13,12668,12669,12671,12672,12675,12676,12678,12679,12682,12683,12685],{},[17,12670,3195],{},"はエイリアスとして設定しました。",[17,12673,12674],{},"'~': path.resolve(__dirname, 'src')","とすることで、",[17,12677,3195],{},"を見つけたら",[17,12680,12681],{},"path.resolve(__dirname, 'src')","というに変換するんだなとwebpackが読み取ります。ちなみに",[17,12684,12681],{},"というのはこのファイル（今回のwebpack.config.js）が置かれているOS上のパスのことです。macのあるディレクトリで構築していると以下の様に変換されます。",[22,12687,12690],{"className":12688,"code":12689,"language":1864},[1862],"\u002FUsers\u002Fjun\u002FDesktop\u002Fmy_apps\u002Fwebpack_practice\u002Fsrc\n",[17,12691,12689],{"__ignoreMap":27},[13,12693,12694,12695,12697],{},"もう少しざっくり説明するとこの",[17,12696,1847],{},"ディレクトリを指しています。",[22,12699,12702],{"className":12700,"code":12701,"language":1864},[1862],".\n├── dist\n│   ├── bundle.js\n│   ├── index.html\n│   └── style.css\n├── package-lock.json\n├── package.json\n├── src　           \u002F\u002F←ここ！！ = path.resolve(__dirname, 'src')\n│   ├── imgs \n│   ├── js\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── compnent.scss\n│       ├── style.scss\n│       └── variable.scss\n├── node_modules\n└── webpack.config.js\n",[17,12703,12701],{"__ignoreMap":27},[13,12705,12706,12707,12710,12711,12713,12714,12716,12717,12719],{},"つまり、sassで",[17,12708,12709],{},"~\u002Fimgs\u002Ftest.png","とすれば",[17,12712,3195],{},"を自動に変換して",[17,12715,1847],{},"配下の",[17,12718,11465],{},"の画像にバインドされます。このように特定ディレクトリやそのパスを別名で呼ぶことをエイリアス（alias）といいます。",[13,12721,12722],{},"ではなぜエイリアスで呼ぶことがいいのでしょうか？それは階層が深くなるほど、相対パスの指定では苦労するからです。他にも相対パスで指定すると、imgsディレクトリの位置を変えたいとなった時に全ての相対パスを変更する必要があります。srcディレクトリをエイリアスにすることで、相対パスでしていなくても良くなります。画像を使いたい場合は",[22,12724,12726],{"className":11484,"code":12725,"language":11487,"meta":27,"style":27},"background-image('~\u002Fimgs\u002Ftest.png')\n",[17,12727,12728],{"__ignoreMap":27},[31,12729,12730],{"class":33,"line":34},[31,12731,12725],{},[22,12733,12735],{"className":24,"code":12734,"language":26,"meta":27,"style":27},"import img from '~\u002Fimgs\u002Ftest.png';\nconsole.log(img);\n",[17,12736,12737,12756],{"__ignoreMap":27},[31,12738,12739,12742,12745,12748,12750,12752,12754],{"class":33,"line":34},[31,12740,12741],{"class":1006},"import",[31,12743,12744],{"class":41}," img ",[31,12746,12747],{"class":1006},"from",[31,12749,2000],{"class":45},[31,12751,12709],{"class":80},[31,12753,2005],{"class":45},[31,12755,243],{"class":45},[31,12757,12758,12760,12762,12764,12767],{"class":33,"line":52},[31,12759,254],{"class":41},[31,12761,237],{"class":45},[31,12763,260],{"class":259},[31,12765,12766],{"class":41},"(img)",[31,12768,243],{"class":45},[13,12770,12771],{},"と指定すればよくなります。ディレクトリ構成の変更にも柔軟に対応できます。",[377,12773,12776,12777,12779,12780,12783],{"className":12774},[380,12775],"alert-success","\nエイリアスは干渉しなければいろいろ設定できます。今回は",[17,12778,1847],{},"直下ですが、",[17,12781,12782],{},"src\u002Fimgs","を指す画像用エイリアスなんかも作成できます。プロジェクトに合わせて設定しましょう。\n",[13,12785,12786],{},"これで画像ファイルが利用できる様になります。次はwebpack5の方法でやってみましょう。",[365,12788,12789],{"id":12789},"webpack5でのやり方",[13,12791,12792,12793,69,12795,69,12797,12799],{},"webpack5の方法では結構簡単になりました。webpack4でインストールした",[17,12794,11808],{},[17,12796,11804],{},[17,12798,11811],{},"は必要ありません。",[22,12801,12803],{"className":24,"code":12802,"filename":1916,"language":26,"meta":27,"style":27},"const MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst path = require('path');\nmodule.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: .\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: [\n            {\n                test: \u002F\\.(sa|sc|c)ss$\u002F,\n                exclude: \u002Fnode_modules\u002F,\n                use: [\n                    MiniCssExtractPlugin.loader,\n                    {\n                        loader: 'css-loader',\n                        options: { url: true }\n                    },\n                    'sass-loader',\n                ]\n            },\n            {\n                test: \u002F\\.(png|jpg|gif)$\u002Fi,\n                \u002F\u002F ここから変更。useがなくなり。typeが変更されている。\n                generator: {\n                    filename: 'imgs\u002F[name][ext][query]'\n                },\n                type: 'asset\u002Fresource'\n            },\n        ],\n    },\n    resolve:{\n        alias: {\n          '~': path.resolve(__dirname, 'src')\n        }\n    },\n    \u002F\u002F ファイルの出力設定\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        \u002F\u002F 出力ファイル名\n        filename: \"bundle.js\"\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: 'style.css'\n        })\n    ]\n};\n",[17,12804,12805,12827,12849,12857,12861,12887,12891,12903,12907,12915,12923,12927,12959,12973,12981,12991,12995,13009,13025,13029,13039,13043,13047,13051,13083,13088,13097,13111,13116,13129,13133,13139,13143,13149,13157,13185,13189,13193,13197,13205,13209,13227,13231,13243,13247,13255,13265,13277,13283,13287],{"__ignoreMap":27},[31,12806,12807,12809,12811,12813,12815,12817,12819,12821,12823,12825],{"class":33,"line":34},[31,12808,38],{"class":37},[31,12810,2189],{"class":41},[31,12812,46],{"class":45},[31,12814,2194],{"class":259},[31,12816,993],{"class":41},[31,12818,2005],{"class":45},[31,12820,2201],{"class":80},[31,12822,2005],{"class":45},[31,12824,1018],{"class":41},[31,12826,243],{"class":45},[31,12828,12829,12831,12833,12835,12837,12839,12841,12843,12845,12847],{"class":33,"line":52},[31,12830,38],{"class":37},[31,12832,2214],{"class":41},[31,12834,46],{"class":45},[31,12836,2194],{"class":259},[31,12838,993],{"class":41},[31,12840,2005],{"class":45},[31,12842,2225],{"class":80},[31,12844,2005],{"class":45},[31,12846,1018],{"class":41},[31,12848,243],{"class":45},[31,12850,12851,12853,12855],{"class":33,"line":103},[31,12852,2155],{"class":45},[31,12854,2041],{"class":45},[31,12856,1602],{"class":45},[31,12858,12859],{"class":33,"line":142},[31,12860,11909],{"class":184},[31,12862,12863,12865,12867,12869,12871,12873,12875,12877,12879,12881,12883,12885],{"class":33,"line":181},[31,12864,2048],{"class":58},[31,12866,62],{"class":45},[31,12868,11918],{"class":45},[31,12870,1847],{"class":41},[31,12872,1979],{"class":45},[31,12874,1797],{"class":41},[31,12876,1979],{"class":45},[31,12878,11615],{"class":41},[31,12880,237],{"class":45},[31,12882,1797],{"class":41},[31,12884,2005],{"class":45},[31,12886,1647],{"class":80},[31,12888,12889],{"class":33,"line":188},[31,12890,2064],{"class":41},[31,12892,12893,12895,12897,12899,12901],{"class":33,"line":283},[31,12894,11945],{"class":41},[31,12896,77],{"class":45},[31,12898,2076],{"class":80},[31,12900,77],{"class":45},[31,12902,1647],{"class":45},[31,12904,12905],{"class":33,"line":289},[31,12906,2085],{"class":41},[31,12908,12909,12911,12913],{"class":33,"line":295},[31,12910,2091],{"class":58},[31,12912,62],{"class":45},[31,12914,1602],{"class":45},[31,12916,12917,12919,12921],{"class":33,"line":301},[31,12918,2101],{"class":58},[31,12920,62],{"class":45},[31,12922,49],{"class":41},[31,12924,12925],{"class":33,"line":307},[31,12926,1635],{"class":45},[31,12928,12929,12931,12933,12935,12937,12939,12941,12943,12945,12947,12949,12951,12953,12955,12957],{"class":33,"line":313},[31,12930,11982],{"class":58},[31,12932,62],{"class":45},[31,12934,1964],{"class":45},[31,12936,1967],{"class":41},[31,12938,993],{"class":45},[31,12940,4676],{"class":80},[31,12942,4679],{"class":45},[31,12944,4682],{"class":80},[31,12946,4679],{"class":45},[31,12948,4687],{"class":80},[31,12950,1018],{"class":45},[31,12952,4692],{"class":80},[31,12954,1976],{"class":1006},[31,12956,1979],{"class":45},[31,12958,1647],{"class":45},[31,12960,12961,12963,12965,12967,12969,12971],{"class":33,"line":319},[31,12962,12015],{"class":58},[31,12964,62],{"class":45},[31,12966,1964],{"class":45},[31,12968,3703],{"class":80},[31,12970,1979],{"class":45},[31,12972,1647],{"class":45},[31,12974,12975,12977,12979],{"class":33,"line":325},[31,12976,12030],{"class":58},[31,12978,62],{"class":45},[31,12980,49],{"class":41},[31,12982,12983,12985,12987,12989],{"class":33,"line":331},[31,12984,12039],{"class":41},[31,12986,237],{"class":45},[31,12988,4730],{"class":41},[31,12990,1647],{"class":45},[31,12992,12993],{"class":33,"line":337},[31,12994,12050],{"class":45},[31,12996,12997,12999,13001,13003,13005,13007],{"class":33,"line":1752},[31,12998,12055],{"class":58},[31,13000,62],{"class":45},[31,13002,2000],{"class":45},[31,13004,4748],{"class":80},[31,13006,2005],{"class":45},[31,13008,1647],{"class":45},[31,13010,13011,13013,13015,13017,13019,13021,13023],{"class":33,"line":1758},[31,13012,12070],{"class":58},[31,13014,62],{"class":45},[31,13016,1003],{"class":45},[31,13018,4764],{"class":58},[31,13020,62],{"class":45},[31,13022,3754],{"class":2643},[31,13024,4771],{"class":45},[31,13026,13027],{"class":33,"line":1764},[31,13028,12091],{"class":45},[31,13030,13031,13033,13035,13037],{"class":33,"line":2088},[31,13032,12096],{"class":45},[31,13034,4782],{"class":80},[31,13036,2005],{"class":45},[31,13038,1647],{"class":45},[31,13040,13041],{"class":33,"line":2098},[31,13042,12107],{"class":41},[31,13044,13045],{"class":33,"line":2109},[31,13046,1696],{"class":45},[31,13048,13049],{"class":33,"line":2114},[31,13050,1635],{"class":45},[31,13052,13053,13055,13057,13059,13061,13063,13065,13067,13069,13071,13073,13075,13077,13079,13081],{"class":33,"line":2119},[31,13054,11982],{"class":58},[31,13056,62],{"class":45},[31,13058,1964],{"class":45},[31,13060,1967],{"class":41},[31,13062,993],{"class":45},[31,13064,4816],{"class":80},[31,13066,4679],{"class":45},[31,13068,4821],{"class":80},[31,13070,4679],{"class":45},[31,13072,4826],{"class":80},[31,13074,1018],{"class":45},[31,13076,1976],{"class":1006},[31,13078,1979],{"class":45},[31,13080,4840],{"class":65},[31,13082,1647],{"class":45},[31,13084,13085],{"class":33,"line":2131},[31,13086,13087],{"class":184},"                \u002F\u002F ここから変更。useがなくなり。typeが変更されている。\n",[31,13089,13090,13093,13095],{"class":33,"line":2136},[31,13091,13092],{"class":58},"                generator",[31,13094,62],{"class":45},[31,13096,1602],{"class":45},[31,13098,13099,13102,13104,13106,13109],{"class":33,"line":2141},[31,13100,13101],{"class":58},"                    filename",[31,13103,62],{"class":45},[31,13105,2000],{"class":45},[31,13107,13108],{"class":80},"imgs\u002F[name][ext][query]",[31,13110,4866],{"class":45},[31,13112,13113],{"class":33,"line":2147},[31,13114,13115],{"class":45},"                },\n",[31,13117,13118,13121,13123,13125,13127],{"class":33,"line":2152},[31,13119,13120],{"class":58},"                type",[31,13122,62],{"class":45},[31,13124,2000],{"class":45},[31,13126,4882],{"class":80},[31,13128,4866],{"class":45},[31,13130,13131],{"class":33,"line":4},[31,13132,1696],{"class":45},[31,13134,13135,13137],{"class":33,"line":2523},[31,13136,4791],{"class":41},[31,13138,1647],{"class":45},[31,13140,13141],{"class":33,"line":2528},[31,13142,2017],{"class":45},[31,13144,13145,13147],{"class":33,"line":2547},[31,13146,3129],{"class":58},[31,13148,1660],{"class":45},[31,13150,13151,13153,13155],{"class":33,"line":2560},[31,13152,3183],{"class":58},[31,13154,62],{"class":45},[31,13156,1602],{"class":45},[31,13158,13159,13161,13163,13165,13167,13169,13171,13173,13175,13177,13179,13181,13183],{"class":33,"line":2606},[31,13160,5405],{"class":45},[31,13162,3195],{"class":58},[31,13164,2005],{"class":45},[31,13166,62],{"class":45},[31,13168,3202],{"class":41},[31,13170,237],{"class":45},[31,13172,2575],{"class":259},[31,13174,2578],{"class":41},[31,13176,69],{"class":45},[31,13178,2000],{"class":45},[31,13180,1847],{"class":80},[31,13182,2005],{"class":45},[31,13184,2653],{"class":41},[31,13186,13187],{"class":33,"line":2623},[31,13188,2012],{"class":45},[31,13190,13191],{"class":33,"line":2635},[31,13192,2017],{"class":45},[31,13194,13195],{"class":33,"line":2647},[31,13196,5474],{"class":184},[31,13198,13199,13201,13203],{"class":33,"line":2656},[31,13200,5480],{"class":58},[31,13202,62],{"class":45},[31,13204,1602],{"class":45},[31,13206,13207],{"class":33,"line":2662},[31,13208,5490],{"class":184},[31,13210,13211,13213,13215,13217,13219,13221,13223,13225],{"class":33,"line":2671},[31,13212,5496],{"class":58},[31,13214,62],{"class":45},[31,13216,2568],{"class":45},[31,13218,5503],{"class":41},[31,13220,469],{"class":45},[31,13222,5508],{"class":80},[31,13224,5511],{"class":45},[31,13226,1647],{"class":45},[31,13228,13229],{"class":33,"line":2676},[31,13230,12354],{"class":184},[31,13232,13233,13235,13237,13239,13241],{"class":33,"line":4405},[31,13234,2563],{"class":58},[31,13236,62],{"class":45},[31,13238,649],{"class":45},[31,13240,12365],{"class":80},[31,13242,1686],{"class":45},[31,13244,13245],{"class":33,"line":5044},[31,13246,2017],{"class":45},[31,13248,13249,13251,13253],{"class":33,"line":5049},[31,13250,5539],{"class":58},[31,13252,62],{"class":45},[31,13254,49],{"class":41},[31,13256,13257,13259,13261,13263],{"class":33,"line":5054},[31,13258,5549],{"class":45},[31,13260,5552],{"class":259},[31,13262,993],{"class":41},[31,13264,275],{"class":45},[31,13266,13267,13269,13271,13273,13275],{"class":33,"line":5075},[31,13268,4856],{"class":58},[31,13270,62],{"class":45},[31,13272,2000],{"class":45},[31,13274,12400],{"class":80},[31,13276,4866],{"class":45},[31,13278,13279,13281],{"class":33,"line":5086},[31,13280,5576],{"class":45},[31,13282,2653],{"class":41},[31,13284,13285],{"class":33,"line":5092},[31,13286,328],{"class":41},[31,13288,13289],{"class":33,"line":5118},[31,13290,5591],{"class":45},[13,13292,13293,13294,13296,13297,13300,13301,13304],{},"変わった箇所はpng,jpg,gifの",[17,13295,1911],{},"の設定です。4の設定ではloaderを使用するために",[17,13298,13299],{},"use","で設定しました。しかし5では",[17,13302,13303],{},"type: 'asset\u002Fresource'","を使用すること4で実装していた動きを実装できます。",[13,13306,13307],{},"エイリアスなどの設定は変わりません。webpackにおける画像ファイルの設定以上となります。",[207,13309,11443],{"id":11443},[13,13311,13312],{},"これらの設定があればひとまずsassとjsを用いた作成ができそうです。ですがwebエンジニアを悩ませるこれの対策をしなくてはいけません。",[5928,13314],{":src":13315,":width":6659,":center":619},"'_mix\u002FInternet-Explorer-Logo.png'",[13,13317,13318],{},"Interner Explorer（以後IE）です。特にJSが影響を受けます。JSにはES5、ES6という2種類の記述方法があります。今回はその違いの説明は省きますが、ES6はES5より効率的な書き方ができます。しかしIEはES5の書き方しか受け付けず、ES6の書き方は構文エラーを起こして実行できないというクソ仕様です。",[13,13320,13321,13322,13324],{},"そのためES6のJSを使用するにはES5の記述に変換する必要があります。その変換をしてくれるのがBabelです。webpackには",[17,13323,5161],{},"というものがあるので、それを利用してバンドルと同時に変換（トランスコンパイル）を行いましょう。",[13,13326,13327],{},"試しにIEでは使用できないアロー関数と定数宣言を書いておきます。",[22,13329,13332],{"className":24,"code":13330,"filename":13331,"language":26,"meta":27,"style":27},"import $ from 'jquery';\nimport funcs from '.\u002Ffunctions';\nimport '~\u002Fsass\u002Fstyle.scss';\n\n$('#submmit').on('click',()=>{\n    return funcs.addNewText('#app','#inputs');\n})\n\nconst message = \"use in IE\";\n()=>{\n    console.log(message)\n}\n","main.js",[17,13333,13334,13352,13370,13383,13387,13421,13455,13461,13465,13483,13491,13507],{"__ignoreMap":27},[31,13335,13336,13338,13341,13343,13345,13348,13350],{"class":33,"line":34},[31,13337,12741],{"class":1006},[31,13339,13340],{"class":41}," $ ",[31,13342,12747],{"class":1006},[31,13344,2000],{"class":45},[31,13346,13347],{"class":80},"jquery",[31,13349,2005],{"class":45},[31,13351,243],{"class":45},[31,13353,13354,13356,13359,13361,13363,13366,13368],{"class":33,"line":52},[31,13355,12741],{"class":1006},[31,13357,13358],{"class":41}," funcs ",[31,13360,12747],{"class":1006},[31,13362,2000],{"class":45},[31,13364,13365],{"class":80},".\u002Ffunctions",[31,13367,2005],{"class":45},[31,13369,243],{"class":45},[31,13371,13372,13374,13376,13379,13381],{"class":33,"line":103},[31,13373,12741],{"class":1006},[31,13375,2000],{"class":45},[31,13377,13378],{"class":80},"~\u002Fsass\u002Fstyle.scss",[31,13380,2005],{"class":45},[31,13382,243],{"class":45},[31,13384,13385],{"class":33,"line":142},[31,13386,249],{"emptyLinePlaceholder":248},[31,13388,13389,13391,13393,13395,13398,13400,13402,13404,13407,13409,13411,13413,13415,13417,13419],{"class":33,"line":181},[31,13390,1976],{"class":259},[31,13392,993],{"class":41},[31,13394,2005],{"class":45},[31,13396,13397],{"class":80},"#submmit",[31,13399,2005],{"class":45},[31,13401,1018],{"class":41},[31,13403,237],{"class":45},[31,13405,13406],{"class":259},"on",[31,13408,993],{"class":41},[31,13410,2005],{"class":45},[31,13412,7651],{"class":80},[31,13414,2005],{"class":45},[31,13416,7656],{"class":45},[31,13418,7659],{"class":37},[31,13420,275],{"class":45},[31,13422,13423,13425,13428,13430,13433,13435,13437,13440,13442,13444,13446,13449,13451,13453],{"class":33,"line":188},[31,13424,7666],{"class":1006},[31,13426,13427],{"class":41}," funcs",[31,13429,237],{"class":45},[31,13431,13432],{"class":259},"addNewText",[31,13434,993],{"class":58},[31,13436,2005],{"class":45},[31,13438,13439],{"class":80},"#app",[31,13441,2005],{"class":45},[31,13443,69],{"class":45},[31,13445,2005],{"class":45},[31,13447,13448],{"class":80},"#inputs",[31,13450,2005],{"class":45},[31,13452,1018],{"class":58},[31,13454,243],{"class":45},[31,13456,13457,13459],{"class":33,"line":283},[31,13458,469],{"class":45},[31,13460,2653],{"class":41},[31,13462,13463],{"class":33,"line":289},[31,13464,249],{"emptyLinePlaceholder":248},[31,13466,13467,13469,13472,13474,13476,13479,13481],{"class":33,"line":295},[31,13468,38],{"class":37},[31,13470,13471],{"class":41}," message ",[31,13473,46],{"class":45},[31,13475,649],{"class":45},[31,13477,13478],{"class":80},"use in IE",[31,13480,77],{"class":45},[31,13482,243],{"class":45},[31,13484,13485,13487,13489],{"class":33,"line":301},[31,13486,7672],{"class":45},[31,13488,7659],{"class":37},[31,13490,275],{"class":45},[31,13492,13493,13496,13498,13500,13502,13505],{"class":33,"line":307},[31,13494,13495],{"class":41},"    console",[31,13497,237],{"class":45},[31,13499,260],{"class":259},[31,13501,993],{"class":58},[31,13503,13504],{"class":41},"message",[31,13506,2653],{"class":58},[31,13508,13509],{"class":33,"line":313},[31,13510,334],{"class":45},[13,13512,13513],{},"ちなみにbundle.jsは以下の通りに書かれていました。ES6の書き方がで出力されています。",[22,13515,13517],{"className":24,"code":13516,"filename":12365,"language":26,"meta":27,"style":27},"\u002F\u002F...\n\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n    console.log(message)\n\u002F\u002F...\n",[17,13518,13519,13523,13528],{"__ignoreMap":27},[31,13520,13521],{"class":33,"line":34},[31,13522,2144],{"class":184},[31,13524,13525],{"class":33,"line":52},[31,13526,13527],{"class":184},"\u002F\u002F const message = \\\"use in IE\\\";\\n()=>{\\n    console.log(message)\n",[31,13529,13530],{"class":33,"line":103},[31,13531,2144],{"class":184},[365,13533,13535],{"id":13534},"モジュールをインストールしjsのruleを設定","モジュールをインストールし、JSのruleを設定",[13,13537,13538],{},"まずはloaderをインストールします。",[22,13540,13543],{"className":13541,"code":13542,"language":1864},[1862],"npm install -D babel-loader @babel\u002Fcore @babel\u002Fpreset-env\n",[17,13544,13542],{"__ignoreMap":27},[13,13546,13547,13548,13553,13554,13557],{},"そして",[196,13549,13552],{"href":13550,"rel":13551},"https:\u002F\u002Fwebpack.js.org\u002Floaders\u002Fbabel-loader\u002F",[901],"ドキュメントのまま","ですがJSファイルに対しての",[17,13555,13556],{},"rule","を追加し、babel-loaderを適用させる様にします。",[22,13559,13562],{"className":24,"code":13560,"filename":13561,"language":26,"meta":27,"style":27},"\u002F\u002F ...\nmodule: {\n    rules: [\n        \u002F\u002F 追加\n        {\n            test: \u002F\\.m?js$\u002F,\n            exclude: \u002F(node_modules|bower_components)\u002F,\n            use: {\n                loader: 'babel-loader',\n                options: {\n                    presets: ['@babel\u002Fpreset-env']\n                }\n            }\n        },\n        {\n            test: \u002F\\.(sa|sc|c)ss$\u002F,\n            exclude: \u002Fnode_modules\u002F,\n            use: [\n                MiniCssExtractPlugin.loader,\n                {\n                    loader: 'css-loader',\n                    options: { url: true }\n                },\n                'sass-loader',\n            ]\n        },\n        \u002F\u002F ...\n    ],\n},\n\u002F\u002F ...\n","webpack.comfig.js",[17,13563,13564,13569,13578,13586,13591,13595,13617,13635,13643,13657,13665,13682,13686,13690,13694,13698,13730,13744,13752,13763,13768,13782,13798,13802,13813,13818,13822,13827,13833,13837],{"__ignoreMap":27},[31,13565,13566],{"class":33,"line":34},[31,13567,13568],{"class":184},"\u002F\u002F ...\n",[31,13570,13571,13574,13576],{"class":33,"line":52},[31,13572,13573],{"class":6150},"module",[31,13575,62],{"class":45},[31,13577,1602],{"class":45},[31,13579,13580,13582,13584],{"class":33,"line":103},[31,13581,2122],{"class":6150},[31,13583,62],{"class":45},[31,13585,49],{"class":58},[31,13587,13588],{"class":33,"line":142},[31,13589,13590],{"class":184},"        \u002F\u002F 追加\n",[31,13592,13593],{"class":33,"line":181},[31,13594,5089],{"class":45},[31,13596,13597,13599,13601,13603,13605,13607,13609,13611,13613,13615],{"class":33,"line":188},[31,13598,5095],{"class":58},[31,13600,62],{"class":45},[31,13602,1964],{"class":45},[31,13604,1967],{"class":41},[31,13606,5104],{"class":80},[31,13608,5107],{"class":45},[31,13610,1797],{"class":80},[31,13612,1976],{"class":1006},[31,13614,1979],{"class":45},[31,13616,1647],{"class":45},[31,13618,13619,13621,13623,13625,13627,13629,13631,13633],{"class":33,"line":283},[31,13620,5121],{"class":58},[31,13622,62],{"class":45},[31,13624,5126],{"class":45},[31,13626,3703],{"class":80},[31,13628,4679],{"class":45},[31,13630,5133],{"class":80},[31,13632,5136],{"class":45},[31,13634,1647],{"class":45},[31,13636,13637,13639,13641],{"class":33,"line":289},[31,13638,5144],{"class":58},[31,13640,62],{"class":45},[31,13642,1602],{"class":45},[31,13644,13645,13647,13649,13651,13653,13655],{"class":33,"line":295},[31,13646,4741],{"class":58},[31,13648,62],{"class":45},[31,13650,2000],{"class":45},[31,13652,5161],{"class":80},[31,13654,2005],{"class":45},[31,13656,1647],{"class":45},[31,13658,13659,13661,13663],{"class":33,"line":301},[31,13660,4757],{"class":58},[31,13662,62],{"class":45},[31,13664,1602],{"class":45},[31,13666,13667,13670,13672,13674,13676,13678,13680],{"class":33,"line":307},[31,13668,13669],{"class":58},"                    presets",[31,13671,62],{"class":45},[31,13673,512],{"class":58},[31,13675,2005],{"class":45},[31,13677,5190],{"class":80},[31,13679,2005],{"class":45},[31,13681,191],{"class":58},[31,13683,13684],{"class":33,"line":313},[31,13685,1691],{"class":45},[31,13687,13688],{"class":33,"line":319},[31,13689,1749],{"class":45},[31,13691,13692],{"class":33,"line":325},[31,13693,3225],{"class":45},[31,13695,13696],{"class":33,"line":331},[31,13697,5089],{"class":45},[31,13699,13700,13702,13704,13706,13708,13710,13712,13714,13716,13718,13720,13722,13724,13726,13728],{"class":33,"line":337},[31,13701,5095],{"class":58},[31,13703,62],{"class":45},[31,13705,1964],{"class":45},[31,13707,1967],{"class":41},[31,13709,993],{"class":45},[31,13711,4676],{"class":80},[31,13713,4679],{"class":45},[31,13715,4682],{"class":80},[31,13717,4679],{"class":45},[31,13719,4687],{"class":80},[31,13721,1018],{"class":45},[31,13723,4692],{"class":80},[31,13725,1976],{"class":1006},[31,13727,1979],{"class":45},[31,13729,1647],{"class":45},[31,13731,13732,13734,13736,13738,13740,13742],{"class":33,"line":1752},[31,13733,5121],{"class":58},[31,13735,62],{"class":45},[31,13737,1964],{"class":45},[31,13739,3703],{"class":80},[31,13741,1979],{"class":45},[31,13743,1647],{"class":45},[31,13745,13746,13748,13750],{"class":33,"line":1758},[31,13747,5144],{"class":58},[31,13749,62],{"class":45},[31,13751,49],{"class":58},[31,13753,13754,13757,13759,13761],{"class":33,"line":1764},[31,13755,13756],{"class":41},"                MiniCssExtractPlugin",[31,13758,237],{"class":45},[31,13760,4730],{"class":41},[31,13762,1647],{"class":45},[31,13764,13765],{"class":33,"line":2088},[31,13766,13767],{"class":45},"                {\n",[31,13769,13770,13772,13774,13776,13778,13780],{"class":33,"line":2098},[31,13771,12169],{"class":58},[31,13773,62],{"class":45},[31,13775,2000],{"class":45},[31,13777,4748],{"class":80},[31,13779,2005],{"class":45},[31,13781,1647],{"class":45},[31,13783,13784,13786,13788,13790,13792,13794,13796],{"class":33,"line":2109},[31,13785,12184],{"class":58},[31,13787,62],{"class":45},[31,13789,1003],{"class":45},[31,13791,4764],{"class":58},[31,13793,62],{"class":45},[31,13795,3754],{"class":2643},[31,13797,4771],{"class":45},[31,13799,13800],{"class":33,"line":2114},[31,13801,13115],{"class":45},[31,13803,13804,13807,13809,13811],{"class":33,"line":2119},[31,13805,13806],{"class":45},"                '",[31,13808,4782],{"class":80},[31,13810,2005],{"class":45},[31,13812,1647],{"class":45},[31,13814,13815],{"class":33,"line":2131},[31,13816,13817],{"class":58},"            ]\n",[31,13819,13820],{"class":33,"line":2136},[31,13821,3225],{"class":45},[31,13823,13824],{"class":33,"line":2141},[31,13825,13826],{"class":184},"        \u002F\u002F ...\n",[31,13828,13829,13831],{"class":33,"line":2147},[31,13830,12541],{"class":58},[31,13832,1647],{"class":45},[31,13834,13835],{"class":33,"line":2152},[31,13836,100],{"class":45},[31,13838,13839],{"class":33,"line":4},[31,13840,13568],{"class":184},[13,13842,13843],{},"これでbabelが有効になり、トランスコンパイルされます。実際に動かしてみてbundle.jsをみてみると",[22,13845,13848],{"className":13846,"code":13847,"filename":12365,"language":1864,"meta":27},[1862],"var message = \\\"use in IE\\\";\\n\\n(function () {\\n  console.log(message);\\n})\n",[17,13849,13847],{"__ignoreMap":27},[13,13851,13852],{},"このようにES5の書き方に直してくれました。",[365,13854,13855],{"id":13855},"特定のビルドだけでトランスコンパイルしたい時",[13,13857,13858,13859,13862,13863,13866],{},"ちなみに今回は数行のコードなので十分ですが、本番では大量のファイルと記述を変換するので時間がかかったりメモリを食います。",[17,13860,13861],{},"npm run watch","でもそこそこメモリを食う様になります。対策としては環境変数を用いて本番ビルドの時だけトランスコンパイルさせる様にします。簡単な例としてまず",[17,13864,13865],{},"packge.json","でnode.jsの変数をコマンド上で定義します。",[22,13868,13871],{"className":10531,"code":13869,"filename":13870,"language":10533,"meta":27,"style":27},"  \"scripts\": {\n    \"build\": \"es5=true npx webpack-cli build\",\n    \"watch\": \"npx webpack-cli watch\",\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n","package.json",[17,13872,13873,13886,13906,13926,13955],{"__ignoreMap":27},[31,13874,13875,13877,13880,13882,13884],{"class":33,"line":34},[31,13876,10544],{"class":45},[31,13878,13879],{"class":80},"scripts",[31,13881,77],{"class":45},[31,13883,12625],{"class":41},[31,13885,275],{"class":45},[31,13887,13888,13890,13893,13895,13897,13899,13902,13904],{"class":33,"line":52},[31,13889,10780],{"class":45},[31,13891,13892],{"class":37},"build",[31,13894,77],{"class":45},[31,13896,62],{"class":45},[31,13898,649],{"class":45},[31,13900,13901],{"class":80},"es5=true npx webpack-cli build",[31,13903,77],{"class":45},[31,13905,1647],{"class":45},[31,13907,13908,13910,13913,13915,13917,13919,13922,13924],{"class":33,"line":103},[31,13909,10780],{"class":45},[31,13911,13912],{"class":37},"watch",[31,13914,77],{"class":45},[31,13916,62],{"class":45},[31,13918,649],{"class":45},[31,13920,13921],{"class":80},"npx webpack-cli watch",[31,13923,77],{"class":45},[31,13925,1647],{"class":45},[31,13927,13928,13930,13933,13935,13937,13939,13942,13945,13948,13950,13953],{"class":33,"line":142},[31,13929,10780],{"class":45},[31,13931,13932],{"class":37},"test",[31,13934,77],{"class":45},[31,13936,62],{"class":45},[31,13938,649],{"class":45},[31,13940,13941],{"class":80},"echo ",[31,13943,13944],{"class":41},"\\\"",[31,13946,13947],{"class":80},"Error: no test specified",[31,13949,13944],{"class":41},[31,13951,13952],{"class":80}," && exit 1",[31,13954,1686],{"class":45},[31,13956,13957,13960],{"class":33,"line":181},[31,13958,13959],{"class":45},"  }",[31,13961,1647],{"class":41},[13,13963,13964,13965,13968,13969,13972,13973,13975],{},"今回の場合、",[17,13966,13967],{},"npm run build","した時に",[17,13970,13971],{},"es5=true","という変数が定義されます。そして",[17,13974,1916],{},"のrulesをこんな風に変更してみます。",[22,13977,13979],{"className":24,"code":13978,"filename":13561,"language":26,"meta":27,"style":27},"\u002F\u002F ...\n\u002F\u002F rulesを外で定義しておく。\nlet rules = [\n    {\n        test: \u002F\\.(sa|sc|c)ss$\u002F,\n        exclude: \u002Fnode_modules\u002F,\n        use: [\n            MiniCssExtractPlugin.loader,\n            {\n                loader: 'css-loader',\n                options: { url: true }\n            },\n            'sass-loader',\n        ]\n    },\n    {\n        test: \u002F\\.(png|jpg|gif)$\u002Fi,\n        generator: {\n            filename: 'imgs\u002F[name][ext][query]'\n        },\n        type: 'asset\u002Fresource'\n    }\n]\n\n\u002F\u002F es5がtrueならばバベルを適用\nif(process.env.es5){\n    rules.push(\n        {\n            test: \u002F\\.m?js$\u002F,\n            exclude: \u002F(node_modules|bower_components)\u002F,\n            use: {\n              loader: 'babel-loader',\n              options: {\n                presets: ['@babel\u002Fpreset-env']\n              }\n            }\n        }\n    )\n}\n\nmodule.exports = {\n    \u002F\u002Fバンドル対象のファイル\n    entry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n  \n    mode:\"development\",\n    \n    module: {\n        rules: rules\n    },\n\n    \u002F\u002F ...\n}\n",[17,13980,13981,13985,13990,14000,14004,14036,14050,14058,14068,14072,14086,14102,14106,14116,14120,14124,14128,14160,14168,14180,14184,14196,14200,14204,14208,14213,14229,14239,14243,14265,14283,14291,14305,14313,14329,14333,14337,14341,14345,14349,14353,14361,14365,14379,14383,14397,14401,14409,14417,14421,14425,14429],{"__ignoreMap":27},[31,13982,13983],{"class":33,"line":34},[31,13984,13568],{"class":184},[31,13986,13987],{"class":33,"line":52},[31,13988,13989],{"class":184},"\u002F\u002F rulesを外で定義しておく。\n",[31,13991,13992,13994,13996,13998],{"class":33,"line":103},[31,13993,1932],{"class":37},[31,13995,1935],{"class":41},[31,13997,46],{"class":45},[31,13999,49],{"class":41},[31,14001,14002],{"class":33,"line":142},[31,14003,1954],{"class":45},[31,14005,14006,14008,14010,14012,14014,14016,14018,14020,14022,14024,14026,14028,14030,14032,14034],{"class":33,"line":181},[31,14007,1959],{"class":58},[31,14009,62],{"class":45},[31,14011,1964],{"class":45},[31,14013,1967],{"class":41},[31,14015,993],{"class":45},[31,14017,4676],{"class":80},[31,14019,4679],{"class":45},[31,14021,4682],{"class":80},[31,14023,4679],{"class":45},[31,14025,4687],{"class":80},[31,14027,1018],{"class":45},[31,14029,4692],{"class":80},[31,14031,1976],{"class":1006},[31,14033,1979],{"class":45},[31,14035,1647],{"class":45},[31,14037,14038,14040,14042,14044,14046,14048],{"class":33,"line":188},[31,14039,3696],{"class":58},[31,14041,62],{"class":45},[31,14043,1964],{"class":45},[31,14045,3703],{"class":80},[31,14047,1979],{"class":45},[31,14049,1647],{"class":45},[31,14051,14052,14054,14056],{"class":33,"line":283},[31,14053,1986],{"class":58},[31,14055,62],{"class":45},[31,14057,49],{"class":41},[31,14059,14060,14062,14064,14066],{"class":33,"line":289},[31,14061,4725],{"class":41},[31,14063,237],{"class":45},[31,14065,4730],{"class":41},[31,14067,1647],{"class":45},[31,14069,14070],{"class":33,"line":295},[31,14071,1635],{"class":45},[31,14073,14074,14076,14078,14080,14082,14084],{"class":33,"line":301},[31,14075,4741],{"class":58},[31,14077,62],{"class":45},[31,14079,2000],{"class":45},[31,14081,4748],{"class":80},[31,14083,2005],{"class":45},[31,14085,1647],{"class":45},[31,14087,14088,14090,14092,14094,14096,14098,14100],{"class":33,"line":307},[31,14089,4757],{"class":58},[31,14091,62],{"class":45},[31,14093,1003],{"class":45},[31,14095,4764],{"class":58},[31,14097,62],{"class":45},[31,14099,3754],{"class":2643},[31,14101,4771],{"class":45},[31,14103,14104],{"class":33,"line":313},[31,14105,1696],{"class":45},[31,14107,14108,14110,14112,14114],{"class":33,"line":319},[31,14109,3192],{"class":45},[31,14111,4782],{"class":80},[31,14113,2005],{"class":45},[31,14115,1647],{"class":45},[31,14117,14118],{"class":33,"line":325},[31,14119,3770],{"class":41},[31,14121,14122],{"class":33,"line":331},[31,14123,2017],{"class":45},[31,14125,14126],{"class":33,"line":337},[31,14127,1954],{"class":45},[31,14129,14130,14132,14134,14136,14138,14140,14142,14144,14146,14148,14150,14152,14154,14156,14158],{"class":33,"line":1752},[31,14131,1959],{"class":58},[31,14133,62],{"class":45},[31,14135,1964],{"class":45},[31,14137,1967],{"class":41},[31,14139,993],{"class":45},[31,14141,4816],{"class":80},[31,14143,4679],{"class":45},[31,14145,4821],{"class":80},[31,14147,4679],{"class":45},[31,14149,4826],{"class":80},[31,14151,1018],{"class":45},[31,14153,1976],{"class":1006},[31,14155,1979],{"class":45},[31,14157,4840],{"class":65},[31,14159,1647],{"class":45},[31,14161,14162,14164,14166],{"class":33,"line":1758},[31,14163,4847],{"class":58},[31,14165,62],{"class":45},[31,14167,1602],{"class":45},[31,14169,14170,14172,14174,14176,14178],{"class":33,"line":1764},[31,14171,4856],{"class":58},[31,14173,62],{"class":45},[31,14175,2000],{"class":45},[31,14177,13108],{"class":80},[31,14179,4866],{"class":45},[31,14181,14182],{"class":33,"line":2088},[31,14183,3225],{"class":45},[31,14185,14186,14188,14190,14192,14194],{"class":33,"line":2098},[31,14187,4875],{"class":58},[31,14189,62],{"class":45},[31,14191,2000],{"class":45},[31,14193,4882],{"class":80},[31,14195,4866],{"class":45},[31,14197,14198],{"class":33,"line":2109},[31,14199,3775],{"class":45},[31,14201,14202],{"class":33,"line":2114},[31,14203,191],{"class":41},[31,14205,14206],{"class":33,"line":2119},[31,14207,249],{"emptyLinePlaceholder":248},[31,14209,14210],{"class":33,"line":2131},[31,14211,14212],{"class":184},"\u002F\u002F es5がtrueならばバベルを適用\n",[31,14214,14215,14217,14219,14221,14223,14225,14227],{"class":33,"line":2136},[31,14216,5057],{"class":1006},[31,14218,5060],{"class":41},[31,14220,237],{"class":45},[31,14222,5065],{"class":41},[31,14224,237],{"class":45},[31,14226,5070],{"class":41},[31,14228,275],{"class":45},[31,14230,14231,14233,14235,14237],{"class":33,"line":2141},[31,14232,2122],{"class":41},[31,14234,237],{"class":45},[31,14236,2541],{"class":259},[31,14238,2544],{"class":58},[31,14240,14241],{"class":33,"line":2147},[31,14242,5089],{"class":45},[31,14244,14245,14247,14249,14251,14253,14255,14257,14259,14261,14263],{"class":33,"line":2152},[31,14246,5095],{"class":58},[31,14248,62],{"class":45},[31,14250,1964],{"class":45},[31,14252,1967],{"class":41},[31,14254,5104],{"class":80},[31,14256,5107],{"class":45},[31,14258,1797],{"class":80},[31,14260,1976],{"class":1006},[31,14262,1979],{"class":45},[31,14264,1647],{"class":45},[31,14266,14267,14269,14271,14273,14275,14277,14279,14281],{"class":33,"line":4},[31,14268,5121],{"class":58},[31,14270,62],{"class":45},[31,14272,5126],{"class":45},[31,14274,3703],{"class":80},[31,14276,4679],{"class":45},[31,14278,5133],{"class":80},[31,14280,5136],{"class":45},[31,14282,1647],{"class":45},[31,14284,14285,14287,14289],{"class":33,"line":2523},[31,14286,5144],{"class":58},[31,14288,62],{"class":45},[31,14290,1602],{"class":45},[31,14292,14293,14295,14297,14299,14301,14303],{"class":33,"line":2528},[31,14294,5154],{"class":58},[31,14296,62],{"class":45},[31,14298,2000],{"class":45},[31,14300,5161],{"class":80},[31,14302,2005],{"class":45},[31,14304,1647],{"class":45},[31,14306,14307,14309,14311],{"class":33,"line":2547},[31,14308,5171],{"class":58},[31,14310,62],{"class":45},[31,14312,1602],{"class":45},[31,14314,14315,14317,14319,14321,14323,14325,14327],{"class":33,"line":2560},[31,14316,5181],{"class":58},[31,14318,62],{"class":45},[31,14320,512],{"class":58},[31,14322,2005],{"class":45},[31,14324,5190],{"class":80},[31,14326,2005],{"class":45},[31,14328,191],{"class":58},[31,14330,14331],{"class":33,"line":2606},[31,14332,5200],{"class":45},[31,14334,14335],{"class":33,"line":2623},[31,14336,1749],{"class":45},[31,14338,14339],{"class":33,"line":2635},[31,14340,2012],{"class":45},[31,14342,14343],{"class":33,"line":2647},[31,14344,2659],{"class":58},[31,14346,14347],{"class":33,"line":2656},[31,14348,334],{"class":45},[31,14350,14351],{"class":33,"line":2662},[31,14352,249],{"emptyLinePlaceholder":248},[31,14354,14355,14357,14359],{"class":33,"line":2671},[31,14356,2155],{"class":45},[31,14358,2041],{"class":45},[31,14360,1602],{"class":45},[31,14362,14363],{"class":33,"line":2676},[31,14364,11909],{"class":184},[31,14366,14367,14369,14371,14373,14375,14377],{"class":33,"line":4405},[31,14368,2048],{"class":58},[31,14370,62],{"class":45},[31,14372,2000],{"class":45},[31,14374,2055],{"class":80},[31,14376,2005],{"class":45},[31,14378,1647],{"class":45},[31,14380,14381],{"class":33,"line":5044},[31,14382,2064],{"class":41},[31,14384,14385,14387,14389,14391,14393,14395],{"class":33,"line":5049},[31,14386,2069],{"class":58},[31,14388,62],{"class":45},[31,14390,77],{"class":45},[31,14392,2076],{"class":80},[31,14394,77],{"class":45},[31,14396,1647],{"class":45},[31,14398,14399],{"class":33,"line":5054},[31,14400,2085],{"class":41},[31,14402,14403,14405,14407],{"class":33,"line":5075},[31,14404,2091],{"class":58},[31,14406,62],{"class":45},[31,14408,1602],{"class":45},[31,14410,14411,14413,14415],{"class":33,"line":5086},[31,14412,2101],{"class":58},[31,14414,62],{"class":45},[31,14416,2106],{"class":41},[31,14418,14419],{"class":33,"line":5092},[31,14420,2017],{"class":45},[31,14422,14423],{"class":33,"line":5118},[31,14424,249],{"emptyLinePlaceholder":248},[31,14426,14427],{"class":33,"line":5141},[31,14428,185],{"class":184},[31,14430,14431],{"class":33,"line":5151},[31,14432,334],{"class":45},[13,14434,14435,14437,14438,14440,14441,14444,14445,14447,14448,14450,14451,14453,14454,14456],{},[17,14436,1911],{},"を",[17,14439,2155],{},"の外に出しておいて、",[17,14442,14443],{},"process.env.es5","の値によって",[17,14446,1911],{},"を変更できる様にします。これで",[17,14449,1911],{},"の分岐ができました。",[17,14452,13892],{},"の時だけBabelが使用され、",[17,14455,13912],{},"の時はBabelが無しになります。この辺はプロジェクトごとに好きに設定してみてください。",[207,14458,11446],{"id":11446},[13,14460,14461],{},"最後に複数のバンドルファイルを出力する方法を解説します。今は参照されているアセットファイルを全てbundle.js、bundle.cssにしています。しかしプロジェクトによっては",[1817,14463,14464,14467],{},[1820,14465,14466],{},"一般ユーザーが閲覧するページのjs\u002Fcss",[1820,14468,14469],{},"管理画面など特定のユーザーのみが使用するページのjs\u002Fcss",[13,14471,14472,14473,14476],{},"など複数パターンのファイルを出力したい時があります。例えば私はよく管理画面のUIはbootstrapとvueを使って構築してしまいます。そして一般画面はせいぜいjqueryを使用して200行にも満たないこともあります。管理画面はbootstrap合わせていろんなライブラリを使うため本番ビルドしてもかなりファイル容量を食います。一方、一般画面はそれほど大きくなりません。そんな時に全て一つの",[17,14474,14475],{},"bundle.js\u002Fcss","にまとめては一般画面に重いファイルを配ってしまいますし、場合によっては管理画面の構築コードが漏れてしまうのでよろしくありません。",[365,14478,14479],{"id":14479},"作成目標とsrcを作成",[13,14481,14482,14483,69,14486,1876,14489,69,14491,14494],{},"このような状況もよくあるので複数のバンドルファイルを出力できる様にしましょう。上記の様な状況として管理画面の",[17,14484,14485],{},"admin.js",[17,14487,14488],{},"admin.css",[17,14490,13331],{},[17,14492,14493],{},"main.css","が必要になったとしましょう。",[22,14496,14499],{"className":14497,"code":14498,"language":1864},[1862],".\n├── dist\n│   ├── admin.css   \u002F\u002F 作成目標\n│   ├── admin.js    \u002F\u002F 作成目標\n│   ├── imgs\n│   │   └── test.png\n│   ├── index.html\n│   ├── main.css    \u002F\u002F 作成目標\n│   └── main.js     \u002F\u002F 作成目標\n├── package-lock.json\n├── package.json\n├── node_modules\n├── src\n│   ├── imgs\n│   │   ├── sample.png\n│   │   └── test.png\n│   ├── js\n│   │   ├── admin.js    \u002F\u002F 作成\n│   │   ├── functions.js\n│   │   └── main.js\n│   └── sass\n│       ├── admin.scss  \u002F\u002F 作成\n│       ├── compnent.scss\n│       ├── style.scss\n│       ├── utility\n│       └── variable.scss\n└── webpack.config.js\n",[17,14500,14498],{"__ignoreMap":27},[13,14502,14503,14504,69,14506,14509],{},"srcにエントリーとなる",[17,14505,14485],{},[17,14507,14508],{},"admin.scss","を作成します。中身は適当にadminのみで使われている記述にしてみてください。ここでは省きます。",[365,14511,14513],{"id":14512},"webpackconfigjsを設定","webpack.config.jsを設定",[13,14515,13547,14516,3106,14518,69,14521,69,14524,14526],{},[17,14517,1916],{},[17,14519,14520],{},"entry",[17,14522,14523],{},"output",[17,14525,2536],{},"を以下の様に変更します。",[22,14528,14530],{"className":24,"code":14529,"filename":1916,"language":26,"meta":27,"style":27},"module.exports = {\n    entry:{\n        main:'.\u002Fsrc\u002Fjs\u002Fmain.js',\n        admin:'.\u002Fsrc\u002Fjs\u002Fadmin.js'\n    },\n\n    \u002F\u002F 省略\n\n    output: {\n        \u002F\u002F  出力ファイルのディレクトリ名\n        path: `${__dirname}\u002Fdist`,\n        \u002F\u002F 出力ファイル名\n        filename: \"[name].js\"\n    },\n    plugins: [\n        new MiniCssExtractPlugin({\n            filename: '[name].css'\n        })\n    ]\n};\n",[17,14531,14532,14540,14546,14561,14575,14579,14583,14588,14592,14600,14604,14622,14626,14638,14642,14650,14660,14672,14678,14682],{"__ignoreMap":27},[31,14533,14534,14536,14538],{"class":33,"line":34},[31,14535,2155],{"class":45},[31,14537,2041],{"class":45},[31,14539,1602],{"class":45},[31,14541,14542,14544],{"class":33,"line":52},[31,14543,2048],{"class":58},[31,14545,1660],{"class":45},[31,14547,14548,14551,14553,14555,14557,14559],{"class":33,"line":103},[31,14549,14550],{"class":58},"        main",[31,14552,62],{"class":45},[31,14554,2005],{"class":45},[31,14556,2055],{"class":80},[31,14558,2005],{"class":45},[31,14560,1647],{"class":45},[31,14562,14563,14566,14568,14570,14573],{"class":33,"line":142},[31,14564,14565],{"class":58},"        admin",[31,14567,62],{"class":45},[31,14569,2005],{"class":45},[31,14571,14572],{"class":80},".\u002Fsrc\u002Fjs\u002Fadmin.js",[31,14574,4866],{"class":45},[31,14576,14577],{"class":33,"line":181},[31,14578,2017],{"class":45},[31,14580,14581],{"class":33,"line":188},[31,14582,249],{"emptyLinePlaceholder":248},[31,14584,14585],{"class":33,"line":283},[31,14586,14587],{"class":184},"    \u002F\u002F 省略\n",[31,14589,14590],{"class":33,"line":289},[31,14591,249],{"emptyLinePlaceholder":248},[31,14593,14594,14596,14598],{"class":33,"line":295},[31,14595,5480],{"class":58},[31,14597,62],{"class":45},[31,14599,1602],{"class":45},[31,14601,14602],{"class":33,"line":301},[31,14603,5490],{"class":184},[31,14605,14606,14608,14610,14612,14614,14616,14618,14620],{"class":33,"line":307},[31,14607,5496],{"class":58},[31,14609,62],{"class":45},[31,14611,2568],{"class":45},[31,14613,5503],{"class":41},[31,14615,469],{"class":45},[31,14617,5508],{"class":80},[31,14619,5511],{"class":45},[31,14621,1647],{"class":45},[31,14623,14624],{"class":33,"line":313},[31,14625,12354],{"class":184},[31,14627,14628,14630,14632,14634,14636],{"class":33,"line":319},[31,14629,2563],{"class":58},[31,14631,62],{"class":45},[31,14633,649],{"class":45},[31,14635,5228],{"class":80},[31,14637,1686],{"class":45},[31,14639,14640],{"class":33,"line":325},[31,14641,2017],{"class":45},[31,14643,14644,14646,14648],{"class":33,"line":331},[31,14645,5539],{"class":58},[31,14647,62],{"class":45},[31,14649,49],{"class":41},[31,14651,14652,14654,14656,14658],{"class":33,"line":337},[31,14653,5549],{"class":45},[31,14655,5552],{"class":259},[31,14657,993],{"class":41},[31,14659,275],{"class":45},[31,14661,14662,14664,14666,14668,14670],{"class":33,"line":1752},[31,14663,4856],{"class":58},[31,14665,62],{"class":45},[31,14667,2000],{"class":45},[31,14669,5568],{"class":80},[31,14671,4866],{"class":45},[31,14673,14674,14676],{"class":33,"line":1758},[31,14675,5576],{"class":45},[31,14677,2653],{"class":41},[31,14679,14680],{"class":33,"line":1764},[31,14681,328],{"class":41},[31,14683,14684],{"class":33,"line":2088},[31,14685,5591],{"class":45},[13,14687,14688,14689,14691],{},"注目して欲しいのは",[17,14690,14520],{},"です。",[22,14693,14695],{"className":24,"code":14694,"language":26,"meta":27,"style":27},"\u002F\u002F 変更前\nentry: '.\u002Fsrc\u002Fjs\u002Fmain.js',\n\n\u002F\u002F 変更後\nentry:{\n    main:'.\u002Fsrc\u002Fjs\u002Fmain.js',\n    admin:'.\u002Fsrc\u002Fjs\u002Fadmin.js'\n},\n",[17,14696,14697,14702,14716,14720,14725,14731,14746,14759],{"__ignoreMap":27},[31,14698,14699],{"class":33,"line":34},[31,14700,14701],{"class":184},"\u002F\u002F 変更前\n",[31,14703,14704,14706,14708,14710,14712,14714],{"class":33,"line":52},[31,14705,14520],{"class":6150},[31,14707,62],{"class":45},[31,14709,2000],{"class":45},[31,14711,2055],{"class":80},[31,14713,2005],{"class":45},[31,14715,1647],{"class":45},[31,14717,14718],{"class":33,"line":103},[31,14719,249],{"emptyLinePlaceholder":248},[31,14721,14722],{"class":33,"line":142},[31,14723,14724],{"class":184},"\u002F\u002F 変更後\n",[31,14726,14727,14729],{"class":33,"line":181},[31,14728,14520],{"class":6150},[31,14730,1660],{"class":45},[31,14732,14733,14736,14738,14740,14742,14744],{"class":33,"line":188},[31,14734,14735],{"class":6150},"    main",[31,14737,62],{"class":45},[31,14739,2005],{"class":45},[31,14741,2055],{"class":80},[31,14743,2005],{"class":45},[31,14745,1647],{"class":45},[31,14747,14748,14751,14753,14755,14757],{"class":33,"line":283},[31,14749,14750],{"class":6150},"    admin",[31,14752,62],{"class":45},[31,14754,2005],{"class":45},[31,14756,14572],{"class":80},[31,14758,4866],{"class":45},[31,14760,14761],{"class":33,"line":289},[31,14762,100],{"class":45},[13,14764,14765,14766,14769,14770,14772],{},"今まではそれぞれのファイルを直接配列で指定してましたが、変更後ではオブジェクトにしています。オブジェクトのキーは",[17,14767,14768],{},"[name]","として利用できます。例えば、",[17,14771,14523],{},"でこの様に利用します。",[22,14774,14776],{"className":24,"code":14775,"language":26,"meta":27,"style":27},"output: {\n    \u002F\u002F  出力ファイルのディレクトリ名\n    path: `${__dirname}\u002Fdist`,\n    \u002F\u002F 出力ファイル名\n    filename: \"[name].js\"\n},\nplugins: [\n    new MiniCssExtractPlugin({\n        filename: '[name].css'\n    })\n]\n",[17,14777,14778,14786,14791,14810,14815,14828,14832,14840,14851,14863,14869],{"__ignoreMap":27},[31,14779,14780,14782,14784],{"class":33,"line":34},[31,14781,14523],{"class":6150},[31,14783,62],{"class":45},[31,14785,1602],{"class":45},[31,14787,14788],{"class":33,"line":52},[31,14789,14790],{"class":184},"    \u002F\u002F  出力ファイルのディレクトリ名\n",[31,14792,14793,14796,14798,14800,14802,14804,14806,14808],{"class":33,"line":103},[31,14794,14795],{"class":6150},"    path",[31,14797,62],{"class":45},[31,14799,2568],{"class":45},[31,14801,5503],{"class":41},[31,14803,469],{"class":45},[31,14805,5508],{"class":80},[31,14807,5511],{"class":45},[31,14809,1647],{"class":45},[31,14811,14812],{"class":33,"line":142},[31,14813,14814],{"class":184},"    \u002F\u002F 出力ファイル名\n",[31,14816,14817,14820,14822,14824,14826],{"class":33,"line":181},[31,14818,14819],{"class":6150},"    filename",[31,14821,62],{"class":45},[31,14823,649],{"class":45},[31,14825,5228],{"class":80},[31,14827,1686],{"class":45},[31,14829,14830],{"class":33,"line":188},[31,14831,100],{"class":45},[31,14833,14834,14836,14838],{"class":33,"line":283},[31,14835,2536],{"class":6150},[31,14837,62],{"class":45},[31,14839,49],{"class":41},[31,14841,14842,14845,14847,14849],{"class":33,"line":289},[31,14843,14844],{"class":45},"    new",[31,14846,5552],{"class":259},[31,14848,993],{"class":41},[31,14850,275],{"class":45},[31,14852,14853,14855,14857,14859,14861],{"class":33,"line":295},[31,14854,2563],{"class":58},[31,14856,62],{"class":45},[31,14858,2000],{"class":45},[31,14860,5568],{"class":80},[31,14862,4866],{"class":45},[31,14864,14865,14867],{"class":33,"line":301},[31,14866,11321],{"class":45},[31,14868,2653],{"class":41},[31,14870,14871],{"class":33,"line":307},[31,14872,191],{"class":41},[13,14874,14875,14876,69,14878,14880,14881,11805,14883,14885,14886,11805,14888,11805,14890,11805,14892,14894],{},"変更前は全て",[17,14877,12365],{},[17,14879,12400],{},"と一定の名前でしたが、こうするとオブジェクトのキー名に応じて、",[17,14882,13331],{},[17,14884,14485],{},"など作成されます。実際にビルドをしてみると、",[17,14887,13331],{},[17,14889,14485],{},[17,14891,14493],{},[17,14893,14488],{},"が作成されました。",[207,14896,4544],{"id":4543},[13,14898,14899],{},"以上が今回の内容です。画像・Babelそして複数ファイルパターンができればもうプロジェクトで十分利用可能です。次回はhtmlをsrc配下で利用できるようにします。src配下のみで作業してコマンド打って完成したファイルがdistに出せる様にします。そしてまとめとしてこれらの構成とpugを使用したプロトタイプページの作成をしてみます。",[1771,14901,14902],{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}",{"title":27,"searchDepth":103,"depth":103,"links":14904},[14905,14915,14919,14923],{"id":11452,"depth":52,"text":11452,"children":14906},[14907,14908,14909,14914],{"id":11455,"depth":103,"text":11455},{"id":11798,"depth":103,"text":11798},{"id":11825,"depth":103,"text":11825,"children":14910},[14911,14912,14913],{"id":11828,"depth":142,"text":11828},{"id":12422,"depth":142,"text":12422},{"id":12589,"depth":142,"text":12589},{"id":12789,"depth":103,"text":12789},{"id":11443,"depth":52,"text":11443,"children":14916},[14917,14918],{"id":13534,"depth":103,"text":13535},{"id":13855,"depth":103,"text":13855},{"id":11446,"depth":52,"text":11446,"children":14920},[14921,14922],{"id":14479,"depth":103,"text":14479},{"id":14512,"depth":103,"text":14513},{"id":4543,"depth":52,"text":4544},[5906],"2021-06-06","Babel、画像の処理と複数バンドル",{},"\u002Fseries\u002Fwell-study-webpack-2",{"title":1811,"description":14926},"series\u002Fwell-study-webpack-2",[1797,5916],"HmfkSL8RL8-q0C9UnXt7ExxZBfF5TgF206dj6ahXmq8",{"id":14934,"title":14935,"body":14936,"category":16562,"createdAt":16563,"description":16564,"extension":1790,"index":1791,"meta":16565,"navigation":248,"path":16566,"publish":248,"seo":16567,"series":1791,"seriesTitle":1791,"stem":16568,"tag":16569,"thumbnail":16572,"updatedAt":1791,"__hash__":16573},"articles\u002Farticles\u002Fimplement-recaptcha.md","reCAPTCHAのフロントエンド実装とバックエンド実装（PHP・Laravel）をスクラッチで行う方法",{"type":10,"value":14937,"toc":16548},[14938,14941,14944,14947,14950,14954,14957,14960,14963,14966,14970,14979,14982,14989,14992,14995,15006,15009,15012,15178,15181,15192,15201,15205,15208,15444,15457,15460,15463,15933,15944,15966,15969,15972,15975,15978,15989,15992,16176,16187,16211,16227,16230,16268,16279,16282,16285,16330,16337,16340,16348,16373,16381,16390,16398,16404,16412,16415,16533,16536,16539,16542,16545],[13,14939,14940],{},"こんにちはjunです。皆さんはフォームを作成する時にBot・スパム対策を行っていますか？フォームというのは少し知識があれば、簡単にbot的に送信することができます。",[13,14942,14943],{},"curlでPOSTすることもあれば、javascriptを実行して機械的にフォームを送信することがきるので、スパム（嫌がらせ）やサーバーへの過剰負荷の原因となります。",[13,14945,14946],{},"この様な機械的な操作を防ぐために、よく「ロボットではありません」「画像に表示されている文字を入力してください」みたいなbotでは簡単に処理できないものを用意します。",[13,14948,14949],{},"しかしこの様な機能は自分で実装するのは大変です。そんな時に便利なのがreCAPTCHAです。",[207,14951,14953],{"id":14952},"recaptchaとは","reCAPTCHAとは？",[13,14955,14956],{},"reCAPTCHAはGoogleが無料で提供しているBot対策ツールです。現在v3までリリースされており、v2は画像を選択させたりチェックを入れるといったユーザーのアクションでbotかどうかを検証します。v3はその様なアクションを必要とせず、必要なスクリプトを入れるだけで検証ができます。これからの実装の場合はv3を入れることをお勧めします。",[207,14958,14959],{"id":14959},"実装内容",[13,14961,14962],{},"今回の解説ではv3でのフロントエンドの実装とバックエンドの実装を解説していきます。そして利用するreCAPTCHAはエンタープライズではなく、無料のものを利用します。バックエンドにはLaravel6(php)を用いて説明します。バックエンドは基本的にやることはどの言語・フレームワークでも特に差異はありません。reCAPTCHAを使う時にライブラリを使用することもありますが、いうてそれほど難しくないので今回はライブラリを使用しないスクラッチで実装します。",[13,14964,14965],{},"それでは解説を始めます。",[207,14967,14969],{"id":14968},"recaptchaのキーを手に入れる","reCAPTCHAのキーを手に入れる",[13,14971,14972,14973,14978],{},"reCAPTCHAはGooglenのAPIを使用することでbotか検証を行います。reCAPTCHAを利用するためにGoogleアカウントとreCAPTCHAのキーを登録します。",[196,14974,14977],{"href":14975,"rel":14976},"https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fadmin\u002Fcreate",[901],"reCAPTCHAの登録ページ","にて保護対象のドメインを設定します。",[5928,14980],{":src":14981,":width":5931},"'_mix\u002Fsch-2021-05-21 23.16.06.png'",[13,14983,14984,14985,14988],{},"ラベルは管理用の名前、タイプはv3を使用します。保護対象のドメインを登録します。ドメインは複数設定できます。この時、本番のドメインと",[17,14986,14987],{},"localhost","を登録しておくと開発・本番で利用できます。",[13,14990,14991],{},"設定を終わって「保存」しますと、キーが表示されますので保存しておきます。",[5928,14993],{":src":14994,":width":5931},"'_mix\u002Frecaptcha-key.jpeg'",[13,14996,14997,15001,15002,15005],{},[14998,14999,15000],"em",{},"このサイトキーは、ユーザー表示するHTMLコードで利用します。"," という方のキーはタグで利用し、正直みられても問題ありません。フロント側のキーはドメインと合わせて保護対処のサイトであるかのチェックのためにあるだけだからです。逆にバックの方である ",[14998,15003,15004],{},"このサイトキーは、サイトとreCAPTCHA間の通信で利用します。"," は漏れてはいけません。",[207,15007,15008],{"id":15008},"フロントエンドの実装",[13,15010,15011],{},"それではフロントエンドを実装していきます。かなり簡略化して書いています。以下の様なフォームがあったとしましょう。",[22,15013,15015],{"className":2998,"code":15014,"language":1871,"meta":27,"style":27},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n      \u003C!---省略-->\n    \u003C\u002Fhead>\n\n    \u003Cbody>\n        \u003Cform method=\"post\">\n            \u003Cinput type=\"text\" name=\"test\" value=\"\">\n            \u003Cinput type=\"submit\" value=\"送信\">\n        \u003C\u002Fform>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[17,15016,15017,15027,15035,15043,15048,15056,15060,15068,15089,15124,15154,15162,15170],{"__ignoreMap":27},[31,15018,15019,15021,15023,15025],{"class":33,"line":34},[31,15020,7039],{"class":45},[31,15022,7042],{"class":58},[31,15024,4224],{"class":37},[31,15026,5990],{"class":45},[31,15028,15029,15031,15033],{"class":33,"line":52},[31,15030,3011],{"class":45},[31,15032,1871],{"class":58},[31,15034,5990],{"class":45},[31,15036,15037,15039,15041],{"class":33,"line":103},[31,15038,5995],{"class":45},[31,15040,7061],{"class":58},[31,15042,5990],{"class":45},[31,15044,15045],{"class":33,"line":142},[31,15046,15047],{"class":184},"      \u003C!---省略-->\n",[31,15049,15050,15052,15054],{"class":33,"line":181},[31,15051,6046],{"class":45},[31,15053,7061],{"class":58},[31,15055,5990],{"class":45},[31,15057,15058],{"class":33,"line":188},[31,15059,249],{"emptyLinePlaceholder":248},[31,15061,15062,15064,15066],{"class":33,"line":283},[31,15063,5995],{"class":45},[31,15065,2616],{"class":58},[31,15067,5990],{"class":45},[31,15069,15070,15072,15075,15078,15080,15082,15085,15087],{"class":33,"line":289},[31,15071,6015],{"class":45},[31,15073,15074],{"class":58},"form",[31,15076,15077],{"class":37}," method",[31,15079,46],{"class":45},[31,15081,77],{"class":45},[31,15083,15084],{"class":80},"post",[31,15086,77],{"class":45},[31,15088,5990],{"class":45},[31,15090,15091,15093,15095,15097,15099,15101,15103,15105,15108,15110,15112,15114,15116,15118,15120,15122],{"class":33,"line":295},[31,15092,7176],{"class":45},[31,15094,11655],{"class":58},[31,15096,7279],{"class":37},[31,15098,46],{"class":45},[31,15100,77],{"class":45},[31,15102,1864],{"class":80},[31,15104,77],{"class":45},[31,15106,15107],{"class":37}," name",[31,15109,46],{"class":45},[31,15111,77],{"class":45},[31,15113,13932],{"class":80},[31,15115,77],{"class":45},[31,15117,11668],{"class":37},[31,15119,46],{"class":45},[31,15121,11673],{"class":45},[31,15123,5990],{"class":45},[31,15125,15126,15128,15130,15132,15134,15136,15139,15141,15143,15145,15147,15150,15152],{"class":33,"line":301},[31,15127,7176],{"class":45},[31,15129,11655],{"class":58},[31,15131,7279],{"class":37},[31,15133,46],{"class":45},[31,15135,77],{"class":45},[31,15137,15138],{"class":80},"submit",[31,15140,77],{"class":45},[31,15142,11668],{"class":37},[31,15144,46],{"class":45},[31,15146,77],{"class":45},[31,15148,15149],{"class":80},"送信",[31,15151,77],{"class":45},[31,15153,5990],{"class":45},[31,15155,15156,15158,15160],{"class":33,"line":307},[31,15157,7246],{"class":45},[31,15159,15074],{"class":58},[31,15161,5990],{"class":45},[31,15163,15164,15166,15168],{"class":33,"line":313},[31,15165,6046],{"class":45},[31,15167,2616],{"class":58},[31,15169,5990],{"class":45},[31,15171,15172,15174,15176],{"class":33,"line":319},[31,15173,6114],{"class":45},[31,15175,1871],{"class":58},[31,15177,5990],{"class":45},[13,15179,15180],{},"reCAPTCHAのフロントエンド 実装では",[1817,15182,15183,15186,15189],{},[1820,15184,15185],{},"reCAPTCHAのソースを読み込む",[1820,15187,15188],{},"送信ボタンを押したらreCAPTCHAと通信してトークンを手に入れるスクリプトを書く",[1820,15190,15191],{},"reCAPTCHAのトークンをフォーム内容と一緒にバックエンドに送信する。",[13,15193,15194,15195,15200],{},"以上の実装を必要とします。",[196,15196,15199],{"href":15197,"rel":15198},"https:\u002F\u002Fdevelopers.google.com\u002Frecaptcha\u002Fdocs\u002Fv3#programmatically_invoke_the_challenge",[901],"本家のドキュメント","を参考にして進めていきましょう。",[365,15202,15204],{"id":15203},"recaptchaのスクリプト読み込みとhtml調整","reCAPTCHAのスクリプト読み込みとHTML調整",[13,15206,15207],{},"まずはreCAPTCHAを有効にするためのスクリプトを読み込みます。そして一部フォームを編集します。",[22,15209,15211],{"className":2998,"code":15210,"language":1871,"meta":27,"style":27},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n      \u003C!---省略-->\n        \u003Cscript src=\"https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fapi.js?render=YOUR_FRONT_KEY\">\u003C\u002Fscript>\u003C!---追加-->\n    \u003C\u002Fhead>\n\n    \u003Cbody>\n        \u003Cform method=\"post\" id=\"test-form\">\u003C!---追加-->\n            \u003Cinput type=\"text\" name=\"test\" value=\"\">\n            \u003Cinput type=\"hidden\" name=\"recaptcha\" value=\"\">\u003C!---追加-->\n            \u003Cinput type=\"submit\" value=\"送信\">\n        \u003C\u002Fform>\n    \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[17,15212,15213,15223,15231,15239,15243,15269,15277,15281,15289,15320,15354,15392,15420,15428,15436],{"__ignoreMap":27},[31,15214,15215,15217,15219,15221],{"class":33,"line":34},[31,15216,7039],{"class":45},[31,15218,7042],{"class":58},[31,15220,4224],{"class":37},[31,15222,5990],{"class":45},[31,15224,15225,15227,15229],{"class":33,"line":52},[31,15226,3011],{"class":45},[31,15228,1871],{"class":58},[31,15230,5990],{"class":45},[31,15232,15233,15235,15237],{"class":33,"line":103},[31,15234,5995],{"class":45},[31,15236,7061],{"class":58},[31,15238,5990],{"class":45},[31,15240,15241],{"class":33,"line":142},[31,15242,15047],{"class":184},[31,15244,15245,15247,15249,15251,15253,15255,15258,15260,15262,15264,15266],{"class":33,"line":181},[31,15246,6015],{"class":45},[31,15248,7265],{"class":58},[31,15250,3017],{"class":37},[31,15252,46],{"class":45},[31,15254,77],{"class":45},[31,15256,15257],{"class":80},"https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fapi.js?render=YOUR_FRONT_KEY",[31,15259,77],{"class":45},[31,15261,6777],{"class":45},[31,15263,7265],{"class":58},[31,15265,411],{"class":45},[31,15267,15268],{"class":184},"\u003C!---追加-->\n",[31,15270,15271,15273,15275],{"class":33,"line":188},[31,15272,6046],{"class":45},[31,15274,7061],{"class":58},[31,15276,5990],{"class":45},[31,15278,15279],{"class":33,"line":283},[31,15280,249],{"emptyLinePlaceholder":248},[31,15282,15283,15285,15287],{"class":33,"line":289},[31,15284,5995],{"class":45},[31,15286,2616],{"class":58},[31,15288,5990],{"class":45},[31,15290,15291,15293,15295,15297,15299,15301,15303,15305,15307,15309,15311,15314,15316,15318],{"class":33,"line":295},[31,15292,6015],{"class":45},[31,15294,15074],{"class":58},[31,15296,15077],{"class":37},[31,15298,46],{"class":45},[31,15300,77],{"class":45},[31,15302,15084],{"class":80},[31,15304,77],{"class":45},[31,15306,5978],{"class":37},[31,15308,46],{"class":45},[31,15310,77],{"class":45},[31,15312,15313],{"class":80},"test-form",[31,15315,77],{"class":45},[31,15317,411],{"class":45},[31,15319,15268],{"class":184},[31,15321,15322,15324,15326,15328,15330,15332,15334,15336,15338,15340,15342,15344,15346,15348,15350,15352],{"class":33,"line":301},[31,15323,7176],{"class":45},[31,15325,11655],{"class":58},[31,15327,7279],{"class":37},[31,15329,46],{"class":45},[31,15331,77],{"class":45},[31,15333,1864],{"class":80},[31,15335,77],{"class":45},[31,15337,15107],{"class":37},[31,15339,46],{"class":45},[31,15341,77],{"class":45},[31,15343,13932],{"class":80},[31,15345,77],{"class":45},[31,15347,11668],{"class":37},[31,15349,46],{"class":45},[31,15351,11673],{"class":45},[31,15353,5990],{"class":45},[31,15355,15356,15358,15360,15362,15364,15366,15369,15371,15373,15375,15377,15380,15382,15384,15386,15388,15390],{"class":33,"line":307},[31,15357,7176],{"class":45},[31,15359,11655],{"class":58},[31,15361,7279],{"class":37},[31,15363,46],{"class":45},[31,15365,77],{"class":45},[31,15367,15368],{"class":80},"hidden",[31,15370,77],{"class":45},[31,15372,15107],{"class":37},[31,15374,46],{"class":45},[31,15376,77],{"class":45},[31,15378,15379],{"class":80},"recaptcha",[31,15381,77],{"class":45},[31,15383,11668],{"class":37},[31,15385,46],{"class":45},[31,15387,11673],{"class":45},[31,15389,411],{"class":45},[31,15391,15268],{"class":184},[31,15393,15394,15396,15398,15400,15402,15404,15406,15408,15410,15412,15414,15416,15418],{"class":33,"line":313},[31,15395,7176],{"class":45},[31,15397,11655],{"class":58},[31,15399,7279],{"class":37},[31,15401,46],{"class":45},[31,15403,77],{"class":45},[31,15405,15138],{"class":80},[31,15407,77],{"class":45},[31,15409,11668],{"class":37},[31,15411,46],{"class":45},[31,15413,77],{"class":45},[31,15415,15149],{"class":80},[31,15417,77],{"class":45},[31,15419,5990],{"class":45},[31,15421,15422,15424,15426],{"class":33,"line":319},[31,15423,7246],{"class":45},[31,15425,15074],{"class":58},[31,15427,5990],{"class":45},[31,15429,15430,15432,15434],{"class":33,"line":325},[31,15431,6046],{"class":45},[31,15433,2616],{"class":58},[31,15435,5990],{"class":45},[31,15437,15438,15440,15442],{"class":33,"line":331},[31,15439,6114],{"class":45},[31,15441,1871],{"class":58},[31,15443,5990],{"class":45},[13,15445,15446,3106,15449,15452,15453,15456],{},[17,15447,15448],{},"\u003Cscript src=\"https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fapi.js?render=YOUR_FRONT_KEY\">\u003C\u002Fscript>",[17,15450,15451],{},"YOUR_FRONT_KEY","に先ほど取得したフロント用のキーを入れます。\n",[17,15454,15455],{},"\u003Cinput type=\"hidden\" name=\"recaptcha\" value=\"\">","にはreCAPTCHAのトークンを挿入してバックエンドに送ります。HTMLフォームであればこの様にしますが、axiosなどの場合はトークンの値をjsを用いて送信するので、このHTMLは要りません。",[365,15458,15459],{"id":15459},"トークンを取得するスクリプトを記述",[13,15461,15462],{},"「送信ボタン」を押した時にreCAPTCHAにAPIを飛ばしてbotかどうかの判定用トークンを取得します。以下の様なスクリプトを記述します。",[22,15464,15466],{"className":2998,"code":15465,"language":1871,"meta":27,"style":27},"\u003C!DOCTYPE html>\n\u003Chtml>\n    \u003Chead>\n      \u003C!---省略-->\n      \u003Cscript src=\"https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fapi.js?render=YOUR_FRONT_KEY\">\u003C\u002Fscript>\n    \u003C\u002Fhead>\n\n    \u003Cbody>\n        \u003Cform method=\"post\" id=\"test-form\">\u003C!---追加-->\n            \u003Cinput type=\"text\" name=\"test\" value=\"\">\n            \u003Cinput type=\"hidden\" name=\"recaptcha\" value=\"\">\u003C!---追加-->\n            \u003Cinput type=\"submit\" value=\"送信\">\n        \u003C\u002Fform>\n    \u003C\u002Fbody>\n\n    \u003Cscript>\n        function checkCaptcha(e) {\n            e.preventDefault();\n            grecaptcha.ready(function() {\n                grecaptcha.execute('YOUR_FRONT_KEY', {action: 'submit'}).then(function(token) {\n                    document.getElementById(\"recaptcha\").value=token;\n                    document.getElementById(\"test-form\").submit();\n                });\n            });\n        }\n        document.getElementById(\"test-form\").addEventListener('submit', checkCaptcha);\n        \u003C\u002Fscript>\n\u003C\u002Fhtml>\n",[17,15467,15468,15478,15486,15494,15498,15521,15529,15533,15541,15571,15605,15641,15669,15677,15685,15689,15697,15714,15728,15747,15801,15831,15857,15866,15875,15879,15917,15925],{"__ignoreMap":27},[31,15469,15470,15472,15474,15476],{"class":33,"line":34},[31,15471,7039],{"class":45},[31,15473,7042],{"class":58},[31,15475,4224],{"class":37},[31,15477,5990],{"class":45},[31,15479,15480,15482,15484],{"class":33,"line":52},[31,15481,3011],{"class":45},[31,15483,1871],{"class":58},[31,15485,5990],{"class":45},[31,15487,15488,15490,15492],{"class":33,"line":103},[31,15489,5995],{"class":45},[31,15491,7061],{"class":58},[31,15493,5990],{"class":45},[31,15495,15496],{"class":33,"line":142},[31,15497,15047],{"class":184},[31,15499,15500,15503,15505,15507,15509,15511,15513,15515,15517,15519],{"class":33,"line":181},[31,15501,15502],{"class":45},"      \u003C",[31,15504,7265],{"class":58},[31,15506,3017],{"class":37},[31,15508,46],{"class":45},[31,15510,77],{"class":45},[31,15512,15257],{"class":80},[31,15514,77],{"class":45},[31,15516,6777],{"class":45},[31,15518,7265],{"class":58},[31,15520,5990],{"class":45},[31,15522,15523,15525,15527],{"class":33,"line":188},[31,15524,6046],{"class":45},[31,15526,7061],{"class":58},[31,15528,5990],{"class":45},[31,15530,15531],{"class":33,"line":283},[31,15532,249],{"emptyLinePlaceholder":248},[31,15534,15535,15537,15539],{"class":33,"line":289},[31,15536,5995],{"class":45},[31,15538,2616],{"class":58},[31,15540,5990],{"class":45},[31,15542,15543,15545,15547,15549,15551,15553,15555,15557,15559,15561,15563,15565,15567,15569],{"class":33,"line":295},[31,15544,6015],{"class":45},[31,15546,15074],{"class":58},[31,15548,15077],{"class":37},[31,15550,46],{"class":45},[31,15552,77],{"class":45},[31,15554,15084],{"class":80},[31,15556,77],{"class":45},[31,15558,5978],{"class":37},[31,15560,46],{"class":45},[31,15562,77],{"class":45},[31,15564,15313],{"class":80},[31,15566,77],{"class":45},[31,15568,411],{"class":45},[31,15570,15268],{"class":184},[31,15572,15573,15575,15577,15579,15581,15583,15585,15587,15589,15591,15593,15595,15597,15599,15601,15603],{"class":33,"line":301},[31,15574,7176],{"class":45},[31,15576,11655],{"class":58},[31,15578,7279],{"class":37},[31,15580,46],{"class":45},[31,15582,77],{"class":45},[31,15584,1864],{"class":80},[31,15586,77],{"class":45},[31,15588,15107],{"class":37},[31,15590,46],{"class":45},[31,15592,77],{"class":45},[31,15594,13932],{"class":80},[31,15596,77],{"class":45},[31,15598,11668],{"class":37},[31,15600,46],{"class":45},[31,15602,11673],{"class":45},[31,15604,5990],{"class":45},[31,15606,15607,15609,15611,15613,15615,15617,15619,15621,15623,15625,15627,15629,15631,15633,15635,15637,15639],{"class":33,"line":307},[31,15608,7176],{"class":45},[31,15610,11655],{"class":58},[31,15612,7279],{"class":37},[31,15614,46],{"class":45},[31,15616,77],{"class":45},[31,15618,15368],{"class":80},[31,15620,77],{"class":45},[31,15622,15107],{"class":37},[31,15624,46],{"class":45},[31,15626,77],{"class":45},[31,15628,15379],{"class":80},[31,15630,77],{"class":45},[31,15632,11668],{"class":37},[31,15634,46],{"class":45},[31,15636,11673],{"class":45},[31,15638,411],{"class":45},[31,15640,15268],{"class":184},[31,15642,15643,15645,15647,15649,15651,15653,15655,15657,15659,15661,15663,15665,15667],{"class":33,"line":313},[31,15644,7176],{"class":45},[31,15646,11655],{"class":58},[31,15648,7279],{"class":37},[31,15650,46],{"class":45},[31,15652,77],{"class":45},[31,15654,15138],{"class":80},[31,15656,77],{"class":45},[31,15658,11668],{"class":37},[31,15660,46],{"class":45},[31,15662,77],{"class":45},[31,15664,15149],{"class":80},[31,15666,77],{"class":45},[31,15668,5990],{"class":45},[31,15670,15671,15673,15675],{"class":33,"line":319},[31,15672,7246],{"class":45},[31,15674,15074],{"class":58},[31,15676,5990],{"class":45},[31,15678,15679,15681,15683],{"class":33,"line":325},[31,15680,6046],{"class":45},[31,15682,2616],{"class":58},[31,15684,5990],{"class":45},[31,15686,15687],{"class":33,"line":331},[31,15688,249],{"emptyLinePlaceholder":248},[31,15690,15691,15693,15695],{"class":33,"line":337},[31,15692,5995],{"class":45},[31,15694,7265],{"class":58},[31,15696,5990],{"class":45},[31,15698,15699,15702,15705,15707,15710,15712],{"class":33,"line":1752},[31,15700,15701],{"class":37},"        function",[31,15703,15704],{"class":259}," checkCaptcha",[31,15706,993],{"class":45},[31,15708,15709],{"class":996},"e",[31,15711,1018],{"class":45},[31,15713,1602],{"class":45},[31,15715,15716,15719,15721,15724,15726],{"class":33,"line":1758},[31,15717,15718],{"class":41},"            e",[31,15720,237],{"class":45},[31,15722,15723],{"class":259},"preventDefault",[31,15725,7672],{"class":58},[31,15727,243],{"class":45},[31,15729,15730,15733,15735,15738,15740,15743,15745],{"class":33,"line":1764},[31,15731,15732],{"class":41},"            grecaptcha",[31,15734,237],{"class":45},[31,15736,15737],{"class":259},"ready",[31,15739,993],{"class":58},[31,15741,15742],{"class":37},"function",[31,15744,7672],{"class":45},[31,15746,1602],{"class":45},[31,15748,15749,15752,15754,15757,15759,15761,15763,15765,15767,15769,15772,15774,15776,15778,15780,15782,15784,15786,15788,15790,15792,15794,15797,15799],{"class":33,"line":2088},[31,15750,15751],{"class":41},"                grecaptcha",[31,15753,237],{"class":45},[31,15755,15756],{"class":259},"execute",[31,15758,993],{"class":58},[31,15760,2005],{"class":45},[31,15762,15451],{"class":80},[31,15764,2005],{"class":45},[31,15766,69],{"class":45},[31,15768,1003],{"class":45},[31,15770,15771],{"class":58},"action",[31,15773,62],{"class":45},[31,15775,2000],{"class":45},[31,15777,15138],{"class":80},[31,15779,2005],{"class":45},[31,15781,469],{"class":45},[31,15783,1018],{"class":58},[31,15785,237],{"class":45},[31,15787,11330],{"class":259},[31,15789,993],{"class":58},[31,15791,15742],{"class":37},[31,15793,993],{"class":45},[31,15795,15796],{"class":996},"token",[31,15798,1018],{"class":45},[31,15800,1602],{"class":45},[31,15802,15803,15806,15808,15810,15812,15814,15816,15818,15820,15822,15825,15827,15829],{"class":33,"line":2098},[31,15804,15805],{"class":41},"                    document",[31,15807,237],{"class":45},[31,15809,7450],{"class":259},[31,15811,993],{"class":58},[31,15813,77],{"class":45},[31,15815,15379],{"class":80},[31,15817,77],{"class":45},[31,15819,1018],{"class":58},[31,15821,237],{"class":45},[31,15823,15824],{"class":41},"value",[31,15826,46],{"class":45},[31,15828,15796],{"class":41},[31,15830,243],{"class":45},[31,15832,15833,15835,15837,15839,15841,15843,15845,15847,15849,15851,15853,15855],{"class":33,"line":2109},[31,15834,15805],{"class":41},[31,15836,237],{"class":45},[31,15838,7450],{"class":259},[31,15840,993],{"class":58},[31,15842,77],{"class":45},[31,15844,15313],{"class":80},[31,15846,77],{"class":45},[31,15848,1018],{"class":58},[31,15850,237],{"class":45},[31,15852,15138],{"class":259},[31,15854,7672],{"class":58},[31,15856,243],{"class":45},[31,15858,15859,15862,15864],{"class":33,"line":2114},[31,15860,15861],{"class":45},"                }",[31,15863,1018],{"class":58},[31,15865,243],{"class":45},[31,15867,15868,15871,15873],{"class":33,"line":2119},[31,15869,15870],{"class":45},"            }",[31,15872,1018],{"class":58},[31,15874,243],{"class":45},[31,15876,15877],{"class":33,"line":2131},[31,15878,2012],{"class":45},[31,15880,15881,15884,15886,15888,15890,15892,15894,15896,15898,15900,15902,15904,15906,15908,15910,15912,15915],{"class":33,"line":2136},[31,15882,15883],{"class":41},"        document",[31,15885,237],{"class":45},[31,15887,7450],{"class":259},[31,15889,993],{"class":41},[31,15891,77],{"class":45},[31,15893,15313],{"class":80},[31,15895,77],{"class":45},[31,15897,1018],{"class":41},[31,15899,237],{"class":45},[31,15901,7644],{"class":259},[31,15903,993],{"class":41},[31,15905,2005],{"class":45},[31,15907,15138],{"class":80},[31,15909,2005],{"class":45},[31,15911,69],{"class":45},[31,15913,15914],{"class":41}," checkCaptcha)",[31,15916,243],{"class":45},[31,15918,15919,15921,15923],{"class":33,"line":2141},[31,15920,7246],{"class":45},[31,15922,7265],{"class":58},[31,15924,5990],{"class":45},[31,15926,15927,15929,15931],{"class":33,"line":2147},[31,15928,6114],{"class":45},[31,15930,1871],{"class":58},[31,15932,5990],{"class":45},[13,15934,15935,15936,15939,15940,15943],{},"フォームの送信ボタンが押された時（submitイベント発火時）に",[17,15937,15938],{},"checkCaptcha","の関数が実行される様に設定します。",[17,15941,15942],{},"e.preventDefault();","を使用してそのままフォームが送信されない様にします。",[13,15945,15946,15947,15950,15951,15954,15955,15958,15959,15961,15962,15965],{},"reCAPTCHAのスクリプトによって",[17,15948,15949],{},"grecaptcha","というオブジェクトが使用できる様になり、その中の",[17,15952,15953],{},"grecaptcha.execute()","にてAPIを実行します。第一引数にフロントのキー、第二引数にアクションを入力します。Promiseなので",[17,15956,15957],{},"then(token)","内のコールバックでトークンを",[17,15960,15455],{},"に突っ込みます。そしてフォームを",[17,15963,15964],{},"submit()","にて送信します。",[13,15967,15968],{},"これでフロントの実装は完了です。フロントでの動きをみてreCAPTCHAはbotかどうかを判断し、この送信を一意なトークンで保存しているのです。トークンはバックエンドでの検証で利用します。",[207,15970,15971],{"id":15971},"バックエンドの実装",[13,15973,15974],{},"それではバックエンドの実装をすすめます。Laravelのコントローラーでの記述を想定しています。バリデーションなどは各自設定してください。",[13,15976,15977],{},"バックエンドで行うことは",[1817,15979,15980,15983,15986],{},[1820,15981,15982],{},"フロントからきたトークンをreCAPTCHAのAPIに送信",[1820,15984,15985],{},"reCAPTCHAの結果を取得する",[1820,15987,15988],{},"結果（スコア）を用いてbotかの判断をする",[13,15990,15991],{},"以上となります。コードは以下の通りです。",[22,15993,15997],{"className":15994,"code":15995,"language":15996,"meta":27,"style":27},"language-php shiki shiki-themes material-theme-ocean","class Controller extends BaseController\n{\n    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;\n\n    public function checkRecaptcha(Request $request){\n        try {\n            $client = new \\GuzzleHttp\\Client([\n                'headers' => [\n                    'Content-Type' => 'application\u002Fjson',\n                ],\n            ]);\n    \n            $promise = $client->postAsync('https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fapi\u002Fsiteverify',\n            [\n                'form_params' =>[\n                    'secret'=>env('RECAPTCHA_SERVER_KEY'),\n                    'response'=>$request->recaptcha\n                ]\n            ]);\n    \n            $res = Promise\\Utils::settle($promise)->wait();\n            $isFulfilled = isset($res[0]['value']);\n            if(!$isFulfilled) throw new \\Exception('RECAPTCHA SERVER returns error');\n    \n            $result = json_decode($res[0]['value']->getBody()->getContents(),true);\n            \n            if(isset($result['error-codes'])){\n                if($result['error-codes'][0] === 'timeout-or-duplicate') return false;\n                throw new \\Exception('RECAPTCHA SERVER returns error:'.$result['error-codes'][0]);\n            }\n\n            return $result['score'] > 0.5 && $result['success'];\n        }catch (\\Exception $e) {\n            report($e);\n            return false;\n        }\n    }\n}\n","php",[17,15998,15999,16004,16008,16013,16017,16022,16027,16032,16037,16042,16047,16052,16056,16061,16066,16071,16076,16081,16085,16089,16093,16098,16103,16108,16112,16117,16121,16126,16131,16136,16140,16144,16149,16154,16159,16164,16168,16172],{"__ignoreMap":27},[31,16000,16001],{"class":33,"line":34},[31,16002,16003],{},"class Controller extends BaseController\n",[31,16005,16006],{"class":33,"line":52},[31,16007,275],{},[31,16009,16010],{"class":33,"line":103},[31,16011,16012],{},"    use AuthorizesRequests, DispatchesJobs, ValidatesRequests;\n",[31,16014,16015],{"class":33,"line":142},[31,16016,249],{"emptyLinePlaceholder":248},[31,16018,16019],{"class":33,"line":181},[31,16020,16021],{},"    public function checkRecaptcha(Request $request){\n",[31,16023,16024],{"class":33,"line":188},[31,16025,16026],{},"        try {\n",[31,16028,16029],{"class":33,"line":283},[31,16030,16031],{},"            $client = new \\GuzzleHttp\\Client([\n",[31,16033,16034],{"class":33,"line":289},[31,16035,16036],{},"                'headers' => [\n",[31,16038,16039],{"class":33,"line":295},[31,16040,16041],{},"                    'Content-Type' => 'application\u002Fjson',\n",[31,16043,16044],{"class":33,"line":301},[31,16045,16046],{},"                ],\n",[31,16048,16049],{"class":33,"line":307},[31,16050,16051],{},"            ]);\n",[31,16053,16054],{"class":33,"line":313},[31,16055,2085],{},[31,16057,16058],{"class":33,"line":319},[31,16059,16060],{},"            $promise = $client->postAsync('https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fapi\u002Fsiteverify',\n",[31,16062,16063],{"class":33,"line":325},[31,16064,16065],{},"            [\n",[31,16067,16068],{"class":33,"line":331},[31,16069,16070],{},"                'form_params' =>[\n",[31,16072,16073],{"class":33,"line":337},[31,16074,16075],{},"                    'secret'=>env('RECAPTCHA_SERVER_KEY'),\n",[31,16077,16078],{"class":33,"line":1752},[31,16079,16080],{},"                    'response'=>$request->recaptcha\n",[31,16082,16083],{"class":33,"line":1758},[31,16084,12107],{},[31,16086,16087],{"class":33,"line":1764},[31,16088,16051],{},[31,16090,16091],{"class":33,"line":2088},[31,16092,2085],{},[31,16094,16095],{"class":33,"line":2098},[31,16096,16097],{},"            $res = Promise\\Utils::settle($promise)->wait();\n",[31,16099,16100],{"class":33,"line":2109},[31,16101,16102],{},"            $isFulfilled = isset($res[0]['value']);\n",[31,16104,16105],{"class":33,"line":2114},[31,16106,16107],{},"            if(!$isFulfilled) throw new \\Exception('RECAPTCHA SERVER returns error');\n",[31,16109,16110],{"class":33,"line":2119},[31,16111,2085],{},[31,16113,16114],{"class":33,"line":2131},[31,16115,16116],{},"            $result = json_decode($res[0]['value']->getBody()->getContents(),true);\n",[31,16118,16119],{"class":33,"line":2136},[31,16120,3438],{},[31,16122,16123],{"class":33,"line":2141},[31,16124,16125],{},"            if(isset($result['error-codes'])){\n",[31,16127,16128],{"class":33,"line":2147},[31,16129,16130],{},"                if($result['error-codes'][0] === 'timeout-or-duplicate') return false;\n",[31,16132,16133],{"class":33,"line":2152},[31,16134,16135],{},"                throw new \\Exception('RECAPTCHA SERVER returns error:'.$result['error-codes'][0]);\n",[31,16137,16138],{"class":33,"line":4},[31,16139,1749],{},[31,16141,16142],{"class":33,"line":2523},[31,16143,249],{"emptyLinePlaceholder":248},[31,16145,16146],{"class":33,"line":2528},[31,16147,16148],{},"            return $result['score'] > 0.5 && $result['success'];\n",[31,16150,16151],{"class":33,"line":2547},[31,16152,16153],{},"        }catch (\\Exception $e) {\n",[31,16155,16156],{"class":33,"line":2560},[31,16157,16158],{},"            report($e);\n",[31,16160,16161],{"class":33,"line":2606},[31,16162,16163],{},"            return false;\n",[31,16165,16166],{"class":33,"line":2623},[31,16167,2012],{},[31,16169,16170],{"class":33,"line":2635},[31,16171,3775],{},[31,16173,16174],{"class":33,"line":2647},[31,16175,334],{},[13,16177,16178,16179,16182,16183,16186],{},"recaptchaとのAPI通信には",[17,16180,16181],{},"Guzzle","を使用していますが、とにかくAPI通信ができれば大丈夫です。APIは",[17,16184,16185],{},"https:\u002F\u002Fwww.google.com\u002Frecaptcha\u002Fapi\u002Fsiteverify","にPOSTを送信します。POSTには以下の値が必要です、",[22,16188,16190],{"className":15994,"code":16189,"language":15996,"meta":27,"style":27},"'form_params' =>[\n    'secret'=>env('RECAPTCHA_SERVER_KEY'),\n    'response'=>$request->recaptcha\n]\n",[17,16191,16192,16197,16202,16207],{"__ignoreMap":27},[31,16193,16194],{"class":33,"line":34},[31,16195,16196],{},"'form_params' =>[\n",[31,16198,16199],{"class":33,"line":52},[31,16200,16201],{},"    'secret'=>env('RECAPTCHA_SERVER_KEY'),\n",[31,16203,16204],{"class":33,"line":103},[31,16205,16206],{},"    'response'=>$request->recaptcha\n",[31,16208,16209],{"class":33,"line":142},[31,16210,191],{},[13,16212,16213,16216,16217,616,16220,16222,16223,16226],{},[17,16214,16215],{},"env('RECAPTCHA_SERVER_KEY')","はバックエンドで使用するrecaptchaキーです。",[17,16218,16219],{},"$request->recaptcha",[17,16221,15455],{},"で挿入されたフロントで取得したrecaptchaのトークンです。このトークンとキーを合わせて、 ",[395,16224,16225],{},"保護対象のサーバーであり、検証を行うフォーム送信","　を判別しています。",[13,16228,16229],{},"通信が成功すると以下の様なレスポンスが戻ります。",[22,16231,16233],{"className":15994,"code":16232,"language":15996,"meta":27,"style":27},"[\n  \"success\"=> true, \n  \"score\"=> 0.8,\n  \"action\"=> string,\n  \"challenge_ts\"=> timestamp,\n  \"hostname\"=> string,\n]\n",[17,16234,16235,16239,16244,16249,16254,16259,16264],{"__ignoreMap":27},[31,16236,16237],{"class":33,"line":34},[31,16238,1630],{},[31,16240,16241],{"class":33,"line":52},[31,16242,16243],{},"  \"success\"=> true, \n",[31,16245,16246],{"class":33,"line":103},[31,16247,16248],{},"  \"score\"=> 0.8,\n",[31,16250,16251],{"class":33,"line":142},[31,16252,16253],{},"  \"action\"=> string,\n",[31,16255,16256],{"class":33,"line":181},[31,16257,16258],{},"  \"challenge_ts\"=> timestamp,\n",[31,16260,16261],{"class":33,"line":188},[31,16262,16263],{},"  \"hostname\"=> string,\n",[31,16265,16266],{"class":33,"line":283},[31,16267,191],{},[13,16269,16270,16271,16274,16275,16278],{},"一番重要なのは",[17,16272,16273],{},"\"score\"=> 0.8","です。このスコアは入力したリクエストがbotか人間かのスコアを示しており、1に近いほど人間が入力しています。逆に0.1あたりはbotの入力です。どこまで厳しくするかはお任せしますが、私は0.5以上であれば人間のリクエストであるとしています。",[17,16276,16277],{},"return $result['score'] > 0.5"," としてfalseであればリクエストを拒否したり、エラーを返す様にします。フォーム系で汎用的に使用できる様に私はサービスプロバイダにしています。",[365,16280,16281],{"id":16281},"エラー処理",[13,16283,16284],{},"エラーの場合は以下の様なレスポンスがきます。（例です）",[22,16286,16288],{"className":15994,"code":16287,"language":15996,"meta":27,"style":27},"[\n  \"success\"=> false, \n  \"action\"=> string,\n  \"challenge_ts\"=> timestamp,\n  \"hostname\"=> string,\n  \"error-codes\": [\n      0=>'timeout-or-duplicate'\n  ] \n]\n",[17,16289,16290,16294,16299,16303,16307,16311,16316,16321,16326],{"__ignoreMap":27},[31,16291,16292],{"class":33,"line":34},[31,16293,1630],{},[31,16295,16296],{"class":33,"line":52},[31,16297,16298],{},"  \"success\"=> false, \n",[31,16300,16301],{"class":33,"line":103},[31,16302,16253],{},[31,16304,16305],{"class":33,"line":142},[31,16306,16258],{},[31,16308,16309],{"class":33,"line":181},[31,16310,16263],{},[31,16312,16313],{"class":33,"line":188},[31,16314,16315],{},"  \"error-codes\": [\n",[31,16317,16318],{"class":33,"line":283},[31,16319,16320],{},"      0=>'timeout-or-duplicate'\n",[31,16322,16323],{"class":33,"line":289},[31,16324,16325],{},"  ] \n",[31,16327,16328],{"class":33,"line":295},[31,16329,191],{},[13,16331,16332,16333,16336],{},"このエラーはAPIの通信が失敗したり、必要なパラメーターが不足していたりなどのエラーです。 ",[395,16334,16335],{},"リクエストがBotである"," という意味ではないので注意。Botかの判定はあくまで成功時に取得するscoreで判定します。",[365,16338,16339],{"id":16339},"エラーの説明",[13,16341,16342,16345,16347],{},[395,16343,16344],{},"missing-input-secret",[17,16346,16215],{},"のようなサーバー側のrecaptchaのキーを忘れている。",[22,16349,16351],{"className":15994,"code":16350,"language":15996,"meta":27,"style":27},"'form_params' =>[\n    'secret'=>env('RECAPTCHA_SERVER_KEY'), \u002F\u002F このへん\n    'response'=>$request->recaptcha\n]\n",[17,16352,16353,16357,16365,16369],{"__ignoreMap":27},[31,16354,16355],{"class":33,"line":34},[31,16356,16196],{},[31,16358,16359,16362],{"class":33,"line":52},[31,16360,16361],{},"    'secret'=>env('RECAPTCHA_SERVER_KEY'),",[31,16363,16364],{}," \u002F\u002F このへん\n",[31,16366,16367],{"class":33,"line":103},[31,16368,16206],{},[31,16370,16371],{"class":33,"line":142},[31,16372,191],{},[13,16374,16375,16378,16380],{},[395,16376,16377],{},"invalid-input-secret",[17,16379,16215],{},"が不正。間違っているキーを使用している。キーが正しいか、保護対象のドメインとして登録しているかを確認。",[13,16382,16383,16386,16389],{},[395,16384,16385],{},"missing-input-response",[17,16387,16388],{},"'response'=>$request->recaptcha","を忘れている、空文字。",[13,16391,16392,16395,16397],{},[395,16393,16394],{},"invalid-input-response",[17,16396,16388],{},"の値が不正。型などを確認。",[13,16399,16400,16403],{},[395,16401,16402],{},"bad-request","\nPOSTで送っているかを確認。",[13,16405,16406,16409,16411],{},[395,16407,16408],{},"timeout-or-duplicate",[17,16410,16388],{},"の値を二回送っているか、フロントのトークンが２分以上経過した。",[13,16413,16414],{},"フロントで取得したトークンはバックエンドでのこの検証を行うともう一度利用することができません。またこのトークンは",[22,16416,16418],{"className":24,"code":16417,"language":26,"meta":27,"style":27},"grecaptcha.execute('YOUR_FRONT_KEY', {action: 'submit'}).then(function(token) {\n    document.getElementById(\"recaptcha\").value=token;\n    document.getElementById(\"test-form\").submit();\n});\n",[17,16419,16420,16470,16499,16525],{"__ignoreMap":27},[31,16421,16422,16424,16426,16428,16430,16432,16434,16436,16438,16440,16442,16444,16446,16448,16450,16452,16454,16456,16458,16460,16462,16464,16466,16468],{"class":33,"line":34},[31,16423,15949],{"class":41},[31,16425,237],{"class":45},[31,16427,15756],{"class":259},[31,16429,993],{"class":41},[31,16431,2005],{"class":45},[31,16433,15451],{"class":80},[31,16435,2005],{"class":45},[31,16437,69],{"class":45},[31,16439,1003],{"class":45},[31,16441,15771],{"class":58},[31,16443,62],{"class":45},[31,16445,2000],{"class":45},[31,16447,15138],{"class":80},[31,16449,2005],{"class":45},[31,16451,469],{"class":45},[31,16453,1018],{"class":41},[31,16455,237],{"class":45},[31,16457,11330],{"class":259},[31,16459,993],{"class":41},[31,16461,15742],{"class":37},[31,16463,993],{"class":45},[31,16465,15796],{"class":996},[31,16467,1018],{"class":45},[31,16469,1602],{"class":45},[31,16471,16472,16475,16477,16479,16481,16483,16485,16487,16489,16491,16493,16495,16497],{"class":33,"line":52},[31,16473,16474],{"class":41},"    document",[31,16476,237],{"class":45},[31,16478,7450],{"class":259},[31,16480,993],{"class":58},[31,16482,77],{"class":45},[31,16484,15379],{"class":80},[31,16486,77],{"class":45},[31,16488,1018],{"class":58},[31,16490,237],{"class":45},[31,16492,15824],{"class":41},[31,16494,46],{"class":45},[31,16496,15796],{"class":41},[31,16498,243],{"class":45},[31,16500,16501,16503,16505,16507,16509,16511,16513,16515,16517,16519,16521,16523],{"class":33,"line":103},[31,16502,16474],{"class":41},[31,16504,237],{"class":45},[31,16506,7450],{"class":259},[31,16508,993],{"class":58},[31,16510,77],{"class":45},[31,16512,15313],{"class":80},[31,16514,77],{"class":45},[31,16516,1018],{"class":58},[31,16518,237],{"class":45},[31,16520,15138],{"class":259},[31,16522,7672],{"class":58},[31,16524,243],{"class":45},[31,16526,16527,16529,16531],{"class":33,"line":142},[31,16528,469],{"class":45},[31,16530,1018],{"class":41},[31,16532,243],{"class":45},[13,16534,16535],{},"の実行から２分以内で利用する必要があります。そのためページがリロードされた瞬間ときに実行していると、フォーム入力中に時間切れになったります。そのためsubmit時に実行することをお勧めします。",[207,16537,16538],{"id":16538},"実装まとめ",[13,16540,16541],{},"以上がrecaptchaの実装方法です。recaptchaはあくまでBotかどうかの判断のみをしているので、実際にリクエストを通すかはアプリケーション側の仕事です。フロントとバックでの実装が少し面倒ですが、recaptchaの機能を自前で実装しようとするとそこそこ、面倒なのと実績のあるGoogle様に検証してもらうのも結構安心です。",[13,16543,16544],{},"バックエンドはLaravelを想定しますが、他のフレームワークや言語でもやることは特に変わりません。上手くご自身の環境に置き換えてください。",[1771,16546,16547],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}",{"title":27,"searchDepth":103,"depth":103,"links":16549},[16550,16551,16552,16553,16557,16561],{"id":14952,"depth":52,"text":14953},{"id":14959,"depth":52,"text":14959},{"id":14968,"depth":52,"text":14969},{"id":15008,"depth":52,"text":15008,"children":16554},[16555,16556],{"id":15203,"depth":103,"text":15204},{"id":15459,"depth":103,"text":15459},{"id":15971,"depth":52,"text":15971,"children":16558},[16559,16560],{"id":16281,"depth":103,"text":16281},{"id":16339,"depth":103,"text":16339},{"id":16538,"depth":52,"text":16538},[5906],"2021-05-21","reCAPTCHAのbot検証をフロントエンド とLaravelでのバックエンドの実装を行います。",{},"\u002Farticles\u002Fimplement-recaptcha",{"title":14935,"description":16564},"articles\u002Fimplement-recaptcha",[15996,1797,16570,16571],"laravel","security","_mix\u002Flaravel-recaptcha.jpg","AYarFTQUZE-KIUOU5A3co7uCUDW9hqT091VEnFYUN6Q",{"id":16575,"title":16576,"body":16577,"category":18337,"createdAt":18338,"description":18339,"extension":1790,"index":142,"meta":18340,"navigation":248,"path":18341,"publish":248,"seo":18342,"series":18343,"seriesTitle":18344,"stem":18345,"tag":18346,"thumbnail":18347,"updatedAt":1791,"__hash__":18348},"series\u002Fseries\u002Fnuxt-content-blog-4.md","Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能",{"type":10,"value":16578,"toc":18328},[16579,16591,16594,16597,16600,16603,16607,16610,16722,16731,16738,16742,16749,17411,17417,17784,17791,17839,17842,17846,17849,17856,17862,17868,17875,17879,17886,18268,18282,18285,18288,18301,18305,18308,18322,18325],[13,16580,16581,16582,16586,16587,16590],{},"こんにちはjunです。",[196,16583,16585],{"href":16584},"\u002Fseries\u002Fnuxt-content-blog\u002F3","前回の記事","は詳細ページの実装と静的書き出しを行いました。今回の記事では ",[395,16588,16589],{},"カテゴリーとタグ機能","　について解説します。",[207,16592,16593],{"id":16593},"カテゴリーとタグについて",[13,16595,16596],{},"まず最初にカテゴリーとタグ機能について念のため定義しておきます。基本的にはwordpressのものと概念は似ています。カテゴリーは基本的に記事に一つだけ設定して大まかな分類を行います。タグは記事に対して複数個設定できます。",[13,16598,16599],{},"機能としては上記の通りですが、記事がどんなコンテンツであるか整理されてリスト化されることでサイト訪問者がコンテンツを探しやすくなります。実際私のサイトもわかりやすくありませんか笑？",[13,16601,16602],{},"そのためブログを作るのならば、このカテゴリーとタグの機能はかなり重要です。それでは早速解説します。",[207,16604,16606],{"id":16605},"各記事にカテゴリータグを設定する","各記事にカテゴリー・タグを設定する",[13,16608,16609],{},"Nuxt Contentはマークダウンで原稿を作成します。マークダウン上部には以下のような記事のメタデータを記述します。",[22,16611,16615],{"className":16612,"code":16613,"language":16614,"meta":27,"style":27},"language-yml shiki shiki-themes material-theme-ocean","---\ntitle: Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能\ndescription: Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能\ncategory: [devstack]\ntag: [js,nuxt]\nseries: nuxt-content-blog\nseriesTitle: Nuxt Content × SSG で作る静的ブログ。\nindex: 4\npublish: true\nthumbnail:  _mix\u002Flogo-dark.jpg\n---\n","yml",[17,16616,16617,16622,16631,16640,16652,16669,16679,16689,16698,16708,16718],{"__ignoreMap":27},[31,16618,16619],{"class":33,"line":34},[31,16620,16621],{"class":6150},"---\n",[31,16623,16624,16626,16628],{"class":33,"line":52},[31,16625,72],{"class":58},[31,16627,62],{"class":45},[31,16629,16630],{"class":80}," Nuxt Content × SSG で作る静的ブログ。４：カテゴリーとタグ機能\n",[31,16632,16633,16635,16637],{"class":33,"line":103},[31,16634,10369],{"class":58},[31,16636,62],{"class":45},[31,16638,16639],{"class":80}," Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能\n",[31,16641,16642,16644,16646,16648,16650],{"class":33,"line":142},[31,16643,10408],{"class":58},[31,16645,62],{"class":45},[31,16647,512],{"class":45},[31,16649,5906],{"class":80},[31,16651,191],{"class":45},[31,16653,16654,16656,16658,16660,16662,16664,16667],{"class":33,"line":181},[31,16655,10429],{"class":58},[31,16657,62],{"class":45},[31,16659,512],{"class":45},[31,16661,1797],{"class":80},[31,16663,69],{"class":45},[31,16665,16666],{"class":80},"nuxt",[31,16668,191],{"class":45},[31,16670,16671,16674,16676],{"class":33,"line":188},[31,16672,16673],{"class":58},"series",[31,16675,62],{"class":45},[31,16677,16678],{"class":80}," nuxt-content-blog\n",[31,16680,16681,16684,16686],{"class":33,"line":283},[31,16682,16683],{"class":58},"seriesTitle",[31,16685,62],{"class":45},[31,16687,16688],{"class":80}," Nuxt Content × SSG で作る静的ブログ。\n",[31,16690,16691,16693,16695],{"class":33,"line":289},[31,16692,8437],{"class":58},[31,16694,62],{"class":45},[31,16696,16697],{"class":65}," 4\n",[31,16699,16700,16703,16705],{"class":33,"line":295},[31,16701,16702],{"class":58},"publish",[31,16704,62],{"class":45},[31,16706,16707],{"class":2643}," true\n",[31,16709,16710,16713,16715],{"class":33,"line":301},[31,16711,16712],{"class":58},"thumbnail",[31,16714,62],{"class":45},[31,16716,16717],{"class":80},"  _mix\u002Flogo-dark.jpg\n",[31,16719,16720],{"class":33,"line":307},[31,16721,16621],{"class":6150},[13,16723,16724,16725,11805,16727,16730],{},"ここで設定する値は基本的に自由につけることができます。そしてこの例の",[17,16726,10408],{},[17,16728,16729],{},"tags","に注目してみてください。各記事のカテゴリーとタグはここで定義されています。そして配列形式で設定します。このようにメタデータに配列で設定することで記事のカテゴリー・タグを配列で取得できます。配列なので複数個設定することができます。",[13,16732,16733,16734,16737],{},"この時気をつけたいのが、例えば",[17,16735,16736],{},"[開発スタック,メモ]","と日本語（ラベル）を入力するのでなく、プログラム的なキー・スラグで入力した方が良いです。理由は後述します。",[207,16739,16741],{"id":16740},"カテゴリータグ設定ファイルを作成する","カテゴリー、タグ設定ファイルを作成する",[13,16743,16744,16745,16748],{},"プロジェクトルートに",[17,16746,16747],{},"taxonomy.js","というようなカテゴリー、タグを管理するファイルを作成します。中身は以下のようになっています。",[22,16750,16752],{"className":24,"code":16751,"filename":16747,"language":26,"meta":27,"style":27},"module.exports = {\n    category:[\n        {text:'技術スタック',slug:'devstack'},\n        {text:'プログラミング学習',slug:'learning'},\n        {text:'メモ',slug:'ministack'},\n    ],\n    tags:[\n        {text:'HTML',slug:'html'},\n        {text:'CSS',slug:'css'},\n        {text:'Javascript',slug:'js'},\n        {text:'jquery',slug:'jquery'},\n        {text:'Vue.js',slug:'vue'},\n        {text:'Nuxt.js',slug:'nuxt'},\n        {text:'webpack',slug:'webpack'},\n        {text:'PHP',slug:'php'},\n        {text:'Laravel',slug:'laravel'},\n        {text:'Python',slug:'python'},\n        {text:'Django',slug:'django'},\n        {text:'HeadlessCMS',slug:'headlesscms'},\n        {text:'wordpress',slug:'wordpress'},\n        {text:'concrete5',slug:'concrete5'},\n        {text:'ZOOM',slug:'zoom'},\n        {text:'インフラ',slug:'infrastructure'},\n        {text:'ネットワーク',slug:'network'},\n        {text:'Docker',slug:'docker'},\n    ]\n}\n",[17,16753,16754,16762,16771,16802,16832,16861,16867,16876,16905,16934,16963,16991,17020,17049,17077,17106,17135,17165,17195,17225,17254,17283,17313,17343,17373,17403,17407],{"__ignoreMap":27},[31,16755,16756,16758,16760],{"class":33,"line":34},[31,16757,2155],{"class":45},[31,16759,2041],{"class":45},[31,16761,1602],{"class":45},[31,16763,16764,16767,16769],{"class":33,"line":52},[31,16765,16766],{"class":58},"    category",[31,16768,62],{"class":45},[31,16770,1630],{"class":41},[31,16772,16773,16776,16778,16780,16782,16785,16787,16789,16792,16794,16796,16798,16800],{"class":33,"line":103},[31,16774,16775],{"class":45},"        {",[31,16777,1864],{"class":58},[31,16779,62],{"class":45},[31,16781,2005],{"class":45},[31,16783,16784],{"class":80},"技術スタック",[31,16786,2005],{"class":45},[31,16788,69],{"class":45},[31,16790,16791],{"class":58},"slug",[31,16793,62],{"class":45},[31,16795,2005],{"class":45},[31,16797,5906],{"class":80},[31,16799,2005],{"class":45},[31,16801,100],{"class":45},[31,16803,16804,16806,16808,16810,16812,16815,16817,16819,16821,16823,16825,16828,16830],{"class":33,"line":142},[31,16805,16775],{"class":45},[31,16807,1864],{"class":58},[31,16809,62],{"class":45},[31,16811,2005],{"class":45},[31,16813,16814],{"class":80},"プログラミング学習",[31,16816,2005],{"class":45},[31,16818,69],{"class":45},[31,16820,16791],{"class":58},[31,16822,62],{"class":45},[31,16824,2005],{"class":45},[31,16826,16827],{"class":80},"learning",[31,16829,2005],{"class":45},[31,16831,100],{"class":45},[31,16833,16834,16836,16838,16840,16842,16845,16847,16849,16851,16853,16855,16857,16859],{"class":33,"line":181},[31,16835,16775],{"class":45},[31,16837,1864],{"class":58},[31,16839,62],{"class":45},[31,16841,2005],{"class":45},[31,16843,16844],{"class":80},"メモ",[31,16846,2005],{"class":45},[31,16848,69],{"class":45},[31,16850,16791],{"class":58},[31,16852,62],{"class":45},[31,16854,2005],{"class":45},[31,16856,1787],{"class":80},[31,16858,2005],{"class":45},[31,16860,100],{"class":45},[31,16862,16863,16865],{"class":33,"line":188},[31,16864,12541],{"class":41},[31,16866,1647],{"class":45},[31,16868,16869,16872,16874],{"class":33,"line":283},[31,16870,16871],{"class":58},"    tags",[31,16873,62],{"class":45},[31,16875,1630],{"class":41},[31,16877,16878,16880,16882,16884,16886,16889,16891,16893,16895,16897,16899,16901,16903],{"class":33,"line":289},[31,16879,16775],{"class":45},[31,16881,1864],{"class":58},[31,16883,62],{"class":45},[31,16885,2005],{"class":45},[31,16887,16888],{"class":80},"HTML",[31,16890,2005],{"class":45},[31,16892,69],{"class":45},[31,16894,16791],{"class":58},[31,16896,62],{"class":45},[31,16898,2005],{"class":45},[31,16900,1871],{"class":80},[31,16902,2005],{"class":45},[31,16904,100],{"class":45},[31,16906,16907,16909,16911,16913,16915,16918,16920,16922,16924,16926,16928,16930,16932],{"class":33,"line":295},[31,16908,16775],{"class":45},[31,16910,1864],{"class":58},[31,16912,62],{"class":45},[31,16914,2005],{"class":45},[31,16916,16917],{"class":80},"CSS",[31,16919,2005],{"class":45},[31,16921,69],{"class":45},[31,16923,16791],{"class":58},[31,16925,62],{"class":45},[31,16927,2005],{"class":45},[31,16929,6143],{"class":80},[31,16931,2005],{"class":45},[31,16933,100],{"class":45},[31,16935,16936,16938,16940,16942,16944,16947,16949,16951,16953,16955,16957,16959,16961],{"class":33,"line":301},[31,16937,16775],{"class":45},[31,16939,1864],{"class":58},[31,16941,62],{"class":45},[31,16943,2005],{"class":45},[31,16945,16946],{"class":80},"Javascript",[31,16948,2005],{"class":45},[31,16950,69],{"class":45},[31,16952,16791],{"class":58},[31,16954,62],{"class":45},[31,16956,2005],{"class":45},[31,16958,1797],{"class":80},[31,16960,2005],{"class":45},[31,16962,100],{"class":45},[31,16964,16965,16967,16969,16971,16973,16975,16977,16979,16981,16983,16985,16987,16989],{"class":33,"line":307},[31,16966,16775],{"class":45},[31,16968,1864],{"class":58},[31,16970,62],{"class":45},[31,16972,2005],{"class":45},[31,16974,13347],{"class":80},[31,16976,2005],{"class":45},[31,16978,69],{"class":45},[31,16980,16791],{"class":58},[31,16982,62],{"class":45},[31,16984,2005],{"class":45},[31,16986,13347],{"class":80},[31,16988,2005],{"class":45},[31,16990,100],{"class":45},[31,16992,16993,16995,16997,16999,17001,17004,17006,17008,17010,17012,17014,17016,17018],{"class":33,"line":313},[31,16994,16775],{"class":45},[31,16996,1864],{"class":58},[31,16998,62],{"class":45},[31,17000,2005],{"class":45},[31,17002,17003],{"class":80},"Vue.js",[31,17005,2005],{"class":45},[31,17007,69],{"class":45},[31,17009,16791],{"class":58},[31,17011,62],{"class":45},[31,17013,2005],{"class":45},[31,17015,1798],{"class":80},[31,17017,2005],{"class":45},[31,17019,100],{"class":45},[31,17021,17022,17024,17026,17028,17030,17033,17035,17037,17039,17041,17043,17045,17047],{"class":33,"line":319},[31,17023,16775],{"class":45},[31,17025,1864],{"class":58},[31,17027,62],{"class":45},[31,17029,2005],{"class":45},[31,17031,17032],{"class":80},"Nuxt.js",[31,17034,2005],{"class":45},[31,17036,69],{"class":45},[31,17038,16791],{"class":58},[31,17040,62],{"class":45},[31,17042,2005],{"class":45},[31,17044,16666],{"class":80},[31,17046,2005],{"class":45},[31,17048,100],{"class":45},[31,17050,17051,17053,17055,17057,17059,17061,17063,17065,17067,17069,17071,17073,17075],{"class":33,"line":325},[31,17052,16775],{"class":45},[31,17054,1864],{"class":58},[31,17056,62],{"class":45},[31,17058,2005],{"class":45},[31,17060,5916],{"class":80},[31,17062,2005],{"class":45},[31,17064,69],{"class":45},[31,17066,16791],{"class":58},[31,17068,62],{"class":45},[31,17070,2005],{"class":45},[31,17072,5916],{"class":80},[31,17074,2005],{"class":45},[31,17076,100],{"class":45},[31,17078,17079,17081,17083,17085,17087,17090,17092,17094,17096,17098,17100,17102,17104],{"class":33,"line":331},[31,17080,16775],{"class":45},[31,17082,1864],{"class":58},[31,17084,62],{"class":45},[31,17086,2005],{"class":45},[31,17088,17089],{"class":80},"PHP",[31,17091,2005],{"class":45},[31,17093,69],{"class":45},[31,17095,16791],{"class":58},[31,17097,62],{"class":45},[31,17099,2005],{"class":45},[31,17101,15996],{"class":80},[31,17103,2005],{"class":45},[31,17105,100],{"class":45},[31,17107,17108,17110,17112,17114,17116,17119,17121,17123,17125,17127,17129,17131,17133],{"class":33,"line":337},[31,17109,16775],{"class":45},[31,17111,1864],{"class":58},[31,17113,62],{"class":45},[31,17115,2005],{"class":45},[31,17117,17118],{"class":80},"Laravel",[31,17120,2005],{"class":45},[31,17122,69],{"class":45},[31,17124,16791],{"class":58},[31,17126,62],{"class":45},[31,17128,2005],{"class":45},[31,17130,16570],{"class":80},[31,17132,2005],{"class":45},[31,17134,100],{"class":45},[31,17136,17137,17139,17141,17143,17145,17148,17150,17152,17154,17156,17158,17161,17163],{"class":33,"line":1752},[31,17138,16775],{"class":45},[31,17140,1864],{"class":58},[31,17142,62],{"class":45},[31,17144,2005],{"class":45},[31,17146,17147],{"class":80},"Python",[31,17149,2005],{"class":45},[31,17151,69],{"class":45},[31,17153,16791],{"class":58},[31,17155,62],{"class":45},[31,17157,2005],{"class":45},[31,17159,17160],{"class":80},"python",[31,17162,2005],{"class":45},[31,17164,100],{"class":45},[31,17166,17167,17169,17171,17173,17175,17178,17180,17182,17184,17186,17188,17191,17193],{"class":33,"line":1758},[31,17168,16775],{"class":45},[31,17170,1864],{"class":58},[31,17172,62],{"class":45},[31,17174,2005],{"class":45},[31,17176,17177],{"class":80},"Django",[31,17179,2005],{"class":45},[31,17181,69],{"class":45},[31,17183,16791],{"class":58},[31,17185,62],{"class":45},[31,17187,2005],{"class":45},[31,17189,17190],{"class":80},"django",[31,17192,2005],{"class":45},[31,17194,100],{"class":45},[31,17196,17197,17199,17201,17203,17205,17208,17210,17212,17214,17216,17218,17221,17223],{"class":33,"line":1764},[31,17198,16775],{"class":45},[31,17200,1864],{"class":58},[31,17202,62],{"class":45},[31,17204,2005],{"class":45},[31,17206,17207],{"class":80},"HeadlessCMS",[31,17209,2005],{"class":45},[31,17211,69],{"class":45},[31,17213,16791],{"class":58},[31,17215,62],{"class":45},[31,17217,2005],{"class":45},[31,17219,17220],{"class":80},"headlesscms",[31,17222,2005],{"class":45},[31,17224,100],{"class":45},[31,17226,17227,17229,17231,17233,17235,17238,17240,17242,17244,17246,17248,17250,17252],{"class":33,"line":2088},[31,17228,16775],{"class":45},[31,17230,1864],{"class":58},[31,17232,62],{"class":45},[31,17234,2005],{"class":45},[31,17236,17237],{"class":80},"wordpress",[31,17239,2005],{"class":45},[31,17241,69],{"class":45},[31,17243,16791],{"class":58},[31,17245,62],{"class":45},[31,17247,2005],{"class":45},[31,17249,17237],{"class":80},[31,17251,2005],{"class":45},[31,17253,100],{"class":45},[31,17255,17256,17258,17260,17262,17264,17267,17269,17271,17273,17275,17277,17279,17281],{"class":33,"line":2098},[31,17257,16775],{"class":45},[31,17259,1864],{"class":58},[31,17261,62],{"class":45},[31,17263,2005],{"class":45},[31,17265,17266],{"class":80},"concrete5",[31,17268,2005],{"class":45},[31,17270,69],{"class":45},[31,17272,16791],{"class":58},[31,17274,62],{"class":45},[31,17276,2005],{"class":45},[31,17278,17266],{"class":80},[31,17280,2005],{"class":45},[31,17282,100],{"class":45},[31,17284,17285,17287,17289,17291,17293,17296,17298,17300,17302,17304,17306,17309,17311],{"class":33,"line":2109},[31,17286,16775],{"class":45},[31,17288,1864],{"class":58},[31,17290,62],{"class":45},[31,17292,2005],{"class":45},[31,17294,17295],{"class":80},"ZOOM",[31,17297,2005],{"class":45},[31,17299,69],{"class":45},[31,17301,16791],{"class":58},[31,17303,62],{"class":45},[31,17305,2005],{"class":45},[31,17307,17308],{"class":80},"zoom",[31,17310,2005],{"class":45},[31,17312,100],{"class":45},[31,17314,17315,17317,17319,17321,17323,17326,17328,17330,17332,17334,17336,17339,17341],{"class":33,"line":2114},[31,17316,16775],{"class":45},[31,17318,1864],{"class":58},[31,17320,62],{"class":45},[31,17322,2005],{"class":45},[31,17324,17325],{"class":80},"インフラ",[31,17327,2005],{"class":45},[31,17329,69],{"class":45},[31,17331,16791],{"class":58},[31,17333,62],{"class":45},[31,17335,2005],{"class":45},[31,17337,17338],{"class":80},"infrastructure",[31,17340,2005],{"class":45},[31,17342,100],{"class":45},[31,17344,17345,17347,17349,17351,17353,17356,17358,17360,17362,17364,17366,17369,17371],{"class":33,"line":2119},[31,17346,16775],{"class":45},[31,17348,1864],{"class":58},[31,17350,62],{"class":45},[31,17352,2005],{"class":45},[31,17354,17355],{"class":80},"ネットワーク",[31,17357,2005],{"class":45},[31,17359,69],{"class":45},[31,17361,16791],{"class":58},[31,17363,62],{"class":45},[31,17365,2005],{"class":45},[31,17367,17368],{"class":80},"network",[31,17370,2005],{"class":45},[31,17372,100],{"class":45},[31,17374,17375,17377,17379,17381,17383,17386,17388,17390,17392,17394,17396,17399,17401],{"class":33,"line":2131},[31,17376,16775],{"class":45},[31,17378,1864],{"class":58},[31,17380,62],{"class":45},[31,17382,2005],{"class":45},[31,17384,17385],{"class":80},"Docker",[31,17387,2005],{"class":45},[31,17389,69],{"class":45},[31,17391,16791],{"class":58},[31,17393,62],{"class":45},[31,17395,2005],{"class":45},[31,17397,17398],{"class":80},"docker",[31,17400,2005],{"class":45},[31,17402,100],{"class":45},[31,17404,17405],{"class":33,"line":2136},[31,17406,328],{"class":41},[31,17408,17409],{"class":33,"line":2141},[31,17410,334],{"class":45},[13,17412,17413,17416],{},[17,17414,17415],{},"module export"," としているのは静的書き出しの際にこのファイルを使用するからです。そしてNuxtで制御しやすいようにStoreに入れておきます。このように管理する時、キー（スラグ）とラベル（カテゴリ名）を分けてオブジェクトにしておいた方が良いです。キーを使用することで重複を避けたり、そのままURLの一部として使用することも可能です。",[22,17418,17421],{"className":24,"code":17419,"filename":17420,"language":26,"meta":27,"style":27},"import taxonomy from '..\u002Ftaxonomy';\nexport const state = () => ({\n    category:[\n        ...taxonomy.category\n    ],\n    tags:[\n        ...taxonomy.tags\n    ]\n  })\n\nexport const getters ={\n    getTagTextBySlug(state){\n        return (slug)=>{\n            const idx = state.tags.findIndex(tag=>{\n                return tag.slug === slug;\n            })\n            return (idx > -1)?state.tags[idx].text:undefined;\n        }\n    },\n    getCategoryTextBySlug(state){\n        return (slug)=>{\n            const idx = state.category.findIndex(tag=>{\n                return tag.slug === slug;\n            })\n            return (idx > -1)?state.category[idx].text:undefined;\n        }\n    }\n}\n","store\u002Findex.js",[17,17422,17423,17441,17461,17469,17482,17488,17496,17507,17511,17517,17521,17533,17546,17561,17590,17610,17616,17655,17659,17663,17674,17688,17714,17730,17736,17772,17776,17780],{"__ignoreMap":27},[31,17424,17425,17427,17430,17432,17434,17437,17439],{"class":33,"line":34},[31,17426,12741],{"class":1006},[31,17428,17429],{"class":41}," taxonomy ",[31,17431,12747],{"class":1006},[31,17433,2000],{"class":45},[31,17435,17436],{"class":80},"..\u002Ftaxonomy",[31,17438,2005],{"class":45},[31,17440,243],{"class":45},[31,17442,17443,17446,17448,17451,17453,17455,17457,17459],{"class":33,"line":52},[31,17444,17445],{"class":1006},"export",[31,17447,414],{"class":37},[31,17449,17450],{"class":41}," state ",[31,17452,46],{"class":45},[31,17454,7701],{"class":45},[31,17456,1000],{"class":37},[31,17458,8309],{"class":41},[31,17460,275],{"class":45},[31,17462,17463,17465,17467],{"class":33,"line":103},[31,17464,16766],{"class":58},[31,17466,62],{"class":45},[31,17468,1630],{"class":41},[31,17470,17471,17474,17477,17479],{"class":33,"line":142},[31,17472,17473],{"class":45},"        ...",[31,17475,17476],{"class":41},"taxonomy",[31,17478,237],{"class":45},[31,17480,17481],{"class":41},"category\n",[31,17483,17484,17486],{"class":33,"line":181},[31,17485,12541],{"class":41},[31,17487,1647],{"class":45},[31,17489,17490,17492,17494],{"class":33,"line":188},[31,17491,16871],{"class":58},[31,17493,62],{"class":45},[31,17495,1630],{"class":41},[31,17497,17498,17500,17502,17504],{"class":33,"line":283},[31,17499,17473],{"class":45},[31,17501,17476],{"class":41},[31,17503,237],{"class":45},[31,17505,17506],{"class":41},"tags\n",[31,17508,17509],{"class":33,"line":289},[31,17510,328],{"class":41},[31,17512,17513,17515],{"class":33,"line":295},[31,17514,13959],{"class":45},[31,17516,2653],{"class":41},[31,17518,17519],{"class":33,"line":301},[31,17520,249],{"emptyLinePlaceholder":248},[31,17522,17523,17525,17527,17530],{"class":33,"line":307},[31,17524,17445],{"class":1006},[31,17526,414],{"class":37},[31,17528,17529],{"class":41}," getters ",[31,17531,17532],{"class":45},"={\n",[31,17534,17535,17538,17540,17543],{"class":33,"line":313},[31,17536,17537],{"class":58},"    getTagTextBySlug",[31,17539,993],{"class":45},[31,17541,17542],{"class":996},"state",[31,17544,17545],{"class":45},"){\n",[31,17547,17548,17551,17553,17555,17557,17559],{"class":33,"line":319},[31,17549,17550],{"class":1006},"        return",[31,17552,8309],{"class":45},[31,17554,16791],{"class":996},[31,17556,1018],{"class":45},[31,17558,7659],{"class":37},[31,17560,275],{"class":45},[31,17562,17563,17566,17569,17571,17574,17576,17578,17580,17582,17584,17586,17588],{"class":33,"line":325},[31,17564,17565],{"class":37},"            const",[31,17567,17568],{"class":41}," idx",[31,17570,2041],{"class":45},[31,17572,17573],{"class":41}," state",[31,17575,237],{"class":45},[31,17577,16729],{"class":41},[31,17579,237],{"class":45},[31,17581,8394],{"class":259},[31,17583,993],{"class":58},[31,17585,10429],{"class":996},[31,17587,7659],{"class":37},[31,17589,275],{"class":45},[31,17591,17592,17595,17598,17600,17602,17605,17608],{"class":33,"line":331},[31,17593,17594],{"class":1006},"                return",[31,17596,17597],{"class":41}," tag",[31,17599,237],{"class":45},[31,17601,16791],{"class":41},[31,17603,17604],{"class":45}," ===",[31,17606,17607],{"class":41}," slug",[31,17609,243],{"class":45},[31,17611,17612,17614],{"class":33,"line":337},[31,17613,15870],{"class":45},[31,17615,2653],{"class":58},[31,17617,17618,17621,17623,17626,17628,17630,17632,17634,17636,17638,17640,17642,17644,17646,17648,17650,17652],{"class":33,"line":1752},[31,17619,17620],{"class":1006},"            return",[31,17622,8309],{"class":58},[31,17624,17625],{"class":41},"idx",[31,17627,11706],{"class":45},[31,17629,8541],{"class":45},[31,17631,66],{"class":65},[31,17633,1018],{"class":58},[31,17635,5107],{"class":45},[31,17637,17542],{"class":41},[31,17639,237],{"class":45},[31,17641,16729],{"class":41},[31,17643,422],{"class":58},[31,17645,17625],{"class":41},[31,17647,472],{"class":58},[31,17649,237],{"class":45},[31,17651,1864],{"class":41},[31,17653,17654],{"class":45},":undefined;\n",[31,17656,17657],{"class":33,"line":1758},[31,17658,2012],{"class":45},[31,17660,17661],{"class":33,"line":1764},[31,17662,2017],{"class":45},[31,17664,17665,17668,17670,17672],{"class":33,"line":2088},[31,17666,17667],{"class":58},"    getCategoryTextBySlug",[31,17669,993],{"class":45},[31,17671,17542],{"class":996},[31,17673,17545],{"class":45},[31,17675,17676,17678,17680,17682,17684,17686],{"class":33,"line":2098},[31,17677,17550],{"class":1006},[31,17679,8309],{"class":45},[31,17681,16791],{"class":996},[31,17683,1018],{"class":45},[31,17685,7659],{"class":37},[31,17687,275],{"class":45},[31,17689,17690,17692,17694,17696,17698,17700,17702,17704,17706,17708,17710,17712],{"class":33,"line":2109},[31,17691,17565],{"class":37},[31,17693,17568],{"class":41},[31,17695,2041],{"class":45},[31,17697,17573],{"class":41},[31,17699,237],{"class":45},[31,17701,10408],{"class":41},[31,17703,237],{"class":45},[31,17705,8394],{"class":259},[31,17707,993],{"class":58},[31,17709,10429],{"class":996},[31,17711,7659],{"class":37},[31,17713,275],{"class":45},[31,17715,17716,17718,17720,17722,17724,17726,17728],{"class":33,"line":2114},[31,17717,17594],{"class":1006},[31,17719,17597],{"class":41},[31,17721,237],{"class":45},[31,17723,16791],{"class":41},[31,17725,17604],{"class":45},[31,17727,17607],{"class":41},[31,17729,243],{"class":45},[31,17731,17732,17734],{"class":33,"line":2119},[31,17733,15870],{"class":45},[31,17735,2653],{"class":58},[31,17737,17738,17740,17742,17744,17746,17748,17750,17752,17754,17756,17758,17760,17762,17764,17766,17768,17770],{"class":33,"line":2131},[31,17739,17620],{"class":1006},[31,17741,8309],{"class":58},[31,17743,17625],{"class":41},[31,17745,11706],{"class":45},[31,17747,8541],{"class":45},[31,17749,66],{"class":65},[31,17751,1018],{"class":58},[31,17753,5107],{"class":45},[31,17755,17542],{"class":41},[31,17757,237],{"class":45},[31,17759,10408],{"class":41},[31,17761,422],{"class":58},[31,17763,17625],{"class":41},[31,17765,472],{"class":58},[31,17767,237],{"class":45},[31,17769,1864],{"class":41},[31,17771,17654],{"class":45},[31,17773,17774],{"class":33,"line":2136},[31,17775,2012],{"class":45},[31,17777,17778],{"class":33,"line":2141},[31,17779,3775],{"class":45},[31,17781,17782],{"class":33,"line":2147},[31,17783,334],{"class":45},[13,17785,17786,17787,17790],{},"カテゴリー、タグはサイドメニューにあるようにバッチで表示しています。その時は以下のような",[17,17788,17789],{},"v-for","のコンポーネントで表示しています。",[22,17792,17795],{"className":17793,"code":17794,"language":1798,"meta":27,"style":27},"language-vue shiki shiki-themes material-theme-ocean","\u003Cdiv class=\"p-badge-container\">\n    \u003Cnuxt-link class=\"c-tag-badge\" v-for=\"(t,index) in $store.state.category\" :key=\"'tag-'+index\" :to=\"'\u002Ftag\u002F'+t\">\n        \u003Cspan>{{t.text}}\u003C\u002Fspan>\n    \u003C\u002Fnuxt-link>\n\u003C\u002Fdiv>\n",[17,17796,17797,17816,17821,17826,17831],{"__ignoreMap":27},[31,17798,17799,17801,17803,17805,17807,17809,17812,17814],{"class":33,"line":34},[31,17800,3011],{"class":45},[31,17802,377],{"class":58},[31,17804,5966],{"class":37},[31,17806,46],{"class":45},[31,17808,77],{"class":45},[31,17810,17811],{"class":80},"p-badge-container",[31,17813,77],{"class":45},[31,17815,5990],{"class":45},[31,17817,17818],{"class":33,"line":52},[31,17819,17820],{"class":41},"    \u003Cnuxt-link class=\"c-tag-badge\" v-for=\"(t,index) in $store.state.category\" :key=\"'tag-'+index\" :to=\"'\u002Ftag\u002F'+t\">\n",[31,17822,17823],{"class":33,"line":103},[31,17824,17825],{"class":41},"        \u003Cspan>{{t.text}}\u003C\u002Fspan>\n",[31,17827,17828],{"class":33,"line":142},[31,17829,17830],{"class":41},"    \u003C\u002Fnuxt-link>\n",[31,17832,17833,17835,17837],{"class":33,"line":181},[31,17834,6114],{"class":45},[31,17836,377],{"class":58},[31,17838,5990],{"class":45},[13,17840,17841],{},"カテゴリー、タグを管理、使用、設定ができるようになりましたので、次はカテゴリー・タグ一覧を作成していきましょう。",[207,17843,17845],{"id":17844},"カテゴリータグ一覧ページのためのpages構成","カテゴリー、タグ一覧ページのためのpages構成",[13,17847,17848],{},"カテゴリーとタグ一覧ページの構成は互いに同じなので、タグ一覧だけ解説します。",[13,17850,17851,17852,17855],{},"タグ一覧はそのタグのバッチをクリックすると閲覧できるページです。そのタグがついた記事を全て見ることが可能です。そして",[17,17853,17854],{},"\u002Ftag\u002F{tag_key}","というURLでルーティングされています。",[13,17857,17858,17859,11481],{},"そのようなルーティングを行うために以下のように",[17,17860,17861],{},"pages\u002F",[22,17863,17866],{"className":17864,"code":17865,"language":1864},[1862],"pages\n└── tag\n    └── _slug\n        ├── index.vue\n        └── page\n            └── _id.vue\n",[17,17867,17865],{"__ignoreMap":27},[13,17869,17870,17871,17874],{},"こうすうることで",[17,17872,17873],{},"{tag_key}","という動的ルートに対応できます。またページングのためのページコンポーネントも作成しておきます。",[207,17876,17878],{"id":17877},"特定のタグを持つ投稿のみを取得する","特定のタグを持つ投稿のみを取得する。",[13,17880,17881,17882,17885],{},"それでは",[17,17883,17884],{},"\u002Ftag\u002F_slug\u002Findex.vue","の中身を見ていきましょう。",[22,17887,17890],{"className":24,"code":17888,"filename":17889,"language":26,"meta":27,"style":27},"export default {\n    async asyncData({ store,$content, params }) {\n        const count = await $content({ deep: true }).only('title').where({ tag:{ $contains:params.slug}}).fetch();\n\n        const content = await $content({ deep: true })\n        .only(['title','description','thumbnail','path','category','tag','updatedAt','series','index'])\n        .sortBy('createdAt', 'desc')\n        .where({tag:{ $contains:params.slug}}) \u002F\u002F ここ\n        .skip(0).limit(store.state.indexPerPage)\n        .fetch();\n\n        return {\n`        content,\n        count:count.length`\n        }\n    },\n}\n","pages\u002Ftag\u002F_slug\u002Findex.vue",[17,17891,17892,17901,17930,18014,18018,18045,18129,18156,18187,18221,18231,18235,18241,18248,18256,18260,18264],{"__ignoreMap":27},[31,17893,17894,17896,17899],{"class":33,"line":34},[31,17895,17445],{"class":1006},[31,17897,17898],{"class":1006}," default",[31,17900,1602],{"class":45},[31,17902,17903,17906,17909,17912,17915,17917,17920,17922,17925,17928],{"class":33,"line":52},[31,17904,17905],{"class":37},"    async",[31,17907,17908],{"class":58}," asyncData",[31,17910,17911],{"class":45},"({",[31,17913,17914],{"class":996}," store",[31,17916,69],{"class":45},[31,17918,17919],{"class":996},"$content",[31,17921,69],{"class":45},[31,17923,17924],{"class":996}," params",[31,17926,17927],{"class":45}," })",[31,17929,1602],{"class":45},[31,17931,17932,17935,17938,17940,17943,17946,17948,17950,17953,17955,17957,17959,17961,17963,17966,17968,17970,17972,17974,17976,17978,17981,17983,17985,17987,17989,17992,17994,17997,17999,18001,18003,18005,18007,18010,18012],{"class":33,"line":103},[31,17933,17934],{"class":37},"        const",[31,17936,17937],{"class":41}," count",[31,17939,2041],{"class":45},[31,17941,17942],{"class":1006}," await",[31,17944,17945],{"class":259}," $content",[31,17947,993],{"class":58},[31,17949,425],{"class":45},[31,17951,17952],{"class":58}," deep",[31,17954,62],{"class":45},[31,17956,3754],{"class":2643},[31,17958,12083],{"class":45},[31,17960,1018],{"class":58},[31,17962,237],{"class":45},[31,17964,17965],{"class":259},"only",[31,17967,993],{"class":58},[31,17969,2005],{"class":45},[31,17971,72],{"class":80},[31,17973,2005],{"class":45},[31,17975,1018],{"class":58},[31,17977,237],{"class":45},[31,17979,17980],{"class":259},"where",[31,17982,993],{"class":58},[31,17984,425],{"class":45},[31,17986,17597],{"class":58},[31,17988,1127],{"class":45},[31,17990,17991],{"class":58}," $contains",[31,17993,62],{"class":45},[31,17995,17996],{"class":41},"params",[31,17998,237],{"class":45},[31,18000,16791],{"class":41},[31,18002,1015],{"class":45},[31,18004,1018],{"class":58},[31,18006,237],{"class":45},[31,18008,18009],{"class":259},"fetch",[31,18011,7672],{"class":58},[31,18013,243],{"class":45},[31,18015,18016],{"class":33,"line":142},[31,18017,249],{"emptyLinePlaceholder":248},[31,18019,18020,18022,18025,18027,18029,18031,18033,18035,18037,18039,18041,18043],{"class":33,"line":181},[31,18021,17934],{"class":37},[31,18023,18024],{"class":41}," content",[31,18026,2041],{"class":45},[31,18028,17942],{"class":1006},[31,18030,17945],{"class":259},[31,18032,993],{"class":58},[31,18034,425],{"class":45},[31,18036,17952],{"class":58},[31,18038,62],{"class":45},[31,18040,3754],{"class":2643},[31,18042,12083],{"class":45},[31,18044,2653],{"class":58},[31,18046,18047,18050,18052,18055,18057,18059,18061,18063,18065,18067,18069,18071,18073,18075,18077,18079,18081,18083,18085,18087,18089,18091,18093,18095,18097,18099,18101,18103,18105,18108,18110,18112,18114,18116,18118,18120,18122,18124,18126],{"class":33,"line":188},[31,18048,18049],{"class":45},"        .",[31,18051,17965],{"class":259},[31,18053,18054],{"class":58},"([",[31,18056,2005],{"class":45},[31,18058,72],{"class":80},[31,18060,2005],{"class":45},[31,18062,69],{"class":45},[31,18064,2005],{"class":45},[31,18066,10369],{"class":80},[31,18068,2005],{"class":45},[31,18070,69],{"class":45},[31,18072,2005],{"class":45},[31,18074,16712],{"class":80},[31,18076,2005],{"class":45},[31,18078,69],{"class":45},[31,18080,2005],{"class":45},[31,18082,2225],{"class":80},[31,18084,2005],{"class":45},[31,18086,69],{"class":45},[31,18088,2005],{"class":45},[31,18090,10408],{"class":80},[31,18092,2005],{"class":45},[31,18094,69],{"class":45},[31,18096,2005],{"class":45},[31,18098,10429],{"class":80},[31,18100,2005],{"class":45},[31,18102,69],{"class":45},[31,18104,2005],{"class":45},[31,18106,18107],{"class":80},"updatedAt",[31,18109,2005],{"class":45},[31,18111,69],{"class":45},[31,18113,2005],{"class":45},[31,18115,16673],{"class":80},[31,18117,2005],{"class":45},[31,18119,69],{"class":45},[31,18121,2005],{"class":45},[31,18123,8437],{"class":80},[31,18125,2005],{"class":45},[31,18127,18128],{"class":58},"])\n",[31,18130,18131,18133,18136,18138,18140,18143,18145,18147,18149,18152,18154],{"class":33,"line":283},[31,18132,18049],{"class":45},[31,18134,18135],{"class":259},"sortBy",[31,18137,993],{"class":58},[31,18139,2005],{"class":45},[31,18141,18142],{"class":80},"createdAt",[31,18144,2005],{"class":45},[31,18146,69],{"class":45},[31,18148,2000],{"class":45},[31,18150,18151],{"class":80},"desc",[31,18153,2005],{"class":45},[31,18155,2653],{"class":58},[31,18157,18158,18160,18162,18164,18166,18168,18170,18172,18174,18176,18178,18180,18182,18184],{"class":33,"line":289},[31,18159,18049],{"class":45},[31,18161,17980],{"class":259},[31,18163,993],{"class":58},[31,18165,425],{"class":45},[31,18167,10429],{"class":58},[31,18169,1127],{"class":45},[31,18171,17991],{"class":58},[31,18173,62],{"class":45},[31,18175,17996],{"class":41},[31,18177,237],{"class":45},[31,18179,16791],{"class":41},[31,18181,1015],{"class":45},[31,18183,8587],{"class":58},[31,18185,18186],{"class":184},"\u002F\u002F ここ\n",[31,18188,18189,18191,18194,18196,18198,18200,18202,18205,18207,18210,18212,18214,18216,18219],{"class":33,"line":295},[31,18190,18049],{"class":45},[31,18192,18193],{"class":259},"skip",[31,18195,993],{"class":58},[31,18197,578],{"class":65},[31,18199,1018],{"class":58},[31,18201,237],{"class":45},[31,18203,18204],{"class":259},"limit",[31,18206,993],{"class":58},[31,18208,18209],{"class":41},"store",[31,18211,237],{"class":45},[31,18213,17542],{"class":41},[31,18215,237],{"class":45},[31,18217,18218],{"class":41},"indexPerPage",[31,18220,2653],{"class":58},[31,18222,18223,18225,18227,18229],{"class":33,"line":301},[31,18224,18049],{"class":45},[31,18226,18009],{"class":259},[31,18228,7672],{"class":58},[31,18230,243],{"class":45},[31,18232,18233],{"class":33,"line":307},[31,18234,249],{"emptyLinePlaceholder":248},[31,18236,18237,18239],{"class":33,"line":313},[31,18238,17550],{"class":1006},[31,18240,1602],{"class":45},[31,18242,18243,18245],{"class":33,"line":319},[31,18244,5511],{"class":45},[31,18246,18247],{"class":58},"        content,\n",[31,18249,18250,18253],{"class":33,"line":325},[31,18251,18252],{"class":58},"        count:count.length",[31,18254,18255],{"class":45},"`\n",[31,18257,18258],{"class":33,"line":331},[31,18259,2012],{"class":58},[31,18261,18262],{"class":33,"line":337},[31,18263,2017],{"class":58},[31,18265,18266],{"class":33,"line":1752},[31,18267,334],{"class":58},[13,18269,18270,18271,18274,18275,2172,18278,18281],{},"まずしっかりと記事のデータとして",[17,18272,18273],{},"'tag'","を指定して、",[17,18276,18277],{},".where({tag:{ $contains:params.slug}})",[17,18279,18280],{},"params.slug","からURLのスラグを取得して、それが配列内に含まれているかを確かめています。その条件に合致した投稿、すなわち目的のタグを持っている記事のみを取得することができます。",[13,18283,18284],{},"後は一覧ページの実装で説明した通りにテンプレートを記述するなり、ページングを実装すれば完了です。",[207,18286,18287],{"id":18287},"静的書き出しの時はどうなるのか",[13,18289,18290,18291,18294,18295,18297,18298,18300],{},"このカテゴリーのルートはNuxtが知らないので、nuxt.config.jsで追加ルートとして記述しておく必要があります。ただし、私のサイトのようにサイドメニューにずっとリンクがある場合はとくに対策はしなくてもいいです。Nuxtの静的書き出しは",[17,18292,18293],{},"nuxt-link","を辿ってルートを解決しているそうで、自動的にタグ・カテゴリーのルートを書き出してくれました。なので",[17,18296,18293],{},"でタグのリンクを貼って、",[17,18299,17861],{}," の構成が正しければ特に心配ありません。",[207,18302,18304],{"id":18303},"以上でカテゴリータグ機能を実装","以上でカテゴリー。タグ機能を実装",[13,18306,18307],{},"前回までの記事詳細→一覧の作成と似ていましたが、",[1817,18309,18310,18313,18319],{},[1820,18311,18312],{},"記事に新しいメタデータを設定",[1820,18314,18315,18318],{},[17,18316,18317],{},"where()","で特定のタグ・カテゴリーを取得する",[1820,18320,18321],{},"store・外部ファイルで管理する",[13,18323,18324],{},"という点で少し違っていました。今回はカテゴリー・タグといったものですが使い方によってはいろんな分類方法があると思います。ぜひチャレンジしてみてください。次回は最後で、ブログとしてデプロイする前に設定すべきこと、アナリティクスやアドセンスの貼り方について解説します。",[1771,18326,18327],{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":27,"searchDepth":103,"depth":103,"links":18329},[18330,18331,18332,18333,18334,18335,18336],{"id":16593,"depth":52,"text":16593},{"id":16605,"depth":52,"text":16606},{"id":16740,"depth":52,"text":16741},{"id":17844,"depth":52,"text":17845},{"id":17877,"depth":52,"text":17878},{"id":18287,"depth":52,"text":18287},{"id":18303,"depth":52,"text":18304},[5906],"2021-05-09","Nuxt Content × SSG で作る静的ブログ。カテゴリーとタグ機能",{},"\u002Fseries\u002Fnuxt-content-blog-4",{"title":16576,"description":18339},"nuxt-content-blog","Nuxt Content × SSG で作る静的ブログ。","series\u002Fnuxt-content-blog-4",[1797,16666],"_mix\u002Flogo-dark.jpg","SRildu2cH6w8PGbcMmWirBzP0VR8lSIzk3eFtii40vY",{"id":18350,"title":18351,"body":18352,"category":20363,"createdAt":20364,"description":20365,"extension":1790,"index":103,"meta":20366,"navigation":248,"path":20367,"publish":248,"seo":20368,"series":18343,"seriesTitle":18344,"stem":20369,"tag":20370,"thumbnail":18347,"updatedAt":1791,"__hash__":20371},"series\u002Fseries\u002Fnuxt-content-blog-3.md","Nuxt Content × SSG で作る静的ブログ。３：記事一覧ページとページング実装",{"type":10,"value":18353,"toc":20350},[18354,18360,18368,18371,18374,18377,18380,18386,18400,18406,18415,18418,18427,18758,18780,18794,18805,18818,18821,18824,18833,18839,18849,20003,20006,20010,20030,20033,20088,20092,20095,20098,20106,20109,20291,20296,20299,20304,20315,20318,20322,20332,20338,20341,20344,20347],[13,18355,16581,18356,18359],{},[196,18357,16585],{"href":18358},"\u002Fseries\u002Fnuxt-content-blog\u002F2","は詳細ページの実装と静的書き出しを行いました。今回の記事では",[1817,18361,18362,18365],{},[1820,18363,18364],{},"記事一覧ページの作成",[1820,18366,18367],{},"ページング機能",[13,18369,18370],{},"について解説していきます。それでは早速いきましょう。",[207,18372,18373],{"id":18373},"articlesの一覧ページを作る",[365,18375,18376],{"id":18376},"pagesディレクトリを設定する",[13,18378,18379],{},"詳細ページのルーティングを作るために以前は以下のようなディレクトリの設定をしました。",[22,18381,18384],{"className":18382,"code":18383,"language":1864},[1862],"├── pages\n│   ├── articles\n│   　   ├── _slug.vue\n",[17,18385,18383],{"__ignoreMap":27},[13,18387,10508,18388,18391,18392,18395,18396,18399],{},[17,18389,18390],{},"\u002Farticles\u002F{sulg}","というURLが有効になります。一覧ページは",[17,18393,18394],{},"\u002Farticles\u002F","というルートで",[17,18397,18398],{},"content\u002Farticles\u002F","配下の原稿が一覧となって見れるページです。しかし上記の設定では表示されないので以下のようにします。",[22,18401,18404],{"className":18402,"code":18403,"language":1864},[1862],"├── pages\n│   ├── articles\n│   　   ├── index.vue #追加\n│   　   ├── _slug.vue\n",[17,18405,18403],{"__ignoreMap":27},[13,18407,18408,18411,18412,18414],{},[17,18409,18410],{},"index.vue","というものを足しました。このファイルは",[17,18413,18394],{},"というルートに対応しています。ディレクトリの設定は以上となります。",[365,18416,18417],{"id":18417},"一覧のデータを取得してレンダーする",[13,18419,17881,18420,18422,18423,18426],{},[17,18421,18410],{},"にソースを書いていきましょう。詳細ページでは特定のパスに対応するコンテンツを取得していましたが、一覧ページでは",[17,18424,18425],{},"articles","のコンテンツを15件ほど取得するようにしましょう。とりあえずソースを載せます。",[22,18428,18431],{"className":17793,"code":18429,"filename":18430,"language":1798,"meta":27,"style":27},"\u003Ctemplate>\n    \u003Cdiv class=\"\">\n        \u003Ch1>記事一覧\u003C\u002Fh1>\n        \u003Cul>\n        \u003Cli v-for=\"(c,index) in content\" :key=\"index\">\n            \u003Cnuxt-link :to=\"c.path\">{{c.title}}\u003C\u002Fnuxt-link>\n        \u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  async asyncData({ store,$content, params }) {\n    const content = await $content('articles')\n    .only(['title','path'])\n    .sortBy('createdAt', 'desc')\n    .skip(0).limit(15)\n    .fetch();\n\n    return {\n      content,\n    }\n  }\n}\n\u003C\u002Fscript>\n","page\u002Farticles\u002Findex.vue",[17,18432,18433,18442,18456,18474,18482,18513,18542,18550,18558,18566,18574,18578,18586,18594,18617,18639,18664,18688,18711,18721,18725,18731,18738,18742,18746,18750],{"__ignoreMap":27},[31,18434,18435,18437,18440],{"class":33,"line":34},[31,18436,3011],{"class":45},[31,18438,18439],{"class":58},"template",[31,18441,5990],{"class":45},[31,18443,18444,18446,18448,18450,18452,18454],{"class":33,"line":52},[31,18445,5995],{"class":45},[31,18447,377],{"class":58},[31,18449,5966],{"class":37},[31,18451,46],{"class":45},[31,18453,11673],{"class":45},[31,18455,5990],{"class":45},[31,18457,18458,18460,18463,18465,18468,18470,18472],{"class":33,"line":103},[31,18459,6015],{"class":45},[31,18461,18462],{"class":58},"h1",[31,18464,411],{"class":45},[31,18466,18467],{"class":41},"記事一覧",[31,18469,6114],{"class":45},[31,18471,18462],{"class":58},[31,18473,5990],{"class":45},[31,18475,18476,18478,18480],{"class":33,"line":142},[31,18477,6015],{"class":45},[31,18479,1817],{"class":58},[31,18481,5990],{"class":45},[31,18483,18484,18486,18488,18491,18493,18495,18498,18500,18503,18505,18507,18509,18511],{"class":33,"line":181},[31,18485,6015],{"class":45},[31,18487,1820],{"class":58},[31,18489,18490],{"class":37}," v-for",[31,18492,46],{"class":45},[31,18494,77],{"class":45},[31,18496,18497],{"class":80},"(c,index) in content",[31,18499,77],{"class":45},[31,18501,18502],{"class":37}," :key",[31,18504,46],{"class":45},[31,18506,77],{"class":45},[31,18508,8437],{"class":80},[31,18510,77],{"class":45},[31,18512,5990],{"class":45},[31,18514,18515,18517,18519,18522,18524,18526,18529,18531,18533,18536,18538,18540],{"class":33,"line":188},[31,18516,7176],{"class":45},[31,18518,18293],{"class":58},[31,18520,18521],{"class":37}," :to",[31,18523,46],{"class":45},[31,18525,77],{"class":45},[31,18527,18528],{"class":80},"c.path",[31,18530,77],{"class":45},[31,18532,411],{"class":45},[31,18534,18535],{"class":41},"{{c.title}}",[31,18537,6114],{"class":45},[31,18539,18293],{"class":58},[31,18541,5990],{"class":45},[31,18543,18544,18546,18548],{"class":33,"line":283},[31,18545,7246],{"class":45},[31,18547,1820],{"class":58},[31,18549,5990],{"class":45},[31,18551,18552,18554,18556],{"class":33,"line":289},[31,18553,7246],{"class":45},[31,18555,1817],{"class":58},[31,18557,5990],{"class":45},[31,18559,18560,18562,18564],{"class":33,"line":295},[31,18561,6046],{"class":45},[31,18563,377],{"class":58},[31,18565,5990],{"class":45},[31,18567,18568,18570,18572],{"class":33,"line":301},[31,18569,6114],{"class":45},[31,18571,18439],{"class":58},[31,18573,5990],{"class":45},[31,18575,18576],{"class":33,"line":307},[31,18577,249],{"emptyLinePlaceholder":248},[31,18579,18580,18582,18584],{"class":33,"line":313},[31,18581,3011],{"class":45},[31,18583,7265],{"class":58},[31,18585,5990],{"class":45},[31,18587,18588,18590,18592],{"class":33,"line":319},[31,18589,17445],{"class":1006},[31,18591,17898],{"class":1006},[31,18593,1602],{"class":45},[31,18595,18596,18599,18601,18603,18605,18607,18609,18611,18613,18615],{"class":33,"line":325},[31,18597,18598],{"class":37},"  async",[31,18600,17908],{"class":58},[31,18602,17911],{"class":45},[31,18604,17914],{"class":996},[31,18606,69],{"class":45},[31,18608,17919],{"class":996},[31,18610,69],{"class":45},[31,18612,17924],{"class":996},[31,18614,17927],{"class":45},[31,18616,1602],{"class":45},[31,18618,18619,18621,18623,18625,18627,18629,18631,18633,18635,18637],{"class":33,"line":331},[31,18620,2476],{"class":37},[31,18622,18024],{"class":41},[31,18624,2041],{"class":45},[31,18626,17942],{"class":1006},[31,18628,17945],{"class":259},[31,18630,993],{"class":58},[31,18632,2005],{"class":45},[31,18634,18425],{"class":80},[31,18636,2005],{"class":45},[31,18638,2653],{"class":58},[31,18640,18641,18644,18646,18648,18650,18652,18654,18656,18658,18660,18662],{"class":33,"line":337},[31,18642,18643],{"class":45},"    .",[31,18645,17965],{"class":259},[31,18647,18054],{"class":58},[31,18649,2005],{"class":45},[31,18651,72],{"class":80},[31,18653,2005],{"class":45},[31,18655,69],{"class":45},[31,18657,2005],{"class":45},[31,18659,2225],{"class":80},[31,18661,2005],{"class":45},[31,18663,18128],{"class":58},[31,18665,18666,18668,18670,18672,18674,18676,18678,18680,18682,18684,18686],{"class":33,"line":1752},[31,18667,18643],{"class":45},[31,18669,18135],{"class":259},[31,18671,993],{"class":58},[31,18673,2005],{"class":45},[31,18675,18142],{"class":80},[31,18677,2005],{"class":45},[31,18679,69],{"class":45},[31,18681,2000],{"class":45},[31,18683,18151],{"class":80},[31,18685,2005],{"class":45},[31,18687,2653],{"class":58},[31,18689,18690,18692,18694,18696,18698,18700,18702,18704,18706,18709],{"class":33,"line":1758},[31,18691,18643],{"class":45},[31,18693,18193],{"class":259},[31,18695,993],{"class":58},[31,18697,578],{"class":65},[31,18699,1018],{"class":58},[31,18701,237],{"class":45},[31,18703,18204],{"class":259},[31,18705,993],{"class":58},[31,18707,18708],{"class":65},"15",[31,18710,2653],{"class":58},[31,18712,18713,18715,18717,18719],{"class":33,"line":1764},[31,18714,18643],{"class":45},[31,18716,18009],{"class":259},[31,18718,7672],{"class":58},[31,18720,243],{"class":45},[31,18722,18723],{"class":33,"line":2088},[31,18724,249],{"emptyLinePlaceholder":248},[31,18726,18727,18729],{"class":33,"line":2098},[31,18728,7666],{"class":1006},[31,18730,1602],{"class":45},[31,18732,18733,18736],{"class":33,"line":2109},[31,18734,18735],{"class":41},"      content",[31,18737,1647],{"class":45},[31,18739,18740],{"class":33,"line":2114},[31,18741,3775],{"class":45},[31,18743,18744],{"class":33,"line":2119},[31,18745,10877],{"class":45},[31,18747,18748],{"class":33,"line":2131},[31,18749,334],{"class":45},[31,18751,18752,18754,18756],{"class":33,"line":2136},[31,18753,6114],{"class":45},[31,18755,7265],{"class":58},[31,18757,5990],{"class":45},[13,18759,3635,18760,4504,18763,18765,18766,18769,18770,18773,18774,18776,18777,18779],{},[17,18761,18762],{},"$content('articles')",[17,18764,18425],{},"配下のコンテンツを読む指定をします。そして",[17,18767,18768],{},".only(['title','path'])","を使用することでtitleとpathのみのデータを取得することができます。この",[17,18771,18772],{},"only()","を指定しない場合、",[17,18775,2616],{},"プロパティという原稿内容も取得してしまいます。原稿がボリューミーなほど取得コストが大きくなり、静的書き出しなどにも影響されます。そのため一覧などでは",[17,18778,18772],{},"を使用して必要最低限のプロパティを使用した方がいいです。",[13,18781,18782,18785,18786,18789,18790,18793],{},[17,18783,18784],{},"sortBy()","にて特定プロパティでソートし、後のページングで使いますが",[17,18787,18788],{},".skip(0).limit(15)","にて15件の記事を取得します。",[17,18791,18792],{},"asyncData()","内で記事を取得して、それをリストで出力します。",[377,18795,18797,18800,18801,18804],{"className":18796},[380,381],[17,18798,18799],{},"$content()","に対して加えることが可能なメソッドは",[196,18802,5945],{"href":18803,"target":385},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fja\u002Ffetching","で確認できます。\n",[13,18806,18807,18808,2172,18811,11462,18814,18817],{},"Nuxt.jsで内部リンクを作成する時は",[17,18809,18810],{},"\u003Cnuxt-link>",[17,18812,18813],{},"to",[17,18815,18816],{},"content.path","を指定することで詳細ページに移動できるようになります。",[13,18819,18820],{},"一覧ページはこれぐらいで実装できます。今は最初から15件しか取得しないので、大量にある時はページングができるようにしましょう。",[207,18822,18823],{"id":18823},"ページングを実装する",[13,18825,18826,18827,18830,18831,11481],{},"私のサイトでは",[17,18828,18829],{},"\u002Farticles\u002Fpage\u002F2","の様なルートで対応しています。この様なルートを設定する場合は以下のように",[17,18832,17861],{},[22,18834,18837],{"className":18835,"code":18836,"language":1864},[1862],"├── pages\n│   ├── articles\n│   　   ├── index.vue \n│   　   ├── _slug.vue\n│   　   ├── pages          #追加\n│   　        ├──_id.vue    #追加\n",[17,18838,18836],{"__ignoreMap":27},[13,18840,18841,18844,18845,18848],{},[17,18842,18843],{},"_id.vue","を作成することで",[17,18846,18847],{},"\u002Farticles\u002Fpage\u002F{n}","という動的ルートが作成されます。そこでは以下のように設定します。",[22,18850,18853],{"className":17793,"code":18851,"filename":18852,"language":1798,"meta":27,"style":27},"\u003Ctemplate>\n    \u003Cdiv class=\"\">\n        \u003Ch1>記事一覧\u003C\u002Fh1>\n        \u003Cul>\n            \u003Cli v-for=\"(c,index) in content\" :key=\"index\">\n                \u003Cnuxt-link :to=\"c.path\">{{c.title}}\u003C\u002Fnuxt-link>\n            \u003C\u002Fli>\n        \u003C\u002Ful>\n        \u003Cul class=\"p-pagenation-container\">\n            \u003Cli class=\"c-pagenation-unit\" v-for=\"(pg) in num\" :key=\"pg.num\">\n                \u003Cnuxt-link v-if=\"pg.pg\" :to=\"'\u002Farticles\u002Fpage\u002F'+pg.num\" :class=\"(current == pg.num)?'is-current':''\">\n                    {{pg.num}}\n                \u003C\u002Fnuxt-link>\n                \u003Cspan v-else>\n                    {{pg.num}}\n                \u003C\u002Fspan>\n            \u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n    validate({ redirect,params }) {\n        if(\u002F[0-9]+\u002F.test(params.id)) return true;\n        return redirect('\u002Farticles')\n    },\n    async asyncData({ store,$content, params }) {\n        const count = await $content('articles').only('title').fetch();\n        const current = params.id;\n        if(current > Math.ceil( count.length \u002F store.state.indexPerPage)) redirect('\u002Farticles');\n\n        const from = store.state.indexPerPage * (params.id - 1);\n        const to = store.state.indexPerPage * params.id;\n\n        const content = await $content('articles')\n        .only(['title','path'])\n        .sortBy('createdAt', 'desc')\n        .skip(from).limit(to)\n        .fetch();\n\n        return {\n            content,\n            current,\n            count:count.length\n        }\n    },\n    computed:{\n        max(){\n            return Math.ceil( this.$route.params.id \u002F 15);\n        },\n        num(){\n            let tmp = [];\n            for(let n=1; n\u003C=this.max;n++){\n                if(n == 1 || n == this.max){\n                    tmp.push({pg:true,num:n});\n                    continue;\n                }\n                if((this.current - 2 \u003C= n) && (n \u003C= this.current + 2)){\n                    tmp.push({pg:true,num:n})\n                    continue;\n                }\n                if((this.current - 2 - 1 == n) || (n == this.current + 2 + 1) ){\n                   tmp.push({pg:false,num:\"...\"})\n                    continue;\n                }\n            }\n            return tmp;\n        }\n    },\n}\n\u003C\u002Fscript>\n","page\u002Farticles\u002Fpage\u002F_id.vue",[17,18854,18855,18863,18877,18893,18901,18929,18956,18964,18972,18991,19032,19075,19080,19089,19100,19104,19112,19120,19128,19136,19144,19148,19156,19164,19182,19219,19236,19240,19262,19306,19323,19380,19384,19422,19451,19455,19477,19501,19525,19547,19557,19561,19567,19574,19581,19595,19599,19603,19610,19618,19653,19657,19664,19678,19716,19746,19781,19788,19792,19836,19866,19872,19876,19926,19961,19967,19971,19975,19983,19987,19991,19995],{"__ignoreMap":27},[31,18856,18857,18859,18861],{"class":33,"line":34},[31,18858,3011],{"class":45},[31,18860,18439],{"class":58},[31,18862,5990],{"class":45},[31,18864,18865,18867,18869,18871,18873,18875],{"class":33,"line":52},[31,18866,5995],{"class":45},[31,18868,377],{"class":58},[31,18870,5966],{"class":37},[31,18872,46],{"class":45},[31,18874,11673],{"class":45},[31,18876,5990],{"class":45},[31,18878,18879,18881,18883,18885,18887,18889,18891],{"class":33,"line":103},[31,18880,6015],{"class":45},[31,18882,18462],{"class":58},[31,18884,411],{"class":45},[31,18886,18467],{"class":41},[31,18888,6114],{"class":45},[31,18890,18462],{"class":58},[31,18892,5990],{"class":45},[31,18894,18895,18897,18899],{"class":33,"line":142},[31,18896,6015],{"class":45},[31,18898,1817],{"class":58},[31,18900,5990],{"class":45},[31,18902,18903,18905,18907,18909,18911,18913,18915,18917,18919,18921,18923,18925,18927],{"class":33,"line":181},[31,18904,7176],{"class":45},[31,18906,1820],{"class":58},[31,18908,18490],{"class":37},[31,18910,46],{"class":45},[31,18912,77],{"class":45},[31,18914,18497],{"class":80},[31,18916,77],{"class":45},[31,18918,18502],{"class":37},[31,18920,46],{"class":45},[31,18922,77],{"class":45},[31,18924,8437],{"class":80},[31,18926,77],{"class":45},[31,18928,5990],{"class":45},[31,18930,18931,18934,18936,18938,18940,18942,18944,18946,18948,18950,18952,18954],{"class":33,"line":188},[31,18932,18933],{"class":45},"                \u003C",[31,18935,18293],{"class":58},[31,18937,18521],{"class":37},[31,18939,46],{"class":45},[31,18941,77],{"class":45},[31,18943,18528],{"class":80},[31,18945,77],{"class":45},[31,18947,411],{"class":45},[31,18949,18535],{"class":41},[31,18951,6114],{"class":45},[31,18953,18293],{"class":58},[31,18955,5990],{"class":45},[31,18957,18958,18960,18962],{"class":33,"line":283},[31,18959,7209],{"class":45},[31,18961,1820],{"class":58},[31,18963,5990],{"class":45},[31,18965,18966,18968,18970],{"class":33,"line":289},[31,18967,7246],{"class":45},[31,18969,1817],{"class":58},[31,18971,5990],{"class":45},[31,18973,18974,18976,18978,18980,18982,18984,18987,18989],{"class":33,"line":295},[31,18975,6015],{"class":45},[31,18977,1817],{"class":58},[31,18979,5966],{"class":37},[31,18981,46],{"class":45},[31,18983,77],{"class":45},[31,18985,18986],{"class":80},"p-pagenation-container",[31,18988,77],{"class":45},[31,18990,5990],{"class":45},[31,18992,18993,18995,18997,18999,19001,19003,19006,19008,19010,19012,19014,19017,19019,19021,19023,19025,19028,19030],{"class":33,"line":301},[31,18994,7176],{"class":45},[31,18996,1820],{"class":58},[31,18998,5966],{"class":37},[31,19000,46],{"class":45},[31,19002,77],{"class":45},[31,19004,19005],{"class":80},"c-pagenation-unit",[31,19007,77],{"class":45},[31,19009,18490],{"class":37},[31,19011,46],{"class":45},[31,19013,77],{"class":45},[31,19015,19016],{"class":80},"(pg) in num",[31,19018,77],{"class":45},[31,19020,18502],{"class":37},[31,19022,46],{"class":45},[31,19024,77],{"class":45},[31,19026,19027],{"class":80},"pg.num",[31,19029,77],{"class":45},[31,19031,5990],{"class":45},[31,19033,19034,19036,19038,19041,19043,19045,19048,19050,19052,19054,19056,19059,19061,19064,19066,19068,19071,19073],{"class":33,"line":307},[31,19035,18933],{"class":45},[31,19037,18293],{"class":58},[31,19039,19040],{"class":37}," v-if",[31,19042,46],{"class":45},[31,19044,77],{"class":45},[31,19046,19047],{"class":80},"pg.pg",[31,19049,77],{"class":45},[31,19051,18521],{"class":37},[31,19053,46],{"class":45},[31,19055,77],{"class":45},[31,19057,19058],{"class":80},"'\u002Farticles\u002Fpage\u002F'+pg.num",[31,19060,77],{"class":45},[31,19062,19063],{"class":37}," :class",[31,19065,46],{"class":45},[31,19067,77],{"class":45},[31,19069,19070],{"class":80},"(current == pg.num)?'is-current':''",[31,19072,77],{"class":45},[31,19074,5990],{"class":45},[31,19076,19077],{"class":33,"line":313},[31,19078,19079],{"class":41},"                    {{pg.num}}\n",[31,19081,19082,19085,19087],{"class":33,"line":319},[31,19083,19084],{"class":45},"                \u003C\u002F",[31,19086,18293],{"class":58},[31,19088,5990],{"class":45},[31,19090,19091,19093,19095,19098],{"class":33,"line":325},[31,19092,18933],{"class":45},[31,19094,31],{"class":58},[31,19096,19097],{"class":37}," v-else",[31,19099,5990],{"class":45},[31,19101,19102],{"class":33,"line":331},[31,19103,19079],{"class":41},[31,19105,19106,19108,19110],{"class":33,"line":337},[31,19107,19084],{"class":45},[31,19109,31],{"class":58},[31,19111,5990],{"class":45},[31,19113,19114,19116,19118],{"class":33,"line":1752},[31,19115,7209],{"class":45},[31,19117,1820],{"class":58},[31,19119,5990],{"class":45},[31,19121,19122,19124,19126],{"class":33,"line":1758},[31,19123,7246],{"class":45},[31,19125,1817],{"class":58},[31,19127,5990],{"class":45},[31,19129,19130,19132,19134],{"class":33,"line":1764},[31,19131,6046],{"class":45},[31,19133,377],{"class":58},[31,19135,5990],{"class":45},[31,19137,19138,19140,19142],{"class":33,"line":2088},[31,19139,6114],{"class":45},[31,19141,18439],{"class":58},[31,19143,5990],{"class":45},[31,19145,19146],{"class":33,"line":2098},[31,19147,249],{"emptyLinePlaceholder":248},[31,19149,19150,19152,19154],{"class":33,"line":2109},[31,19151,3011],{"class":45},[31,19153,7265],{"class":58},[31,19155,5990],{"class":45},[31,19157,19158,19160,19162],{"class":33,"line":2114},[31,19159,17445],{"class":1006},[31,19161,17898],{"class":1006},[31,19163,1602],{"class":45},[31,19165,19166,19169,19171,19174,19176,19178,19180],{"class":33,"line":2119},[31,19167,19168],{"class":58},"    validate",[31,19170,17911],{"class":45},[31,19172,19173],{"class":996}," redirect",[31,19175,69],{"class":45},[31,19177,17996],{"class":996},[31,19179,17927],{"class":45},[31,19181,1602],{"class":45},[31,19183,19184,19187,19189,19192,19195,19198,19200,19202,19204,19206,19208,19210,19213,19215,19217],{"class":33,"line":2131},[31,19185,19186],{"class":1006},"        if",[31,19188,993],{"class":58},[31,19190,19191],{"class":45},"\u002F[",[31,19193,19194],{"class":80},"0-9",[31,19196,19197],{"class":45},"]+\u002F",[31,19199,237],{"class":45},[31,19201,13932],{"class":259},[31,19203,993],{"class":58},[31,19205,17996],{"class":41},[31,19207,237],{"class":45},[31,19209,59],{"class":41},[31,19211,19212],{"class":58},")) ",[31,19214,1007],{"class":1006},[31,19216,3754],{"class":2643},[31,19218,243],{"class":45},[31,19220,19221,19223,19225,19227,19229,19232,19234],{"class":33,"line":2136},[31,19222,17550],{"class":1006},[31,19224,19173],{"class":259},[31,19226,993],{"class":58},[31,19228,2005],{"class":45},[31,19230,19231],{"class":80},"\u002Farticles",[31,19233,2005],{"class":45},[31,19235,2653],{"class":58},[31,19237,19238],{"class":33,"line":2141},[31,19239,2017],{"class":45},[31,19241,19242,19244,19246,19248,19250,19252,19254,19256,19258,19260],{"class":33,"line":2147},[31,19243,17905],{"class":37},[31,19245,17908],{"class":58},[31,19247,17911],{"class":45},[31,19249,17914],{"class":996},[31,19251,69],{"class":45},[31,19253,17919],{"class":996},[31,19255,69],{"class":45},[31,19257,17924],{"class":996},[31,19259,17927],{"class":45},[31,19261,1602],{"class":45},[31,19263,19264,19266,19268,19270,19272,19274,19276,19278,19280,19282,19284,19286,19288,19290,19292,19294,19296,19298,19300,19302,19304],{"class":33,"line":2152},[31,19265,17934],{"class":37},[31,19267,17937],{"class":41},[31,19269,2041],{"class":45},[31,19271,17942],{"class":1006},[31,19273,17945],{"class":259},[31,19275,993],{"class":58},[31,19277,2005],{"class":45},[31,19279,18425],{"class":80},[31,19281,2005],{"class":45},[31,19283,1018],{"class":58},[31,19285,237],{"class":45},[31,19287,17965],{"class":259},[31,19289,993],{"class":58},[31,19291,2005],{"class":45},[31,19293,72],{"class":80},[31,19295,2005],{"class":45},[31,19297,1018],{"class":58},[31,19299,237],{"class":45},[31,19301,18009],{"class":259},[31,19303,7672],{"class":58},[31,19305,243],{"class":45},[31,19307,19308,19310,19313,19315,19317,19319,19321],{"class":33,"line":4},[31,19309,17934],{"class":37},[31,19311,19312],{"class":41}," current",[31,19314,2041],{"class":45},[31,19316,17924],{"class":41},[31,19318,237],{"class":45},[31,19320,59],{"class":41},[31,19322,243],{"class":45},[31,19324,19325,19327,19329,19332,19334,19336,19338,19341,19344,19347,19349,19351,19353,19355,19357,19359,19361,19363,19365,19368,19370,19372,19374,19376,19378],{"class":33,"line":2523},[31,19326,19186],{"class":1006},[31,19328,993],{"class":58},[31,19330,19331],{"class":41},"current",[31,19333,11706],{"class":45},[31,19335,7892],{"class":41},[31,19337,237],{"class":45},[31,19339,19340],{"class":259},"ceil",[31,19342,19343],{"class":58},"( ",[31,19345,19346],{"class":41},"count",[31,19348,237],{"class":45},[31,19350,8047],{"class":41},[31,19352,1964],{"class":45},[31,19354,17914],{"class":41},[31,19356,237],{"class":45},[31,19358,17542],{"class":41},[31,19360,237],{"class":45},[31,19362,18218],{"class":41},[31,19364,19212],{"class":58},[31,19366,19367],{"class":259},"redirect",[31,19369,993],{"class":58},[31,19371,2005],{"class":45},[31,19373,19231],{"class":80},[31,19375,2005],{"class":45},[31,19377,1018],{"class":58},[31,19379,243],{"class":45},[31,19381,19382],{"class":33,"line":2528},[31,19383,249],{"emptyLinePlaceholder":248},[31,19385,19386,19388,19391,19393,19395,19397,19399,19401,19403,19406,19408,19410,19412,19414,19416,19418,19420],{"class":33,"line":2547},[31,19387,17934],{"class":37},[31,19389,19390],{"class":41}," from",[31,19392,2041],{"class":45},[31,19394,17914],{"class":41},[31,19396,237],{"class":45},[31,19398,17542],{"class":41},[31,19400,237],{"class":45},[31,19402,18218],{"class":41},[31,19404,19405],{"class":45}," *",[31,19407,8309],{"class":58},[31,19409,17996],{"class":41},[31,19411,237],{"class":45},[31,19413,59],{"class":41},[31,19415,8541],{"class":45},[31,19417,6615],{"class":65},[31,19419,1018],{"class":58},[31,19421,243],{"class":45},[31,19423,19424,19426,19429,19431,19433,19435,19437,19439,19441,19443,19445,19447,19449],{"class":33,"line":2560},[31,19425,17934],{"class":37},[31,19427,19428],{"class":41}," to",[31,19430,2041],{"class":45},[31,19432,17914],{"class":41},[31,19434,237],{"class":45},[31,19436,17542],{"class":41},[31,19438,237],{"class":45},[31,19440,18218],{"class":41},[31,19442,19405],{"class":45},[31,19444,17924],{"class":41},[31,19446,237],{"class":45},[31,19448,59],{"class":41},[31,19450,243],{"class":45},[31,19452,19453],{"class":33,"line":2606},[31,19454,249],{"emptyLinePlaceholder":248},[31,19456,19457,19459,19461,19463,19465,19467,19469,19471,19473,19475],{"class":33,"line":2623},[31,19458,17934],{"class":37},[31,19460,18024],{"class":41},[31,19462,2041],{"class":45},[31,19464,17942],{"class":1006},[31,19466,17945],{"class":259},[31,19468,993],{"class":58},[31,19470,2005],{"class":45},[31,19472,18425],{"class":80},[31,19474,2005],{"class":45},[31,19476,2653],{"class":58},[31,19478,19479,19481,19483,19485,19487,19489,19491,19493,19495,19497,19499],{"class":33,"line":2635},[31,19480,18049],{"class":45},[31,19482,17965],{"class":259},[31,19484,18054],{"class":58},[31,19486,2005],{"class":45},[31,19488,72],{"class":80},[31,19490,2005],{"class":45},[31,19492,69],{"class":45},[31,19494,2005],{"class":45},[31,19496,2225],{"class":80},[31,19498,2005],{"class":45},[31,19500,18128],{"class":58},[31,19502,19503,19505,19507,19509,19511,19513,19515,19517,19519,19521,19523],{"class":33,"line":2647},[31,19504,18049],{"class":45},[31,19506,18135],{"class":259},[31,19508,993],{"class":58},[31,19510,2005],{"class":45},[31,19512,18142],{"class":80},[31,19514,2005],{"class":45},[31,19516,69],{"class":45},[31,19518,2000],{"class":45},[31,19520,18151],{"class":80},[31,19522,2005],{"class":45},[31,19524,2653],{"class":58},[31,19526,19527,19529,19531,19533,19535,19537,19539,19541,19543,19545],{"class":33,"line":2656},[31,19528,18049],{"class":45},[31,19530,18193],{"class":259},[31,19532,993],{"class":58},[31,19534,12747],{"class":41},[31,19536,1018],{"class":58},[31,19538,237],{"class":45},[31,19540,18204],{"class":259},[31,19542,993],{"class":58},[31,19544,18813],{"class":41},[31,19546,2653],{"class":58},[31,19548,19549,19551,19553,19555],{"class":33,"line":2662},[31,19550,18049],{"class":45},[31,19552,18009],{"class":259},[31,19554,7672],{"class":58},[31,19556,243],{"class":45},[31,19558,19559],{"class":33,"line":2671},[31,19560,249],{"emptyLinePlaceholder":248},[31,19562,19563,19565],{"class":33,"line":2676},[31,19564,17550],{"class":1006},[31,19566,1602],{"class":45},[31,19568,19569,19572],{"class":33,"line":4405},[31,19570,19571],{"class":41},"            content",[31,19573,1647],{"class":45},[31,19575,19576,19579],{"class":33,"line":5044},[31,19577,19578],{"class":41},"            current",[31,19580,1647],{"class":45},[31,19582,19583,19586,19588,19590,19592],{"class":33,"line":5049},[31,19584,19585],{"class":58},"            count",[31,19587,62],{"class":45},[31,19589,19346],{"class":41},[31,19591,237],{"class":45},[31,19593,19594],{"class":41},"length\n",[31,19596,19597],{"class":33,"line":5054},[31,19598,2012],{"class":45},[31,19600,19601],{"class":33,"line":5075},[31,19602,2017],{"class":45},[31,19604,19605,19608],{"class":33,"line":5086},[31,19606,19607],{"class":58},"    computed",[31,19609,1660],{"class":45},[31,19611,19612,19615],{"class":33,"line":5092},[31,19613,19614],{"class":58},"        max",[31,19616,19617],{"class":45},"(){\n",[31,19619,19620,19622,19624,19626,19628,19630,19633,19636,19638,19640,19642,19644,19646,19649,19651],{"class":33,"line":5118},[31,19621,17620],{"class":1006},[31,19623,7892],{"class":41},[31,19625,237],{"class":45},[31,19627,19340],{"class":259},[31,19629,19343],{"class":58},[31,19631,19632],{"class":45},"this.",[31,19634,19635],{"class":41},"$route",[31,19637,237],{"class":45},[31,19639,17996],{"class":41},[31,19641,237],{"class":45},[31,19643,59],{"class":41},[31,19645,1964],{"class":45},[31,19647,19648],{"class":65}," 15",[31,19650,1018],{"class":58},[31,19652,243],{"class":45},[31,19654,19655],{"class":33,"line":5141},[31,19656,3225],{"class":45},[31,19658,19659,19662],{"class":33,"line":5151},[31,19660,19661],{"class":58},"        num",[31,19663,19617],{"class":45},[31,19665,19666,19669,19672,19674,19676],{"class":33,"line":5168},[31,19667,19668],{"class":37},"            let",[31,19670,19671],{"class":41}," tmp",[31,19673,2041],{"class":45},[31,19675,7339],{"class":58},[31,19677,243],{"class":45},[31,19679,19680,19683,19685,19687,19690,19692,19694,19696,19698,19701,19704,19706,19709,19712,19714],{"class":33,"line":5178},[31,19681,19682],{"class":1006},"            for",[31,19684,993],{"class":58},[31,19686,1932],{"class":37},[31,19688,19689],{"class":41}," n",[31,19691,46],{"class":45},[31,19693,66],{"class":65},[31,19695,11893],{"class":45},[31,19697,19689],{"class":41},[31,19699,19700],{"class":45},"\u003C=this.",[31,19702,19703],{"class":41},"max",[31,19705,11893],{"class":45},[31,19707,19708],{"class":41},"n",[31,19710,19711],{"class":45},"++",[31,19713,1018],{"class":58},[31,19715,275],{"class":45},[31,19717,19718,19721,19723,19725,19728,19730,19733,19735,19737,19740,19742,19744],{"class":33,"line":5197},[31,19719,19720],{"class":1006},"                if",[31,19722,993],{"class":58},[31,19724,19708],{"class":41},[31,19726,19727],{"class":45}," ==",[31,19729,6615],{"class":65},[31,19731,19732],{"class":45}," ||",[31,19734,19689],{"class":41},[31,19736,19727],{"class":45},[31,19738,19739],{"class":45}," this.",[31,19741,19703],{"class":41},[31,19743,1018],{"class":58},[31,19745,275],{"class":45},[31,19747,19748,19751,19753,19755,19757,19759,19762,19764,19766,19768,19771,19773,19775,19777,19779],{"class":33,"line":5203},[31,19749,19750],{"class":41},"                    tmp",[31,19752,237],{"class":45},[31,19754,2541],{"class":259},[31,19756,993],{"class":58},[31,19758,425],{"class":45},[31,19760,19761],{"class":58},"pg",[31,19763,62],{"class":45},[31,19765,619],{"class":2643},[31,19767,69],{"class":45},[31,19769,19770],{"class":58},"num",[31,19772,62],{"class":45},[31,19774,19708],{"class":41},[31,19776,469],{"class":45},[31,19778,1018],{"class":58},[31,19780,243],{"class":45},[31,19782,19783,19786],{"class":33,"line":5208},[31,19784,19785],{"class":1006},"                    continue",[31,19787,243],{"class":45},[31,19789,19790],{"class":33,"line":5218},[31,19791,1691],{"class":45},[31,19793,19794,19796,19799,19801,19803,19805,19808,19811,19813,19815,19818,19820,19822,19824,19826,19828,19830,19832,19834],{"class":33,"line":5233},[31,19795,19720],{"class":1006},[31,19797,19798],{"class":58},"((",[31,19800,19632],{"class":45},[31,19802,19331],{"class":41},[31,19804,8541],{"class":45},[31,19806,19807],{"class":65}," 2",[31,19809,19810],{"class":45}," \u003C=",[31,19812,19689],{"class":41},[31,19814,8587],{"class":58},[31,19816,19817],{"class":45},"&&",[31,19819,8309],{"class":58},[31,19821,19708],{"class":41},[31,19823,19810],{"class":45},[31,19825,19739],{"class":45},[31,19827,19331],{"class":41},[31,19829,8552],{"class":45},[31,19831,19807],{"class":65},[31,19833,8202],{"class":58},[31,19835,275],{"class":45},[31,19837,19838,19840,19842,19844,19846,19848,19850,19852,19854,19856,19858,19860,19862,19864],{"class":33,"line":5238},[31,19839,19750],{"class":41},[31,19841,237],{"class":45},[31,19843,2541],{"class":259},[31,19845,993],{"class":58},[31,19847,425],{"class":45},[31,19849,19761],{"class":58},[31,19851,62],{"class":45},[31,19853,619],{"class":2643},[31,19855,69],{"class":45},[31,19857,19770],{"class":58},[31,19859,62],{"class":45},[31,19861,19708],{"class":41},[31,19863,469],{"class":45},[31,19865,2653],{"class":58},[31,19867,19868,19870],{"class":33,"line":5243},[31,19869,19785],{"class":1006},[31,19871,243],{"class":45},[31,19873,19874],{"class":33,"line":5248},[31,19875,1691],{"class":45},[31,19877,19878,19880,19882,19884,19886,19888,19890,19892,19894,19896,19898,19900,19903,19905,19907,19909,19911,19913,19915,19917,19919,19921,19924],{"class":33,"line":5253},[31,19879,19720],{"class":1006},[31,19881,19798],{"class":58},[31,19883,19632],{"class":45},[31,19885,19331],{"class":41},[31,19887,8541],{"class":45},[31,19889,19807],{"class":65},[31,19891,8541],{"class":45},[31,19893,6615],{"class":65},[31,19895,19727],{"class":45},[31,19897,19689],{"class":41},[31,19899,8587],{"class":58},[31,19901,19902],{"class":45},"||",[31,19904,8309],{"class":58},[31,19906,19708],{"class":41},[31,19908,19727],{"class":45},[31,19910,19739],{"class":45},[31,19912,19331],{"class":41},[31,19914,8552],{"class":45},[31,19916,19807],{"class":65},[31,19918,8552],{"class":45},[31,19920,6615],{"class":65},[31,19922,19923],{"class":58},") )",[31,19925,275],{"class":45},[31,19927,19928,19931,19933,19935,19937,19939,19941,19943,19945,19947,19949,19951,19953,19955,19957,19959],{"class":33,"line":5258},[31,19929,19930],{"class":41},"                   tmp",[31,19932,237],{"class":45},[31,19934,2541],{"class":259},[31,19936,993],{"class":58},[31,19938,425],{"class":45},[31,19940,19761],{"class":58},[31,19942,62],{"class":45},[31,19944,611],{"class":2643},[31,19946,69],{"class":45},[31,19948,19770],{"class":58},[31,19950,62],{"class":45},[31,19952,77],{"class":45},[31,19954,95],{"class":80},[31,19956,77],{"class":45},[31,19958,469],{"class":45},[31,19960,2653],{"class":58},[31,19962,19963,19965],{"class":33,"line":5269},[31,19964,19785],{"class":1006},[31,19966,243],{"class":45},[31,19968,19969],{"class":33,"line":5289},[31,19970,1691],{"class":45},[31,19972,19973],{"class":33,"line":5294},[31,19974,1749],{"class":45},[31,19976,19977,19979,19981],{"class":33,"line":5315},[31,19978,17620],{"class":1006},[31,19980,19671],{"class":41},[31,19982,243],{"class":45},[31,19984,19985],{"class":33,"line":5320},[31,19986,2012],{"class":45},[31,19988,19989],{"class":33,"line":5329},[31,19990,2017],{"class":45},[31,19992,19993],{"class":33,"line":5338},[31,19994,334],{"class":45},[31,19996,19997,19999,20001],{"class":33,"line":5343},[31,19998,6114],{"class":45},[31,20000,7265],{"class":58},[31,20002,5990],{"class":45},[13,20004,20005],{},"詳細を解説します。",[365,20007,20009],{"id":20008},"idの値とページ数をチェック","{id}の値とページ数をチェック",[13,20011,20012,20015,20016,20019,20020,20023,20024,4504,20027,20029],{},[17,20013,20014],{},"\u002Farciles\u002Fpage\u002F{id}","において",[17,20017,20018],{},"{id}","が数値のみ許可するようにします。そこでNuxt SSRでは",[17,20021,20022],{},"validate()","というものを使用できます。",[17,20025,20026],{},"params.id",[17,20028,20018],{},"の値が取得できますので、そこで数値であることを確認します。もしそうでなければ、１ページ目にリダイレクトさせます。",[13,20031,20032],{},"数値であっても提供するページを超えた数を指定されては困ります。その時のために{id}のページ数が存在するかをチェックしておきます。もし存在しなければ１ページ目にリダイレクトさせます。",[22,20034,20036],{"className":24,"code":20035,"language":26,"meta":27,"style":27},"if(current > Math.ceil( count.length \u002F store.state.indexPerPage)) redirect('\u002Farticles');\n",[17,20037,20038],{"__ignoreMap":27},[31,20039,20040,20042,20045,20047,20049,20051,20053,20056,20058,20061,20063,20065,20067,20069,20071,20074,20076,20078,20080,20082,20084,20086],{"class":33,"line":34},[31,20041,5057],{"class":1006},[31,20043,20044],{"class":41},"(current ",[31,20046,411],{"class":45},[31,20048,7892],{"class":41},[31,20050,237],{"class":45},[31,20052,19340],{"class":259},[31,20054,20055],{"class":41},"( count",[31,20057,237],{"class":45},[31,20059,20060],{"class":41},"length ",[31,20062,1979],{"class":45},[31,20064,17914],{"class":41},[31,20066,237],{"class":45},[31,20068,17542],{"class":41},[31,20070,237],{"class":45},[31,20072,20073],{"class":41},"indexPerPage)) ",[31,20075,19367],{"class":259},[31,20077,993],{"class":41},[31,20079,2005],{"class":45},[31,20081,19231],{"class":80},[31,20083,2005],{"class":45},[31,20085,1018],{"class":41},[31,20087,243],{"class":45},[377,20089,20091],{"className":20090},[380,697],"\nSSRであれば上記の設定は必須ですが、静的書き出しでは正直入りません。なぜなら静的書き出し時にはこのページング分だけのルートしか提供されないためです。静的HTMLで提供する時は存在しないルートにアクセスした時、404のページにリダイレクトさせておくといいです。\n",[365,20093,20094],{"id":20094},"ページングに必要な値を取得する",[13,20096,20097],{},"これはページングを実装するために必要なロジックのな話になるので、一部省略しますが必要な値は",[1817,20099,20100,20103],{},[1820,20101,20102],{},"何件目から(from)",[1820,20104,20105],{},"何件目まで(to)",[13,20107,20108],{},"が必要となります。ソースでは以下のように使用しています。",[22,20110,20112],{"className":24,"code":20111,"language":26,"meta":27,"style":27},"const from = store.state.indexPerPage * (params.id - 1);     \u002F\u002F何件目から\nconst to = store.state.indexPerPage * params.id;             \u002F\u002F何件目まで\n\nconst content = await $content('articles')\n.only(['title','path'])\n.sortBy('createdAt', 'desc')\n.skip(from).limit(to)   \u002F\u002F ページング取得\n.fetch();\n",[17,20113,20114,20155,20187,20191,20214,20238,20262,20281],{"__ignoreMap":27},[31,20115,20116,20118,20121,20123,20125,20127,20129,20131,20134,20136,20139,20141,20144,20146,20148,20150,20152],{"class":33,"line":34},[31,20117,38],{"class":37},[31,20119,20120],{"class":41}," from ",[31,20122,46],{"class":45},[31,20124,17914],{"class":41},[31,20126,237],{"class":45},[31,20128,17542],{"class":41},[31,20130,237],{"class":45},[31,20132,20133],{"class":41},"indexPerPage ",[31,20135,6151],{"class":45},[31,20137,20138],{"class":41}," (params",[31,20140,237],{"class":45},[31,20142,20143],{"class":41},"id ",[31,20145,2509],{"class":45},[31,20147,6615],{"class":65},[31,20149,1018],{"class":41},[31,20151,11893],{"class":45},[31,20153,20154],{"class":184},"     \u002F\u002F何件目から\n",[31,20156,20157,20159,20162,20164,20166,20168,20170,20172,20174,20176,20178,20180,20182,20184],{"class":33,"line":52},[31,20158,38],{"class":37},[31,20160,20161],{"class":41}," to ",[31,20163,46],{"class":45},[31,20165,17914],{"class":41},[31,20167,237],{"class":45},[31,20169,17542],{"class":41},[31,20171,237],{"class":45},[31,20173,20133],{"class":41},[31,20175,6151],{"class":45},[31,20177,17924],{"class":41},[31,20179,237],{"class":45},[31,20181,59],{"class":41},[31,20183,11893],{"class":45},[31,20185,20186],{"class":184},"             \u002F\u002F何件目まで\n",[31,20188,20189],{"class":33,"line":103},[31,20190,249],{"emptyLinePlaceholder":248},[31,20192,20193,20195,20198,20200,20202,20204,20206,20208,20210,20212],{"class":33,"line":142},[31,20194,38],{"class":37},[31,20196,20197],{"class":41}," content ",[31,20199,46],{"class":45},[31,20201,17942],{"class":1006},[31,20203,17945],{"class":259},[31,20205,993],{"class":41},[31,20207,2005],{"class":45},[31,20209,18425],{"class":80},[31,20211,2005],{"class":45},[31,20213,2653],{"class":41},[31,20215,20216,20218,20220,20222,20224,20226,20228,20230,20232,20234,20236],{"class":33,"line":181},[31,20217,237],{"class":45},[31,20219,17965],{"class":259},[31,20221,18054],{"class":41},[31,20223,2005],{"class":45},[31,20225,72],{"class":80},[31,20227,2005],{"class":45},[31,20229,69],{"class":45},[31,20231,2005],{"class":45},[31,20233,2225],{"class":80},[31,20235,2005],{"class":45},[31,20237,18128],{"class":41},[31,20239,20240,20242,20244,20246,20248,20250,20252,20254,20256,20258,20260],{"class":33,"line":188},[31,20241,237],{"class":45},[31,20243,18135],{"class":259},[31,20245,993],{"class":41},[31,20247,2005],{"class":45},[31,20249,18142],{"class":80},[31,20251,2005],{"class":45},[31,20253,69],{"class":45},[31,20255,2000],{"class":45},[31,20257,18151],{"class":80},[31,20259,2005],{"class":45},[31,20261,2653],{"class":41},[31,20263,20264,20266,20268,20271,20273,20275,20278],{"class":33,"line":283},[31,20265,237],{"class":45},[31,20267,18193],{"class":259},[31,20269,20270],{"class":41},"(from)",[31,20272,237],{"class":45},[31,20274,18204],{"class":259},[31,20276,20277],{"class":41},"(to)   ",[31,20279,20280],{"class":184},"\u002F\u002F ページング取得\n",[31,20282,20283,20285,20287,20289],{"class":33,"line":289},[31,20284,237],{"class":45},[31,20286,18009],{"class":259},[31,20288,7672],{"class":41},[31,20290,243],{"class":45},[13,20292,20293,20295],{},[17,20294,20026],{},"が現在のページ数となっていますので、それを参考にしてページングによるコンテンツ取得をします。",[365,20297,20298],{"id":20298},"最大ページと表示ページ範囲を設定してレンダーする",[13,20300,20301,20303],{},[17,20302,18792],{},"での設定は以上でOKです。params.idから現在ページ数を用いてページングのレンダーを構築します。私のページングでは",[1817,20305,20306,20309,20312],{},[1820,20307,20308],{},"１ページ目と最後のページは常に表示",[1820,20310,20311],{},"現在ページから2ページ分だけ表示",[1820,20313,20314],{},"範囲外のページは「...」で表示する",[13,20316,20317],{},"という仕様で実装されています。詳細な仕組みは上記のソースをみてください。必要分のページのリンクを作成してページングは完成です。",[207,20319,20321],{"id":20320},"静的書き出しの際には特に気にせず大丈夫","静的書き出しの際には特に気にせず大丈夫。",[13,20323,20324,20325,20328,20329,20331],{},"ページングの設定して次は静的書き出しを行います。ただし前回のようにルートをnuxtに伝えるということは不要です。どうやら",[17,20326,20327],{},"\u002Farticles\u002Findex","を書き出す時にページングの",[17,20330,18293],{},"を辿ってルートを解決してくれているそうです。実際の書き出しでも",[22,20333,20336],{"className":20334,"code":20335,"language":1864},[1862],"✔ Generated route \"\u002Farticles\u002Fpage\n✔ Generated route \"\u002Farticles\u002Fpage\u002F1\" \n✔ Generated route \"\u002Farticles\u002Fpage\u002F2\" \n",[17,20337,20335],{"__ignoreMap":27},[13,20339,20340],{},"以上のようなログが確認できました。",[207,20342,20343],{"id":20343},"次回は",[13,20345,20346],{},"以上で一覧ページの作成とページングが実装終了しました。ページングとページリストはコンポーネント化しておいた方が後々の開発が楽になります。次回はカテゴリーとタグ機能の解説を行います。",[1771,20348,20349],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}",{"title":27,"searchDepth":103,"depth":103,"links":20351},[20352,20356,20361,20362],{"id":18373,"depth":52,"text":18373,"children":20353},[20354,20355],{"id":18376,"depth":103,"text":18376},{"id":18417,"depth":103,"text":18417},{"id":18823,"depth":52,"text":18823,"children":20357},[20358,20359,20360],{"id":20008,"depth":103,"text":20009},{"id":20094,"depth":103,"text":20094},{"id":20298,"depth":103,"text":20298},{"id":20320,"depth":52,"text":20321},{"id":20343,"depth":52,"text":20343},[5906],"2021-05-06","Nuxt Content × SSG で作る静的ブログ。記事一覧ページとページング機能ついて説明。",{},"\u002Fseries\u002Fnuxt-content-blog-3",{"title":18351,"description":20365},"series\u002Fnuxt-content-blog-3",[1797,16666],"A6PomFr-zdk_yRRjUN1XT-Qhy330_OwrjwFmZaj63C8",{"id":20373,"title":20374,"body":20375,"category":22043,"createdAt":22044,"description":22045,"extension":1790,"index":52,"meta":22046,"navigation":248,"path":22047,"publish":248,"seo":22048,"series":18343,"seriesTitle":18344,"stem":22049,"tag":22050,"thumbnail":18347,"updatedAt":1791,"__hash__":22051},"series\u002Fseries\u002Fnuxt-content-blog-2.md","Nuxt Content × SSG で作る静的ブログ。２：基本的な記事項目のレンダリングと静的書き出し",{"type":10,"value":20376,"toc":22027},[20377,20383,20394,20396,20399,20402,20414,20425,20431,20448,20452,20458,20463,20484,20488,20494,20627,20641,20646,20663,20666,20675,20678,20681,20692,20703,20750,20763,20766,21005,21012,21029,21036,21040,21043,21063,21067,21070,21073,21079,21085,21142,21145,21148,21159,21165,21168,21171,21174,21762,21765,21780,21944,21960,21963,21968,21974,21981,21987,21993,21999,22008,22011,22024],[13,20378,16581,20379,20382],{},[196,20380,16585],{"href":20381},"\u002Fseries\u002Fnuxt-content-blog\u002F1","は概念と基本的なコンテンツの作成・取得・表示について解説しました。今回の記事では",[1817,20384,20385,20388,20391],{},[1820,20386,20387],{},"nuxt.jsにおけるpage構成の設定",[1820,20389,20390],{},"目次生成、画像のレンダリング、どんな項目をレンダリングできるのか？",[1820,20392,20393],{},"静的書き出しの設定",[13,20395,18370],{},[207,20397,20398],{"id":20398},"サイトのルーティングを考えてpagesの構成を設定する",[365,20400,20401],{"id":20401},"何をどう設定すればいいか",[13,20403,20404,20405,20407,20408,20410,20411,20413],{},"Nuxt.jsは",[17,20406,17861],{},"というディレクトリ配下にファイルを作ることで、vue-routerの設定が自動で行われURLが生成されます。私のブログでは",[17,20409,18390],{},"というURLで対象の記事を呼び出します。そのURLが有効になるには",[17,20412,17861],{},"ディレクトリの構築をする必要があります。",[13,20415,20416,20417,20420,20421,20424],{},"一方、Nuxt Contentで任意の記事データを取得してみると",[17,20418,20419],{},"path:","というプロパティがあります。それは",[17,20422,20423],{},"content\u002F","ディレクトリをルートとしたパスになっています。以下のような構成の場合、",[22,20426,20429],{"className":20427,"code":20428,"language":1864},[1862],"├── content\n│   ├── articles\n│   │   ├── aaaaaa.md\n",[17,20430,20428],{"__ignoreMap":27},[13,20432,20433,20436,20437,20440,20441,20444,20445,20447],{},[17,20434,20435],{},"aaaaaa.md","のデータのパスは",[17,20438,20439],{},"\u002Farticles\u002Faaaaaa","となります。つまり",[17,20442,20443],{},"https:\u002F\u002Fexample.com\u002Farticles\u002Faaaaaa","というルートに対して、",[17,20446,20435],{},"が呼び出されるように設定します。",[365,20449,20451],{"id":20450},"ひとまず以下のようにpageを作成","ひとまず以下のようにpage\u002Fを作成",[13,20453,20454,20455,20457],{},"ひとまず以下のように",[17,20456,17861],{},"配下に作成してください。",[22,20459,20461],{"className":20460,"code":18383,"language":1864},[1862],[17,20462,18383],{"__ignoreMap":27},[13,20464,20465,20468,20469,11805,20474,20476,20477,4504,20480,20483],{},[17,20466,20467],{},"_slug.vue","といものを作ることで",[196,20470,20473],{"href":20471,"rel":20472},"https:\u002F\u002Fja.nuxtjs.org\u002Fdocs\u002F2.x\u002Fdirectory-structure\u002Fpages",[901],"公式にある通り",[17,20475,18390],{},"のルートに対して",[17,20478,20479],{},"params.sulg",[17,20481,20482],{},"{sulg}","の値を取得できるようになります。",[365,20485,20487],{"id":20486},"paramssulgで指定されたsulgのファイルfetchする","params.sulgで指定されたsulgのファイルfetchする",[13,20489,17881,20490,20493],{},[17,20491,20492],{},"_sulg.vue","で以下のように記述します。",[22,20495,20498],{"className":17793,"code":20496,"filename":20497,"language":1798,"meta":27,"style":27},"\u003Ctemplate>\n  \u003Carticle>\n    \u003Cnuxt-content :document=\"content\" \u002F>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n\u003Cscirpt>\nexport default {\n  async asyncData({ $content, params,redirect }) {\n    const content = await $content('articles').where({path:\"\u002Farticles\u002F\"+params.slug}).fetch();\n    if(content.length > 0){\n      return {\n        content:content[0],\n      }\n    }else{\n      redirect('\u002Farticles')\n    }\n  }\n}\n\u003C\u002Fscript>\n\n","\u002Farticles\u002F_sulg.vue",[17,20499,20500,20508,20518,20539,20548,20556,20565,20570,20575,20580,20585,20590,20595,20600,20605,20610,20614,20618,20622],{"__ignoreMap":27},[31,20501,20502,20504,20506],{"class":33,"line":34},[31,20503,3011],{"class":45},[31,20505,18439],{"class":58},[31,20507,5990],{"class":45},[31,20509,20510,20513,20516],{"class":33,"line":52},[31,20511,20512],{"class":45},"  \u003C",[31,20514,20515],{"class":58},"article",[31,20517,5990],{"class":45},[31,20519,20520,20522,20525,20528,20530,20532,20534,20536],{"class":33,"line":103},[31,20521,5995],{"class":45},[31,20523,20524],{"class":58},"nuxt-content",[31,20526,20527],{"class":37}," :document",[31,20529,46],{"class":45},[31,20531,77],{"class":45},[31,20533,88],{"class":80},[31,20535,77],{"class":45},[31,20537,20538],{"class":45}," \u002F>\n",[31,20540,20541,20544,20546],{"class":33,"line":142},[31,20542,20543],{"class":45},"  \u003C\u002F",[31,20545,20515],{"class":58},[31,20547,5990],{"class":45},[31,20549,20550,20552,20554],{"class":33,"line":181},[31,20551,6114],{"class":45},[31,20553,18439],{"class":58},[31,20555,5990],{"class":45},[31,20557,20558,20560,20563],{"class":33,"line":188},[31,20559,3011],{"class":45},[31,20561,20562],{"class":58},"scirpt",[31,20564,5990],{"class":45},[31,20566,20567],{"class":33,"line":283},[31,20568,20569],{"class":41},"export default {\n",[31,20571,20572],{"class":33,"line":289},[31,20573,20574],{"class":41},"  async asyncData({ $content, params,redirect }) {\n",[31,20576,20577],{"class":33,"line":295},[31,20578,20579],{"class":41},"    const content = await $content('articles').where({path:\"\u002Farticles\u002F\"+params.slug}).fetch();\n",[31,20581,20582],{"class":33,"line":301},[31,20583,20584],{"class":41},"    if(content.length > 0){\n",[31,20586,20587],{"class":33,"line":307},[31,20588,20589],{"class":41},"      return {\n",[31,20591,20592],{"class":33,"line":313},[31,20593,20594],{"class":41},"        content:content[0],\n",[31,20596,20597],{"class":33,"line":319},[31,20598,20599],{"class":41},"      }\n",[31,20601,20602],{"class":33,"line":325},[31,20603,20604],{"class":41},"    }else{\n",[31,20606,20607],{"class":33,"line":331},[31,20608,20609],{"class":41},"      redirect('\u002Farticles')\n",[31,20611,20612],{"class":33,"line":337},[31,20613,3775],{"class":41},[31,20615,20616],{"class":33,"line":1752},[31,20617,10877],{"class":41},[31,20619,20620],{"class":33,"line":1758},[31,20621,334],{"class":41},[31,20623,20624],{"class":33,"line":1764},[31,20625,20626],{"class":41},"\u003C\u002Fscript>\n",[13,20628,20629,20631,20632,20634,20635,4504,20637,20640],{},[17,20630,18792],{},"中で",[17,20633,18799],{},"をフェッチします。そして",[17,20636,18317],{},[17,20638,20639],{},"\"\u002Farticles\u002F\"+params.slug","に一致するコンテンツを引っ張るようにします。",[13,20642,20643,20645],{},[17,20644,17980],{},"クエリを使用すると配列で結果が返るので、あれば一致した結果、なければ一覧ページにリダイレクトするようにします。以上でNuxtにおけるpagesディレクトリの設定は完了です。",[377,20647,20649,20651,20652,20655,20656,20658,20659],{"className":20648},[380,381],[17,20650,18792],{},"はSSRの時の",[17,20653,20654],{},"page\u002F","配下のファイルで使用できます。サーバーサイドで処理される箇所であり、そこで$contentをfetchします。静的書き出しを行うと、",[17,20657,18792],{},"内の処理は書き出し中に実行されます。\n",[196,20660,20662],{"href":20661,"target":385},"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Fdata-fetching","公式：Data Fetching",[207,20664,20665],{"id":20665},"コンテンツの作成",[13,20667,20668,20669,20674],{},"ブログ記事は単に文章だけでなく、太字、リンク、画像、見出し、目次が大体必要になります。文章の修飾はマークダウンの記述を行えば問題ありません。マークダウン記法は今回は解説しません。",[196,20670,20673],{"href":20671,"rel":20672},"https:\u002F\u002Fqiita.com\u002Fkamorits\u002Fitems\u002F6f342da395ad57468ae3",[901],"こちらの記事","がお世話になりました。",[365,20676,20677],{"id":20677},"画像をレンダリングする場合",[13,20679,20680],{},"マークダウンで画像を表示する場合は基本的に以下のように記述します。",[22,20682,20686],{"className":20683,"code":20684,"language":20685,"meta":27,"style":27},"language-markdown shiki shiki-themes material-theme-ocean","![image alt text](\u002Fimage\u002Fsample.jpg)\n","markdown",[17,20687,20688],{"__ignoreMap":27},[31,20689,20690],{"class":33,"line":34},[31,20691,20684],{},[13,20693,20694,20695,20698,20699,20702],{},"Nuxtの場合は画像を",[17,20696,20697],{},"asset","あたりに入れておき、",[17,20700,20701],{},"require('~\u002Fasset\u002Fsample.jpg')","という感じで依存性を解決できます。しかしマークダウンでは以下のパターンで画像パスの解決ができません。",[22,20704,20706],{"className":20683,"code":20705,"language":20685,"meta":27,"style":27},"\n\u002F\u002F パターン１\n![image alt text](~\u002Fasset\u002Fsample.jpg)\n\n\u002F\u002F パターン２\n![image alt text](\u002Fasset\u002Fsample.jpg)\n\n\u002F\u002F パターン３\n![image alt text](require(~\u002Fasset\u002Fsample.jpg))\n\n",[17,20707,20708,20712,20717,20722,20726,20731,20736,20740,20745],{"__ignoreMap":27},[31,20709,20710],{"class":33,"line":34},[31,20711,249],{"emptyLinePlaceholder":248},[31,20713,20714],{"class":33,"line":52},[31,20715,20716],{},"\u002F\u002F パターン１\n",[31,20718,20719],{"class":33,"line":103},[31,20720,20721],{},"![image alt text](~\u002Fasset\u002Fsample.jpg)\n",[31,20723,20724],{"class":33,"line":142},[31,20725,249],{"emptyLinePlaceholder":248},[31,20727,20728],{"class":33,"line":181},[31,20729,20730],{},"\u002F\u002F パターン２\n",[31,20732,20733],{"class":33,"line":188},[31,20734,20735],{},"![image alt text](\u002Fasset\u002Fsample.jpg)\n",[31,20737,20738],{"class":33,"line":283},[31,20739,249],{"emptyLinePlaceholder":248},[31,20741,20742],{"class":33,"line":289},[31,20743,20744],{},"\u002F\u002F パターン３\n",[31,20746,20747],{"class":33,"line":295},[31,20748,20749],{},"![image alt text](require(~\u002Fasset\u002Fsample.jpg))\n",[13,20751,20752,20753,20756,20757,20762],{},"画像のレンダリングは",[17,20754,20755],{},"\"@nuxt\u002Fcontent\": \"^1.14.0\"","時点で特段に対応されておらず、ドキュメントにも書かれていませんでした。",[196,20758,20761],{"href":20759,"rel":20760},"https:\u002F\u002Fgithub.com\u002Fnuxt\u002Fcontent\u002Fissues\u002F106",[901],"Githubのissueでも報告されているよう","に議論となっています。",[13,20764,20765],{},"一応解決策としてはマークダウンファイルそのものにVueコンポーネントを書いてしまうことです。最初に画像レンダリング用のコンポーネントを作成します。",[22,20767,20770],{"className":17793,"code":20768,"filename":20769,"language":1798,"meta":27,"style":27},"\u003Ctemplate>\n  \u003Cimg :src=\"imgSrc()\" :alt=\"alt\"\u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  props: {\n    src: {\n      type: String,\n      required: true\n    },\n    alt: {\n      type: String,\n    },\n  },\n  methods: {\n    imgSrc() {\n      try {\n        return require(`~\u002Fassets\u002Fimage\u002F${this.src}`)\n      } catch (error) {\n        return null\n      }\n    }\n  },\n}\n\u003C\u002Fscript>\n","components\u002FimageRender.vue",[17,20771,20772,20780,20812,20820,20824,20832,20840,20849,20858,20870,20879,20883,20892,20902,20906,20910,20919,20928,20935,20958,20974,20981,20985,20989,20993,20997],{"__ignoreMap":27},[31,20773,20774,20776,20778],{"class":33,"line":34},[31,20775,3011],{"class":45},[31,20777,18439],{"class":58},[31,20779,5990],{"class":45},[31,20781,20782,20784,20786,20789,20791,20793,20796,20798,20801,20803,20805,20808,20810],{"class":33,"line":52},[31,20783,20512],{"class":45},[31,20785,3014],{"class":58},[31,20787,20788],{"class":37}," :src",[31,20790,46],{"class":45},[31,20792,77],{"class":45},[31,20794,20795],{"class":80},"imgSrc()",[31,20797,77],{"class":45},[31,20799,20800],{"class":37}," :alt",[31,20802,46],{"class":45},[31,20804,77],{"class":45},[31,20806,20807],{"class":80},"alt",[31,20809,77],{"class":45},[31,20811,3029],{"class":45},[31,20813,20814,20816,20818],{"class":33,"line":103},[31,20815,6114],{"class":45},[31,20817,18439],{"class":58},[31,20819,5990],{"class":45},[31,20821,20822],{"class":33,"line":142},[31,20823,249],{"emptyLinePlaceholder":248},[31,20825,20826,20828,20830],{"class":33,"line":181},[31,20827,3011],{"class":45},[31,20829,7265],{"class":58},[31,20831,5990],{"class":45},[31,20833,20834,20836,20838],{"class":33,"line":188},[31,20835,17445],{"class":1006},[31,20837,17898],{"class":1006},[31,20839,1602],{"class":45},[31,20841,20842,20845,20847],{"class":33,"line":283},[31,20843,20844],{"class":58},"  props",[31,20846,62],{"class":45},[31,20848,1602],{"class":45},[31,20850,20851,20854,20856],{"class":33,"line":289},[31,20852,20853],{"class":58},"    src",[31,20855,62],{"class":45},[31,20857,1602],{"class":45},[31,20859,20860,20863,20865,20868],{"class":33,"line":295},[31,20861,20862],{"class":58},"      type",[31,20864,62],{"class":45},[31,20866,20867],{"class":41}," String",[31,20869,1647],{"class":45},[31,20871,20872,20875,20877],{"class":33,"line":301},[31,20873,20874],{"class":58},"      required",[31,20876,62],{"class":45},[31,20878,16707],{"class":2643},[31,20880,20881],{"class":33,"line":307},[31,20882,2017],{"class":45},[31,20884,20885,20888,20890],{"class":33,"line":313},[31,20886,20887],{"class":58},"    alt",[31,20889,62],{"class":45},[31,20891,1602],{"class":45},[31,20893,20894,20896,20898,20900],{"class":33,"line":319},[31,20895,20862],{"class":58},[31,20897,62],{"class":45},[31,20899,20867],{"class":41},[31,20901,1647],{"class":45},[31,20903,20904],{"class":33,"line":325},[31,20905,2017],{"class":45},[31,20907,20908],{"class":33,"line":331},[31,20909,10815],{"class":45},[31,20911,20912,20915,20917],{"class":33,"line":337},[31,20913,20914],{"class":58},"  methods",[31,20916,62],{"class":45},[31,20918,1602],{"class":45},[31,20920,20921,20924,20926],{"class":33,"line":1752},[31,20922,20923],{"class":58},"    imgSrc",[31,20925,7672],{"class":45},[31,20927,1602],{"class":45},[31,20929,20930,20933],{"class":33,"line":1758},[31,20931,20932],{"class":1006},"      try",[31,20934,1602],{"class":45},[31,20936,20937,20939,20941,20943,20945,20948,20950,20952,20954,20956],{"class":33,"line":1764},[31,20938,17550],{"class":1006},[31,20940,2194],{"class":259},[31,20942,993],{"class":58},[31,20944,5511],{"class":45},[31,20946,20947],{"class":80},"~\u002Fassets\u002Fimage\u002F",[31,20949,2595],{"class":45},[31,20951,19632],{"class":45},[31,20953,1847],{"class":41},[31,20955,2601],{"class":45},[31,20957,2653],{"class":58},[31,20959,20960,20962,20965,20967,20970,20972],{"class":33,"line":2088},[31,20961,2650],{"class":45},[31,20963,20964],{"class":1006}," catch",[31,20966,8309],{"class":58},[31,20968,20969],{"class":41},"error",[31,20971,8587],{"class":58},[31,20973,275],{"class":45},[31,20975,20976,20978],{"class":33,"line":2098},[31,20977,17550],{"class":1006},[31,20979,20980],{"class":45}," null\n",[31,20982,20983],{"class":33,"line":2109},[31,20984,20599],{"class":45},[31,20986,20987],{"class":33,"line":2114},[31,20988,3775],{"class":45},[31,20990,20991],{"class":33,"line":2119},[31,20992,10815],{"class":45},[31,20994,20995],{"class":33,"line":2131},[31,20996,334],{"class":45},[31,20998,20999,21001,21003],{"class":33,"line":2136},[31,21000,6114],{"class":45},[31,21002,7265],{"class":58},[31,21004,5990],{"class":45},[13,21006,21007,21008,21011],{},"上記のコンポーネントを ",[395,21009,21010],{},"マークダウン"," に記述します。",[22,21013,21017],{"className":21014,"code":21015,"language":21016,"meta":27,"style":27},"language-sample.md shiki shiki-themes material-theme-ocean","以下のようにします。\n\u003CimageRender src=\"sample.jpg\"\u002F>\n","sample.md",[17,21018,21019,21024],{"__ignoreMap":27},[31,21020,21021],{"class":33,"line":34},[31,21022,21023],{},"以下のようにします。\n",[31,21025,21026],{"class":33,"line":52},[31,21027,21028],{},"\u003CimageRender src=\"sample.jpg\"\u002F>\n",[13,21030,21031,21032,21035],{},"上記の記述はNuxt Contentがåいい感じにvueコンポーネントとして扱ってくれます。パスの解決はコンポーネント内の",[17,21033,21034],{},"require()","が行います。あまりかっこいい方法ではありませんが、一応これで画像をレンダリングできます。",[365,21037,21039],{"id":21038},"html要素をレンダリングする","HTML要素をレンダリングする",[13,21041,21042],{},"Nuxt Contentはマークダウン内のHTMLをHTMLとして扱ってくれますので、カスタムな要素を記述できます。",[22,21044,21046],{"className":21014,"code":21045,"language":21016,"meta":27,"style":27},"\u003Cdiv class=\"alert alert-warning\">\nこのアラートもこのようにHTMLをマークダウンに書いています！\n\u003C\u002Fdiv>\n",[17,21047,21048,21053,21058],{"__ignoreMap":27},[31,21049,21050],{"class":33,"line":34},[31,21051,21052],{},"\u003Cdiv class=\"alert alert-warning\">\n",[31,21054,21055],{"class":33,"line":52},[31,21056,21057],{},"このアラートもこのようにHTMLをマークダウンに書いています！\n",[31,21059,21060],{"class":33,"line":103},[31,21061,21062],{},"\u003C\u002Fdiv>\n",[377,21064,21066],{"className":21065},[380,697],"\nこのアラートもこのようにHTMLをマークダウンに書いています！\n",[365,21068,21069],{"id":21069},"シンタックスハイライトを有効にする",[13,21071,21072],{},"Nuxt Contentは一応開発者向けなのか、簡単にコードブロックに対してシンタックスハイライトを有効にすることができます。prismJSを使用するのでまずはインストールします。",[22,21074,21077],{"className":21075,"code":21076,"language":1864},[1862],"npm install prism-themes\n\n",[17,21078,21076],{"__ignoreMap":27},[13,21080,13547,21081,21084],{},[17,21082,21083],{},"nuxt.config.js","で以下のようにテーマのCSSを設定します。",[22,21086,21088],{"className":24,"code":21087,"filename":21083,"language":26,"meta":27,"style":27},"content: {\n    markdown: {\n      prism: {\n        theme: 'prism-themes\u002Fthemes\u002Fprism-material-oceanic.css'\n      }\n    }\n  },\n",[17,21089,21090,21098,21107,21116,21130,21134,21138],{"__ignoreMap":27},[31,21091,21092,21094,21096],{"class":33,"line":34},[31,21093,88],{"class":6150},[31,21095,62],{"class":45},[31,21097,1602],{"class":45},[31,21099,21100,21103,21105],{"class":33,"line":52},[31,21101,21102],{"class":6150},"    markdown",[31,21104,62],{"class":45},[31,21106,1602],{"class":45},[31,21108,21109,21112,21114],{"class":33,"line":103},[31,21110,21111],{"class":6150},"      prism",[31,21113,62],{"class":45},[31,21115,1602],{"class":45},[31,21117,21118,21121,21123,21125,21128],{"class":33,"line":142},[31,21119,21120],{"class":6150},"        theme",[31,21122,62],{"class":45},[31,21124,2000],{"class":45},[31,21126,21127],{"class":80},"prism-themes\u002Fthemes\u002Fprism-material-oceanic.css",[31,21129,4866],{"class":45},[31,21131,21132],{"class":33,"line":181},[31,21133,20599],{"class":45},[31,21135,21136],{"class":33,"line":188},[31,21137,3775],{"class":45},[31,21139,21140],{"class":33,"line":283},[31,21141,10815],{"class":45},[13,21143,21144],{},"以上でコードブロック内にてシンタックスハイライトが有効になります。",[365,21146,21147],{"id":21147},"目次の作成",[13,21149,21150,21151,21154,21155,21158],{},"目次の作成、もとい見出しのデータの取得は簡単です。",[17,21152,21153],{},"const content = $content().fetch()","で取得した ",[17,21156,21157],{},"content.toc","で見出しのデータが取得できます。",[22,21160,21163],{"className":21161,"code":21162,"language":1864},[1862],"toc:Array[8]\n    0:Object\n        depth:2\n        id:\"サイトのルーティングを考えてpagesの構成を設定する\"\n        text:\"サイトのルーティングを考えてpagesの構成を設定する\"\n    1:Object\n",[17,21164,21162],{"__ignoreMap":27},[13,21166,21167],{},"私のブログの左サイドにある目次も、上記のようなオブジェクトを利用して作っています。",[365,21169,21170],{"id":21170},"その他の項目や要素について",[13,21172,21173],{},"以上がブログに必要であろう要素をNuxt Contentで記述しました。私の一般記事のtemplateは以下ようになっていますので、是非参考にしてください。",[22,21175,21178],{"className":17793,"code":21176,"filename":21177,"language":1798,"meta":27,"style":27},"\u003Ctemplate>\n  \u003Cdiv class=\"p-main-container\">\n    \u003Cdiv class=\"p-main-wrapper\">\n        \u002F\u002F目次のコンポーネント\n        \u003Ctoc :toc=\"content.toc\"\u002F>\n\n        \u002F\u002Fメインのエリア\n        \u003Cdiv id=\"l-center-area\">\n\n            \u002F\u002Fサムネイル\n            \u003Cimg v-if=\"thumbnail\" class=\"c-article-thumbnail\" :src=\"thumbnail\" :alt=\"content.title\">\n\n            \u002F\u002Fタグとカテゴリーのバッチ\n            \u003Cdiv class=\"p-article-badge p-badge-container\">\n                \u003Cnuxt-link class=\"c-tag-badge u-blue\" v-for=\"(c,index) in content.category\" :key=\"'category-'+index\" :to=\"'\u002Fcategory\u002F'+c\">\n                    \u003Cspan>{{$store.getters['getCategoryTextBySlug'](c)}}\u003C\u002Fspan>\n                \u003C\u002Fnuxt-link>\n                \u003Cnuxt-link class=\"c-tag-badge\" v-for=\"(t,index) in content.tag\" :key=\"'tag-'+index\" :to=\"'\u002Ftag\u002F'+t\">\n                    \u003Cspan>{{$store.getters['getTagTextBySlug'](t)}}\u003C\u002Fspan>\n                \u003C\u002Fnuxt-link>\n            \u003C\u002Fdiv>\n\n            \u003Ch1 class=\"c-article-header\">{{ content.title }}\u003C\u002Fh1>\n\n            \u002F\u002F 更新一時など\n            \u003Cdiv class=\"p-articler-date\">\n                \u003Cspan class=\"c-date\">\u003Cfa-icon :icon=\"['fa', 'history']\"\u002F>{{ updateAt }}\u003C\u002Fspan>\n                \u003Cspan class=\"c-date\">\u003Cfa-icon :icon=\"['far', 'clock']\"\u002F>{{ createdAt }}\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n\n            \u002F\u002F マークダウンのレンダリング箇所\n            \u003Cnuxt-content :document=\"content\" \u002F>\n        \u003C\u002Fdiv>\n\n        \u002F\u002Fサイドメニュー\n        \u003Csidemenu\u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","pages\u002Farticles\u002F_slug.vue",[17,21179,21180,21188,21206,21225,21230,21250,21254,21259,21278,21282,21287,21337,21341,21346,21365,21417,21435,21443,21495,21512,21520,21528,21532,21560,21564,21569,21588,21635,21677,21685,21689,21694,21712,21720,21724,21729,21738,21746,21754],{"__ignoreMap":27},[31,21181,21182,21184,21186],{"class":33,"line":34},[31,21183,3011],{"class":45},[31,21185,18439],{"class":58},[31,21187,5990],{"class":45},[31,21189,21190,21192,21194,21196,21198,21200,21202,21204],{"class":33,"line":52},[31,21191,20512],{"class":45},[31,21193,377],{"class":58},[31,21195,5966],{"class":37},[31,21197,46],{"class":45},[31,21199,77],{"class":45},[31,21201,6258],{"class":80},[31,21203,77],{"class":45},[31,21205,5990],{"class":45},[31,21207,21208,21210,21212,21214,21216,21218,21221,21223],{"class":33,"line":103},[31,21209,5995],{"class":45},[31,21211,377],{"class":58},[31,21213,5966],{"class":37},[31,21215,46],{"class":45},[31,21217,77],{"class":45},[31,21219,21220],{"class":80},"p-main-wrapper",[31,21222,77],{"class":45},[31,21224,5990],{"class":45},[31,21226,21227],{"class":33,"line":142},[31,21228,21229],{"class":41},"        \u002F\u002F目次のコンポーネント\n",[31,21231,21232,21234,21237,21240,21242,21244,21246,21248],{"class":33,"line":181},[31,21233,6015],{"class":45},[31,21235,21236],{"class":58},"toc",[31,21238,21239],{"class":37}," :toc",[31,21241,46],{"class":45},[31,21243,77],{"class":45},[31,21245,21157],{"class":80},[31,21247,77],{"class":45},[31,21249,3029],{"class":45},[31,21251,21252],{"class":33,"line":188},[31,21253,249],{"emptyLinePlaceholder":248},[31,21255,21256],{"class":33,"line":283},[31,21257,21258],{"class":41},"        \u002F\u002Fメインのエリア\n",[31,21260,21261,21263,21265,21267,21269,21271,21274,21276],{"class":33,"line":289},[31,21262,6015],{"class":45},[31,21264,377],{"class":58},[31,21266,5978],{"class":37},[31,21268,46],{"class":45},[31,21270,77],{"class":45},[31,21272,21273],{"class":80},"l-center-area",[31,21275,77],{"class":45},[31,21277,5990],{"class":45},[31,21279,21280],{"class":33,"line":295},[31,21281,249],{"emptyLinePlaceholder":248},[31,21283,21284],{"class":33,"line":301},[31,21285,21286],{"class":41},"            \u002F\u002Fサムネイル\n",[31,21288,21289,21291,21293,21295,21297,21299,21301,21303,21305,21307,21309,21312,21314,21316,21318,21320,21322,21324,21326,21328,21330,21333,21335],{"class":33,"line":307},[31,21290,7176],{"class":45},[31,21292,3014],{"class":58},[31,21294,19040],{"class":37},[31,21296,46],{"class":45},[31,21298,77],{"class":45},[31,21300,16712],{"class":80},[31,21302,77],{"class":45},[31,21304,5966],{"class":37},[31,21306,46],{"class":45},[31,21308,77],{"class":45},[31,21310,21311],{"class":80},"c-article-thumbnail",[31,21313,77],{"class":45},[31,21315,20788],{"class":37},[31,21317,46],{"class":45},[31,21319,77],{"class":45},[31,21321,16712],{"class":80},[31,21323,77],{"class":45},[31,21325,20800],{"class":37},[31,21327,46],{"class":45},[31,21329,77],{"class":45},[31,21331,21332],{"class":80},"content.title",[31,21334,77],{"class":45},[31,21336,5990],{"class":45},[31,21338,21339],{"class":33,"line":313},[31,21340,249],{"emptyLinePlaceholder":248},[31,21342,21343],{"class":33,"line":319},[31,21344,21345],{"class":41},"            \u002F\u002Fタグとカテゴリーのバッチ\n",[31,21347,21348,21350,21352,21354,21356,21358,21361,21363],{"class":33,"line":325},[31,21349,7176],{"class":45},[31,21351,377],{"class":58},[31,21353,5966],{"class":37},[31,21355,46],{"class":45},[31,21357,77],{"class":45},[31,21359,21360],{"class":80},"p-article-badge p-badge-container",[31,21362,77],{"class":45},[31,21364,5990],{"class":45},[31,21366,21367,21369,21371,21373,21375,21377,21380,21382,21384,21386,21388,21391,21393,21395,21397,21399,21402,21404,21406,21408,21410,21413,21415],{"class":33,"line":331},[31,21368,18933],{"class":45},[31,21370,18293],{"class":58},[31,21372,5966],{"class":37},[31,21374,46],{"class":45},[31,21376,77],{"class":45},[31,21378,21379],{"class":80},"c-tag-badge u-blue",[31,21381,77],{"class":45},[31,21383,18490],{"class":37},[31,21385,46],{"class":45},[31,21387,77],{"class":45},[31,21389,21390],{"class":80},"(c,index) in content.category",[31,21392,77],{"class":45},[31,21394,18502],{"class":37},[31,21396,46],{"class":45},[31,21398,77],{"class":45},[31,21400,21401],{"class":80},"'category-'+index",[31,21403,77],{"class":45},[31,21405,18521],{"class":37},[31,21407,46],{"class":45},[31,21409,77],{"class":45},[31,21411,21412],{"class":80},"'\u002Fcategory\u002F'+c",[31,21414,77],{"class":45},[31,21416,5990],{"class":45},[31,21418,21419,21422,21424,21426,21429,21431,21433],{"class":33,"line":337},[31,21420,21421],{"class":45},"                    \u003C",[31,21423,31],{"class":58},[31,21425,411],{"class":45},[31,21427,21428],{"class":41},"{{$store.getters['getCategoryTextBySlug'](c)}}",[31,21430,6114],{"class":45},[31,21432,31],{"class":58},[31,21434,5990],{"class":45},[31,21436,21437,21439,21441],{"class":33,"line":1752},[31,21438,19084],{"class":45},[31,21440,18293],{"class":58},[31,21442,5990],{"class":45},[31,21444,21445,21447,21449,21451,21453,21455,21458,21460,21462,21464,21466,21469,21471,21473,21475,21477,21480,21482,21484,21486,21488,21491,21493],{"class":33,"line":1758},[31,21446,18933],{"class":45},[31,21448,18293],{"class":58},[31,21450,5966],{"class":37},[31,21452,46],{"class":45},[31,21454,77],{"class":45},[31,21456,21457],{"class":80},"c-tag-badge",[31,21459,77],{"class":45},[31,21461,18490],{"class":37},[31,21463,46],{"class":45},[31,21465,77],{"class":45},[31,21467,21468],{"class":80},"(t,index) in content.tag",[31,21470,77],{"class":45},[31,21472,18502],{"class":37},[31,21474,46],{"class":45},[31,21476,77],{"class":45},[31,21478,21479],{"class":80},"'tag-'+index",[31,21481,77],{"class":45},[31,21483,18521],{"class":37},[31,21485,46],{"class":45},[31,21487,77],{"class":45},[31,21489,21490],{"class":80},"'\u002Ftag\u002F'+t",[31,21492,77],{"class":45},[31,21494,5990],{"class":45},[31,21496,21497,21499,21501,21503,21506,21508,21510],{"class":33,"line":1764},[31,21498,21421],{"class":45},[31,21500,31],{"class":58},[31,21502,411],{"class":45},[31,21504,21505],{"class":41},"{{$store.getters['getTagTextBySlug'](t)}}",[31,21507,6114],{"class":45},[31,21509,31],{"class":58},[31,21511,5990],{"class":45},[31,21513,21514,21516,21518],{"class":33,"line":2088},[31,21515,19084],{"class":45},[31,21517,18293],{"class":58},[31,21519,5990],{"class":45},[31,21521,21522,21524,21526],{"class":33,"line":2098},[31,21523,7209],{"class":45},[31,21525,377],{"class":58},[31,21527,5990],{"class":45},[31,21529,21530],{"class":33,"line":2109},[31,21531,249],{"emptyLinePlaceholder":248},[31,21533,21534,21536,21538,21540,21542,21544,21547,21549,21551,21554,21556,21558],{"class":33,"line":2114},[31,21535,7176],{"class":45},[31,21537,18462],{"class":58},[31,21539,5966],{"class":37},[31,21541,46],{"class":45},[31,21543,77],{"class":45},[31,21545,21546],{"class":80},"c-article-header",[31,21548,77],{"class":45},[31,21550,411],{"class":45},[31,21552,21553],{"class":41},"{{ content.title }}",[31,21555,6114],{"class":45},[31,21557,18462],{"class":58},[31,21559,5990],{"class":45},[31,21561,21562],{"class":33,"line":2119},[31,21563,249],{"emptyLinePlaceholder":248},[31,21565,21566],{"class":33,"line":2131},[31,21567,21568],{"class":41},"            \u002F\u002F 更新一時など\n",[31,21570,21571,21573,21575,21577,21579,21581,21584,21586],{"class":33,"line":2136},[31,21572,7176],{"class":45},[31,21574,377],{"class":58},[31,21576,5966],{"class":37},[31,21578,46],{"class":45},[31,21580,77],{"class":45},[31,21582,21583],{"class":80},"p-articler-date",[31,21585,77],{"class":45},[31,21587,5990],{"class":45},[31,21589,21590,21592,21594,21596,21598,21600,21603,21605,21608,21611,21614,21616,21618,21621,21623,21626,21629,21631,21633],{"class":33,"line":2141},[31,21591,18933],{"class":45},[31,21593,31],{"class":58},[31,21595,5966],{"class":37},[31,21597,46],{"class":45},[31,21599,77],{"class":45},[31,21601,21602],{"class":80},"c-date",[31,21604,77],{"class":45},[31,21606,21607],{"class":45},">\u003C",[31,21609,21610],{"class":58},"fa-icon",[31,21612,21613],{"class":37}," :icon",[31,21615,46],{"class":45},[31,21617,77],{"class":45},[31,21619,21620],{"class":80},"['fa', 'history']",[31,21622,77],{"class":45},[31,21624,21625],{"class":45},"\u002F>",[31,21627,21628],{"class":41},"{{ updateAt }}",[31,21630,6114],{"class":45},[31,21632,31],{"class":58},[31,21634,5990],{"class":45},[31,21636,21637,21639,21641,21643,21645,21647,21649,21651,21653,21655,21657,21659,21661,21664,21666,21668,21671,21673,21675],{"class":33,"line":2147},[31,21638,18933],{"class":45},[31,21640,31],{"class":58},[31,21642,5966],{"class":37},[31,21644,46],{"class":45},[31,21646,77],{"class":45},[31,21648,21602],{"class":80},[31,21650,77],{"class":45},[31,21652,21607],{"class":45},[31,21654,21610],{"class":58},[31,21656,21613],{"class":37},[31,21658,46],{"class":45},[31,21660,77],{"class":45},[31,21662,21663],{"class":80},"['far', 'clock']",[31,21665,77],{"class":45},[31,21667,21625],{"class":45},[31,21669,21670],{"class":41},"{{ createdAt }}",[31,21672,6114],{"class":45},[31,21674,31],{"class":58},[31,21676,5990],{"class":45},[31,21678,21679,21681,21683],{"class":33,"line":2152},[31,21680,7209],{"class":45},[31,21682,377],{"class":58},[31,21684,5990],{"class":45},[31,21686,21687],{"class":33,"line":4},[31,21688,249],{"emptyLinePlaceholder":248},[31,21690,21691],{"class":33,"line":2523},[31,21692,21693],{"class":41},"            \u002F\u002F マークダウンのレンダリング箇所\n",[31,21695,21696,21698,21700,21702,21704,21706,21708,21710],{"class":33,"line":2528},[31,21697,7176],{"class":45},[31,21699,20524],{"class":58},[31,21701,20527],{"class":37},[31,21703,46],{"class":45},[31,21705,77],{"class":45},[31,21707,88],{"class":80},[31,21709,77],{"class":45},[31,21711,20538],{"class":45},[31,21713,21714,21716,21718],{"class":33,"line":2547},[31,21715,7246],{"class":45},[31,21717,377],{"class":58},[31,21719,5990],{"class":45},[31,21721,21722],{"class":33,"line":2560},[31,21723,249],{"emptyLinePlaceholder":248},[31,21725,21726],{"class":33,"line":2606},[31,21727,21728],{"class":41},"        \u002F\u002Fサイドメニュー\n",[31,21730,21731,21733,21736],{"class":33,"line":2623},[31,21732,6015],{"class":45},[31,21734,21735],{"class":58},"sidemenu",[31,21737,3029],{"class":45},[31,21739,21740,21742,21744],{"class":33,"line":2635},[31,21741,6046],{"class":45},[31,21743,377],{"class":58},[31,21745,5990],{"class":45},[31,21747,21748,21750,21752],{"class":33,"line":2647},[31,21749,20543],{"class":45},[31,21751,377],{"class":58},[31,21753,5990],{"class":45},[31,21755,21756,21758,21760],{"class":33,"line":2656},[31,21757,6114],{"class":45},[31,21759,18439],{"class":58},[31,21761,5990],{"class":45},[207,21763,21764],{"id":21764},"静的書き出しをしてみる",[13,21766,21767,21768,21773,21774,4504,21776,21779],{},"それではpagesファイル、マークダウンも作成したのでとりあえずある分だけ静的書き出ししてみましょう。",[196,21769,21772],{"href":21770,"rel":21771},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fja\u002Fadvanced#%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E7%94%9F%E6%88%90",[901],"公式の説明","がありますが",[17,21775,21083],{},[17,21777,21778],{},"generate","オプションを設定必要があります。では以下のように設定します。",[22,21781,21783],{"className":24,"code":21782,"filename":21083,"language":26,"meta":27,"style":27},"generate: {\n    async routes () {\n      const { $content } = require('@nuxt\u002Fcontent')\n      const files = await $content({ deep: true }).only(['path']).fetch()\n      return files.map(file => file.path === '\u002Findex' ? '\u002F' : file.path);\n    }\n},\n",[17,21784,21785,21793,21805,21831,21880,21936,21940],{"__ignoreMap":27},[31,21786,21787,21789,21791],{"class":33,"line":34},[31,21788,21778],{"class":6150},[31,21790,62],{"class":45},[31,21792,1602],{"class":45},[31,21794,21795,21797,21800,21803],{"class":33,"line":52},[31,21796,17905],{"class":41},[31,21798,21799],{"class":259}," routes",[31,21801,21802],{"class":58}," () ",[31,21804,275],{"class":45},[31,21806,21807,21810,21812,21814,21816,21818,21820,21822,21824,21827,21829],{"class":33,"line":103},[31,21808,21809],{"class":37},"      const",[31,21811,1003],{"class":45},[31,21813,17945],{"class":41},[31,21815,12083],{"class":45},[31,21817,2041],{"class":45},[31,21819,2194],{"class":259},[31,21821,993],{"class":58},[31,21823,2005],{"class":45},[31,21825,21826],{"class":80},"@nuxt\u002Fcontent",[31,21828,2005],{"class":45},[31,21830,2653],{"class":58},[31,21832,21833,21835,21838,21840,21842,21844,21846,21848,21850,21852,21854,21856,21858,21860,21862,21864,21866,21868,21870,21873,21875,21877],{"class":33,"line":142},[31,21834,21809],{"class":37},[31,21836,21837],{"class":41}," files",[31,21839,2041],{"class":45},[31,21841,17942],{"class":1006},[31,21843,17945],{"class":259},[31,21845,993],{"class":58},[31,21847,425],{"class":45},[31,21849,17952],{"class":58},[31,21851,62],{"class":45},[31,21853,3754],{"class":2643},[31,21855,12083],{"class":45},[31,21857,1018],{"class":58},[31,21859,237],{"class":45},[31,21861,17965],{"class":259},[31,21863,18054],{"class":58},[31,21865,2005],{"class":45},[31,21867,2225],{"class":80},[31,21869,2005],{"class":45},[31,21871,21872],{"class":58},"])",[31,21874,237],{"class":45},[31,21876,18009],{"class":259},[31,21878,21879],{"class":58},"()\n",[31,21881,21882,21885,21887,21889,21891,21893,21896,21898,21901,21903,21905,21907,21909,21912,21914,21917,21919,21921,21923,21926,21928,21930,21932,21934],{"class":33,"line":181},[31,21883,21884],{"class":1006},"      return",[31,21886,21837],{"class":41},[31,21888,237],{"class":45},[31,21890,990],{"class":259},[31,21892,993],{"class":58},[31,21894,21895],{"class":996},"file",[31,21897,1000],{"class":37},[31,21899,21900],{"class":41}," file",[31,21902,237],{"class":45},[31,21904,2225],{"class":41},[31,21906,17604],{"class":45},[31,21908,2000],{"class":45},[31,21910,21911],{"class":80},"\u002Findex",[31,21913,2005],{"class":45},[31,21915,21916],{"class":45}," ?",[31,21918,2000],{"class":45},[31,21920,1979],{"class":80},[31,21922,2005],{"class":45},[31,21924,21925],{"class":45}," :",[31,21927,21900],{"class":41},[31,21929,237],{"class":45},[31,21931,2225],{"class":41},[31,21933,1018],{"class":58},[31,21935,243],{"class":45},[31,21937,21938],{"class":33,"line":188},[31,21939,3775],{"class":45},[31,21941,21942],{"class":33,"line":283},[31,21943,100],{"class":45},[13,21945,21946,21947,21950,21951,21953,21954,21956,21957,21959],{},"これは何をやっているかというと、",[17,21948,21949],{},"$content({ deep: true })","を使用してcontent配下にあるマークダウン一式とそのパスを全て取得して、Nuxtに生成すべきルートを伝えています。なぜこれを行う必要があるのかという理由ですが、Nuxt.jsは",[17,21952,17861],{},"配下の構成を元にして必要なページを生成します。しかしどんなルート名になるかわからない",[17,21955,20492],{},"というファイル（動的ルート）がある場合は、とりうるルートを",[17,21958,21778],{},"オプション内で明示的に指定する必要があります。",[13,21961,21962],{},"Nuxt.js自身はcontents配下の構成とパスがどうなっているのかわからないので、Nuxt Contentから取得します。",[13,21964,21965,21967],{},[17,21966,21083],{},"でSSGができる設定にしたら",[22,21969,21972],{"className":21970,"code":21971,"language":1864},[1862],"npm run generate\n",[17,21973,21971],{"__ignoreMap":27},[13,21975,21976,21977,21980],{},"を叩くことで静的書き出しが行われます。書き出し後には",[17,21978,21979],{},"dist\u002F","というビルドファイルが作成されます。",[22,21982,21985],{"className":21983,"code":21984,"language":1864},[1862],"npm run start\n",[17,21986,21984],{"__ignoreMap":27},[13,21988,21989,21990,21992],{},"でひとまずローカル環境で",[17,21991,21979],{},"をドキュメントルートとしてみることができます。以下のような構成で作っていた場合、",[22,21994,21997],{"className":21995,"code":21996,"language":1864},[1862],"├── content\n│   ├── articles\n│   │   ├── sample.md\n│\n├── pages\n│   ├── articles\n│   　   ├── _slug.vue\n",[17,21998,21996],{"__ignoreMap":27},[13,22000,22001,22004,22005,22007],{},[17,22002,22003],{},"http:\u002F\u002Flocalhost:3000\u002Farticles\u002Fsample","にアクセスすると内容が見れると思います。curlで",[17,22006,22003],{},"でアクセスしてきちんと静的HTMLが書き出されているかを確認してみましょう。",[207,22009,22010],{"id":22010},"以上で基本的な構成の作成が完了",[13,22012,22013,22014,22017,22018,22020,22021,22023],{},"スタイルとかの問題はあるかもしれませんが、ひとまず",[17,22015,22016],{},"pages","・",[17,22019,88],{},"ディレクトリ、",[17,22022,21083],{},"の設定を行えばブログ的な構成とCMSとしての機能が実装できました。次回は記事の一覧ページとページング処理について解説していきます。",[1771,22025,22026],{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s7ZW3, html code.shiki .s7ZW3{--shiki-default:#BABED8;--shiki-default-font-style:italic}",{"title":27,"searchDepth":103,"depth":103,"links":22028},[22029,22034,22041,22042],{"id":20398,"depth":52,"text":20398,"children":22030},[22031,22032,22033],{"id":20401,"depth":103,"text":20401},{"id":20450,"depth":103,"text":20451},{"id":20486,"depth":103,"text":20487},{"id":20665,"depth":52,"text":20665,"children":22035},[22036,22037,22038,22039,22040],{"id":20677,"depth":103,"text":20677},{"id":21038,"depth":103,"text":21039},{"id":21069,"depth":103,"text":21069},{"id":21147,"depth":103,"text":21147},{"id":21170,"depth":103,"text":21170},{"id":21764,"depth":52,"text":21764},{"id":22010,"depth":52,"text":22010},[5906],"2021-05-05","Nuxt Content × SSG で作る静的ブログ。目次、記事内画像、どんな項目を記事にレンダーできるかと静的書き出しについて説明。",{},"\u002Fseries\u002Fnuxt-content-blog-2",{"title":20374,"description":22045},"series\u002Fnuxt-content-blog-2",[1797,16666],"G0AV4H-Vu8cOAUAeRcjFkqt5-eZKAcs9pHDQjdPhG4E",{"id":22053,"title":22054,"body":22055,"category":22832,"createdAt":22833,"description":22834,"extension":1790,"index":34,"meta":22835,"navigation":248,"path":22836,"publish":248,"seo":22837,"series":18343,"seriesTitle":18344,"stem":22838,"tag":22839,"thumbnail":18347,"updatedAt":1791,"__hash__":22840},"series\u002Fseries\u002Fnuxt-content-blog-1.md","Nuxt Content × SSG で作る静的ブログ。１：概念とセットアップ",{"type":10,"value":22056,"toc":22817},[22057,22060,22067,22083,22086,22090,22096,22101,22104,22107,22110,22127,22130,22132,22143,22150,22166,22169,22172,22175,22266,22293,22295,22336,22339,22341,22344,22367,22370,22373,22376,22379,22385,22401,22411,22461,22466,22472,22478,22499,22502,22505,22510,22561,22568,22571,22577,22744,22747,22751,22761,22764,22776,22799,22802,22808,22814],[13,22058,22059],{},"こんにちはjunです。私のブログは2021年4月にwordpressを卒業し、Nuxt contentというものを使用してリニューアルしました。wordpressは簡単にサイトは作れますし使い勝手はいいですが、公開サーバーにCMSがあるためにセキュリティ的に問題だったり、大量に記事があるとパフォーマンスが落ちるということがあります。webデベロッパーならばNuxt.jsと静的書き出しぐらいやろうぜ！と思ったのも理由です。",[13,22061,22062,22063,22066],{},"このブログリニューアルにはデータ移行含めて２週間ほどかかりましたが、その途中で少し詰まったり工夫したりした箇所が結構あったのでシリーズ記事として、 ",[395,22064,22065],{},"「Nuxt Contentによる静的書き出しブログの作成方法」"," として書きたいと思います。シリーズを通して以下のことを解説しようと思います。（まだ予定です。もしかすると執筆途中で変わります。）",[8772,22068,22069,22072,22075,22078,22080],{},[1820,22070,22071],{},"Nuxt Content の仕組みと基本的な使い方",[1820,22073,22074],{},"記事のレンダリングと静的書き出しルーティング",[1820,22076,22077],{},"記事一覧ページとページング実装",[1820,22079,16589],{},[1820,22081,22082],{},"記事の管理とデプロイ。SEO対策。アドセンスとアナリティクス設定",[13,22084,22085],{},"それでは一回目は早速、インストールから概念・基本的な使い方について説明していきます。Nuxt.jsにおける構成などは共有しますが、このサイトにおけるデザインの実装方法などは省略しますのでご了承ください。",[207,22087,22089],{"id":22088},"nuxt-contentとは","Nuxt Contentとは？",[13,22091,22092,22093,22095],{},"nuxt contentはNuxt.jsのモジュールです。",[17,22094,20423],{},"ディレクトリ配下にmarkdownを用いて記事原稿を作成し、Nuxt.jsがmarkdownを解析してオブジェクトとして利用できるようにしてくれます。",[13,22097,22098,22100],{},[17,22099,17919],{},"というインスタンスがグローバルに使用できますので、それらを利用してコンポーネントにレンダーするという仕組みです。",[13,22102,22103],{},"ブログを構成するソースが全てファイルで構成されるので、GitベースのCMSとして利用することができます。（記事の保存にDBを必要としない。）",[207,22105,22106],{"id":22106},"自分のブログの構成について",[13,22108,22109],{},"今回のシリーズ記事では私の記事と同じ構成を作成できるように解説していこうと思います。2021年5月現在では以下のような構成・機能を持っています。",[1817,22111,22112,22115,22118,22121,22124],{},[1820,22113,22114],{},"記事詳細ページ",[1820,22116,22117],{},"タグ・カテゴリー",[1820,22119,22120],{},"各々の一覧ページとページング",[1820,22122,22123],{},"シリーズ記事",[1820,22125,22126],{},"静的書き出しとデプロイ",[13,22128,22129],{},"詳細に解説します。",[365,22131,22114],{"id":22114},[13,22133,18826,22134,11805,22136,22139,22140,22142],{},[17,22135,18390],{},[17,22137,22138],{},"\u002Fseries\u002F{sulg}\u002F{index}","というルートにて各記事本体を見ることができ、そのようなルールで構成されています。スラグ（sulg）は原稿マークダウンのファイル名と一致します。ソースでは",[17,22141,20423],{},"ディレクトリ配下にマークダウンファイルを以下のように格納しています。",[22,22144,22148],{"className":22145,"code":22146,"filename":22147,"language":1864,"meta":27},[1862],"├── content\n│   ├── articles\n│   │   ├── aaaaaa.md\n│   │   ├── bbbbbb.md\n│   │\n│   └── series\n│       ├── ~~~~~.md\n│       ├── ~~~~~.md\n","Nuxt",[17,22149,22146],{"__ignoreMap":27},[13,22151,22152,22153,22156,22157,12675,22160,22162,22163,22165],{},"上記のように格納することでコンポーネントで、例えば",[17,22154,22155],{},"this.$content('articles')","として呼び出すことでarticles配下のデータを取得できます。ファイル名＝スラグ名としているので、",[17,22158,22159],{},"\u002Farticles\u002Faaaaaaa",[17,22161,20435],{},"の内容がレンダーされるようにしています。このへんのルーティング設定は",[17,22164,20654],{},"ディレクトリの構成で制御しています。第二回目で解説します。",[365,22167,22117],{"id":22168},"タグカテゴリー",[13,22170,22171],{},"各記事ではタグとカテゴリーを指定できるようになっています。カテゴリー、タグをクリックするとその一覧に飛ぶのでユーザーはサイトのコンテンツを探しやすくなります。",[13,22173,22174],{},"タグとカテゴリーは実はマークダウンファイルに記述されています。例えばこの記事のマークダウンには一番最初に以下のようなyml形式の記述があります。",[22,22176,22178],{"className":16612,"code":22177,"language":16614,"meta":27,"style":27},"---\ntitle: Nuxt Content × SSG で作る静的ブログ。１：概念とセットアップ\ndescription: Nuxt Content × SSG で作る静的ブログ。概念とセットアップについてまずは解説\ncategory: [devstack]\ntag: [js,nuxt]\nseries: nuxt-content-blog\nseriesTitle: Nuxt Content × SSG で作る静的ブログ。\nindex: 1\npublish: false\n---\n",[17,22179,22180,22184,22193,22202,22214,22230,22238,22246,22254,22262],{"__ignoreMap":27},[31,22181,22182],{"class":33,"line":34},[31,22183,16621],{"class":6150},[31,22185,22186,22188,22190],{"class":33,"line":52},[31,22187,72],{"class":58},[31,22189,62],{"class":45},[31,22191,22192],{"class":80}," Nuxt Content × SSG で作る静的ブログ。１：概念とセットアップ\n",[31,22194,22195,22197,22199],{"class":33,"line":103},[31,22196,10369],{"class":58},[31,22198,62],{"class":45},[31,22200,22201],{"class":80}," Nuxt Content × SSG で作る静的ブログ。概念とセットアップについてまずは解説\n",[31,22203,22204,22206,22208,22210,22212],{"class":33,"line":142},[31,22205,10408],{"class":58},[31,22207,62],{"class":45},[31,22209,512],{"class":45},[31,22211,5906],{"class":80},[31,22213,191],{"class":45},[31,22215,22216,22218,22220,22222,22224,22226,22228],{"class":33,"line":181},[31,22217,10429],{"class":58},[31,22219,62],{"class":45},[31,22221,512],{"class":45},[31,22223,1797],{"class":80},[31,22225,69],{"class":45},[31,22227,16666],{"class":80},[31,22229,191],{"class":45},[31,22231,22232,22234,22236],{"class":33,"line":188},[31,22233,16673],{"class":58},[31,22235,62],{"class":45},[31,22237,16678],{"class":80},[31,22239,22240,22242,22244],{"class":33,"line":283},[31,22241,16683],{"class":58},[31,22243,62],{"class":45},[31,22245,16688],{"class":80},[31,22247,22248,22250,22252],{"class":33,"line":289},[31,22249,8437],{"class":58},[31,22251,62],{"class":45},[31,22253,10810],{"class":65},[31,22255,22256,22258,22260],{"class":33,"line":295},[31,22257,16702],{"class":58},[31,22259,62],{"class":45},[31,22261,2644],{"class":2643},[31,22263,22264],{"class":33,"line":301},[31,22265,16621],{"class":6150},[13,22267,22268,22269,11805,22272,11805,22274,22276,22277,11805,22279,11805,22282,22284,22285,1647,22287,22289,22290,22292],{},"上記のカラムは自由につけることができます。例えば",[17,22270,22271],{},"serise",[17,22273,8437],{},[17,22275,16702],{},"は私が独自につけています。一方で",[17,22278,72],{},[17,22280,22281],{},"updateAt",[17,22283,18142],{},"など自動的に付与される属性もあります。",[17,22286,10429],{},[17,22288,10408],{},"は配列形式の記述をすることでjs側でも配列で扱うことができます。",[17,22291,16747],{},"というファイルでキーとカテゴリー名、タグを管理しています。（storeでもOKですが、ちょっと困ることがありました。こちらも後で解説します。）",[365,22294,22120],{"id":22120},[1817,22296,22297,22301,22306,22311,22317,22321,22326,22331],{},[1820,22298,22299],{},[17,22300,18394],{},[1820,22302,22303],{},[17,22304,22305],{},"\u002Fseries\u002F{sulg}\u002F",[1820,22307,22308],{},[17,22309,22310],{},"\u002Fcategory\u002F{category_key}\u002F",[1820,22312,22313,22316],{},[17,22314,22315],{},"\u002Ftag\u002F{tag_key}\u002F","\nというパスではその記事種別、カテゴリーの一覧が表示されます。１ページあたり15記事表示されるので記事が多くなるとページングが発生します。ページングの際は",[1820,22318,22319],{},[17,22320,18847],{},[1820,22322,22323],{},[17,22324,22325],{},"\u002Fseries\u002F{sulg}\u002Fpage\u002F{n}",[1820,22327,22328],{},[17,22329,22330],{},"\u002Fcategory\u002F{category_key}\u002Fpage\u002F{n}",[1820,22332,22333],{},[17,22334,22335],{},"\u002Ftag\u002F{tag_key}\u002Fpage\u002F{n}",[13,22337,22338],{},"というルーティングで現在ページを判別しています。ちなみに静的書き出しするときはページごとにディレクトリが作成されます。",[365,22340,22126],{"id":22126},[13,22342,22343],{},"私の場合、まずNuxt.jsには静的書き出し（SSG:static site generate）を使用して作成してページ分のHTMLを生成します。そして生成されたHTMLと画像をrsyncで公開サーバーに送っています。作成全体の流れを簡単に説明しますと、",[8772,22345,22346,22349,22352,22355,22361],{},[1820,22347,22348],{},"markdownで原稿を記述",[1820,22350,22351],{},"pageコンポーネントに原稿内容をレンダーする。",[1820,22353,22354],{},"公開してよい原稿のみをクエリで取得してルーティングを設定する。",[1820,22356,22357,22360],{},[17,22358,22359],{},"npm run generate"," を使用して作成した原稿分のHTMLを生成する",[1820,22362,22363,22364,22366],{},"rsyncを使用して",[17,22365,5508],{},"配下を公開サーバーを同期する",[13,22368,22369],{},"上記のような感じです。結構簡単です。",[13,22371,22372],{},"以上が簡単な概念と構成の説明です。それでは以降からは具体的なインストールと使い方を説明していきます。",[207,22374,22375],{"id":22375},"インストール方法とセットアップ",[13,22377,22378],{},"Nuxt contentはNuxt.jsのモジュールですのでまずはNuxtプロジェクトを作成します。",[22,22380,22383],{"className":22381,"code":22382,"language":1864},[1862],"npx create-nuxt-app \u003Cproject-name>\n\n... #普通にNuxtのインストールをする\n\nnpm install @nuxt\u002Fcontent\n\n",[17,22384,22382],{"__ignoreMap":27},[377,22386,22388,22389],{"className":22387},[380,12775],"\n各種の使用バージョンは以下の通りです。\n",[1817,22390,22391,22392,22391,22395,22391,22398],{},"\n    ",[1820,22393,22394],{},"Node.js：v12.19.0",[1820,22396,22397],{},"Nuxt.js：2.14.12",[1820,22399,22400],{},"Nuxt Content：1.14.0",[13,22402,22403,22404,22406,22407,22410],{},"インストールが終わったので、",[17,22405,21083],{},"も",[17,22408,22409],{},"modules","に以下のように追記します。",[22,22412,22415],{"className":22413,"code":22414,"filename":21083,"language":1797,"meta":27,"style":27},"language-js shiki shiki-themes material-theme-ocean","  ...\n\n  modules: [\n    '@nuxt\u002Fcontent',\n  ],\n\n  ...\n",[17,22416,22417,22422,22426,22435,22446,22453,22457],{"__ignoreMap":27},[31,22418,22419],{"class":33,"line":34},[31,22420,22421],{"class":45},"  ...\n",[31,22423,22424],{"class":33,"line":52},[31,22425,249],{"emptyLinePlaceholder":248},[31,22427,22428,22431,22433],{"class":33,"line":103},[31,22429,22430],{"class":6150},"  modules",[31,22432,62],{"class":45},[31,22434,49],{"class":41},[31,22436,22437,22440,22442,22444],{"class":33,"line":142},[31,22438,22439],{"class":45},"    '",[31,22441,21826],{"class":80},[31,22443,2005],{"class":45},[31,22445,1647],{"class":45},[31,22447,22448,22451],{"class":33,"line":181},[31,22449,22450],{"class":41},"  ]",[31,22452,1647],{"class":45},[31,22454,22455],{"class":33,"line":188},[31,22456,249],{"emptyLinePlaceholder":248},[31,22458,22459],{"class":33,"line":283},[31,22460,22421],{"class":45},[13,22462,13547,22463,22465],{},[17,22464,20423],{},"というディレクトリをプロジェクトルートに作成します。",[22,22467,22470],{"className":22468,"code":22469,"language":1864},[1862],".\n├── README.md\n├── assets\n├── components\n├── content # これをつくる\n├── layouts\n├── middleware\n├── node_modules\n├── nuxt.config.js\n├── package-lock.json\n├── package.json\n├── pages\n├── plugins\n├── static\n├── store\n",[17,22471,22469],{"__ignoreMap":27},[13,22473,22474,22475,22477],{},"マークダウンファイルは",[17,22476,20423],{},"配下に作成していくと、nuxt contentは自動的にそれらのファイルを解析してくれます。",[13,22479,13547,22480,22482,22483,22486,22487,22489,22490,22492,22493,1876,22495,22498],{},[17,22481,20423],{},"ディレクトリを作成したらさらに",[17,22484,22485],{},"articles\u002F","といったディレクトリを作っておくと良いです。別に",[17,22488,18425],{},"としなくてもいいですが、サブディレクトリ を作ることで",[17,22491,18762],{},"のように区別してコンテンツを取得できます。私の場合は",[17,22494,22485],{},[17,22496,22497],{},"series\u002F","というサブディレクトリでコンテンツを区切っています。",[207,22500,22501],{"id":22501},"記事を試しに作成してみる",[365,22503,22504],{"id":22504},"マークダウン原稿を作成する",[13,22506,17881,22507,22509],{},[17,22508,22485],{},"を作ったら何かマークダウンを作成してみましょう。",[22,22511,22514],{"className":20683,"code":22512,"filename":22513,"language":20685,"meta":27,"style":27},"---\ntitle: テスト\ndescription:テスト\n---\nここに記事内容をマークダウン で記述します。\n\n## 見出し\n- リスト\n- リスト\n- リスト\n","articles\u002Ftest.md",[17,22515,22516,22520,22525,22530,22534,22539,22543,22548,22553,22557],{"__ignoreMap":27},[31,22517,22518],{"class":33,"line":34},[31,22519,16621],{},[31,22521,22522],{"class":33,"line":52},[31,22523,22524],{},"title: テスト\n",[31,22526,22527],{"class":33,"line":103},[31,22528,22529],{},"description:テスト\n",[31,22531,22532],{"class":33,"line":142},[31,22533,16621],{},[31,22535,22536],{"class":33,"line":181},[31,22537,22538],{},"ここに記事内容をマークダウン で記述します。\n",[31,22540,22541],{"class":33,"line":188},[31,22542,249],{"emptyLinePlaceholder":248},[31,22544,22545],{"class":33,"line":283},[31,22546,22547],{},"## 見出し\n",[31,22549,22550],{"class":33,"line":289},[31,22551,22552],{},"- リスト\n",[31,22554,22555],{"class":33,"line":295},[31,22556,22552],{},[31,22558,22559],{"class":33,"line":301},[31,22560,22552],{},[13,22562,22563,22564,22567],{},"まずnuxt contentでマークダウン原稿を作る際には、１・２行目に示されたように",[17,22565,22566],{},"---","で囲ったymlにて書かれたメタデータを記述します。メタデータをかけたら、マークダウン 形式で内容を記述していきます。",[365,22569,22570],{"id":22570},"ページコンポーネントで読み込む",[13,22572,22573,22574,22576],{},"サンプルを作成したら",[17,22575,20654],{},"ディレクトリでページコンポーネントを作成します。今回は簡単に以下のような構成にしてみます。",[22,22578,22581],{"className":17793,"code":22579,"filename":22580,"language":1798,"meta":27,"style":27},"\u003Ctemplate>\n    \u003Cdiv>\n        {{content}}\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\nexport default{\n    name:'test_page',\n    async asyncData({ store,$content, params }) {\n        const content = await $content('articles').fetch();\n\n        return {\n            content,\n        }\n    },\n}\n\u003C\u002Fscript>\n","pages\u002Ftest.vue",[17,22582,22583,22591,22599,22604,22612,22620,22628,22636,22652,22678,22708,22712,22718,22724,22728,22732,22736],{"__ignoreMap":27},[31,22584,22585,22587,22589],{"class":33,"line":34},[31,22586,3011],{"class":45},[31,22588,18439],{"class":58},[31,22590,5990],{"class":45},[31,22592,22593,22595,22597],{"class":33,"line":52},[31,22594,5995],{"class":45},[31,22596,377],{"class":58},[31,22598,5990],{"class":45},[31,22600,22601],{"class":33,"line":103},[31,22602,22603],{"class":41},"        {{content}}\n",[31,22605,22606,22608,22610],{"class":33,"line":142},[31,22607,6046],{"class":45},[31,22609,377],{"class":58},[31,22611,5990],{"class":45},[31,22613,22614,22616,22618],{"class":33,"line":181},[31,22615,6114],{"class":45},[31,22617,18439],{"class":58},[31,22619,5990],{"class":45},[31,22621,22622,22624,22626],{"class":33,"line":188},[31,22623,3011],{"class":45},[31,22625,7265],{"class":58},[31,22627,5990],{"class":45},[31,22629,22630,22632,22634],{"class":33,"line":283},[31,22631,17445],{"class":37},[31,22633,17898],{"class":1006},[31,22635,275],{"class":45},[31,22637,22638,22641,22643,22645,22648,22650],{"class":33,"line":289},[31,22639,22640],{"class":6150},"    name",[31,22642,62],{"class":45},[31,22644,2005],{"class":45},[31,22646,22647],{"class":80},"test_page",[31,22649,2005],{"class":45},[31,22651,1647],{"class":45},[31,22653,22654,22656,22658,22660,22662,22664,22666,22668,22670,22672,22674,22676],{"class":33,"line":295},[31,22655,17905],{"class":41},[31,22657,17908],{"class":259},[31,22659,993],{"class":58},[31,22661,425],{"class":45},[31,22663,17914],{"class":41},[31,22665,69],{"class":45},[31,22667,17919],{"class":41},[31,22669,69],{"class":45},[31,22671,17924],{"class":41},[31,22673,12083],{"class":45},[31,22675,8587],{"class":58},[31,22677,275],{"class":45},[31,22679,22680,22682,22684,22686,22688,22690,22692,22694,22696,22698,22700,22702,22704,22706],{"class":33,"line":301},[31,22681,17934],{"class":37},[31,22683,18024],{"class":41},[31,22685,2041],{"class":45},[31,22687,17942],{"class":1006},[31,22689,17945],{"class":259},[31,22691,993],{"class":58},[31,22693,2005],{"class":45},[31,22695,18425],{"class":80},[31,22697,2005],{"class":45},[31,22699,1018],{"class":58},[31,22701,237],{"class":45},[31,22703,18009],{"class":259},[31,22705,7672],{"class":58},[31,22707,243],{"class":45},[31,22709,22710],{"class":33,"line":307},[31,22711,249],{"emptyLinePlaceholder":248},[31,22713,22714,22716],{"class":33,"line":313},[31,22715,17550],{"class":1006},[31,22717,1602],{"class":45},[31,22719,22720,22722],{"class":33,"line":319},[31,22721,19571],{"class":41},[31,22723,1647],{"class":45},[31,22725,22726],{"class":33,"line":325},[31,22727,2012],{"class":45},[31,22729,22730],{"class":33,"line":331},[31,22731,2017],{"class":45},[31,22733,22734],{"class":33,"line":337},[31,22735,334],{"class":45},[31,22737,22738,22740,22742],{"class":33,"line":1752},[31,22739,6114],{"class":45},[31,22741,7265],{"class":58},[31,22743,5990],{"class":45},[13,22745,22746],{},"画面は以下のように映ると思います。（私の場合はたくさん記事があるので、たくさんあります。）",[5928,22748],{":src":22749,":width":22750,":center":619},"'_mix\u002Fsch-2021-05-05 8.44.11.png'","'400px'",[13,22752,22753,22754,22756,22757,22760],{},"変数",[17,22755,88],{},"には",[17,22758,22759],{},"$content('articles').fetch()","によって取得されたページのデータがオブジェクト形式で入っています。",[5928,22762],{":src":22763,":width":22750,":center":619},"'_mix\u002Fsch-2021-05-05 8.48.11.png'",[13,22765,22766,4485,22768,22771,22772,22775],{},[17,22767,22759],{},[17,22769,22770],{},"aticles","配下のデータが配列でくるので、",[17,22773,22774],{},"$content('articles\u002Ftest').fetch()","としてみると単体の該当するファイルが提供されます。",[13,22777,22778,22781,22782,22787,22788,22791,22792,22795,22796,22798],{},[17,22779,22780],{},"{{content}}","ではただのオブジェクトしか表示されません。",[196,22783,22786],{"href":22784,"rel":22785},"https:\u002F\u002Fcontent.nuxtjs.org\u002Fja\u002Fdisplaying",[901],"公式サイトのように"," ",[17,22789,22790],{},"\u003Cnuxt-content :document=\"content\" \u002F>","というコンポーネントの",[17,22793,22794],{},"document","プロップスに",[17,22797,18799],{},"で取得したものを渡すことで、HTMLでレンダーされます。",[207,22800,22801],{"id":22801},"以上でセットアップ完了",[13,22803,22804,22805,22807],{},"以上がNuxt Contentのセットアップと基本的な使い方です。ひとまずモジュールをインストールして",[17,22806,18799],{},"を用いて対応するコンテンツを取得することで、ブログを作成できます。",[13,22809,22810,22811,22813],{},"次回は個別記事のレンダリングと",[17,22812,18799],{},"の詳細と静的書き出しを行っていこうと思います。",[1771,22815,22816],{},"html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .sbqyR, html code.shiki .sbqyR{--shiki-default:#FF9CAC}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}",{"title":27,"searchDepth":103,"depth":103,"links":22818},[22819,22820,22826,22827,22831],{"id":22088,"depth":52,"text":22089},{"id":22106,"depth":52,"text":22106,"children":22821},[22822,22823,22824,22825],{"id":22114,"depth":103,"text":22114},{"id":22168,"depth":103,"text":22117},{"id":22120,"depth":103,"text":22120},{"id":22126,"depth":103,"text":22126},{"id":22375,"depth":52,"text":22375},{"id":22501,"depth":52,"text":22501,"children":22828},[22829,22830],{"id":22504,"depth":103,"text":22504},{"id":22570,"depth":103,"text":22570},{"id":22801,"depth":52,"text":22801},[5906],"2021-05-04","Nuxt Content × SSG で作る静的ブログ。概念とセットアップについてまずは解説",{},"\u002Fseries\u002Fnuxt-content-blog-1",{"title":22054,"description":22834},"series\u002Fnuxt-content-blog-1",[1797,16666],"NqL_rCruXq92Ga0wFzu-aNSycgZTrVDwKB90Uio1hxw",1780987143710]