[{"data":1,"prerenderedAt":9453},["ShallowReactive",2],{"article:\u002Farticles\u002F2024\u002Flately-learned-js-tip":3,"related-articles:\u002Farticles\u002F2024\u002Flately-learned-js-tip":746,"search:articles":5202,"search:books":8795},{"id":4,"title":5,"body":6,"description":735,"extension":736,"meta":737,"navigation":64,"path":738,"publishDate":739,"published":64,"seo":740,"stem":741,"tags":742,"thumbnail":744,"updated":739,"__hash__":745},"articles\u002Farticles\u002F2024\u002Flately-learned-js-tip.md","最近学んだJavaScriptのTipsをアウトプット",{"type":7,"value":8,"toc":718},"minimark",[9,13,16,20,23,89,93,96,169,187,202,218,233,236,239,275,285,293,307,333,349,352,367,370,377,434,437,444,477,487,491,500,519,522,530,568,571,595,602,608,619,647,668,671,677,680,699,702,705,714],[10,11,12],"p",{},"こんにちは、Yuriです。",[10,14,15],{},"今回は、最近学んだJavaScriptの小さなTipsとして、オブジェクトの分割代入とオプショナルチェーンを整理します。",[17,18,19],"h2",{"id":19},"オブジェクトの分割代入",[10,21,22],{},"オブジェクトの分割代入を使うと、プロパティの値を取り出して変数へ代入できます。",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const user = {\n greeting: 'Hello',\n farewell: 'Bye',\n}\n\nconst { greeting, farewell } = user\n\nconsole.log(greeting) \u002F\u002F 'Hello'\nconsole.log(farewell) \u002F\u002F 'Bye'\n","javascript","",[31,32,33,41,47,53,59,66,72,77,83],"code",{"__ignoreMap":29},[34,35,38],"span",{"class":36,"line":37},"line",1,[34,39,40],{},"const user = {\n",[34,42,44],{"class":36,"line":43},2,[34,45,46],{}," greeting: 'Hello',\n",[34,48,50],{"class":36,"line":49},3,[34,51,52],{}," farewell: 'Bye',\n",[34,54,56],{"class":36,"line":55},4,[34,57,58],{},"}\n",[34,60,62],{"class":36,"line":61},5,[34,63,65],{"emptyLinePlaceholder":64},true,"\n",[34,67,69],{"class":36,"line":68},6,[34,70,71],{},"const { greeting, farewell } = user\n",[34,73,75],{"class":36,"line":74},7,[34,76,65],{"emptyLinePlaceholder":64},[34,78,80],{"class":36,"line":79},8,[34,81,82],{},"console.log(greeting) \u002F\u002F 'Hello'\n",[34,84,86],{"class":36,"line":85},9,[34,87,88],{},"console.log(farewell) \u002F\u002F 'Bye'\n",[90,91,92],"h3",{"id":92},"ネストしたプロパティを取り出す",[10,94,95],{},"オブジェクトの中にオブジェクトがある場合は、データの構造に合わせて分割代入のパターンもネストできます。",[24,97,99],{"className":26,"code":98,"language":28,"meta":29,"style":29},"const user = {\n greeting: 'Hello',\n message: {\n farewell: 'Bye',\n },\n}\n\nconst {\n greeting,\n message: { farewell },\n} = user\n\nconsole.log(greeting) \u002F\u002F 'Hello'\nconsole.log(farewell) \u002F\u002F 'Bye'\n",[31,100,101,105,109,114,119,124,128,132,137,142,148,154,159,164],{"__ignoreMap":29},[34,102,103],{"class":36,"line":37},[34,104,40],{},[34,106,107],{"class":36,"line":43},[34,108,46],{},[34,110,111],{"class":36,"line":49},[34,112,113],{}," message: {\n",[34,115,116],{"class":36,"line":55},[34,117,118],{}," farewell: 'Bye',\n",[34,120,121],{"class":36,"line":61},[34,122,123],{}," },\n",[34,125,126],{"class":36,"line":68},[34,127,58],{},[34,129,130],{"class":36,"line":74},[34,131,65],{"emptyLinePlaceholder":64},[34,133,134],{"class":36,"line":79},[34,135,136],{},"const {\n",[34,138,139],{"class":36,"line":85},[34,140,141],{}," greeting,\n",[34,143,145],{"class":36,"line":144},10,[34,146,147],{}," message: { farewell },\n",[34,149,151],{"class":36,"line":150},11,[34,152,153],{},"} = user\n",[34,155,157],{"class":36,"line":156},12,[34,158,65],{"emptyLinePlaceholder":64},[34,160,162],{"class":36,"line":161},13,[34,163,82],{},[34,165,167],{"class":36,"line":166},14,[34,168,88],{},[10,170,171,172,175,176,179,180,183,184,186],{},"この例で作られる変数は",[31,173,174],{},"greeting","と",[31,177,178],{},"farewell","です。",[31,181,182],{},"message","は、内側の",[31,185,178],{},"へたどるためのパターンとして使われているだけなので、変数として宣言されません。",[24,188,190],{"className":26,"code":189,"language":28,"meta":29,"style":29},"console.log(message)\n\u002F\u002F ReferenceError: message is not defined\n",[31,191,192,197],{"__ignoreMap":29},[34,193,194],{"class":36,"line":37},[34,195,196],{},"console.log(message)\n",[34,198,199],{"class":36,"line":43},[34,200,201],{},"\u002F\u002F ReferenceError: message is not defined\n",[203,204,207],"article-callout",{"title":205,"type":206},"親オブジェクトも使いたい場合","note",[10,208,209,211,212,214,215,217],{},[31,210,182],{},"自体と、その中の",[31,213,178],{},"を両方使いたい場合は、分割代入を分けるか、先に",[31,216,182],{},"を取り出してから再度分割代入します。",[24,219,221],{"className":26,"code":220,"language":28,"meta":29,"style":29},"const { message } = user\nconst { farewell } = message\n",[31,222,223,228],{"__ignoreMap":29},[34,224,225],{"class":36,"line":37},[34,226,227],{},"const { message } = user\n",[34,229,230],{"class":36,"line":43},[34,231,232],{},"const { farewell } = message\n",[90,234,235],{"id":235},"プロパティ名とは異なる変数名で受け取る",[10,237,238],{},"コロンの右側へ名前を書くと、プロパティ名とは異なる変数名で値を受け取れます。",[24,240,242],{"className":26,"code":241,"language":28,"meta":29,"style":29},"const user = {\n name: 'Yuri',\n}\n\nconst { name: userName } = user\n\nconsole.log(userName) \u002F\u002F 'Yuri'\n",[31,243,244,248,253,257,261,266,270],{"__ignoreMap":29},[34,245,246],{"class":36,"line":37},[34,247,40],{},[34,249,250],{"class":36,"line":43},[34,251,252],{}," name: 'Yuri',\n",[34,254,255],{"class":36,"line":49},[34,256,58],{},[34,258,259],{"class":36,"line":55},[34,260,65],{"emptyLinePlaceholder":64},[34,262,263],{"class":36,"line":61},[34,264,265],{},"const { name: userName } = user\n",[34,267,268],{"class":36,"line":68},[34,269,65],{"emptyLinePlaceholder":64},[34,271,272],{"class":36,"line":74},[34,273,274],{},"console.log(userName) \u002F\u002F 'Yuri'\n",[10,276,277,278,281,282,179],{},"この場合も",[31,279,280],{},"name","という変数は作られず、作られるのは",[31,283,284],{},"userName",[17,286,288,289,292],{"id":287},"オプショナルチェーン","オプショナルチェーン（",[31,290,291],{},"?.","）",[10,294,295,296,299,300,303,304,306],{},"オプショナルチェーンは、参照の途中にある値が",[31,297,298],{},"null","または",[31,301,302],{},"undefined","だった場合、エラーを発生させずに",[31,305,302],{},"を返す演算子です。",[24,308,310],{"className":26,"code":309,"language":28,"meta":29,"style":29},"const user = {\n name: 'Yuri',\n}\n\nconsole.log(user.profile?.hobby) \u002F\u002F undefined\n",[31,311,312,316,320,324,328],{"__ignoreMap":29},[34,313,314],{"class":36,"line":37},[34,315,40],{},[34,317,318],{"class":36,"line":43},[34,319,252],{},[34,321,322],{"class":36,"line":49},[34,323,58],{},[34,325,326],{"class":36,"line":55},[34,327,65],{"emptyLinePlaceholder":64},[34,329,330],{"class":36,"line":61},[34,331,332],{},"console.log(user.profile?.hobby) \u002F\u002F undefined\n",[10,334,335,338,339,341,342,344,345,348],{},[31,336,337],{},"user.profile","は",[31,340,302],{},"ですが、",[31,343,291],{},"を使っているため、その先の",[31,346,347],{},"hobby","へアクセスせず評価を終了します。",[10,350,351],{},"通常のプロパティアクセスではエラーになります。",[24,353,355],{"className":26,"code":354,"language":28,"meta":29,"style":29},"console.log(user.profile.hobby)\n\u002F\u002F TypeError: Cannot read properties of undefined\n",[31,356,357,362],{"__ignoreMap":29},[34,358,359],{"class":36,"line":37},[34,360,361],{},"console.log(user.profile.hobby)\n",[34,363,364],{"class":36,"line":43},[34,365,366],{},"\u002F\u002F TypeError: Cannot read properties of undefined\n",[90,368,369],{"id":369},"配列の要素へアクセスする",[10,371,372,373,376],{},"角括弧によるアクセスでは、",[31,374,375],{},"?.[]","の形で使用します。",[24,378,380],{"className":26,"code":379,"language":28,"meta":29,"style":29},"const items = [\n { name: 'Item 1' },\n { name: 'Item 2' },\n]\n\nconsole.log(items[1]?.name) \u002F\u002F 'Item 2'\nconsole.log(items[3]?.name) \u002F\u002F undefined\n\nconst emptyItems = undefined\n\nconsole.log(emptyItems?.[0]) \u002F\u002F undefined\n",[31,381,382,387,392,397,402,406,411,416,420,425,429],{"__ignoreMap":29},[34,383,384],{"class":36,"line":37},[34,385,386],{},"const items = [\n",[34,388,389],{"class":36,"line":43},[34,390,391],{}," { name: 'Item 1' },\n",[34,393,394],{"class":36,"line":49},[34,395,396],{}," { name: 'Item 2' },\n",[34,398,399],{"class":36,"line":55},[34,400,401],{},"]\n",[34,403,404],{"class":36,"line":61},[34,405,65],{"emptyLinePlaceholder":64},[34,407,408],{"class":36,"line":68},[34,409,410],{},"console.log(items[1]?.name) \u002F\u002F 'Item 2'\n",[34,412,413],{"class":36,"line":74},[34,414,415],{},"console.log(items[3]?.name) \u002F\u002F undefined\n",[34,417,418],{"class":36,"line":79},[34,419,65],{"emptyLinePlaceholder":64},[34,421,422],{"class":36,"line":85},[34,423,424],{},"const emptyItems = undefined\n",[34,426,427],{"class":36,"line":144},[34,428,65],{"emptyLinePlaceholder":64},[34,430,431],{"class":36,"line":150},[34,432,433],{},"console.log(emptyItems?.[0]) \u002F\u002F undefined\n",[90,435,436],{"id":436},"関数やメソッドを呼び出す",[10,438,439,440,443],{},"関数が存在するときだけ呼び出したい場合は、",[31,441,442],{},"?.()","を使用します。",[24,445,447],{"className":26,"code":446,"language":28,"meta":29,"style":29},"const actions = {\n greet: () => 'Hello',\n}\n\nconsole.log(actions.greet?.()) \u002F\u002F 'Hello'\nconsole.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[31,448,449,454,459,463,467,472],{"__ignoreMap":29},[34,450,451],{"class":36,"line":37},[34,452,453],{},"const actions = {\n",[34,455,456],{"class":36,"line":43},[34,457,458],{}," greet: () => 'Hello',\n",[34,460,461],{"class":36,"line":49},[34,462,58],{},[34,464,465],{"class":36,"line":55},[34,466,65],{"emptyLinePlaceholder":64},[34,468,469],{"class":36,"line":61},[34,470,471],{},"console.log(actions.greet?.()) \u002F\u002F 'Hello'\n",[34,473,474],{"class":36,"line":68},[34,475,476],{},"console.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[10,478,479,480,483,484,486],{},"プロパティが存在していても、その値が関数でなければ",[31,481,482],{},"TypeError","になります。",[31,485,442],{},"は「呼び出し可能かどうか」まで確認するものではありません。",[90,488,490],{"id":489},"dom要素へアクセスする","DOM要素へアクセスする",[10,492,493,496,497,499],{},[31,494,495],{},"querySelector","は対象が見つからなかった場合に",[31,498,298],{},"を返します。要素が存在するときだけプロパティを参照したい場合にも利用できます。",[24,501,503],{"className":26,"code":502,"language":28,"meta":29,"style":29},"const button = document.querySelector('.sample-button')\n\nconsole.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[31,504,505,510,514],{"__ignoreMap":29},[34,506,507],{"class":36,"line":37},[34,508,509],{},"const button = document.querySelector('.sample-button')\n",[34,511,512],{"class":36,"line":43},[34,513,65],{"emptyLinePlaceholder":64},[34,515,516],{"class":36,"line":49},[34,517,518],{},"console.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[90,520,521],{"id":521},"短絡評価される範囲",[10,523,524,525,299,527,529],{},"オプショナルチェーンでは、左側が",[31,526,298],{},[31,528,302],{},"の場合、そのチェーンの残りは評価されません。",[24,531,533],{"className":26,"code":532,"language":28,"meta":29,"style":29},"let index = 0\nconst items = null\n\nconst item = items?.[index++]\n\nconsole.log(item) \u002F\u002F undefined\nconsole.log(index) \u002F\u002F 0\n",[31,534,535,540,545,549,554,558,563],{"__ignoreMap":29},[34,536,537],{"class":36,"line":37},[34,538,539],{},"let index = 0\n",[34,541,542],{"class":36,"line":43},[34,543,544],{},"const items = null\n",[34,546,547],{"class":36,"line":49},[34,548,65],{"emptyLinePlaceholder":64},[34,550,551],{"class":36,"line":55},[34,552,553],{},"const item = items?.[index++]\n",[34,555,556],{"class":36,"line":61},[34,557,65],{"emptyLinePlaceholder":64},[34,559,560],{"class":36,"line":68},[34,561,562],{},"console.log(item) \u002F\u002F undefined\n",[34,564,565],{"class":36,"line":74},[34,566,567],{},"console.log(index) \u002F\u002F 0\n",[10,569,570],{},"ただし、オプショナルチェーンが途切れた後のアクセスは保護されません。",[24,572,574],{"className":26,"code":573,"language":28,"meta":29,"style":29},"const user = null\n\nuser?.profile.name \u002F\u002F undefined\n(user?.profile).name \u002F\u002F TypeError\n",[31,575,576,581,585,590],{"__ignoreMap":29},[34,577,578],{"class":36,"line":37},[34,579,580],{},"const user = null\n",[34,582,583],{"class":36,"line":43},[34,584,65],{"emptyLinePlaceholder":64},[34,586,587],{"class":36,"line":49},[34,588,589],{},"user?.profile.name \u002F\u002F undefined\n",[34,591,592],{"class":36,"line":55},[34,593,594],{},"(user?.profile).name \u002F\u002F TypeError\n",[10,596,597,598,601],{},"括弧で区切ると、その後の",[31,599,600],{},".name","は別のプロパティアクセスとして評価されます。",[17,603,605,604],{"id":604},"と組み合わせて既定値を設定する",[31,606,607],{},"??",[10,609,610,611,299,613,615,616,618],{},"オプショナルチェーンで取得した結果が",[31,612,298],{},[31,614,302],{},"だった場合、ヌル値合体演算子（",[31,617,607],{},"）で既定値を設定できます。",[24,620,622],{"className":26,"code":621,"language":28,"meta":29,"style":29},"const user = {}\n\nconst hobby = user.profile?.hobby ?? '未設定'\n\nconsole.log(hobby) \u002F\u002F '未設定'\n",[31,623,624,629,633,638,642],{"__ignoreMap":29},[34,625,626],{"class":36,"line":37},[34,627,628],{},"const user = {}\n",[34,630,631],{"class":36,"line":43},[34,632,65],{"emptyLinePlaceholder":64},[34,634,635],{"class":36,"line":49},[34,636,637],{},"const hobby = user.profile?.hobby ?? '未設定'\n",[34,639,640],{"class":36,"line":55},[34,641,65],{"emptyLinePlaceholder":64},[34,643,644],{"class":36,"line":61},[34,645,646],{},"console.log(hobby) \u002F\u002F '未設定'\n",[10,648,649,338,652,655,656,659,660,662,663,299,665,667],{},[31,650,651],{},"||",[31,653,654],{},"0","、空文字列、",[31,657,658],{},"false","も右側の値へ置き換えますが、",[31,661,607],{},"が右側を返すのは",[31,664,298],{},[31,666,302],{},"の場合だけです。",[17,669,670],{"id":670},"オプショナルチェーンを使うときの注意点",[10,672,673,674,676],{},"オプショナルチェーンは条件分岐を簡潔にできますが、必須であるはずの値にまで使用すると、不具合を",[31,675,302],{},"として見逃す可能性があります。",[10,678,679],{},"次のように使い分けることが大切です。",[681,682,683,690,693],"ul",{},[684,685,686,687,689],"li",{},"値が存在しないことを仕様として許容する場合は",[31,688,291],{},"を使う",[684,691,692],{},"値が必須の場合は明示的に確認し、存在しなければエラーとして扱う",[684,694,695,696,698],{},"取得結果に既定値が必要な場合は",[31,697,607],{},"を組み合わせる",[17,700,701],{"id":701},"まとめ",[10,703,704],{},"ネストした分割代入を使うと、深い階層の値を簡潔に変数へ取り出せます。ただし、途中のプロパティ名がそのまま変数になるわけではありません。",[10,706,707,708,710,711,713],{},"オプショナルチェーンを使うと、",[31,709,298],{},"や",[31,712,302],{},"の可能性があるプロパティ、配列、関数へ安全にアクセスできます。便利さだけで多用せず、その値が本当に省略可能なのかを考えて使っていきたいです。",[715,716,717],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":29,"searchDepth":43,"depth":43,"links":719},[720,724,731,733,734],{"id":19,"depth":43,"text":19,"children":721},[722,723],{"id":92,"depth":49,"text":92},{"id":235,"depth":49,"text":235},{"id":287,"depth":43,"text":725,"children":726},"オプショナルチェーン（?.）",[727,728,729,730],{"id":369,"depth":49,"text":369},{"id":436,"depth":49,"text":436},{"id":489,"depth":49,"text":490},{"id":521,"depth":49,"text":521},{"id":604,"depth":43,"text":732},"??と組み合わせて既定値を設定する",{"id":670,"depth":43,"text":670},{"id":701,"depth":43,"text":701},"JavaScriptのネストしたオブジェクトの分割代入とオプショナルチェーンについて、コード例と注意点を交えて整理します。","md",{},"\u002Farticles\u002F2024\u002Flately-learned-js-tip","2024-12-28",{"title":5,"description":735},"articles\u002F2024\u002Flately-learned-js-tip",[743],"JavaScript","\u002Fimages\u002Farticles\u002Flately-learned-js-tip.png","Xi5F4LrgdP-cQxce9jEEPhpLiC086mIJfek4NR0cS3g",[747,1292,2975,3465,3955,4383,4775],{"id":4,"title":5,"body":748,"description":735,"extension":736,"meta":1289,"navigation":64,"path":738,"publishDate":739,"published":64,"seo":1290,"stem":741,"tags":1291,"thumbnail":744,"updated":739,"__hash__":745},{"type":7,"value":749,"toc":1274},[750,752,754,756,758,798,800,802,862,872,884,894,906,908,910,942,948,952,960,984,994,996,1008,1010,1014,1062,1064,1068,1096,1102,1104,1110,1126,1128,1134,1166,1168,1188,1192,1196,1204,1228,1242,1244,1248,1250,1262,1264,1266,1272],[10,751,12],{},[10,753,15],{},[17,755,19],{"id":19},[10,757,22],{},[24,759,760],{"className":26,"code":27,"language":28,"meta":29,"style":29},[31,761,762,766,770,774,778,782,786,790,794],{"__ignoreMap":29},[34,763,764],{"class":36,"line":37},[34,765,40],{},[34,767,768],{"class":36,"line":43},[34,769,46],{},[34,771,772],{"class":36,"line":49},[34,773,52],{},[34,775,776],{"class":36,"line":55},[34,777,58],{},[34,779,780],{"class":36,"line":61},[34,781,65],{"emptyLinePlaceholder":64},[34,783,784],{"class":36,"line":68},[34,785,71],{},[34,787,788],{"class":36,"line":74},[34,789,65],{"emptyLinePlaceholder":64},[34,791,792],{"class":36,"line":79},[34,793,82],{},[34,795,796],{"class":36,"line":85},[34,797,88],{},[90,799,92],{"id":92},[10,801,95],{},[24,803,804],{"className":26,"code":98,"language":28,"meta":29,"style":29},[31,805,806,810,814,818,822,826,830,834,838,842,846,850,854,858],{"__ignoreMap":29},[34,807,808],{"class":36,"line":37},[34,809,40],{},[34,811,812],{"class":36,"line":43},[34,813,46],{},[34,815,816],{"class":36,"line":49},[34,817,113],{},[34,819,820],{"class":36,"line":55},[34,821,118],{},[34,823,824],{"class":36,"line":61},[34,825,123],{},[34,827,828],{"class":36,"line":68},[34,829,58],{},[34,831,832],{"class":36,"line":74},[34,833,65],{"emptyLinePlaceholder":64},[34,835,836],{"class":36,"line":79},[34,837,136],{},[34,839,840],{"class":36,"line":85},[34,841,141],{},[34,843,844],{"class":36,"line":144},[34,845,147],{},[34,847,848],{"class":36,"line":150},[34,849,153],{},[34,851,852],{"class":36,"line":156},[34,853,65],{"emptyLinePlaceholder":64},[34,855,856],{"class":36,"line":161},[34,857,82],{},[34,859,860],{"class":36,"line":166},[34,861,88],{},[10,863,171,864,175,866,179,868,183,870,186],{},[31,865,174],{},[31,867,178],{},[31,869,182],{},[31,871,178],{},[24,873,874],{"className":26,"code":189,"language":28,"meta":29,"style":29},[31,875,876,880],{"__ignoreMap":29},[34,877,878],{"class":36,"line":37},[34,879,196],{},[34,881,882],{"class":36,"line":43},[34,883,201],{},[203,885,886],{"title":205,"type":206},[10,887,888,211,890,214,892,217],{},[31,889,182],{},[31,891,178],{},[31,893,182],{},[24,895,896],{"className":26,"code":220,"language":28,"meta":29,"style":29},[31,897,898,902],{"__ignoreMap":29},[34,899,900],{"class":36,"line":37},[34,901,227],{},[34,903,904],{"class":36,"line":43},[34,905,232],{},[90,907,235],{"id":235},[10,909,238],{},[24,911,912],{"className":26,"code":241,"language":28,"meta":29,"style":29},[31,913,914,918,922,926,930,934,938],{"__ignoreMap":29},[34,915,916],{"class":36,"line":37},[34,917,40],{},[34,919,920],{"class":36,"line":43},[34,921,252],{},[34,923,924],{"class":36,"line":49},[34,925,58],{},[34,927,928],{"class":36,"line":55},[34,929,65],{"emptyLinePlaceholder":64},[34,931,932],{"class":36,"line":61},[34,933,265],{},[34,935,936],{"class":36,"line":68},[34,937,65],{"emptyLinePlaceholder":64},[34,939,940],{"class":36,"line":74},[34,941,274],{},[10,943,277,944,281,946,179],{},[31,945,280],{},[31,947,284],{},[17,949,288,950,292],{"id":287},[31,951,291],{},[10,953,295,954,299,956,303,958,306],{},[31,955,298],{},[31,957,302],{},[31,959,302],{},[24,961,962],{"className":26,"code":309,"language":28,"meta":29,"style":29},[31,963,964,968,972,976,980],{"__ignoreMap":29},[34,965,966],{"class":36,"line":37},[34,967,40],{},[34,969,970],{"class":36,"line":43},[34,971,252],{},[34,973,974],{"class":36,"line":49},[34,975,58],{},[34,977,978],{"class":36,"line":55},[34,979,65],{"emptyLinePlaceholder":64},[34,981,982],{"class":36,"line":61},[34,983,332],{},[10,985,986,338,988,341,990,344,992,348],{},[31,987,337],{},[31,989,302],{},[31,991,291],{},[31,993,347],{},[10,995,351],{},[24,997,998],{"className":26,"code":354,"language":28,"meta":29,"style":29},[31,999,1000,1004],{"__ignoreMap":29},[34,1001,1002],{"class":36,"line":37},[34,1003,361],{},[34,1005,1006],{"class":36,"line":43},[34,1007,366],{},[90,1009,369],{"id":369},[10,1011,372,1012,376],{},[31,1013,375],{},[24,1015,1016],{"className":26,"code":379,"language":28,"meta":29,"style":29},[31,1017,1018,1022,1026,1030,1034,1038,1042,1046,1050,1054,1058],{"__ignoreMap":29},[34,1019,1020],{"class":36,"line":37},[34,1021,386],{},[34,1023,1024],{"class":36,"line":43},[34,1025,391],{},[34,1027,1028],{"class":36,"line":49},[34,1029,396],{},[34,1031,1032],{"class":36,"line":55},[34,1033,401],{},[34,1035,1036],{"class":36,"line":61},[34,1037,65],{"emptyLinePlaceholder":64},[34,1039,1040],{"class":36,"line":68},[34,1041,410],{},[34,1043,1044],{"class":36,"line":74},[34,1045,415],{},[34,1047,1048],{"class":36,"line":79},[34,1049,65],{"emptyLinePlaceholder":64},[34,1051,1052],{"class":36,"line":85},[34,1053,424],{},[34,1055,1056],{"class":36,"line":144},[34,1057,65],{"emptyLinePlaceholder":64},[34,1059,1060],{"class":36,"line":150},[34,1061,433],{},[90,1063,436],{"id":436},[10,1065,439,1066,443],{},[31,1067,442],{},[24,1069,1070],{"className":26,"code":446,"language":28,"meta":29,"style":29},[31,1071,1072,1076,1080,1084,1088,1092],{"__ignoreMap":29},[34,1073,1074],{"class":36,"line":37},[34,1075,453],{},[34,1077,1078],{"class":36,"line":43},[34,1079,458],{},[34,1081,1082],{"class":36,"line":49},[34,1083,58],{},[34,1085,1086],{"class":36,"line":55},[34,1087,65],{"emptyLinePlaceholder":64},[34,1089,1090],{"class":36,"line":61},[34,1091,471],{},[34,1093,1094],{"class":36,"line":68},[34,1095,476],{},[10,1097,479,1098,483,1100,486],{},[31,1099,482],{},[31,1101,442],{},[90,1103,490],{"id":489},[10,1105,1106,496,1108,499],{},[31,1107,495],{},[31,1109,298],{},[24,1111,1112],{"className":26,"code":502,"language":28,"meta":29,"style":29},[31,1113,1114,1118,1122],{"__ignoreMap":29},[34,1115,1116],{"class":36,"line":37},[34,1117,509],{},[34,1119,1120],{"class":36,"line":43},[34,1121,65],{"emptyLinePlaceholder":64},[34,1123,1124],{"class":36,"line":49},[34,1125,518],{},[90,1127,521],{"id":521},[10,1129,524,1130,299,1132,529],{},[31,1131,298],{},[31,1133,302],{},[24,1135,1136],{"className":26,"code":532,"language":28,"meta":29,"style":29},[31,1137,1138,1142,1146,1150,1154,1158,1162],{"__ignoreMap":29},[34,1139,1140],{"class":36,"line":37},[34,1141,539],{},[34,1143,1144],{"class":36,"line":43},[34,1145,544],{},[34,1147,1148],{"class":36,"line":49},[34,1149,65],{"emptyLinePlaceholder":64},[34,1151,1152],{"class":36,"line":55},[34,1153,553],{},[34,1155,1156],{"class":36,"line":61},[34,1157,65],{"emptyLinePlaceholder":64},[34,1159,1160],{"class":36,"line":68},[34,1161,562],{},[34,1163,1164],{"class":36,"line":74},[34,1165,567],{},[10,1167,570],{},[24,1169,1170],{"className":26,"code":573,"language":28,"meta":29,"style":29},[31,1171,1172,1176,1180,1184],{"__ignoreMap":29},[34,1173,1174],{"class":36,"line":37},[34,1175,580],{},[34,1177,1178],{"class":36,"line":43},[34,1179,65],{"emptyLinePlaceholder":64},[34,1181,1182],{"class":36,"line":49},[34,1183,589],{},[34,1185,1186],{"class":36,"line":55},[34,1187,594],{},[10,1189,597,1190,601],{},[31,1191,600],{},[17,1193,1194,604],{"id":604},[31,1195,607],{},[10,1197,610,1198,299,1200,615,1202,618],{},[31,1199,298],{},[31,1201,302],{},[31,1203,607],{},[24,1205,1206],{"className":26,"code":621,"language":28,"meta":29,"style":29},[31,1207,1208,1212,1216,1220,1224],{"__ignoreMap":29},[34,1209,1210],{"class":36,"line":37},[34,1211,628],{},[34,1213,1214],{"class":36,"line":43},[34,1215,65],{"emptyLinePlaceholder":64},[34,1217,1218],{"class":36,"line":49},[34,1219,637],{},[34,1221,1222],{"class":36,"line":55},[34,1223,65],{"emptyLinePlaceholder":64},[34,1225,1226],{"class":36,"line":61},[34,1227,646],{},[10,1229,1230,338,1232,655,1234,659,1236,662,1238,299,1240,667],{},[31,1231,651],{},[31,1233,654],{},[31,1235,658],{},[31,1237,607],{},[31,1239,298],{},[31,1241,302],{},[17,1243,670],{"id":670},[10,1245,673,1246,676],{},[31,1247,302],{},[10,1249,679],{},[681,1251,1252,1256,1258],{},[684,1253,686,1254,689],{},[31,1255,291],{},[684,1257,692],{},[684,1259,695,1260,698],{},[31,1261,607],{},[17,1263,701],{"id":701},[10,1265,704],{},[10,1267,707,1268,710,1270,713],{},[31,1269,298],{},[31,1271,302],{},[715,1273,717],{},{"title":29,"searchDepth":43,"depth":43,"links":1275},[1276,1280,1286,1287,1288],{"id":19,"depth":43,"text":19,"children":1277},[1278,1279],{"id":92,"depth":49,"text":92},{"id":235,"depth":49,"text":235},{"id":287,"depth":43,"text":725,"children":1281},[1282,1283,1284,1285],{"id":369,"depth":49,"text":369},{"id":436,"depth":49,"text":436},{"id":489,"depth":49,"text":490},{"id":521,"depth":49,"text":521},{"id":604,"depth":43,"text":732},{"id":670,"depth":43,"text":670},{"id":701,"depth":43,"text":701},{},{"title":5,"description":735},[743],{"id":1293,"title":1294,"body":1295,"description":2966,"extension":736,"meta":2967,"navigation":64,"path":2968,"publishDate":2969,"published":64,"seo":2970,"stem":2971,"tags":2972,"thumbnail":2973,"updated":2969,"__hash__":2974},"articles\u002Farticles\u002F2024\u002Forganize-learned-from-todo.md","Todoアプリのハンズオンで学んだことを整理する",{"type":7,"value":1296,"toc":2937},[1297,1299,1310,1323,1326,1333,1342,1380,1383,1390,1392,1395,1398,1440,1443,1447,1450,1460,1463,1466,1472,1481,1691,1702,1705,1708,1810,1813,1816,1910,1913,1916,1946,1949,1952,1963,2112,2115,2118,2121,2124,2127,2135,2147,2215,2221,2226,2232,2275,2280,2283,2286,2352,2359,2362,2369,2482,2491,2498,2503,2563,2566,2569,2572,2666,2669,2675,2694,2704,2707,2710,2789,2796,2799,2802,2923,2926,2928,2931,2934],[10,1298,12],{},[10,1300,1301,1302,1309],{},"今回は「",[1303,1304,1308],"a",{"href":1305,"rel":1306},"https:\u002F\u002Fzenn.dev\u002Fsprout2000\u002Fbooks\u002F76a279bb90c3f3",[1307],"nofollow","React Hooks と TypeScript でつくる Todo PWA ～入門 React ハンズオン～","」を進める中で学んだことを、次の4つに分けて整理します。",[681,1311,1312,1315,1317,1320],{},[684,1313,1314],{},"HTML",[684,1316,743],{},[684,1318,1319],{},"React",[684,1321,1322],{},"TypeScript",[17,1324,1314],{"id":1325},"html",[90,1327,1329,1332],{"id":1328},"autofocus属性",[31,1330,1331],{},"autofocus","属性",[10,1334,1335,1337,1338,1341],{},[31,1336,1331],{},"は、ページの読み込み時や",[31,1339,1340],{},"dialog","要素の表示時に、指定した要素へ自動的にフォーカスするための属性です。",[24,1343,1346],{"className":1344,"code":1345,"language":1325,"meta":29,"style":29},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cinput type=\"text\" autofocus>\n",[31,1347,1348],{"__ignoreMap":29},[34,1349,1350,1354,1358,1362,1365,1368,1372,1374,1377],{"class":36,"line":37},[34,1351,1353],{"class":1352},"sMK4o","\u003C",[34,1355,1357],{"class":1356},"swJcz","input",[34,1359,1361],{"class":1360},"spNyl"," type",[34,1363,1364],{"class":1352},"=",[34,1366,1367],{"class":1352},"\"",[34,1369,1371],{"class":1370},"sfazB","text",[34,1373,1367],{"class":1352},[34,1375,1376],{"class":1360}," autofocus",[34,1378,1379],{"class":1352},">\n",[10,1381,1382],{},"1つの文書やダイアログ内では、複数の要素へ指定しないようにします。複数指定した場合、最初に見つかった要素がフォーカスされます。",[203,1384,1387],{"title":1385,"type":1386},"アクセシビリティへの配慮","caution",[10,1388,1389],{},"ページを開いた直後にフォーカスが移動すると、スクリーンリーダー利用者やモバイル利用者を混乱させる場合があります。本当に自動フォーカスが必要かを検討して使用しましょう。",[17,1391,743],{"id":28},[90,1393,1394],{"id":1394},"オブジェクトのプロパティ名を動的にする",[10,1396,1397],{},"オブジェクトリテラルのプロパティ名を角括弧で囲むと、式の評価結果をプロパティ名として使用できます。これは計算プロパティ名と呼ばれます。",[24,1399,1401],{"className":26,"code":1400,"language":28,"meta":29,"style":29},"const key = 'sampleKey'\n\nconst sample = {\n [key]: 'sampleValue',\n}\n\nconsole.log(sample) \u002F\u002F { sampleKey: 'sampleValue' }\nconsole.log(sample[key]) \u002F\u002F 'sampleValue'\n",[31,1402,1403,1408,1412,1417,1422,1426,1430,1435],{"__ignoreMap":29},[34,1404,1405],{"class":36,"line":37},[34,1406,1407],{},"const key = 'sampleKey'\n",[34,1409,1410],{"class":36,"line":43},[34,1411,65],{"emptyLinePlaceholder":64},[34,1413,1414],{"class":36,"line":49},[34,1415,1416],{},"const sample = {\n",[34,1418,1419],{"class":36,"line":55},[34,1420,1421],{}," [key]: 'sampleValue',\n",[34,1423,1424],{"class":36,"line":61},[34,1425,58],{},[34,1427,1428],{"class":36,"line":68},[34,1429,65],{"emptyLinePlaceholder":64},[34,1431,1432],{"class":36,"line":74},[34,1433,1434],{},"console.log(sample) \u002F\u002F { sampleKey: 'sampleValue' }\n",[34,1436,1437],{"class":36,"line":79},[34,1438,1439],{},"console.log(sample[key]) \u002F\u002F 'sampleValue'\n",[10,1441,1442],{},"入力項目の名前をキーとしてオブジェクトを更新する場合などに利用できます。",[90,1444,1446],{"id":1445},"tree-shaking","Tree Shaking",[10,1448,1449],{},"Tree Shakingは、利用されていないコードをビルド結果から取り除く最適化です。",[10,1451,1452,1453,175,1456,1459],{},"主にバンドラーがES Modulesの",[31,1454,1455],{},"import",[31,1457,1458],{},"export","を静的に解析し、参照されていないエクスポートを出力対象から除外します。",[10,1461,1462],{},"実際に削除できる範囲は、バンドラーの設定やコードに副作用があるかどうかによって変わります。",[17,1464,1319],{"id":1465},"react",[90,1467,1469],{"id":1468},"createroot",[31,1470,1471],{},"createRoot",[10,1473,1474,1476,1477,1480],{},[31,1475,1471],{},"は、Reactが管理するルートをブラウザのDOM要素へ作成するAPIです。作成したルートの",[31,1478,1479],{},"render","メソッドへReact要素を渡して表示します。",[24,1482,1486],{"className":1483,"code":1484,"language":1485,"meta":29,"style":29},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { StrictMode } from 'react'\nimport { createRoot } from 'react-dom\u002Fclient'\nimport App from '.\u002FApp'\n\nconst container = document.getElementById('root')\n\nif (!container) {\n throw new Error('root要素が見つかりません')\n}\n\ncreateRoot(container).render(\n \u003CStrictMode>\n \u003CApp \u002F>\n \u003C\u002FStrictMode>,\n)\n","tsx",[31,1487,1488,1514,1534,1551,1555,1589,1593,1610,1632,1636,1640,1654,1665,1676,1686],{"__ignoreMap":29},[34,1489,1490,1493,1496,1500,1503,1506,1509,1511],{"class":36,"line":37},[34,1491,1455],{"class":1492},"s7zQu",[34,1494,1495],{"class":1352}," {",[34,1497,1499],{"class":1498},"sTEyZ"," StrictMode",[34,1501,1502],{"class":1352}," }",[34,1504,1505],{"class":1492}," from",[34,1507,1508],{"class":1352}," '",[34,1510,1465],{"class":1370},[34,1512,1513],{"class":1352},"'\n",[34,1515,1516,1518,1520,1523,1525,1527,1529,1532],{"class":36,"line":43},[34,1517,1455],{"class":1492},[34,1519,1495],{"class":1352},[34,1521,1522],{"class":1498}," createRoot",[34,1524,1502],{"class":1352},[34,1526,1505],{"class":1492},[34,1528,1508],{"class":1352},[34,1530,1531],{"class":1370},"react-dom\u002Fclient",[34,1533,1513],{"class":1352},[34,1535,1536,1538,1541,1544,1546,1549],{"class":36,"line":49},[34,1537,1455],{"class":1492},[34,1539,1540],{"class":1498}," App ",[34,1542,1543],{"class":1492},"from",[34,1545,1508],{"class":1352},[34,1547,1548],{"class":1370},".\u002FApp",[34,1550,1513],{"class":1352},[34,1552,1553],{"class":36,"line":55},[34,1554,65],{"emptyLinePlaceholder":64},[34,1556,1557,1560,1563,1565,1568,1571,1575,1578,1581,1584,1586],{"class":36,"line":61},[34,1558,1559],{"class":1360},"const",[34,1561,1562],{"class":1498}," container ",[34,1564,1364],{"class":1352},[34,1566,1567],{"class":1498}," document",[34,1569,1570],{"class":1352},".",[34,1572,1574],{"class":1573},"s2Zo4","getElementById",[34,1576,1577],{"class":1498},"(",[34,1579,1580],{"class":1352},"'",[34,1582,1583],{"class":1370},"root",[34,1585,1580],{"class":1352},[34,1587,1588],{"class":1498},")\n",[34,1590,1591],{"class":36,"line":68},[34,1592,65],{"emptyLinePlaceholder":64},[34,1594,1595,1598,1601,1604,1607],{"class":36,"line":74},[34,1596,1597],{"class":1492},"if",[34,1599,1600],{"class":1498}," (",[34,1602,1603],{"class":1352},"!",[34,1605,1606],{"class":1498},"container) ",[34,1608,1609],{"class":1352},"{\n",[34,1611,1612,1615,1618,1621,1623,1625,1628,1630],{"class":36,"line":79},[34,1613,1614],{"class":1492}," throw",[34,1616,1617],{"class":1352}," new",[34,1619,1620],{"class":1573}," Error",[34,1622,1577],{"class":1356},[34,1624,1580],{"class":1352},[34,1626,1627],{"class":1370},"root要素が見つかりません",[34,1629,1580],{"class":1352},[34,1631,1588],{"class":1356},[34,1633,1634],{"class":36,"line":85},[34,1635,58],{"class":1352},[34,1637,1638],{"class":36,"line":144},[34,1639,65],{"emptyLinePlaceholder":64},[34,1641,1642,1644,1647,1649,1651],{"class":36,"line":150},[34,1643,1471],{"class":1573},[34,1645,1646],{"class":1498},"(container)",[34,1648,1570],{"class":1352},[34,1650,1479],{"class":1573},[34,1652,1653],{"class":1498},"(\n",[34,1655,1656,1659,1663],{"class":36,"line":156},[34,1657,1658],{"class":1352}," \u003C",[34,1660,1662],{"class":1661},"sBMFI","StrictMode",[34,1664,1379],{"class":1352},[34,1666,1667,1670,1673],{"class":36,"line":161},[34,1668,1669],{"class":1352}," \u003C",[34,1671,1672],{"class":1661},"App",[34,1674,1675],{"class":1352}," \u002F>\n",[34,1677,1678,1681,1683],{"class":36,"line":166},[34,1679,1680],{"class":1352}," \u003C\u002F",[34,1682,1662],{"class":1661},[34,1684,1685],{"class":1352},">,\n",[34,1687,1689],{"class":36,"line":1688},15,[34,1690,1588],{"class":1498},[10,1692,1693,1695,1696,1698,1699,443],{},[31,1694,1471],{},"へ渡したDOM要素の内側はReactが管理します。サーバー側でReactが生成したHTMLを再利用する場合は、",[31,1697,1471],{},"ではなく",[31,1700,1701],{},"hydrateRoot",[90,1703,1704],{"id":1704},"stateを直接変更しない",[10,1706,1707],{},"Reactのstateに保存したオブジェクトや配列は、読み取り専用として扱います。値を直接変更せず、新しい値を作ってset関数へ渡します。",[24,1709,1711],{"className":1483,"code":1710,"language":1485,"meta":29,"style":29},"setTodos(currentTodos =>\n currentTodos.map(todo =>\n todo.id === id\n ? { ...todo, completed: true }\n : todo,\n ),\n)\n",[31,1712,1713,1727,1744,1760,1788,1799,1806],{"__ignoreMap":29},[34,1714,1715,1718,1720,1724],{"class":36,"line":37},[34,1716,1717],{"class":1573},"setTodos",[34,1719,1577],{"class":1498},[34,1721,1723],{"class":1722},"sHdIc","currentTodos",[34,1725,1726],{"class":1360}," =>\n",[34,1728,1729,1732,1734,1737,1739,1742],{"class":36,"line":43},[34,1730,1731],{"class":1498}," currentTodos",[34,1733,1570],{"class":1352},[34,1735,1736],{"class":1573},"map",[34,1738,1577],{"class":1498},[34,1740,1741],{"class":1722},"todo",[34,1743,1726],{"class":1360},[34,1745,1746,1749,1751,1754,1757],{"class":36,"line":49},[34,1747,1748],{"class":1498}," todo",[34,1750,1570],{"class":1352},[34,1752,1753],{"class":1498},"id ",[34,1755,1756],{"class":1352},"===",[34,1758,1759],{"class":1498}," id\n",[34,1761,1762,1765,1767,1770,1772,1775,1778,1781,1785],{"class":36,"line":55},[34,1763,1764],{"class":1352}," ?",[34,1766,1495],{"class":1352},[34,1768,1769],{"class":1352}," ...",[34,1771,1741],{"class":1498},[34,1773,1774],{"class":1352},",",[34,1776,1777],{"class":1356}," completed",[34,1779,1780],{"class":1352},":",[34,1782,1784],{"class":1783},"sfNiH"," true",[34,1786,1787],{"class":1352}," }\n",[34,1789,1790,1793,1796],{"class":36,"line":61},[34,1791,1792],{"class":1352}," :",[34,1794,1795],{"class":1498}," todo",[34,1797,1798],{"class":1352},",\n",[34,1800,1801,1804],{"class":36,"line":68},[34,1802,1803],{"class":1498}," )",[34,1805,1798],{"class":1352},[34,1807,1808],{"class":36,"line":74},[34,1809,1588],{"class":1498},[10,1811,1812],{},"配列を新しく作っても、その中にあるオブジェクトまでは自動的に複製されません。更新対象のオブジェクトもスプレッド構文などで新しく作る必要があります。",[10,1814,1815],{},"配列を更新する際は、次のように破壊的な操作を避けます。",[1817,1818,1819,1835],"table",{},[1820,1821,1822],"thead",{},[1823,1824,1825,1829,1832],"tr",{},[1826,1827,1828],"th",{},"操作",[1826,1830,1831],{},"避けたい方法",[1826,1833,1834],{},"利用する方法",[1836,1837,1838,1859,1880,1894],"tbody",{},[1823,1839,1840,1844,1853],{},[1841,1842,1843],"td",{},"追加",[1841,1845,1846,1849,1850],{},[31,1847,1848],{},"push","、",[31,1851,1852],{},"unshift",[1841,1854,1855,1856],{},"スプレッド構文、",[31,1857,1858],{},"concat",[1823,1860,1861,1864,1872],{},[1841,1862,1863],{},"削除",[1841,1865,1866,1849,1869],{},[31,1867,1868],{},"pop",[31,1870,1871],{},"splice",[1841,1873,1874,1849,1877],{},[31,1875,1876],{},"filter",[31,1878,1879],{},"slice",[1823,1881,1882,1885,1890],{},[1841,1883,1884],{},"置換",[1841,1886,1887,1888],{},"添字への代入、",[31,1889,1871],{},[1841,1891,1892],{},[31,1893,1736],{},[1823,1895,1896,1899,1905],{},[1841,1897,1898],{},"並び替え",[1841,1900,1901,1902],{},"元配列への",[31,1903,1904],{},"sort",[1841,1906,1907,1908],{},"コピー後に",[31,1909,1904],{},[90,1911,1912],{"id":1912},"直前のstateを基に更新する",[10,1914,1915],{},"更新後のstateが更新前の値に依存する場合は、set関数へ値ではなく更新用の関数を渡します。",[24,1917,1919],{"className":1483,"code":1918,"language":1485,"meta":29,"style":29},"setCount(currentCount => currentCount + 1)\n",[31,1920,1921],{"__ignoreMap":29},[34,1922,1923,1926,1928,1931,1934,1937,1940,1944],{"class":36,"line":37},[34,1924,1925],{"class":1573},"setCount",[34,1927,1577],{"class":1498},[34,1929,1930],{"class":1722},"currentCount",[34,1932,1933],{"class":1360}," =>",[34,1935,1936],{"class":1498}," currentCount ",[34,1938,1939],{"class":1352},"+",[34,1941,1943],{"class":1942},"sbssI"," 1",[34,1945,1588],{"class":1498},[10,1947,1948],{},"Reactはイベントハンドラーの処理をまとめてからstateを更新することがあります。更新用関数を使うことで、その時点の最新のstateを基に次の値を計算できます。",[90,1950,1951],{"id":1951},"イベントハンドラーの命名",[10,1953,1954,1955,1958,1959,1962],{},"イベントを処理する関数には",[31,1956,1957],{},"handle","、propsとして受け渡すイベントには",[31,1960,1961],{},"on","を付けると役割が伝わりやすくなります。",[24,1964,1966],{"className":1483,"code":1965,"language":1485,"meta":29,"style":29},"type TodoItemProps = {\n onChange: (id: number) => void\n}\n\nfunction TodoItem({ onChange }: TodoItemProps) {\n const handleChange = () => {\n onChange(1)\n }\n\n return \u003Cinput type=\"checkbox\" onChange={handleChange} \u002F>\n}\n",[31,1967,1968,1982,2007,2011,2015,2038,2055,2067,2072,2076,2108],{"__ignoreMap":29},[34,1969,1970,1973,1976,1979],{"class":36,"line":37},[34,1971,1972],{"class":1360},"type",[34,1974,1975],{"class":1661}," TodoItemProps",[34,1977,1978],{"class":1352}," =",[34,1980,1981],{"class":1352}," {\n",[34,1983,1984,1987,1989,1991,1994,1996,1999,2002,2004],{"class":36,"line":43},[34,1985,1986],{"class":1356}," onChange",[34,1988,1780],{"class":1352},[34,1990,1600],{"class":1352},[34,1992,1993],{"class":1722},"id",[34,1995,1780],{"class":1352},[34,1997,1998],{"class":1661}," number",[34,2000,2001],{"class":1352},")",[34,2003,1933],{"class":1360},[34,2005,2006],{"class":1661}," void\n",[34,2008,2009],{"class":36,"line":49},[34,2010,58],{"class":1352},[34,2012,2013],{"class":36,"line":55},[34,2014,65],{"emptyLinePlaceholder":64},[34,2016,2017,2020,2023,2026,2029,2032,2034,2036],{"class":36,"line":61},[34,2018,2019],{"class":1360},"function",[34,2021,2022],{"class":1573}," TodoItem",[34,2024,2025],{"class":1352},"({",[34,2027,2028],{"class":1722}," onChange",[34,2030,2031],{"class":1352}," }:",[34,2033,1975],{"class":1661},[34,2035,2001],{"class":1352},[34,2037,1981],{"class":1352},[34,2039,2040,2043,2046,2048,2051,2053],{"class":36,"line":68},[34,2041,2042],{"class":1360}," const",[34,2044,2045],{"class":1498}," handleChange",[34,2047,1978],{"class":1352},[34,2049,2050],{"class":1352}," ()",[34,2052,1933],{"class":1360},[34,2054,1981],{"class":1352},[34,2056,2057,2060,2062,2065],{"class":36,"line":74},[34,2058,2059],{"class":1573}," onChange",[34,2061,1577],{"class":1356},[34,2063,2064],{"class":1942},"1",[34,2066,1588],{"class":1356},[34,2068,2069],{"class":36,"line":79},[34,2070,2071],{"class":1352}," }\n",[34,2073,2074],{"class":36,"line":85},[34,2075,65],{"emptyLinePlaceholder":64},[34,2077,2078,2081,2084,2086,2088,2090,2092,2095,2097,2099,2102,2105],{"class":36,"line":144},[34,2079,2080],{"class":1492}," return",[34,2082,2083],{"class":1352}," \u003C",[34,2085,1357],{"class":1356},[34,2087,1361],{"class":1360},[34,2089,1364],{"class":1352},[34,2091,1367],{"class":1352},[34,2093,2094],{"class":1370},"checkbox",[34,2096,1367],{"class":1352},[34,2098,2028],{"class":1360},[34,2100,2101],{"class":1352},"={",[34,2103,2104],{"class":1498},"handleChange",[34,2106,2107],{"class":1352},"} \u002F>\n",[34,2109,2110],{"class":36,"line":150},[34,2111,58],{"class":1352},[10,2113,2114],{},"これはReactが強制する規則ではありませんが、一貫した命名はコードを読みやすくします。",[90,2116,2117],{"id":2117},"propsの分割代入",[10,2119,2120],{},"propsを分割代入すると記述は短くなりますが、変数がprops由来なのかコンポーネント内で定義されたものなのか分かりにくくなる場合があります。",[10,2122,2123],{},"コンポーネントが大きくなった場合は、変数名やコンポーネントの責務を見直し、値の出所を追いやすくすることが大切です。",[17,2125,1322],{"id":2126},"typescript",[90,2128,2130,175,2133],{"id":2129},"documentgetelementbyidとnull",[31,2131,2132],{},"document.getElementById",[31,2134,298],{},[10,2136,2137,2139,2140,2143,2144,2146],{},[31,2138,2132],{},"の戻り値は",[31,2141,2142],{},"HTMLElement | null","です。対象の要素が存在しない可能性があるため、利用前に",[31,2145,298],{},"を確認します。",[24,2148,2151],{"className":2149,"code":2150,"language":2126,"meta":29,"style":29},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const container = document.getElementById('root')\n\nif (!container) {\n throw new Error('root要素が見つかりません')\n}\n",[31,2152,2153,2177,2181,2193,2211],{"__ignoreMap":29},[34,2154,2155,2157,2159,2161,2163,2165,2167,2169,2171,2173,2175],{"class":36,"line":37},[34,2156,1559],{"class":1360},[34,2158,1562],{"class":1498},[34,2160,1364],{"class":1352},[34,2162,1567],{"class":1498},[34,2164,1570],{"class":1352},[34,2166,1574],{"class":1573},[34,2168,1577],{"class":1498},[34,2170,1580],{"class":1352},[34,2172,1583],{"class":1370},[34,2174,1580],{"class":1352},[34,2176,1588],{"class":1498},[34,2178,2179],{"class":36,"line":43},[34,2180,65],{"emptyLinePlaceholder":64},[34,2182,2183,2185,2187,2189,2191],{"class":36,"line":49},[34,2184,1597],{"class":1492},[34,2186,1600],{"class":1498},[34,2188,1603],{"class":1352},[34,2190,1606],{"class":1498},[34,2192,1609],{"class":1352},[34,2194,2195,2197,2199,2201,2203,2205,2207,2209],{"class":36,"line":55},[34,2196,1614],{"class":1492},[34,2198,1617],{"class":1352},[34,2200,1620],{"class":1573},[34,2202,1577],{"class":1356},[34,2204,1580],{"class":1352},[34,2206,1627],{"class":1370},[34,2208,1580],{"class":1352},[34,2210,1588],{"class":1356},[34,2212,2213],{"class":36,"line":61},[34,2214,58],{"class":1352},[10,2216,2217,2218,2220],{},"Non-nullアサーション演算子（",[31,2219,1603],{},"）で確認を省略することもできますが、実行時に要素が必ず存在することをTypeScriptが保証するわけではありません。",[90,2222,2224],{"id":2223},"readonly",[31,2225,2223],{},[10,2227,2228,2229,2231],{},"プロパティへ",[31,2230,2223],{},"を指定すると、そのプロパティへの再代入を型チェックで防げます。",[24,2233,2235],{"className":2149,"code":2234,"language":2126,"meta":29,"style":29},"type Todo = {\n readonly id: number\n title: string\n}\n",[31,2236,2237,2248,2261,2271],{"__ignoreMap":29},[34,2238,2239,2241,2244,2246],{"class":36,"line":37},[34,2240,1972],{"class":1360},[34,2242,2243],{"class":1661}," Todo",[34,2245,1978],{"class":1352},[34,2247,1981],{"class":1352},[34,2249,2250,2253,2256,2258],{"class":36,"line":43},[34,2251,2252],{"class":1360}," readonly",[34,2254,2255],{"class":1356}," id",[34,2257,1780],{"class":1352},[34,2259,2260],{"class":1661}," number\n",[34,2262,2263,2266,2268],{"class":36,"line":49},[34,2264,2265],{"class":1356}," title",[34,2267,1780],{"class":1352},[34,2269,2270],{"class":1661}," string\n",[34,2272,2273],{"class":36,"line":55},[34,2274,58],{"class":1352},[10,2276,2277,2279],{},[31,2278,2223],{},"はコンパイル時の制約です。また、入れ子になったオブジェクトまで自動的に読み取り専用にするものではありません。",[90,2281,2282],{"id":2282},"イベントごとの型",[10,2284,2285],{},"Reactのイベントハンドラーでは、対象に応じたイベント型を利用できます。",[24,2287,2289],{"className":1483,"code":2288,"language":1485,"meta":29,"style":29},"function handleChange(event: React.ChangeEvent\u003CHTMLInputElement>) {\n console.log(event.target.checked)\n}\n",[31,2290,2291,2322,2348],{"__ignoreMap":29},[34,2292,2293,2295,2297,2299,2302,2304,2307,2309,2312,2314,2317,2320],{"class":36,"line":37},[34,2294,2019],{"class":1360},[34,2296,2045],{"class":1573},[34,2298,1577],{"class":1352},[34,2300,2301],{"class":1722},"event",[34,2303,1780],{"class":1352},[34,2305,2306],{"class":1661}," React",[34,2308,1570],{"class":1352},[34,2310,2311],{"class":1661},"ChangeEvent",[34,2313,1353],{"class":1352},[34,2315,2316],{"class":1661},"HTMLInputElement",[34,2318,2319],{"class":1352},">)",[34,2321,1981],{"class":1352},[34,2323,2324,2327,2329,2332,2334,2336,2338,2341,2343,2346],{"class":36,"line":43},[34,2325,2326],{"class":1498}," console",[34,2328,1570],{"class":1352},[34,2330,2331],{"class":1573},"log",[34,2333,1577],{"class":1356},[34,2335,2301],{"class":1498},[34,2337,1570],{"class":1352},[34,2339,2340],{"class":1498},"target",[34,2342,1570],{"class":1352},[34,2344,2345],{"class":1498},"checked",[34,2347,1588],{"class":1356},[34,2349,2350],{"class":36,"line":49},[34,2351,58],{"class":1352},[10,2353,2354,2355,2358],{},"イベント型だけでなく、",[31,2356,2357],{},"ChangeEventHandler\u003CHTMLInputElement>","のようなハンドラー全体の型を付ける方法もあります。",[90,2360,2361],{"id":2361},"ジェネリクスの型引数へ制約を付ける",[10,2363,2364,2365,2368],{},"型引数に",[31,2366,2367],{},"extends","を指定すると、ジェネリクスで受け取れる型に必要なプロパティを保証できます。",[24,2370,2372],{"className":2149,"code":2371,"language":2126,"meta":29,"style":29},"type Identifiable = {\n id: number\n}\n\nfunction findById\u003CT extends Identifiable>(items: T[], id: number) {\n return items.find(item => item.id === id)\n}\n",[31,2373,2374,2385,2394,2398,2402,2445,2478],{"__ignoreMap":29},[34,2375,2376,2378,2381,2383],{"class":36,"line":37},[34,2377,1972],{"class":1360},[34,2379,2380],{"class":1661}," Identifiable",[34,2382,1978],{"class":1352},[34,2384,1981],{"class":1352},[34,2386,2387,2390,2392],{"class":36,"line":43},[34,2388,2389],{"class":1356}," id",[34,2391,1780],{"class":1352},[34,2393,2260],{"class":1661},[34,2395,2396],{"class":36,"line":49},[34,2397,58],{"class":1352},[34,2399,2400],{"class":36,"line":55},[34,2401,65],{"emptyLinePlaceholder":64},[34,2403,2404,2406,2409,2411,2414,2417,2419,2422,2425,2427,2430,2433,2435,2437,2439,2441,2443],{"class":36,"line":61},[34,2405,2019],{"class":1360},[34,2407,2408],{"class":1573}," findById",[34,2410,1353],{"class":1352},[34,2412,2413],{"class":1661},"T",[34,2415,2416],{"class":1360}," extends",[34,2418,2380],{"class":1661},[34,2420,2421],{"class":1352},">(",[34,2423,2424],{"class":1722},"items",[34,2426,1780],{"class":1352},[34,2428,2429],{"class":1661}," T",[34,2431,2432],{"class":1498},"[]",[34,2434,1774],{"class":1352},[34,2436,2255],{"class":1722},[34,2438,1780],{"class":1352},[34,2440,1998],{"class":1661},[34,2442,2001],{"class":1352},[34,2444,1981],{"class":1352},[34,2446,2447,2449,2452,2454,2457,2459,2462,2464,2467,2469,2471,2474,2476],{"class":36,"line":68},[34,2448,2080],{"class":1492},[34,2450,2451],{"class":1498}," items",[34,2453,1570],{"class":1352},[34,2455,2456],{"class":1573},"find",[34,2458,1577],{"class":1356},[34,2460,2461],{"class":1722},"item",[34,2463,1933],{"class":1360},[34,2465,2466],{"class":1498}," item",[34,2468,1570],{"class":1352},[34,2470,1993],{"class":1498},[34,2472,2473],{"class":1352}," ===",[34,2475,2255],{"class":1498},[34,2477,1588],{"class":1356},[34,2479,2480],{"class":36,"line":74},[34,2481,58],{"class":1352},[10,2483,2484,2485,2487,2488,2490],{},"制約がなければ",[31,2486,2413],{},"にどのような型が渡されるか分からないため、関数内で",[31,2489,1993],{},"へ安全にアクセスできません。",[90,2492,2494,2497],{"id":2493},"keyof型演算子",[31,2495,2496],{},"keyof","型演算子",[10,2499,2500,2502],{},[31,2501,2496],{},"は、オブジェクト型のプロパティ名からユニオン型を作る型演算子です。",[24,2504,2506],{"className":2149,"code":2505,"language":2126,"meta":29,"style":29},"type Todo = {\n id: number\n title: string\n}\n\ntype TodoKey = keyof Todo\n\u002F\u002F 'id' | 'title'\n",[31,2507,2508,2518,2526,2534,2538,2542,2557],{"__ignoreMap":29},[34,2509,2510,2512,2514,2516],{"class":36,"line":37},[34,2511,1972],{"class":1360},[34,2513,2243],{"class":1661},[34,2515,1978],{"class":1352},[34,2517,1981],{"class":1352},[34,2519,2520,2522,2524],{"class":36,"line":43},[34,2521,2389],{"class":1356},[34,2523,1780],{"class":1352},[34,2525,2260],{"class":1661},[34,2527,2528,2530,2532],{"class":36,"line":49},[34,2529,2265],{"class":1356},[34,2531,1780],{"class":1352},[34,2533,2270],{"class":1661},[34,2535,2536],{"class":36,"line":55},[34,2537,58],{"class":1352},[34,2539,2540],{"class":36,"line":61},[34,2541,65],{"emptyLinePlaceholder":64},[34,2543,2544,2546,2549,2551,2554],{"class":36,"line":68},[34,2545,1972],{"class":1360},[34,2547,2548],{"class":1661}," TodoKey",[34,2550,1978],{"class":1352},[34,2552,2553],{"class":1352}," keyof",[34,2555,2556],{"class":1661}," Todo\n",[34,2558,2559],{"class":36,"line":74},[34,2560,2562],{"class":2561},"sHwdD","\u002F\u002F 'id' | 'title'\n",[10,2564,2565],{},"プロパティを追加・削除したときにユニオン型を手作業で更新する必要がなくなり、型定義との不整合を防ぎやすくなります。",[90,2567,2568],{"id":2568},"インデックスアクセス型",[10,2570,2571],{},"インデックスアクセス型を使うと、オブジェクト型から特定のプロパティの型を取り出せます。",[24,2573,2575],{"className":2149,"code":2574,"language":2126,"meta":29,"style":29},"type Todo = {\n id: number\n title: string\n}\n\ntype TodoId = Todo['id']\n\u002F\u002F number\n\ntype TodoValue = Todo[keyof Todo]\n\u002F\u002F number | string\n",[31,2576,2577,2587,2595,2603,2607,2611,2633,2638,2642,2661],{"__ignoreMap":29},[34,2578,2579,2581,2583,2585],{"class":36,"line":37},[34,2580,1972],{"class":1360},[34,2582,2243],{"class":1661},[34,2584,1978],{"class":1352},[34,2586,1981],{"class":1352},[34,2588,2589,2591,2593],{"class":36,"line":43},[34,2590,2389],{"class":1356},[34,2592,1780],{"class":1352},[34,2594,2260],{"class":1661},[34,2596,2597,2599,2601],{"class":36,"line":49},[34,2598,2265],{"class":1356},[34,2600,1780],{"class":1352},[34,2602,2270],{"class":1661},[34,2604,2605],{"class":36,"line":55},[34,2606,58],{"class":1352},[34,2608,2609],{"class":36,"line":61},[34,2610,65],{"emptyLinePlaceholder":64},[34,2612,2613,2615,2618,2620,2622,2625,2627,2629,2631],{"class":36,"line":68},[34,2614,1972],{"class":1360},[34,2616,2617],{"class":1661}," TodoId",[34,2619,1978],{"class":1352},[34,2621,2243],{"class":1661},[34,2623,2624],{"class":1498},"[",[34,2626,1580],{"class":1352},[34,2628,1993],{"class":1370},[34,2630,1580],{"class":1352},[34,2632,401],{"class":1498},[34,2634,2635],{"class":36,"line":74},[34,2636,2637],{"class":2561},"\u002F\u002F number\n",[34,2639,2640],{"class":36,"line":79},[34,2641,65],{"emptyLinePlaceholder":64},[34,2643,2644,2646,2649,2651,2653,2655,2657,2659],{"class":36,"line":85},[34,2645,1972],{"class":1360},[34,2647,2648],{"class":1661}," TodoValue",[34,2650,1978],{"class":1352},[34,2652,2243],{"class":1661},[34,2654,2624],{"class":1498},[34,2656,2496],{"class":1352},[34,2658,2243],{"class":1661},[34,2660,401],{"class":1498},[34,2662,2663],{"class":36,"line":144},[34,2664,2665],{"class":2561},"\u002F\u002F number | string\n",[90,2667,2668],{"id":2668},"アンビエント宣言",[10,2670,2671,2674],{},[31,2672,2673],{},"declare","を使うと、実装が別の場所に存在する値や型をTypeScriptへ伝えられます。JavaScriptライブラリや実行環境が提供するグローバル変数の型を補う場合などに使用します。",[24,2676,2678],{"className":2149,"code":2677,"language":2126,"meta":29,"style":29},"declare const appVersion: string\n",[31,2679,2680],{"__ignoreMap":29},[34,2681,2682,2684,2687,2690,2692],{"class":36,"line":37},[34,2683,2673],{"class":1360},[34,2685,2686],{"class":1360}," const",[34,2688,2689],{"class":1498}," appVersion",[34,2691,1780],{"class":1352},[34,2693,2270],{"class":1661},[10,2695,2696,2697,2700,2701,2703],{},"一般的には",[31,2698,2699],{},".d.ts","形式の型定義ファイルへ記述します。",[31,2702,2673],{},"は実行時の値を作成しないため、実体が存在しなければ実行時エラーになります。",[90,2705,2706],{"id":2706},"メソッドの型注釈",[10,2708,2709],{},"オブジェクト型のメソッドは、メソッド構文と関数プロパティ構文のどちらでも表現できます。",[24,2711,2713],{"className":2149,"code":2712,"language":2126,"meta":29,"style":29},"type Formatter = {\n format(value: string): string\n}\n\ntype FormatterProperty = {\n format: (value: string) => string\n}\n",[31,2714,2715,2726,2746,2750,2754,2765,2785],{"__ignoreMap":29},[34,2716,2717,2719,2722,2724],{"class":36,"line":37},[34,2718,1972],{"class":1360},[34,2720,2721],{"class":1661}," Formatter",[34,2723,1978],{"class":1352},[34,2725,1981],{"class":1352},[34,2727,2728,2731,2733,2736,2738,2741,2744],{"class":36,"line":43},[34,2729,2730],{"class":1356}," format",[34,2732,1577],{"class":1352},[34,2734,2735],{"class":1722},"value",[34,2737,1780],{"class":1352},[34,2739,2740],{"class":1661}," string",[34,2742,2743],{"class":1352},"):",[34,2745,2270],{"class":1661},[34,2747,2748],{"class":36,"line":49},[34,2749,58],{"class":1352},[34,2751,2752],{"class":36,"line":55},[34,2753,65],{"emptyLinePlaceholder":64},[34,2755,2756,2758,2761,2763],{"class":36,"line":61},[34,2757,1972],{"class":1360},[34,2759,2760],{"class":1661}," FormatterProperty",[34,2762,1978],{"class":1352},[34,2764,1981],{"class":1352},[34,2766,2767,2769,2771,2773,2775,2777,2779,2781,2783],{"class":36,"line":68},[34,2768,2730],{"class":1356},[34,2770,1780],{"class":1352},[34,2772,1600],{"class":1352},[34,2774,2735],{"class":1722},[34,2776,1780],{"class":1352},[34,2778,2740],{"class":1661},[34,2780,2001],{"class":1352},[34,2782,1933],{"class":1360},[34,2784,2270],{"class":1661},[34,2786,2787],{"class":36,"line":74},[34,2788,58],{"class":1352},[10,2790,2791,2792,2795],{},"両者には、継承や",[31,2793,2794],{},"strictFunctionTypes","における引数型の扱いなどで違いがあります。プロジェクト内で意図に合った書き方へ揃えることが大切です。",[90,2797,2798],{"id":2798},"型ガード",[10,2800,2801],{},"型ガードは、実行時の確認を通して変数の型を絞り込む仕組みです。ユーザー定義型ガードでは、戻り値の型に型述語を指定します。",[24,2803,2805],{"className":2149,"code":2804,"language":2126,"meta":29,"style":29},"function isNumber(value: unknown): value is number {\n return typeof value === 'number'\n}\n\nconst value: unknown = 10\n\nif (isNumber(value)) {\n console.log(value.toFixed(2))\n}\n",[31,2806,2807,2835,2853,2857,2861,2876,2880,2894,2919],{"__ignoreMap":29},[34,2808,2809,2811,2814,2816,2818,2820,2823,2825,2828,2831,2833],{"class":36,"line":37},[34,2810,2019],{"class":1360},[34,2812,2813],{"class":1573}," isNumber",[34,2815,1577],{"class":1352},[34,2817,2735],{"class":1722},[34,2819,1780],{"class":1352},[34,2821,2822],{"class":1661}," unknown",[34,2824,2743],{"class":1352},[34,2826,2827],{"class":1722}," value",[34,2829,2830],{"class":1352}," is",[34,2832,1998],{"class":1661},[34,2834,1981],{"class":1352},[34,2836,2837,2839,2842,2844,2846,2848,2851],{"class":36,"line":43},[34,2838,2080],{"class":1492},[34,2840,2841],{"class":1352}," typeof",[34,2843,2827],{"class":1498},[34,2845,2473],{"class":1352},[34,2847,1508],{"class":1352},[34,2849,2850],{"class":1370},"number",[34,2852,1513],{"class":1352},[34,2854,2855],{"class":36,"line":49},[34,2856,58],{"class":1352},[34,2858,2859],{"class":36,"line":55},[34,2860,65],{"emptyLinePlaceholder":64},[34,2862,2863,2865,2867,2869,2871,2873],{"class":36,"line":61},[34,2864,1559],{"class":1360},[34,2866,2827],{"class":1498},[34,2868,1780],{"class":1352},[34,2870,2822],{"class":1661},[34,2872,1978],{"class":1352},[34,2874,2875],{"class":1942}," 10\n",[34,2877,2878],{"class":36,"line":68},[34,2879,65],{"emptyLinePlaceholder":64},[34,2881,2882,2884,2886,2889,2892],{"class":36,"line":74},[34,2883,1597],{"class":1492},[34,2885,1600],{"class":1498},[34,2887,2888],{"class":1573},"isNumber",[34,2890,2891],{"class":1498},"(value)) ",[34,2893,1609],{"class":1352},[34,2895,2896,2898,2900,2902,2904,2906,2908,2911,2913,2916],{"class":36,"line":79},[34,2897,2326],{"class":1498},[34,2899,1570],{"class":1352},[34,2901,2331],{"class":1573},[34,2903,1577],{"class":1356},[34,2905,2735],{"class":1498},[34,2907,1570],{"class":1352},[34,2909,2910],{"class":1573},"toFixed",[34,2912,1577],{"class":1356},[34,2914,2915],{"class":1942},"2",[34,2917,2918],{"class":1356},"))\n",[34,2920,2921],{"class":36,"line":85},[34,2922,58],{"class":1352},[10,2924,2925],{},"APIレスポンスなど外部から受け取った値は、型アサーションで決めつけるのではなく、実行時に検証してから利用すると安全です。",[17,2927,701],{"id":701},[10,2929,2930],{},"Todoアプリの実装を通して、HTML属性の使い方からReactのstate更新、TypeScriptの型操作まで、幅広い内容を学べました。",[10,2932,2933],{},"個々の構文を覚えるだけでなく、「なぜその書き方が必要なのか」を実際のアプリ開発と結び付けて理解することが大切だと感じました。",[715,2935,2936],{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":29,"searchDepth":43,"depth":43,"links":2938},[2939,2942,2946,2953,2965],{"id":1325,"depth":43,"text":1314,"children":2940},[2941],{"id":1328,"depth":49,"text":1328},{"id":28,"depth":43,"text":743,"children":2943},[2944,2945],{"id":1394,"depth":49,"text":1394},{"id":1445,"depth":49,"text":1446},{"id":1465,"depth":43,"text":1319,"children":2947},[2948,2949,2950,2951,2952],{"id":1468,"depth":49,"text":1471},{"id":1704,"depth":49,"text":1704},{"id":1912,"depth":49,"text":1912},{"id":1951,"depth":49,"text":1951},{"id":2117,"depth":49,"text":2117},{"id":2126,"depth":43,"text":1322,"children":2954},[2955,2957,2958,2959,2960,2961,2962,2963,2964],{"id":2129,"depth":49,"text":2956},"document.getElementByIdとnull",{"id":2223,"depth":49,"text":2223},{"id":2282,"depth":49,"text":2282},{"id":2361,"depth":49,"text":2361},{"id":2493,"depth":49,"text":2493},{"id":2568,"depth":49,"text":2568},{"id":2668,"depth":49,"text":2668},{"id":2706,"depth":49,"text":2706},{"id":2798,"depth":49,"text":2798},{"id":701,"depth":43,"text":701},"React HooksとTypeScriptでTodoアプリを作るハンズオンを通して学んだ、HTML、JavaScript、React、TypeScriptのポイントを整理します。",{},"\u002Farticles\u002F2024\u002Forganize-learned-from-todo","2024-12-23",{"title":1294,"description":2966},"articles\u002F2024\u002Forganize-learned-from-todo",[1319,1322],"\u002Fimages\u002Farticles\u002Forganize-learned-from-todo.png","ic1Do2Gie9Gb4WmAmZ2IL55ETNgmySMOwEHT_s3q0bk",{"id":2976,"title":2977,"body":2978,"description":3455,"extension":736,"meta":3456,"navigation":64,"path":3457,"publishDate":3458,"published":64,"seo":3459,"stem":3460,"tags":3461,"thumbnail":3463,"updated":3458,"__hash__":3464},"articles\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb.md","Web StorageとIndexedDBについて整理する",{"type":7,"value":2979,"toc":3445},[2980,2982,2985,2995,2998,3001,3004,3007,3091,3094,3099,3102,3130,3141,3192,3195,3198,3206,3225,3228,3231,3234,3237,3240,3342,3345,3359,3362,3365,3368,3392,3398,3401,3404,3411,3414,3417,3432,3435,3437,3440,3443],[10,2981,12],{},[10,2983,2984],{},"Todoアプリを作った際にIndexedDBを利用したのですが、ブラウザにデータを保存する方法としてはWeb Storageもあります。",[10,2986,2987,2988,1849,2991,2994],{},"今回は、",[31,2989,2990],{},"localStorage",[31,2992,2993],{},"sessionStorage","、IndexedDBの特徴と使い分けを整理します。",[17,2996,2997],{"id":2997},"ブラウザにデータを保存する仕組み",[10,2999,3000],{},"Web StorageとIndexedDBは、どちらもブラウザ側にデータを保存するためのWeb APIです。",[10,3002,3003],{},"保存したデータが自動的にサーバーへ送信されることはなく、同一オリジンの制約を受けます。ただし、保存容量やデータが削除される条件はブラウザや利用状況によって異なるため、永続性を前提にしすぎないことが大切です。",[10,3005,3006],{},"主な違いは次のとおりです。",[1817,3008,3009,3023],{},[1820,3010,3011],{},[1823,3012,3013,3016,3018,3020],{},[1826,3014,3015],{},"項目",[1826,3017,2990],{},[1826,3019,2993],{},[1826,3021,3022],{},"IndexedDB",[1836,3024,3025,3038,3051,3064,3077],{},[1823,3026,3027,3030,3033,3035],{},[1841,3028,3029],{},"保存形式",[1841,3031,3032],{},"文字列のキーバリュー",[1841,3034,3032],{},[1841,3036,3037],{},"オブジェクトやBlobなど",[1823,3039,3040,3043,3046,3048],{},[1841,3041,3042],{},"API",[1841,3044,3045],{},"同期",[1841,3047,3045],{},[1841,3049,3050],{},"非同期",[1823,3052,3053,3056,3059,3062],{},[1841,3054,3055],{},"データの範囲",[1841,3057,3058],{},"同一オリジン",[1841,3060,3061],{},"同一オリジンかつタブ単位",[1841,3063,3058],{},[1823,3065,3066,3069,3072,3075],{},[1841,3067,3068],{},"データの寿命",[1841,3070,3071],{},"明示的に削除されるまで",[1841,3073,3074],{},"タブを閉じるまで",[1841,3076,3071],{},[1823,3078,3079,3082,3085,3088],{},[1841,3080,3081],{},"得意な用途",[1841,3083,3084],{},"小さな設定値",[1841,3086,3087],{},"一時的な入力状態",[1841,3089,3090],{},"大量・構造化データ",[17,3092,2990],{"id":3093},"localstorage",[10,3095,3096,3098],{},[31,3097,2990],{},"は、文字列をキーバリュー形式で保存する同期APIです。",[10,3100,3101],{},"ブラウザやタブを閉じてもデータが残るため、テーマや表示設定など、小さく単純なデータの保存に向いています。",[24,3103,3105],{"className":26,"code":3104,"language":28,"meta":29,"style":29},"localStorage.setItem('theme', 'dark')\n\nconst theme = localStorage.getItem('theme')\n\nlocalStorage.removeItem('theme')\n",[31,3106,3107,3112,3116,3121,3125],{"__ignoreMap":29},[34,3108,3109],{"class":36,"line":37},[34,3110,3111],{},"localStorage.setItem('theme', 'dark')\n",[34,3113,3114],{"class":36,"line":43},[34,3115,65],{"emptyLinePlaceholder":64},[34,3117,3118],{"class":36,"line":49},[34,3119,3120],{},"const theme = localStorage.getItem('theme')\n",[34,3122,3123],{"class":36,"line":55},[34,3124,65],{"emptyLinePlaceholder":64},[34,3126,3127],{"class":36,"line":61},[34,3128,3129],{},"localStorage.removeItem('theme')\n",[10,3131,3132,3133,3136,3137,3140],{},"値は文字列として保存されます。オブジェクトを扱う場合は、保存時に",[31,3134,3135],{},"JSON.stringify()","、取得時に",[31,3138,3139],{},"JSON.parse()","が必要です。",[24,3142,3144],{"className":26,"code":3143,"language":28,"meta":29,"style":29},"const settings = {\n theme: 'dark',\n fontSize: 16,\n}\n\nlocalStorage.setItem('settings', JSON.stringify(settings))\n\nconst storedSettings = JSON.parse(\n localStorage.getItem('settings') ?? '{}',\n)\n",[31,3145,3146,3151,3156,3161,3165,3169,3174,3178,3183,3188],{"__ignoreMap":29},[34,3147,3148],{"class":36,"line":37},[34,3149,3150],{},"const settings = {\n",[34,3152,3153],{"class":36,"line":43},[34,3154,3155],{}," theme: 'dark',\n",[34,3157,3158],{"class":36,"line":49},[34,3159,3160],{}," fontSize: 16,\n",[34,3162,3163],{"class":36,"line":55},[34,3164,58],{},[34,3166,3167],{"class":36,"line":61},[34,3168,65],{"emptyLinePlaceholder":64},[34,3170,3171],{"class":36,"line":68},[34,3172,3173],{},"localStorage.setItem('settings', JSON.stringify(settings))\n",[34,3175,3176],{"class":36,"line":74},[34,3177,65],{"emptyLinePlaceholder":64},[34,3179,3180],{"class":36,"line":79},[34,3181,3182],{},"const storedSettings = JSON.parse(\n",[34,3184,3185],{"class":36,"line":85},[34,3186,3187],{}," localStorage.getItem('settings') ?? '{}',\n",[34,3189,3190],{"class":36,"line":144},[34,3191,1588],{},[10,3193,3194],{},"同期APIのため、大きなデータを頻繁に読み書きするとメインスレッドを塞ぐ可能性があります。",[17,3196,2993],{"id":3197},"sessionstorage",[10,3199,3200,3202,3203,3205],{},[31,3201,2993],{},"も、文字列をキーバリュー形式で保存する同期APIです。基本的な操作方法は",[31,3204,2990],{},"と同じです。",[24,3207,3209],{"className":26,"code":3208,"language":28,"meta":29,"style":29},"sessionStorage.setItem('draft', '入力途中の内容')\n\nconst draft = sessionStorage.getItem('draft')\n",[31,3210,3211,3216,3220],{"__ignoreMap":29},[34,3212,3213],{"class":36,"line":37},[34,3214,3215],{},"sessionStorage.setItem('draft', '入力途中の内容')\n",[34,3217,3218],{"class":36,"line":43},[34,3219,65],{"emptyLinePlaceholder":64},[34,3221,3222],{"class":36,"line":49},[34,3223,3224],{},"const draft = sessionStorage.getItem('draft')\n",[10,3226,3227],{},"ページを再読み込みしてもデータは残りますが、保存領域はタブごとのページセッションに分かれ、タブを閉じるとデータも削除されます。",[10,3229,3230],{},"そのため、フォームの入力途中の状態や、画面遷移中だけ保持したい一時的な情報に向いています。",[17,3232,3022],{"id":3233},"indexeddb",[10,3235,3236],{},"IndexedDBは、大量の構造化データをブラウザへ保存するための非同期APIです。",[10,3238,3239],{},"JavaScriptのオブジェクトだけでなく、ファイルやBlobなども保存できます。また、オブジェクトストア、インデックス、トランザクションを利用できるため、検索や更新を伴うデータ管理に向いています。",[24,3241,3243],{"className":26,"code":3242,"language":28,"meta":29,"style":29},"const request = indexedDB.open('todo-app', 1)\n\nrequest.onupgradeneeded = () => {\n const database = request.result\n\n if (!database.objectStoreNames.contains('todos')) {\n database.createObjectStore('todos', {\n keyPath: 'id',\n autoIncrement: true,\n })\n }\n}\n\nrequest.onsuccess = () => {\n const database = request.result\n const transaction = database.transaction('todos', 'readwrite')\n const todos = transaction.objectStore('todos')\n\n todos.add({ title: '記事を書く', completed: false })\n}\n",[31,3244,3245,3250,3254,3259,3264,3268,3273,3278,3283,3288,3293,3297,3301,3305,3310,3314,3320,3326,3331,3337],{"__ignoreMap":29},[34,3246,3247],{"class":36,"line":37},[34,3248,3249],{},"const request = indexedDB.open('todo-app', 1)\n",[34,3251,3252],{"class":36,"line":43},[34,3253,65],{"emptyLinePlaceholder":64},[34,3255,3256],{"class":36,"line":49},[34,3257,3258],{},"request.onupgradeneeded = () => {\n",[34,3260,3261],{"class":36,"line":55},[34,3262,3263],{}," const database = request.result\n",[34,3265,3266],{"class":36,"line":61},[34,3267,65],{"emptyLinePlaceholder":64},[34,3269,3270],{"class":36,"line":68},[34,3271,3272],{}," if (!database.objectStoreNames.contains('todos')) {\n",[34,3274,3275],{"class":36,"line":74},[34,3276,3277],{}," database.createObjectStore('todos', {\n",[34,3279,3280],{"class":36,"line":79},[34,3281,3282],{}," keyPath: 'id',\n",[34,3284,3285],{"class":36,"line":85},[34,3286,3287],{}," autoIncrement: true,\n",[34,3289,3290],{"class":36,"line":144},[34,3291,3292],{}," })\n",[34,3294,3295],{"class":36,"line":150},[34,3296,2071],{},[34,3298,3299],{"class":36,"line":156},[34,3300,58],{},[34,3302,3303],{"class":36,"line":161},[34,3304,65],{"emptyLinePlaceholder":64},[34,3306,3307],{"class":36,"line":166},[34,3308,3309],{},"request.onsuccess = () => {\n",[34,3311,3312],{"class":36,"line":1688},[34,3313,3263],{},[34,3315,3317],{"class":36,"line":3316},16,[34,3318,3319],{}," const transaction = database.transaction('todos', 'readwrite')\n",[34,3321,3323],{"class":36,"line":3322},17,[34,3324,3325],{}," const todos = transaction.objectStore('todos')\n",[34,3327,3329],{"class":36,"line":3328},18,[34,3330,65],{"emptyLinePlaceholder":64},[34,3332,3334],{"class":36,"line":3333},19,[34,3335,3336],{}," todos.add({ title: '記事を書く', completed: false })\n",[34,3338,3340],{"class":36,"line":3339},20,[34,3341,58],{},[10,3343,3344],{},"Web Storageよりも扱う概念は多いものの、次のような用途で力を発揮します。",[681,3346,3347,3350,3353,3356],{},[684,3348,3349],{},"オフラインでも利用するアプリ",[684,3351,3352],{},"Todoやメモなど、件数が増えるデータ",[684,3354,3355],{},"検索や並び替えにインデックスを使いたいデータ",[684,3357,3358],{},"画像やファイルを含むデータ",[17,3360,3361],{"id":3361},"保存容量とデータの削除",[10,3363,3364],{},"ブラウザストレージの容量は、特定の数値をどの環境でも保証できるものではありません。ブラウザ、端末の空き容量、ユーザー設定などによって変わります。",[10,3366,3367],{},"利用状況はStorage APIから概算できます。",[24,3369,3371],{"className":26,"code":3370,"language":28,"meta":29,"style":29},"const estimate = await navigator.storage.estimate()\n\nconsole.log(estimate.usage)\nconsole.log(estimate.quota)\n",[31,3372,3373,3378,3382,3387],{"__ignoreMap":29},[34,3374,3375],{"class":36,"line":37},[34,3376,3377],{},"const estimate = await navigator.storage.estimate()\n",[34,3379,3380],{"class":36,"line":43},[34,3381,65],{"emptyLinePlaceholder":64},[34,3383,3384],{"class":36,"line":49},[34,3385,3386],{},"console.log(estimate.usage)\n",[34,3388,3389],{"class":36,"line":55},[34,3390,3391],{},"console.log(estimate.quota)\n",[203,3393,3395],{"title":3394,"type":1386},"ブラウザストレージを唯一の保存先にしない",[10,3396,3397],{},"保存したデータは、ユーザーによるサイトデータの削除や、ブラウザのストレージ管理によって失われる場合があります。失われると困るデータはサーバーにも保存しましょう。",[17,3399,3400],{"id":3400},"セキュリティ上の注意",[10,3402,3403],{},"Web StorageとIndexedDBは、認証された同一オリジンのJavaScriptからアクセスできます。",[203,3405,3408],{"title":3406,"type":3407},"機密情報の保存に注意する","warning",[10,3409,3410],{},"クロスサイトスクリプティング（XSS）が発生すると、保存内容を読み取られる可能性があります。アクセストークンや個人情報などの機密情報を、安易に保存しないようにしましょう。",[17,3412,3413],{"id":3413},"どれを選ぶか",[10,3415,3416],{},"選び方を簡単にまとめると、次のようになります。",[681,3418,3419,3424,3429],{},[684,3420,3421,3422],{},"小さな設定をブラウザを閉じた後も残したい場合は",[31,3423,2990],{},[684,3425,3426,3427],{},"タブを開いている間だけ一時的に残したい場合は",[31,3428,2993],{},[684,3430,3431],{},"大量のデータや構造化データを非同期で扱いたい場合はIndexedDB",[10,3433,3434],{},"Web Storageは手軽ですが、同期APIであり文字列しか保存できません。データ量が増えるアプリや、検索・更新を伴うデータにはIndexedDBを検討するとよいでしょう。",[17,3436,701],{"id":701},[10,3438,3439],{},"Web StorageとIndexedDBは、どちらもブラウザ側へデータを保存できますが、得意な用途が異なります。",[10,3441,3442],{},"保存するデータの量や形式だけでなく、同期処理による影響、データを保持する期間、失われた場合の影響まで考えて選ぶことが大切です。",[715,3444,717],{},{"title":29,"searchDepth":43,"depth":43,"links":3446},[3447,3448,3449,3450,3451,3452,3453,3454],{"id":2997,"depth":43,"text":2997},{"id":3093,"depth":43,"text":2990},{"id":3197,"depth":43,"text":2993},{"id":3233,"depth":43,"text":3022},{"id":3361,"depth":43,"text":3361},{"id":3400,"depth":43,"text":3400},{"id":3413,"depth":43,"text":3413},{"id":701,"depth":43,"text":701},"localStorage、sessionStorage、IndexedDBの違いを、保存形式、同期・非同期、データの寿命、用途から整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb","2024-12-22",{"title":2977,"description":3455},"articles\u002F2024\u002Fdescribe-webstorage-indexeddb",[3462,3022],"Web Storage","\u002Fimages\u002Farticles\u002Fdescribe-webstorage-indexeddb.png","3W_8UP01CjjLWIG3qOQhJB7e1YiLPuYONYyx_372v98",{"id":3466,"title":3467,"body":3468,"description":3946,"extension":736,"meta":3947,"navigation":64,"path":3948,"publishDate":3949,"published":64,"seo":3950,"stem":3951,"tags":3952,"thumbnail":3953,"updated":3949,"__hash__":3954},"articles\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime.md","JavaScriptのランタイム構成からイベントループを学ぶ",{"type":7,"value":3469,"toc":3936},[3470,3472,3481,3484,3488,3491,3494,3497,3514,3516,3519,3522,3586,3589,3623,3626,3629,3632,3635,3649,3652,3695,3698,3700,3703,3706,3720,3725,3728,3730,3733,3758,3761,3764,3766,3769,3772,3789,3792,3795,3870,3873,3880,3891,3900,3902,3922,3925,3934],[10,3471,12],{},[10,3473,3474,3475,3480],{},"今回は、JavaScriptのイベントループについて、動画「",[1303,3476,3479],{"href":3477,"rel":3478},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=eiC58R16hb8",[1307],"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue","」で学んだ内容を整理します。",[10,3482,3483],{},"ブラウザでJavaScriptがどのように同期処理と非同期処理を扱っているのか、ランタイムを構成する要素から確認していきます。",[17,3485,3487],{"id":3486},"javascriptエンジンとホスト環境","JavaScriptエンジンとホスト環境",[10,3489,3490],{},"ブラウザでJavaScriptを実行するためには、JavaScriptエンジンとブラウザというホスト環境が連携します。",[10,3492,3493],{},"JavaScriptエンジンはコードを解析・実行し、ブラウザはタイマー、ネットワーク通信、DOMイベントなどの環境固有の機能を提供します。",[10,3495,3496],{},"イベントループを理解するうえでは、次の要素を押さえておくと全体像が見えやすくなります。",[681,3498,3499,3502,3505,3508,3511],{},[684,3500,3501],{},"コールスタック",[684,3503,3504],{},"Web APIs",[684,3506,3507],{},"タスクキュー",[684,3509,3510],{},"マイクロタスクキュー",[684,3512,3513],{},"イベントループ",[17,3515,3501],{"id":3501},[10,3517,3518],{},"コールスタックは、実行中の関数や実行コンテキストを管理するスタックです。",[10,3520,3521],{},"後から追加されたものが先に取り出される、後入れ先出し（LIFO）の構造になっています。",[24,3523,3525],{"className":26,"code":3524,"language":28,"meta":29,"style":29},"function a() {\n console.log('a')\n}\n\nfunction b() {\n a()\n}\n\nfunction c() {\n b()\n}\n\nc()\n",[31,3526,3527,3532,3537,3541,3545,3550,3555,3559,3563,3568,3573,3577,3581],{"__ignoreMap":29},[34,3528,3529],{"class":36,"line":37},[34,3530,3531],{},"function a() {\n",[34,3533,3534],{"class":36,"line":43},[34,3535,3536],{}," console.log('a')\n",[34,3538,3539],{"class":36,"line":49},[34,3540,58],{},[34,3542,3543],{"class":36,"line":55},[34,3544,65],{"emptyLinePlaceholder":64},[34,3546,3547],{"class":36,"line":61},[34,3548,3549],{},"function b() {\n",[34,3551,3552],{"class":36,"line":68},[34,3553,3554],{}," a()\n",[34,3556,3557],{"class":36,"line":74},[34,3558,58],{},[34,3560,3561],{"class":36,"line":79},[34,3562,65],{"emptyLinePlaceholder":64},[34,3564,3565],{"class":36,"line":85},[34,3566,3567],{},"function c() {\n",[34,3569,3570],{"class":36,"line":144},[34,3571,3572],{}," b()\n",[34,3574,3575],{"class":36,"line":150},[34,3576,58],{},[34,3578,3579],{"class":36,"line":156},[34,3580,65],{"emptyLinePlaceholder":64},[34,3582,3583],{"class":36,"line":161},[34,3584,3585],{},"c()\n",[10,3587,3588],{},"このコードは、次の流れで実行されます。",[3590,3591,3592,3598,3607,3614],"ol",{},[684,3593,3594,3597],{},[31,3595,3596],{},"c()"," がスタックへ追加される",[684,3599,3600,3602,3603,3606],{},[31,3601,3596],{}," から呼ばれた ",[31,3604,3605],{},"b()"," が追加される",[684,3608,3609,3602,3611,3606],{},[31,3610,3605],{},[31,3612,3613],{},"a()",[684,3615,3616,1849,3618,1849,3620,3622],{},[31,3617,3613],{},[31,3619,3605],{},[31,3621,3596],{}," の順に処理を終えてスタックから取り除かれる",[10,3624,3625],{},"1つの長い同期処理がコールスタックを占有すると、その処理が終わるまでクリックや描画など、同じスレッド上のほかの処理を進められません。",[17,3627,3504],{"id":3628},"web-apis",[10,3630,3631],{},"Web APIsは、ブラウザというホスト環境が提供する機能です。",[10,3633,3634],{},"代表的なものには、次があります。",[681,3636,3637,3640,3643,3646],{},[684,3638,3639],{},"Fetch API",[684,3641,3642],{},"タイマー",[684,3644,3645],{},"Geolocation API",[684,3647,3648],{},"DOMイベント",[10,3650,3651],{},"JavaScriptからこれらの非同期APIを呼び出すと、ブラウザ側でタイマーの計測やネットワーク通信などが進みます。JavaScriptはその完了を待ってコールスタックを占有し続ける必要がないため、別のコードを実行できます。",[24,3653,3655],{"className":26,"code":3654,"language":28,"meta":29,"style":29},"navigator.geolocation.getCurrentPosition(\n position => console.log(position),\n error => console.error(error),\n)\n\nfetch('https:\u002F\u002Fexample.com\u002Fapi\u002Fdata')\n .then(response => response.json())\n .then(data => console.log(data))\n",[31,3656,3657,3662,3667,3672,3676,3680,3685,3690],{"__ignoreMap":29},[34,3658,3659],{"class":36,"line":37},[34,3660,3661],{},"navigator.geolocation.getCurrentPosition(\n",[34,3663,3664],{"class":36,"line":43},[34,3665,3666],{}," position => console.log(position),\n",[34,3668,3669],{"class":36,"line":49},[34,3670,3671],{}," error => console.error(error),\n",[34,3673,3674],{"class":36,"line":55},[34,3675,1588],{},[34,3677,3678],{"class":36,"line":61},[34,3679,65],{"emptyLinePlaceholder":64},[34,3681,3682],{"class":36,"line":68},[34,3683,3684],{},"fetch('https:\u002F\u002Fexample.com\u002Fapi\u002Fdata')\n",[34,3686,3687],{"class":36,"line":74},[34,3688,3689],{}," .then(response => response.json())\n",[34,3691,3692],{"class":36,"line":79},[34,3693,3694],{}," .then(data => console.log(data))\n",[10,3696,3697],{},"APIの処理が完了しても、コールバックがその場ですぐに実行されるとは限りません。実行可能になった処理は、タスクやマイクロタスクとしてキューへ登録されます。",[17,3699,3507],{"id":3507},[10,3701,3702],{},"タスクキューには、タイマーやイベントなどをきっかけに実行可能になったタスクが並びます。",[10,3704,3705],{},"代表的な例は次のとおりです。",[681,3707,3708,3714,3717],{},[684,3709,3710,3713],{},[31,3711,3712],{},"setTimeout()"," のコールバック",[684,3715,3716],{},"ユーザー操作のイベントハンドラー",[684,3718,3719],{},"メッセージイベント",[10,3721,3722,3724],{},[31,3723,3712],{}," に指定する時間は、コールバックが必ずその時間後に実行されるという意味ではありません。指定時間を経過したあとにタスクとして実行可能になるまでの最低待機時間です。",[10,3726,3727],{},"コールスタックや先に処理されるタスクが残っていれば、実際の実行はさらに遅くなります。",[17,3729,3510],{"id":3510},[10,3731,3732],{},"マイクロタスクキューには、主に次の処理が登録されます。",[681,3734,3735,3747,3753],{},[684,3736,3737,3738,1849,3741,1849,3744],{},"Promiseの ",[31,3739,3740],{},"then()",[31,3742,3743],{},"catch()",[31,3745,3746],{},"finally()",[684,3748,3749,3752],{},[31,3750,3751],{},"queueMicrotask()"," に渡したコールバック",[684,3754,3755,3713],{},[31,3756,3757],{},"MutationObserver",[10,3759,3760],{},"現在のタスクと同期処理が終わってコールスタックが空になると、次のタスクへ進む前にマイクロタスクキューが空になるまで処理されます。",[10,3762,3763],{},"マイクロタスクの実行中に新しいマイクロタスクが追加された場合も、同じタイミングで続けて処理されます。そのため、マイクロタスクを追加し続ける処理は、次のタスクや画面描画を遅らせる可能性があります。",[17,3765,3513],{"id":3513},[10,3767,3768],{},"イベントループは、コールスタックと各キューの状態を見ながら、実行する処理を選び続けます。",[10,3770,3771],{},"ブラウザ上の流れを単純化すると、次のようになります。",[3590,3773,3774,3777,3780,3783,3786],{},[684,3775,3776],{},"1つのタスクを実行する",[684,3778,3779],{},"コールスタック上の同期処理を最後まで実行する",[684,3781,3782],{},"マイクロタスクキューを空になるまで処理する",[684,3784,3785],{},"必要に応じて画面を描画する",[684,3787,3788],{},"次のタスクへ進む",[17,3790,3791],{"id":3791},"コードで実行順を確認する",[10,3793,3794],{},"タスクとマイクロタスクの実行順を、コードで確認してみましょう。",[24,3796,3798],{"className":26,"code":3797,"language":28,"meta":29,"style":29},"console.log('start')\n\nsetTimeout(() => {\n console.log('timeout')\n}, 0)\n\nPromise.resolve().then(() => {\n console.log('promise')\n})\n\nqueueMicrotask(() => {\n console.log('microtask')\n})\n\nconsole.log('end')\n",[31,3799,3800,3805,3809,3814,3819,3824,3828,3833,3838,3843,3847,3852,3857,3861,3865],{"__ignoreMap":29},[34,3801,3802],{"class":36,"line":37},[34,3803,3804],{},"console.log('start')\n",[34,3806,3807],{"class":36,"line":43},[34,3808,65],{"emptyLinePlaceholder":64},[34,3810,3811],{"class":36,"line":49},[34,3812,3813],{},"setTimeout(() => {\n",[34,3815,3816],{"class":36,"line":55},[34,3817,3818],{}," console.log('timeout')\n",[34,3820,3821],{"class":36,"line":61},[34,3822,3823],{},"}, 0)\n",[34,3825,3826],{"class":36,"line":68},[34,3827,65],{"emptyLinePlaceholder":64},[34,3829,3830],{"class":36,"line":74},[34,3831,3832],{},"Promise.resolve().then(() => {\n",[34,3834,3835],{"class":36,"line":79},[34,3836,3837],{}," console.log('promise')\n",[34,3839,3840],{"class":36,"line":85},[34,3841,3842],{},"})\n",[34,3844,3845],{"class":36,"line":144},[34,3846,65],{"emptyLinePlaceholder":64},[34,3848,3849],{"class":36,"line":150},[34,3850,3851],{},"queueMicrotask(() => {\n",[34,3853,3854],{"class":36,"line":156},[34,3855,3856],{}," console.log('microtask')\n",[34,3858,3859],{"class":36,"line":161},[34,3860,3842],{},[34,3862,3863],{"class":36,"line":166},[34,3864,65],{"emptyLinePlaceholder":64},[34,3866,3867],{"class":36,"line":1688},[34,3868,3869],{},"console.log('end')\n",[10,3871,3872],{},"出力順は次のようになります。",[24,3874,3878],{"className":3875,"code":3877,"language":1371,"meta":29},[3876],"language-text","start\nend\npromise\nmicrotask\ntimeout\n",[31,3879,3877],{"__ignoreMap":29},[10,3881,3882,3883,3886,3887,3890],{},"まず同期処理の ",[31,3884,3885],{},"start"," と ",[31,3888,3889],{},"end"," が出力されます。",[10,3892,3893,3894,3896,3897,3899],{},"続いて、登録された順にPromiseのコールバックと ",[31,3895,3751],{}," のコールバックがマイクロタスクとして実行されます。マイクロタスクキューが空になったあと、",[31,3898,3712],{}," のコールバックが次のタスクとして実行されます。",[17,3901,701],{"id":701},[681,3903,3904,3907,3910,3913,3916,3919],{},[684,3905,3906],{},"コールスタックは、実行中の関数をLIFOで管理する",[684,3908,3909],{},"ブラウザは、タイマーやネットワーク通信などのWeb APIsを提供する",[684,3911,3912],{},"タイマーやイベントのコールバックなどは、タスクとしてキューへ登録される",[684,3914,3915],{},"Promiseのコールバックなどは、マイクロタスクとして登録される",[684,3917,3918],{},"現在のタスクが完了すると、次のタスクより先にマイクロタスクが処理される",[684,3920,3921],{},"長い同期処理や増え続けるマイクロタスクは、画面の応答を遅らせる可能性がある",[10,3923,3924],{},"非同期処理の実行順で迷ったときは、「現在の同期処理」「マイクロタスク」「次のタスク」の順に分けて考えると整理しやすくなります。",[10,3926,3927,3928,3933],{},"より詳しい実行モデルは、",[1303,3929,3932],{"href":3930,"rel":3931},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FExecution_model",[1307],"MDNのJavaScript実行モデル","も参考になります。",[715,3935,717],{},{"title":29,"searchDepth":43,"depth":43,"links":3937},[3938,3939,3940,3941,3942,3943,3944,3945],{"id":3486,"depth":43,"text":3487},{"id":3501,"depth":43,"text":3501},{"id":3628,"depth":43,"text":3504},{"id":3507,"depth":43,"text":3507},{"id":3510,"depth":43,"text":3510},{"id":3513,"depth":43,"text":3513},{"id":3791,"depth":43,"text":3791},{"id":701,"depth":43,"text":701},"ブラウザのJavaScriptランタイムを構成するコールスタック、Web APIs、タスクキュー、マイクロタスクキューとイベントループの関係を整理します。",{},"\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime","2024-11-25",{"title":3467,"description":3946},"articles\u002F2024\u002Flearn-javascript-eventloop-from-runtime",[743],"\u002Fimages\u002Farticles\u002Flearn-javascript-eventloop-from-runtime.png","BcnDDE_gLqK4tjYoVA9O89QF7-dNwS-6lyORZ07cH5g",{"id":3956,"title":3957,"body":3958,"description":4374,"extension":736,"meta":4375,"navigation":64,"path":4376,"publishDate":4377,"published":64,"seo":4378,"stem":4379,"tags":4380,"thumbnail":4381,"updated":4377,"__hash__":4382},"articles\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects.md","JavaScriptのビルトインオブジェクトのメソッドをどう使うか",{"type":7,"value":3959,"toc":4366},[3960,3962,3965,3968,3972,3975,3987,3996,4000,4010,4037,4054,4062,4065,4072,4112,4123,4131,4144,4168,4172,4179,4217,4223,4228,4249,4252,4261,4299,4309,4327,4329,4361,4364],[10,3961,12],{},[10,3963,3964],{},"今回は、プロジェクトで「なるほど」と思った、JavaScriptのビルトインオブジェクトのメソッドの使い方を紹介します。",[10,3966,3967],{},"具体的には、オブジェクトが自身のプロパティを持っているか、安全に確認する方法です。仕組みを知っておくと、オブジェクトに同名のメソッドが定義されている場合も意図した判定ができます。",[17,3969,3971],{"id":3970},"ビルトインオブジェクトってなに","「ビルトインオブジェクト」ってなに？",[10,3973,3974],{},"ビルトインオブジェクトは「組み込みオブジェクト」とも呼ばれ、JavaScriptの実行環境にあらかじめ用意されているオブジェクトです。",[10,3976,3977,1849,3980,1849,3983,3986],{},[31,3978,3979],{},"Object",[31,3981,3982],{},"Array",[31,3984,3985],{},"String"," など、さまざまな種類があります。",[10,3988,3989,3990,3995],{},"詳しくは、",[1303,3991,3994],{"href":3992,"rel":3993},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects",[1307],"MDNの標準組み込みオブジェクト","を参照してください。",[17,3997,3999],{"id":3998},"hasownpropertyをインスタンスから呼び出す","hasOwnPropertyをインスタンスから呼び出す",[10,4001,4002,4003,4005,4006,4009],{},"まずは、オブジェクト自身が ",[31,4004,280],{}," プロパティを持っているか、",[31,4007,4008],{},"hasOwnProperty()"," で確認してみます。",[24,4011,4013],{"className":26,"code":4012,"language":28,"meta":29,"style":29},"const obj = {\n name: 'Yuri',\n}\n\nobj.hasOwnProperty('name') \u002F\u002F true\n",[31,4014,4015,4020,4024,4028,4032],{"__ignoreMap":29},[34,4016,4017],{"class":36,"line":37},[34,4018,4019],{},"const obj = {\n",[34,4021,4022],{"class":36,"line":43},[34,4023,252],{},[34,4025,4026],{"class":36,"line":49},[34,4027,58],{},[34,4029,4030],{"class":36,"line":55},[34,4031,65],{"emptyLinePlaceholder":64},[34,4033,4034],{"class":36,"line":61},[34,4035,4036],{},"obj.hasOwnProperty('name') \u002F\u002F true\n",[10,4038,4039,4040,4043,4044,4047,4048,4050,4051,4053],{},"オブジェクトリテラルで作成した ",[31,4041,4042],{},"obj"," は、通常 ",[31,4045,4046],{},"Object.prototype"," を継承しています。そのため、",[31,4049,4046],{}," に定義されている ",[31,4052,4008],{}," を呼び出せます。",[10,4055,4056,4057,3933],{},"プロトタイプ継承については、",[1303,4058,4061],{"href":4059,"rel":4060},"https:\u002F\u002Fja.javascript.info\u002Fprototype-inheritance",[1307],"JavaScript.infoのプロトタイプ継承",[17,4063,4064],{"id":4064},"インスタンスから呼び出す場合の問題",[10,4066,4067,4068,4071],{},"では、オブジェクト自身が ",[31,4069,4070],{},"hasOwnProperty"," という同名のメソッドを持っていたらどうなるでしょうか。",[24,4073,4075],{"className":26,"code":4074,"language":28,"meta":29,"style":29},"const obj = {\n name: 'Yuri',\n hasOwnProperty() {\n console.log('Hello')\n },\n}\n\nobj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[31,4076,4077,4081,4085,4090,4095,4099,4103,4107],{"__ignoreMap":29},[34,4078,4079],{"class":36,"line":37},[34,4080,4019],{},[34,4082,4083],{"class":36,"line":43},[34,4084,252],{},[34,4086,4087],{"class":36,"line":49},[34,4088,4089],{}," hasOwnProperty() {\n",[34,4091,4092],{"class":36,"line":55},[34,4093,4094],{}," console.log('Hello')\n",[34,4096,4097],{"class":36,"line":61},[34,4098,123],{},[34,4100,4101],{"class":36,"line":68},[34,4102,58],{},[34,4104,4105],{"class":36,"line":74},[34,4106,65],{"emptyLinePlaceholder":64},[34,4108,4109],{"class":36,"line":79},[34,4110,4111],{},"obj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[10,4113,4114,4115,4118,4119,4122],{},"先ほどは ",[31,4116,4117],{},"true"," を返していた呼び出しが、今度は ",[31,4120,4121],{},"Hello"," を出力しました。",[10,4124,4125,4127,4128,4130],{},[31,4126,4042],{}," 自身の ",[31,4129,4070],{}," が、プロトタイプから継承した同名メソッドよりも優先されたためです。外部から受け取ったオブジェクトなど、自分で構造を完全に管理できない値では、インスタンスから直接呼び出す方法は意図しない結果につながる可能性があります。",[10,4132,4133,4134,4137,4138,4140,4141,4143],{},"また、",[31,4135,4136],{},"Object.create(null)"," で作ったオブジェクトは ",[31,4139,4046],{}," を継承しないため、そもそも ",[31,4142,4008],{}," を持っていません。",[24,4145,4147],{"className":26,"code":4146,"language":28,"meta":29,"style":29},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nobj.hasOwnProperty('name') \u002F\u002F TypeError\n",[31,4148,4149,4154,4159,4163],{"__ignoreMap":29},[34,4150,4151],{"class":36,"line":37},[34,4152,4153],{},"const obj = Object.create(null)\n",[34,4155,4156],{"class":36,"line":43},[34,4157,4158],{},"obj.name = 'Yuri'\n",[34,4160,4161],{"class":36,"line":49},[34,4162,65],{"emptyLinePlaceholder":64},[34,4164,4165],{"class":36,"line":55},[34,4166,4167],{},"obj.hasOwnProperty('name') \u002F\u002F TypeError\n",[17,4169,4171],{"id":4170},"objecthasownを使う","Object.hasOwnを使う",[10,4173,4174,4175,4178],{},"現在は、オブジェクト自身のプロパティを調べる場合、静的メソッドの ",[31,4176,4177],{},"Object.hasOwn()"," を使うと簡潔です。",[24,4180,4182],{"className":26,"code":4181,"language":28,"meta":29,"style":29},"const obj = {\n name: 'Yuri',\n hasOwnProperty() {\n console.log('Hello')\n },\n}\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[31,4183,4184,4188,4192,4196,4200,4204,4208,4212],{"__ignoreMap":29},[34,4185,4186],{"class":36,"line":37},[34,4187,4019],{},[34,4189,4190],{"class":36,"line":43},[34,4191,252],{},[34,4193,4194],{"class":36,"line":49},[34,4195,4089],{},[34,4197,4198],{"class":36,"line":55},[34,4199,4094],{},[34,4201,4202],{"class":36,"line":61},[34,4203,123],{},[34,4205,4206],{"class":36,"line":68},[34,4207,58],{},[34,4209,4210],{"class":36,"line":74},[34,4211,65],{"emptyLinePlaceholder":64},[34,4213,4214],{"class":36,"line":79},[34,4215,4216],{},"Object.hasOwn(obj, 'name') \u002F\u002F true\n",[10,4218,4219,4220,4222],{},"第1引数に調べたいオブジェクト、第2引数にプロパティ名を渡します。対象のオブジェクトに同名の ",[31,4221,4070],{}," が定義されていても影響を受けません。",[10,4224,4225,4227],{},[31,4226,4136],{}," で作ったオブジェクトにも使用できます。",[24,4229,4231],{"className":26,"code":4230,"language":28,"meta":29,"style":29},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[31,4232,4233,4237,4241,4245],{"__ignoreMap":29},[34,4234,4235],{"class":36,"line":37},[34,4236,4153],{},[34,4238,4239],{"class":36,"line":43},[34,4240,4158],{},[34,4242,4243],{"class":36,"line":49},[34,4244,65],{"emptyLinePlaceholder":64},[34,4246,4247],{"class":36,"line":55},[34,4248,4216],{},[17,4250,4251],{"id":4251},"古い実行環境も考慮する場合",[10,4253,4254,4256,4257,4260],{},[31,4255,4177],{}," を利用できない古い実行環境まで考慮する場合は、",[31,4258,4259],{},"Object.prototype.hasOwnProperty.call()"," という書き方もできます。",[24,4262,4264],{"className":26,"code":4263,"language":28,"meta":29,"style":29},"const obj = {\n name: 'Yuri',\n hasOwnProperty() {\n console.log('Hello')\n },\n}\n\nObject.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[31,4265,4266,4270,4274,4278,4282,4286,4290,4294],{"__ignoreMap":29},[34,4267,4268],{"class":36,"line":37},[34,4269,4019],{},[34,4271,4272],{"class":36,"line":43},[34,4273,252],{},[34,4275,4276],{"class":36,"line":49},[34,4277,4089],{},[34,4279,4280],{"class":36,"line":55},[34,4281,4094],{},[34,4283,4284],{"class":36,"line":61},[34,4285,123],{},[34,4287,4288],{"class":36,"line":68},[34,4289,58],{},[34,4291,4292],{"class":36,"line":74},[34,4293,65],{"emptyLinePlaceholder":64},[34,4295,4296],{"class":36,"line":79},[34,4297,4298],{},"Object.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[10,4300,4301,4304,4305,4308],{},[31,4302,4303],{},"call()"," の第1引数に ",[31,4306,4307],{},"this"," として扱うオブジェクトを指定し、それ以降の引数を元のメソッドへ渡しています。",[10,4310,4311,4312,4314,4315,4317,4318,4320,4321,4323,4324,4326],{},"この例では ",[31,4313,4046],{}," が持つ本来の ",[31,4316,4008],{}," を直接取得し、",[31,4319,4042],{}," を ",[31,4322,4307],{}," として呼び出しています。そのため、",[31,4325,4042],{}," 自身に定義された同名メソッドの影響を受けません。",[17,4328,701],{"id":701},[681,4330,4331,4337,4340,4347,4354],{},[684,4332,4333,4334,4336],{},"オブジェクトリテラルは通常、",[31,4335,4046],{}," のメソッドを継承する",[684,4338,4339],{},"オブジェクト自身が同名メソッドを持つと、継承したメソッドは隠される",[684,4341,4342,4137,4344,4346],{},[31,4343,4136],{},[31,4345,4008],{}," を継承しない",[684,4348,4349,4350,4353],{},"自身のプロパティを確認する場合は、基本的に ",[31,4351,4352],{},"Object.hasOwn(obj, property)"," を使う",[684,4355,4356,4357,4360],{},"古い実行環境も考慮する場合は、",[31,4358,4359],{},"Object.prototype.hasOwnProperty.call(obj, property)"," を使える",[10,4362,4363],{},"オブジェクトの出所や構造を完全には把握できない場合も、インスタンスの同名メソッドに依存しない呼び出し方を選ぶと安全です。",[715,4365,717],{},{"title":29,"searchDepth":43,"depth":43,"links":4367},[4368,4369,4370,4371,4372,4373],{"id":3970,"depth":43,"text":3971},{"id":3998,"depth":43,"text":3999},{"id":4064,"depth":43,"text":4064},{"id":4170,"depth":43,"text":4171},{"id":4251,"depth":43,"text":4251},{"id":701,"depth":43,"text":701},"JavaScriptでオブジェクト自身のプロパティを安全に確認する方法を、hasOwnPropertyとObject.hasOwnの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects","2024-11-24",{"title":3957,"description":4374},"articles\u002F2024\u002Fhow-to-use-javascript-built-in-objects",[743],"\u002Fimages\u002Farticles\u002Fhow-to-use-javascript-built-in-objects.png","nujvvO9Kj5xXhtbuHUxO1l6JeNtgWjuj3S4rljZKkdU",{"id":4384,"title":4385,"body":4386,"description":4766,"extension":736,"meta":4767,"navigation":64,"path":4768,"publishDate":4769,"published":64,"seo":4770,"stem":4771,"tags":4772,"thumbnail":4773,"updated":4769,"__hash__":4774},"articles\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy.md","JavaScriptのディープコピーとは？",{"type":7,"value":4387,"toc":4759},[4388,4390,4393,4396,4400,4403,4406,4415,4418,4425,4476,4490,4505,4508,4532,4535,4544,4548,4555,4601,4606,4621,4624,4648,4663,4670,4679,4683,4686,4695,4698,4723,4729,4731,4754,4757],[10,4389,12],{},[10,4391,4392],{},"今回は、JavaScriptにおけるオブジェクトのディープコピーについて紹介します。",[10,4394,4395],{},"シャローコピーとの違いや実装方法を理解しておくと、コピー先の変更が意図せずコピー元へ影響する問題を避けられます。",[17,4397,4399],{"id":4398},"ディープコピーとは","ディープコピーとは？",[10,4401,4402],{},"ディープコピーとは、コピー元とコピー先が、内部にあるオブジェクトの参照を共有しないコピーのことです。",[10,4404,4405],{},"たとえば、入れ子になったオブジェクトをコピーしたあと、コピー先の内側にある値を変更しても、コピー元の値には影響しません。",[10,4407,4408,4409,4414],{},"詳しい定義は、",[1303,4410,4413],{"href":4411,"rel":4412},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FGlossary\u002FDeep_copy",[1307],"MDNのディープコピー","も参照してください。",[17,4416,4417],{"id":4417},"シャローコピーでは参照が共有される",[10,4419,4420,4421,4424],{},"まずは、",[31,4422,4423],{},"Object.assign()"," を使ったシャローコピーを確認します。",[24,4426,4428],{"className":26,"code":4427,"language":28,"meta":29,"style":29},"const original = {\n user: {\n name: 'Yuri',\n },\n settings: {\n theme: 'light',\n },\n}\n\nconst shallowCopy = Object.assign({}, original)\n",[31,4429,4430,4435,4440,4445,4449,4454,4459,4463,4467,4471],{"__ignoreMap":29},[34,4431,4432],{"class":36,"line":37},[34,4433,4434],{},"const original = {\n",[34,4436,4437],{"class":36,"line":43},[34,4438,4439],{}," user: {\n",[34,4441,4442],{"class":36,"line":49},[34,4443,4444],{}," name: 'Yuri',\n",[34,4446,4447],{"class":36,"line":55},[34,4448,123],{},[34,4450,4451],{"class":36,"line":61},[34,4452,4453],{}," settings: {\n",[34,4455,4456],{"class":36,"line":68},[34,4457,4458],{}," theme: 'light',\n",[34,4460,4461],{"class":36,"line":74},[34,4462,123],{},[34,4464,4465],{"class":36,"line":79},[34,4466,58],{},[34,4468,4469],{"class":36,"line":85},[34,4470,65],{"emptyLinePlaceholder":64},[34,4472,4473],{"class":36,"line":144},[34,4474,4475],{},"const shallowCopy = Object.assign({}, original)\n",[10,4477,4478,4481,4482,4485,4486,4489],{},[31,4479,4480],{},"Object.assign({}, original)"," で新しい外側のオブジェクトは作られますが、",[31,4483,4484],{},"user"," や ",[31,4487,4488],{},"settings"," はコピー元と同じオブジェクトを参照しています。",[24,4491,4493],{"className":26,"code":4492,"language":28,"meta":29,"style":29},"console.log(original === shallowCopy) \u002F\u002F false\nconsole.log(original.user === shallowCopy.user) \u002F\u002F true\n",[31,4494,4495,4500],{"__ignoreMap":29},[34,4496,4497],{"class":36,"line":37},[34,4498,4499],{},"console.log(original === shallowCopy) \u002F\u002F false\n",[34,4501,4502],{"class":36,"line":43},[34,4503,4504],{},"console.log(original.user === shallowCopy.user) \u002F\u002F true\n",[10,4506,4507],{},"そのため、コピー先にある入れ子の値を変更すると、コピー元にも影響します。",[24,4509,4511],{"className":26,"code":4510,"language":28,"meta":29,"style":29},"shallowCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Kohei」\nconsole.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[31,4512,4513,4518,4522,4527],{"__ignoreMap":29},[34,4514,4515],{"class":36,"line":37},[34,4516,4517],{},"shallowCopy.user.name = 'Kohei'\n",[34,4519,4520],{"class":36,"line":43},[34,4521,65],{"emptyLinePlaceholder":64},[34,4523,4524],{"class":36,"line":49},[34,4525,4526],{},"console.log(original.user.name) \u002F\u002F 「Kohei」\n",[34,4528,4529],{"class":36,"line":55},[34,4530,4531],{},"console.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[10,4533,4534],{},"オブジェクトスプレッド構文も、同様にシャローコピーです。",[24,4536,4538],{"className":26,"code":4537,"language":28,"meta":29,"style":29},"const shallowCopy = { ...original }\n",[31,4539,4540],{"__ignoreMap":29},[34,4541,4542],{"class":36,"line":37},[34,4543,4537],{},[17,4545,4547],{"id":4546},"structuredcloneでディープコピーする","structuredCloneでディープコピーする",[10,4549,4550,4551,4554],{},"ディープコピーには、",[31,4552,4553],{},"structuredClone()"," を利用できます。",[24,4556,4558],{"className":26,"code":4557,"language":28,"meta":29,"style":29},"const original = {\n user: {\n name: 'Yuri',\n },\n settings: {\n theme: 'light',\n },\n}\n\nconst deepCopy = structuredClone(original)\n",[31,4559,4560,4564,4568,4572,4576,4580,4584,4588,4592,4596],{"__ignoreMap":29},[34,4561,4562],{"class":36,"line":37},[34,4563,4434],{},[34,4565,4566],{"class":36,"line":43},[34,4567,4439],{},[34,4569,4570],{"class":36,"line":49},[34,4571,4444],{},[34,4573,4574],{"class":36,"line":55},[34,4575,123],{},[34,4577,4578],{"class":36,"line":61},[34,4579,4453],{},[34,4581,4582],{"class":36,"line":68},[34,4583,4458],{},[34,4585,4586],{"class":36,"line":74},[34,4587,123],{},[34,4589,4590],{"class":36,"line":79},[34,4591,58],{},[34,4593,4594],{"class":36,"line":85},[34,4595,65],{"emptyLinePlaceholder":64},[34,4597,4598],{"class":36,"line":144},[34,4599,4600],{},"const deepCopy = structuredClone(original)\n",[10,4602,4603,4605],{},[31,4604,4553],{}," で作ったコピーは、入れ子のオブジェクトもコピー元とは異なる参照になります。",[24,4607,4609],{"className":26,"code":4608,"language":28,"meta":29,"style":29},"console.log(original === deepCopy) \u002F\u002F false\nconsole.log(original.user === deepCopy.user) \u002F\u002F false\n",[31,4610,4611,4616],{"__ignoreMap":29},[34,4612,4613],{"class":36,"line":37},[34,4614,4615],{},"console.log(original === deepCopy) \u002F\u002F false\n",[34,4617,4618],{"class":36,"line":43},[34,4619,4620],{},"console.log(original.user === deepCopy.user) \u002F\u002F false\n",[10,4622,4623],{},"コピー先を変更しても、コピー元には影響しません。",[24,4625,4627],{"className":26,"code":4626,"language":28,"meta":29,"style":29},"deepCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Yuri」\nconsole.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[31,4628,4629,4634,4638,4643],{"__ignoreMap":29},[34,4630,4631],{"class":36,"line":37},[34,4632,4633],{},"deepCopy.user.name = 'Kohei'\n",[34,4635,4636],{"class":36,"line":43},[34,4637,65],{"emptyLinePlaceholder":64},[34,4639,4640],{"class":36,"line":49},[34,4641,4642],{},"console.log(original.user.name) \u002F\u002F 「Yuri」\n",[34,4644,4645],{"class":36,"line":55},[34,4646,4647],{},"console.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[10,4649,4650,4652,4653,1849,4656,1849,4659,4662],{},[31,4651,4553],{}," は通常のオブジェクトや配列だけでなく、",[31,4654,4655],{},"Date",[31,4657,4658],{},"Map",[31,4660,4661],{},"Set"," など、構造化複製アルゴリズムが対応している型をコピーできます。また、循環参照を持つオブジェクトにも対応しています。",[10,4664,4665,4666,4669],{},"ただし、関数など構造化複製できない値が含まれている場合は ",[31,4667,4668],{},"DataCloneError"," が発生します。すべてのJavaScriptの値を無条件にコピーできるわけではありません。",[10,4671,4672,4673,4678],{},"詳しい対応範囲は、",[1303,4674,4677],{"href":4675,"rel":4676},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FstructuredClone",[1307],"MDNのstructuredClone()","を確認してください。",[17,4680,4682],{"id":4681},"jsonを使ったディープコピーの注意点","JSONを使ったディープコピーの注意点",[10,4684,4685],{},"単純なデータだけを扱う場合、JSONへ変換して戻す方法もあります。",[24,4687,4689],{"className":26,"code":4688,"language":28,"meta":29,"style":29},"const deepCopy = JSON.parse(JSON.stringify(original))\n",[31,4690,4691],{"__ignoreMap":29},[34,4692,4693],{"class":36,"line":37},[34,4694,4688],{},[10,4696,4697],{},"ただし、この方法はJSONとして表現できる値に限られます。",[681,4699,4700,4705,4714,4720],{},[684,4701,4702,4704],{},[31,4703,4655],{}," は文字列へ変換される",[684,4706,4707,4709,4710,4713],{},[31,4708,302],{},"、関数、",[31,4711,4712],{},"Symbol"," などは正しく保持できない",[684,4715,4716,4719],{},[31,4717,4718],{},"BigInt"," を含むと例外が発生する",[684,4721,4722],{},"循環参照を持つオブジェクトは変換できない",[10,4724,4725,4726,4728],{},"対象がJSON互換のデータだと分かっている場合には使えますが、一般的なディープコピーとしては ",[31,4727,4553],{}," の方が意図を表しやすく、扱える型も多くなります。",[17,4730,701],{"id":701},[681,4732,4733,4738,4741,4746,4751],{},[684,4734,4735,4737],{},[31,4736,4423],{}," とオブジェクトスプレッド構文はシャローコピーになる",[684,4739,4740],{},"シャローコピーでは、入れ子のオブジェクトの参照がコピー元と共有される",[684,4742,4743,4745],{},[31,4744,4553],{}," を使うと、対応している値をディープコピーできる",[684,4747,4748,4750],{},[31,4749,4553],{}," でも、関数などコピーできない値がある",[684,4752,4753],{},"JSONによるコピーは、JSON互換データだけに限定して使う",[10,4755,4756],{},"コピー方法を選ぶときは、対象のデータ構造と、コピー後にどの階層まで独立して変更したいかを確認することが大切です。",[715,4758,717],{},{"title":29,"searchDepth":43,"depth":43,"links":4760},[4761,4762,4763,4764,4765],{"id":4398,"depth":43,"text":4399},{"id":4417,"depth":43,"text":4417},{"id":4546,"depth":43,"text":4547},{"id":4681,"depth":43,"text":4682},{"id":701,"depth":43,"text":701},"JavaScriptのシャローコピーとディープコピーの違いを確認し、structuredCloneを使った実装方法と注意点を整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy","2024-11-23",{"title":4385,"description":4766},"articles\u002F2024\u002Fdescribe-javascript-deepcopy",[743],"\u002Fimages\u002Farticles\u002Fdescribe-javascript-deepcopy.png","dtSQ5LrS1Kfo1hFYE2MzMKOvrhU_5JGE1X1eQ9eHhIY",{"id":4776,"title":4777,"body":4778,"description":5192,"extension":736,"meta":5193,"navigation":64,"path":5194,"publishDate":5195,"published":64,"seo":5196,"stem":5197,"tags":5198,"thumbnail":5199,"updated":5200,"__hash__":5201},"articles\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this.md","JavaScriptのthisの挙動について呼び出し元で整理する",{"type":7,"value":4779,"toc":5184},[4780,4782,4788,4792,4797,4803,4806,4809,4815,4823,4825,4831,4837,4846,4849,4889,4896,4915,4917,4923,4943,4946,4983,4995,5016,5022,5025,5028,5070,5088,5098,5112,5122,5137,5139,5144,5177,5182],[10,4781,12],{},[10,4783,4784,4785,4787],{},"今回は、プロジェクトや個人開発で振り回されることが多かったJavaScriptの ",[31,4786,4307],{}," の挙動について、あらためて振り返ります。自分をはじめ、初学者の方も知っておくと開発が楽になるかと思います。",[17,4789,4791],{"id":4790},"そもそもthisってなんだ","そもそも「this」ってなんだ？",[10,4793,4794,4796],{},[31,4795,4307],{}," は、関数が実行されたときのコンテキストを参照するためのキーワードです。",[10,4798,4799,4800,4802],{},"同じ関数であっても、どのように呼び出されたかによって ",[31,4801,4307],{}," が参照する値は変わります。この特徴が便利なところでもあり、難しいところでもあります。",[10,4804,4805],{},"それでは、呼び出し方によって参照先がどう変わるのか見てみましょう。",[17,4807,4808],{"id":4808},"使用する場所ごとのthis",[10,4810,4811,4812,4814],{},"この記事では、",[31,4813,4307],{}," を使用するケースを次の2つに分けて確認します。",[681,4816,4817,4820],{},[684,4818,4819],{},"オブジェクトのメソッドとして呼び出す場合",[684,4821,4822],{},"通常の関数として呼び出す場合",[17,4824,4819],{"id":4819},[10,4826,4827,4828,4830],{},"オブジェクトのメソッドとして呼び出した場合、",[31,4829,4307],{}," は基本的に呼び出し元のオブジェクトを参照します。",[10,4832,4833,4834,4836],{},"ここでいう呼び出し元のオブジェクトとは、次の例では ",[31,4835,4042],{}," のことです。",[24,4838,4840],{"className":26,"code":4839,"language":28,"meta":29,"style":29},"const obj = {}\n",[31,4841,4842],{"__ignoreMap":29},[34,4843,4844],{"class":36,"line":37},[34,4845,4839],{},[10,4847,4848],{},"実際に挙動を見てみましょう。",[24,4850,4852],{"className":26,"code":4851,"language":28,"meta":29,"style":29},"const obj = {\n name: 'Yuri',\n message: function () {\n console.log('Hello ' + this.name)\n },\n}\n\nobj.message()\n",[31,4853,4854,4858,4862,4867,4872,4876,4880,4884],{"__ignoreMap":29},[34,4855,4856],{"class":36,"line":37},[34,4857,4019],{},[34,4859,4860],{"class":36,"line":43},[34,4861,252],{},[34,4863,4864],{"class":36,"line":49},[34,4865,4866],{}," message: function () {\n",[34,4868,4869],{"class":36,"line":55},[34,4870,4871],{}," console.log('Hello ' + this.name)\n",[34,4873,4874],{"class":36,"line":61},[34,4875,123],{},[34,4877,4878],{"class":36,"line":68},[34,4879,58],{},[34,4881,4882],{"class":36,"line":74},[34,4883,65],{"emptyLinePlaceholder":64},[34,4885,4886],{"class":36,"line":79},[34,4887,4888],{},"obj.message()\n",[10,4890,4891,4892,4895],{},"この例では、",[31,4893,4894],{},"Hello Yuri"," と出力されます。",[10,4897,4898,4901,4902,4904,4905,4907,4908,4904,4911,4914],{},[31,4899,4900],{},"obj.message()"," という形で呼び出しているため、メソッド内の ",[31,4903,4307],{}," は ",[31,4906,4042],{}," を参照します。したがって、",[31,4909,4910],{},"this.name",[31,4912,4913],{},"obj.name"," として評価されます。",[17,4916,4822],{"id":4822},[10,4918,4919,4920,4922],{},"通常の関数として呼び出した場合、",[31,4921,4307],{}," の値は実行モードによって異なります。",[681,4924,4925,4935],{},[684,4926,4927,4928,4930,4931,4934],{},"非厳格モードのブラウザでは、",[31,4929,4307],{}," はグローバルオブジェクトの ",[31,4932,4933],{},"window"," を参照する",[684,4936,4937,4938,4904,4940,4942],{},"厳格モードやES Modulesでは、",[31,4939,4307],{},[31,4941,302],{}," になる",[10,4944,4945],{},"次のコードは、ブラウザの非厳格モードで実行する例です。",[24,4947,4949],{"className":26,"code":4948,"language":28,"meta":29,"style":29},"window.name = 'Yuri'\n\nfunction message() {\n console.log('Hello ' + this.name)\n}\n\nmessage()\n",[31,4950,4951,4956,4960,4965,4970,4974,4978],{"__ignoreMap":29},[34,4952,4953],{"class":36,"line":37},[34,4954,4955],{},"window.name = 'Yuri'\n",[34,4957,4958],{"class":36,"line":43},[34,4959,65],{"emptyLinePlaceholder":64},[34,4961,4962],{"class":36,"line":49},[34,4963,4964],{},"function message() {\n",[34,4966,4967],{"class":36,"line":55},[34,4968,4969],{}," console.log('Hello ' + this.name)\n",[34,4971,4972],{"class":36,"line":61},[34,4973,58],{},[34,4975,4976],{"class":36,"line":68},[34,4977,65],{"emptyLinePlaceholder":64},[34,4979,4980],{"class":36,"line":74},[34,4981,4982],{},"message()\n",[10,4984,4985,4986,4988,4989,4992,4993,4895],{},"非厳格モードでは ",[31,4987,4910],{}," が ",[31,4990,4991],{},"window.name"," として評価されるため、",[31,4994,4894],{},[4996,4997,4998],"blockquote",{},[10,4999,5000,4485,5003,5005,5006,5008,5009,5012,5013,5015],{},[31,5001,5002],{},"let",[31,5004,1559],{}," で宣言した変数は、",[31,5007,4933],{}," オブジェクトのプロパティとして追加されません。一方、ブラウザでトップレベルに ",[31,5010,5011],{},"var"," を使って宣言した変数は、",[31,5014,4933],{}," のプロパティになります。",[10,5017,5018,5019,5021],{},"現在のフロントエンド開発ではES Modulesが広く使われています。ES Modulesは自動的に厳格モードとして扱われるため、通常の関数呼び出しで ",[31,5020,4307],{}," に依存する実装は避けた方が安全です。",[17,5023,5024],{"id":5024},"オブジェクトのメソッドを変数へ代入した場合",[10,5026,5027],{},"ここまでを踏まえて、オブジェクトのメソッドを変数へ代入した場合の挙動を見てみましょう。",[24,5029,5031],{"className":26,"code":5030,"language":28,"meta":29,"style":29},"const obj = {\n name: 'Yuri',\n message: function () {\n console.log('Hello ' + this.name)\n },\n}\n\nconst message = obj.message\nmessage()\n",[31,5032,5033,5037,5041,5045,5049,5053,5057,5061,5066],{"__ignoreMap":29},[34,5034,5035],{"class":36,"line":37},[34,5036,4019],{},[34,5038,5039],{"class":36,"line":43},[34,5040,252],{},[34,5042,5043],{"class":36,"line":49},[34,5044,4866],{},[34,5046,5047],{"class":36,"line":55},[34,5048,4871],{},[34,5050,5051],{"class":36,"line":61},[34,5052,123],{},[34,5054,5055],{"class":36,"line":68},[34,5056,58],{},[34,5058,5059],{"class":36,"line":74},[34,5060,65],{"emptyLinePlaceholder":64},[34,5062,5063],{"class":36,"line":79},[34,5064,5065],{},"const message = obj.message\n",[34,5067,5068],{"class":36,"line":85},[34,5069,4982],{},[10,5071,5072,5075,5076,5078,5079,5082,5083,3886,5085,5087],{},[31,5073,5074],{},"const message = obj.message"," では、関数そのものを変数へ代入しています。その後は ",[31,5077,4900],{}," ではなく ",[31,5080,5081],{},"message()"," として呼び出しているため、",[31,5084,4307],{},[31,5086,4042],{}," の結び付きは失われます。",[10,5089,4985,5090,4988,5092,5094,5095,5097],{},[31,5091,4307],{},[31,5093,4933],{}," を参照します。",[31,5096,4991],{}," が設定されていなければ、実行環境に応じて空文字などが返ります。",[10,5099,5100,5101,4988,5103,5105,5106,5108,5109,5111],{},"厳格モードやES Modulesでは ",[31,5102,4307],{},[31,5104,302],{}," になるため、",[31,5107,4910],{}," を読み取ろうとすると ",[31,5110,482],{}," が発生します。",[10,5113,5114,5115,5118,5119,5121],{},"このような場合は、",[31,5116,5117],{},"bind()"," を使って ",[31,5120,4307],{}," の参照先を固定できます。",[24,5123,5125],{"className":26,"code":5124,"language":28,"meta":29,"style":29},"const message = obj.message.bind(obj)\nmessage() \u002F\u002F 「Hello Yuri」と出力される\n",[31,5126,5127,5132],{"__ignoreMap":29},[34,5128,5129],{"class":36,"line":37},[34,5130,5131],{},"const message = obj.message.bind(obj)\n",[34,5133,5134],{"class":36,"line":43},[34,5135,5136],{},"message() \u002F\u002F 「Hello Yuri」と出力される\n",[17,5138,701],{"id":701},[10,5140,5141,5143],{},[31,5142,4307],{}," の参照先は、関数を定義した場所だけではなく、主に関数の呼び出し方によって決まります。",[681,5145,5146,5155,5165,5168],{},[684,5147,5148,5150,5151,4904,5153,4934],{},[31,5149,4900],{}," のようなメソッド呼び出しでは、",[31,5152,4307],{},[31,5154,4042],{},[684,5156,5157,5159,5160,5162,5163,4942],{},[31,5158,5081],{}," のような通常の関数呼び出しでは、非厳格モードのブラウザなら ",[31,5161,4933],{},"、厳格モードやES Modulesなら ",[31,5164,302],{},[684,5166,5167],{},"メソッドを変数へ代入すると、元のオブジェクトとの結び付きは失われる",[684,5169,5170,5171,5173,5174,5176],{},"元のオブジェクトを参照させたい場合は、",[31,5172,5117],{}," で ",[31,5175,4307],{}," を固定できる",[10,5178,5179,5181],{},[31,5180,4307],{}," で迷ったときは「この関数はどのような形で呼び出されているか」を確認すると、参照先を判断しやすくなります。",[715,5183,717],{},{"title":29,"searchDepth":43,"depth":43,"links":5185},[5186,5187,5188,5189,5190,5191],{"id":4790,"depth":43,"text":4791},{"id":4808,"depth":43,"text":4808},{"id":4819,"depth":43,"text":4819},{"id":4822,"depth":43,"text":4822},{"id":5024,"depth":43,"text":5024},{"id":701,"depth":43,"text":701},"JavaScriptのthisが何を参照するのか、メソッド呼び出しと関数呼び出しの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this","2024-11-20",{"title":4777,"description":5192},"articles\u002F2024\u002Fdescribe-behavior-javascript-this",[743],"\u002Fimages\u002Farticles\u002Fdescribe-behavior-javascript-this.png","2025-03-21","Kay_1TeIK8YsouKEwYLRPzbQMnabHxZ_GWvHciKSZBs",[5203,5748,7095,7473,7844,8170,8469],{"id":4,"title":5,"body":5204,"description":735,"extension":736,"meta":5745,"navigation":64,"path":738,"publishDate":739,"published":64,"seo":5746,"stem":741,"tags":5747,"thumbnail":744,"updated":739,"__hash__":745},{"type":7,"value":5205,"toc":5730},[5206,5208,5210,5212,5214,5254,5256,5258,5318,5328,5340,5350,5362,5364,5366,5398,5404,5408,5416,5440,5450,5452,5464,5466,5470,5518,5520,5524,5552,5558,5560,5566,5582,5584,5590,5622,5624,5644,5648,5652,5660,5684,5698,5700,5704,5706,5718,5720,5722,5728],[10,5207,12],{},[10,5209,15],{},[17,5211,19],{"id":19},[10,5213,22],{},[24,5215,5216],{"className":26,"code":27,"language":28,"meta":29,"style":29},[31,5217,5218,5222,5226,5230,5234,5238,5242,5246,5250],{"__ignoreMap":29},[34,5219,5220],{"class":36,"line":37},[34,5221,40],{},[34,5223,5224],{"class":36,"line":43},[34,5225,46],{},[34,5227,5228],{"class":36,"line":49},[34,5229,52],{},[34,5231,5232],{"class":36,"line":55},[34,5233,58],{},[34,5235,5236],{"class":36,"line":61},[34,5237,65],{"emptyLinePlaceholder":64},[34,5239,5240],{"class":36,"line":68},[34,5241,71],{},[34,5243,5244],{"class":36,"line":74},[34,5245,65],{"emptyLinePlaceholder":64},[34,5247,5248],{"class":36,"line":79},[34,5249,82],{},[34,5251,5252],{"class":36,"line":85},[34,5253,88],{},[90,5255,92],{"id":92},[10,5257,95],{},[24,5259,5260],{"className":26,"code":98,"language":28,"meta":29,"style":29},[31,5261,5262,5266,5270,5274,5278,5282,5286,5290,5294,5298,5302,5306,5310,5314],{"__ignoreMap":29},[34,5263,5264],{"class":36,"line":37},[34,5265,40],{},[34,5267,5268],{"class":36,"line":43},[34,5269,46],{},[34,5271,5272],{"class":36,"line":49},[34,5273,113],{},[34,5275,5276],{"class":36,"line":55},[34,5277,118],{},[34,5279,5280],{"class":36,"line":61},[34,5281,123],{},[34,5283,5284],{"class":36,"line":68},[34,5285,58],{},[34,5287,5288],{"class":36,"line":74},[34,5289,65],{"emptyLinePlaceholder":64},[34,5291,5292],{"class":36,"line":79},[34,5293,136],{},[34,5295,5296],{"class":36,"line":85},[34,5297,141],{},[34,5299,5300],{"class":36,"line":144},[34,5301,147],{},[34,5303,5304],{"class":36,"line":150},[34,5305,153],{},[34,5307,5308],{"class":36,"line":156},[34,5309,65],{"emptyLinePlaceholder":64},[34,5311,5312],{"class":36,"line":161},[34,5313,82],{},[34,5315,5316],{"class":36,"line":166},[34,5317,88],{},[10,5319,171,5320,175,5322,179,5324,183,5326,186],{},[31,5321,174],{},[31,5323,178],{},[31,5325,182],{},[31,5327,178],{},[24,5329,5330],{"className":26,"code":189,"language":28,"meta":29,"style":29},[31,5331,5332,5336],{"__ignoreMap":29},[34,5333,5334],{"class":36,"line":37},[34,5335,196],{},[34,5337,5338],{"class":36,"line":43},[34,5339,201],{},[203,5341,5342],{"title":205,"type":206},[10,5343,5344,211,5346,214,5348,217],{},[31,5345,182],{},[31,5347,178],{},[31,5349,182],{},[24,5351,5352],{"className":26,"code":220,"language":28,"meta":29,"style":29},[31,5353,5354,5358],{"__ignoreMap":29},[34,5355,5356],{"class":36,"line":37},[34,5357,227],{},[34,5359,5360],{"class":36,"line":43},[34,5361,232],{},[90,5363,235],{"id":235},[10,5365,238],{},[24,5367,5368],{"className":26,"code":241,"language":28,"meta":29,"style":29},[31,5369,5370,5374,5378,5382,5386,5390,5394],{"__ignoreMap":29},[34,5371,5372],{"class":36,"line":37},[34,5373,40],{},[34,5375,5376],{"class":36,"line":43},[34,5377,252],{},[34,5379,5380],{"class":36,"line":49},[34,5381,58],{},[34,5383,5384],{"class":36,"line":55},[34,5385,65],{"emptyLinePlaceholder":64},[34,5387,5388],{"class":36,"line":61},[34,5389,265],{},[34,5391,5392],{"class":36,"line":68},[34,5393,65],{"emptyLinePlaceholder":64},[34,5395,5396],{"class":36,"line":74},[34,5397,274],{},[10,5399,277,5400,281,5402,179],{},[31,5401,280],{},[31,5403,284],{},[17,5405,288,5406,292],{"id":287},[31,5407,291],{},[10,5409,295,5410,299,5412,303,5414,306],{},[31,5411,298],{},[31,5413,302],{},[31,5415,302],{},[24,5417,5418],{"className":26,"code":309,"language":28,"meta":29,"style":29},[31,5419,5420,5424,5428,5432,5436],{"__ignoreMap":29},[34,5421,5422],{"class":36,"line":37},[34,5423,40],{},[34,5425,5426],{"class":36,"line":43},[34,5427,252],{},[34,5429,5430],{"class":36,"line":49},[34,5431,58],{},[34,5433,5434],{"class":36,"line":55},[34,5435,65],{"emptyLinePlaceholder":64},[34,5437,5438],{"class":36,"line":61},[34,5439,332],{},[10,5441,5442,338,5444,341,5446,344,5448,348],{},[31,5443,337],{},[31,5445,302],{},[31,5447,291],{},[31,5449,347],{},[10,5451,351],{},[24,5453,5454],{"className":26,"code":354,"language":28,"meta":29,"style":29},[31,5455,5456,5460],{"__ignoreMap":29},[34,5457,5458],{"class":36,"line":37},[34,5459,361],{},[34,5461,5462],{"class":36,"line":43},[34,5463,366],{},[90,5465,369],{"id":369},[10,5467,372,5468,376],{},[31,5469,375],{},[24,5471,5472],{"className":26,"code":379,"language":28,"meta":29,"style":29},[31,5473,5474,5478,5482,5486,5490,5494,5498,5502,5506,5510,5514],{"__ignoreMap":29},[34,5475,5476],{"class":36,"line":37},[34,5477,386],{},[34,5479,5480],{"class":36,"line":43},[34,5481,391],{},[34,5483,5484],{"class":36,"line":49},[34,5485,396],{},[34,5487,5488],{"class":36,"line":55},[34,5489,401],{},[34,5491,5492],{"class":36,"line":61},[34,5493,65],{"emptyLinePlaceholder":64},[34,5495,5496],{"class":36,"line":68},[34,5497,410],{},[34,5499,5500],{"class":36,"line":74},[34,5501,415],{},[34,5503,5504],{"class":36,"line":79},[34,5505,65],{"emptyLinePlaceholder":64},[34,5507,5508],{"class":36,"line":85},[34,5509,424],{},[34,5511,5512],{"class":36,"line":144},[34,5513,65],{"emptyLinePlaceholder":64},[34,5515,5516],{"class":36,"line":150},[34,5517,433],{},[90,5519,436],{"id":436},[10,5521,439,5522,443],{},[31,5523,442],{},[24,5525,5526],{"className":26,"code":446,"language":28,"meta":29,"style":29},[31,5527,5528,5532,5536,5540,5544,5548],{"__ignoreMap":29},[34,5529,5530],{"class":36,"line":37},[34,5531,453],{},[34,5533,5534],{"class":36,"line":43},[34,5535,458],{},[34,5537,5538],{"class":36,"line":49},[34,5539,58],{},[34,5541,5542],{"class":36,"line":55},[34,5543,65],{"emptyLinePlaceholder":64},[34,5545,5546],{"class":36,"line":61},[34,5547,471],{},[34,5549,5550],{"class":36,"line":68},[34,5551,476],{},[10,5553,479,5554,483,5556,486],{},[31,5555,482],{},[31,5557,442],{},[90,5559,490],{"id":489},[10,5561,5562,496,5564,499],{},[31,5563,495],{},[31,5565,298],{},[24,5567,5568],{"className":26,"code":502,"language":28,"meta":29,"style":29},[31,5569,5570,5574,5578],{"__ignoreMap":29},[34,5571,5572],{"class":36,"line":37},[34,5573,509],{},[34,5575,5576],{"class":36,"line":43},[34,5577,65],{"emptyLinePlaceholder":64},[34,5579,5580],{"class":36,"line":49},[34,5581,518],{},[90,5583,521],{"id":521},[10,5585,524,5586,299,5588,529],{},[31,5587,298],{},[31,5589,302],{},[24,5591,5592],{"className":26,"code":532,"language":28,"meta":29,"style":29},[31,5593,5594,5598,5602,5606,5610,5614,5618],{"__ignoreMap":29},[34,5595,5596],{"class":36,"line":37},[34,5597,539],{},[34,5599,5600],{"class":36,"line":43},[34,5601,544],{},[34,5603,5604],{"class":36,"line":49},[34,5605,65],{"emptyLinePlaceholder":64},[34,5607,5608],{"class":36,"line":55},[34,5609,553],{},[34,5611,5612],{"class":36,"line":61},[34,5613,65],{"emptyLinePlaceholder":64},[34,5615,5616],{"class":36,"line":68},[34,5617,562],{},[34,5619,5620],{"class":36,"line":74},[34,5621,567],{},[10,5623,570],{},[24,5625,5626],{"className":26,"code":573,"language":28,"meta":29,"style":29},[31,5627,5628,5632,5636,5640],{"__ignoreMap":29},[34,5629,5630],{"class":36,"line":37},[34,5631,580],{},[34,5633,5634],{"class":36,"line":43},[34,5635,65],{"emptyLinePlaceholder":64},[34,5637,5638],{"class":36,"line":49},[34,5639,589],{},[34,5641,5642],{"class":36,"line":55},[34,5643,594],{},[10,5645,597,5646,601],{},[31,5647,600],{},[17,5649,5650,604],{"id":604},[31,5651,607],{},[10,5653,610,5654,299,5656,615,5658,618],{},[31,5655,298],{},[31,5657,302],{},[31,5659,607],{},[24,5661,5662],{"className":26,"code":621,"language":28,"meta":29,"style":29},[31,5663,5664,5668,5672,5676,5680],{"__ignoreMap":29},[34,5665,5666],{"class":36,"line":37},[34,5667,628],{},[34,5669,5670],{"class":36,"line":43},[34,5671,65],{"emptyLinePlaceholder":64},[34,5673,5674],{"class":36,"line":49},[34,5675,637],{},[34,5677,5678],{"class":36,"line":55},[34,5679,65],{"emptyLinePlaceholder":64},[34,5681,5682],{"class":36,"line":61},[34,5683,646],{},[10,5685,5686,338,5688,655,5690,659,5692,662,5694,299,5696,667],{},[31,5687,651],{},[31,5689,654],{},[31,5691,658],{},[31,5693,607],{},[31,5695,298],{},[31,5697,302],{},[17,5699,670],{"id":670},[10,5701,673,5702,676],{},[31,5703,302],{},[10,5705,679],{},[681,5707,5708,5712,5714],{},[684,5709,686,5710,689],{},[31,5711,291],{},[684,5713,692],{},[684,5715,695,5716,698],{},[31,5717,607],{},[17,5719,701],{"id":701},[10,5721,704],{},[10,5723,707,5724,710,5726,713],{},[31,5725,298],{},[31,5727,302],{},[715,5729,717],{},{"title":29,"searchDepth":43,"depth":43,"links":5731},[5732,5736,5742,5743,5744],{"id":19,"depth":43,"text":19,"children":5733},[5734,5735],{"id":92,"depth":49,"text":92},{"id":235,"depth":49,"text":235},{"id":287,"depth":43,"text":725,"children":5737},[5738,5739,5740,5741],{"id":369,"depth":49,"text":369},{"id":436,"depth":49,"text":436},{"id":489,"depth":49,"text":490},{"id":521,"depth":49,"text":521},{"id":604,"depth":43,"text":732},{"id":670,"depth":43,"text":670},{"id":701,"depth":43,"text":701},{},{"title":5,"description":735},[743],{"id":1293,"title":1294,"body":5749,"description":2966,"extension":736,"meta":7092,"navigation":64,"path":2968,"publishDate":2969,"published":64,"seo":7093,"stem":2971,"tags":7094,"thumbnail":2973,"updated":2969,"__hash__":2974},{"type":7,"value":5750,"toc":7064},[5751,5753,5758,5768,5770,5774,5780,5804,5806,5810,5812,5814,5816,5852,5854,5856,5858,5864,5866,5868,5872,5878,6042,6050,6052,6054,6132,6134,6136,6204,6206,6208,6230,6232,6234,6240,6362,6364,6366,6368,6370,6372,6378,6386,6452,6456,6460,6464,6500,6504,6506,6508,6564,6568,6570,6574,6672,6678,6682,6686,6740,6742,6744,6746,6834,6836,6840,6856,6862,6864,6866,6938,6942,6944,6946,7054,7056,7058,7060,7062],[10,5752,12],{},[10,5754,1301,5755,1309],{},[1303,5756,1308],{"href":1305,"rel":5757},[1307],[681,5759,5760,5762,5764,5766],{},[684,5761,1314],{},[684,5763,743],{},[684,5765,1319],{},[684,5767,1322],{},[17,5769,1314],{"id":1325},[90,5771,5772,1332],{"id":1328},[31,5773,1331],{},[10,5775,5776,1337,5778,1341],{},[31,5777,1331],{},[31,5779,1340],{},[24,5781,5782],{"className":1344,"code":1345,"language":1325,"meta":29,"style":29},[31,5783,5784],{"__ignoreMap":29},[34,5785,5786,5788,5790,5792,5794,5796,5798,5800,5802],{"class":36,"line":37},[34,5787,1353],{"class":1352},[34,5789,1357],{"class":1356},[34,5791,1361],{"class":1360},[34,5793,1364],{"class":1352},[34,5795,1367],{"class":1352},[34,5797,1371],{"class":1370},[34,5799,1367],{"class":1352},[34,5801,1376],{"class":1360},[34,5803,1379],{"class":1352},[10,5805,1382],{},[203,5807,5808],{"title":1385,"type":1386},[10,5809,1389],{},[17,5811,743],{"id":28},[90,5813,1394],{"id":1394},[10,5815,1397],{},[24,5817,5818],{"className":26,"code":1400,"language":28,"meta":29,"style":29},[31,5819,5820,5824,5828,5832,5836,5840,5844,5848],{"__ignoreMap":29},[34,5821,5822],{"class":36,"line":37},[34,5823,1407],{},[34,5825,5826],{"class":36,"line":43},[34,5827,65],{"emptyLinePlaceholder":64},[34,5829,5830],{"class":36,"line":49},[34,5831,1416],{},[34,5833,5834],{"class":36,"line":55},[34,5835,1421],{},[34,5837,5838],{"class":36,"line":61},[34,5839,58],{},[34,5841,5842],{"class":36,"line":68},[34,5843,65],{"emptyLinePlaceholder":64},[34,5845,5846],{"class":36,"line":74},[34,5847,1434],{},[34,5849,5850],{"class":36,"line":79},[34,5851,1439],{},[10,5853,1442],{},[90,5855,1446],{"id":1445},[10,5857,1449],{},[10,5859,1452,5860,175,5862,1459],{},[31,5861,1455],{},[31,5863,1458],{},[10,5865,1462],{},[17,5867,1319],{"id":1465},[90,5869,5870],{"id":1468},[31,5871,1471],{},[10,5873,5874,1476,5876,1480],{},[31,5875,1471],{},[31,5877,1479],{},[24,5879,5880],{"className":1483,"code":1484,"language":1485,"meta":29,"style":29},[31,5881,5882,5900,5918,5932,5936,5960,5964,5976,5994,5998,6002,6014,6022,6030,6038],{"__ignoreMap":29},[34,5883,5884,5886,5888,5890,5892,5894,5896,5898],{"class":36,"line":37},[34,5885,1455],{"class":1492},[34,5887,1495],{"class":1352},[34,5889,1499],{"class":1498},[34,5891,1502],{"class":1352},[34,5893,1505],{"class":1492},[34,5895,1508],{"class":1352},[34,5897,1465],{"class":1370},[34,5899,1513],{"class":1352},[34,5901,5902,5904,5906,5908,5910,5912,5914,5916],{"class":36,"line":43},[34,5903,1455],{"class":1492},[34,5905,1495],{"class":1352},[34,5907,1522],{"class":1498},[34,5909,1502],{"class":1352},[34,5911,1505],{"class":1492},[34,5913,1508],{"class":1352},[34,5915,1531],{"class":1370},[34,5917,1513],{"class":1352},[34,5919,5920,5922,5924,5926,5928,5930],{"class":36,"line":49},[34,5921,1455],{"class":1492},[34,5923,1540],{"class":1498},[34,5925,1543],{"class":1492},[34,5927,1508],{"class":1352},[34,5929,1548],{"class":1370},[34,5931,1513],{"class":1352},[34,5933,5934],{"class":36,"line":55},[34,5935,65],{"emptyLinePlaceholder":64},[34,5937,5938,5940,5942,5944,5946,5948,5950,5952,5954,5956,5958],{"class":36,"line":61},[34,5939,1559],{"class":1360},[34,5941,1562],{"class":1498},[34,5943,1364],{"class":1352},[34,5945,1567],{"class":1498},[34,5947,1570],{"class":1352},[34,5949,1574],{"class":1573},[34,5951,1577],{"class":1498},[34,5953,1580],{"class":1352},[34,5955,1583],{"class":1370},[34,5957,1580],{"class":1352},[34,5959,1588],{"class":1498},[34,5961,5962],{"class":36,"line":68},[34,5963,65],{"emptyLinePlaceholder":64},[34,5965,5966,5968,5970,5972,5974],{"class":36,"line":74},[34,5967,1597],{"class":1492},[34,5969,1600],{"class":1498},[34,5971,1603],{"class":1352},[34,5973,1606],{"class":1498},[34,5975,1609],{"class":1352},[34,5977,5978,5980,5982,5984,5986,5988,5990,5992],{"class":36,"line":79},[34,5979,1614],{"class":1492},[34,5981,1617],{"class":1352},[34,5983,1620],{"class":1573},[34,5985,1577],{"class":1356},[34,5987,1580],{"class":1352},[34,5989,1627],{"class":1370},[34,5991,1580],{"class":1352},[34,5993,1588],{"class":1356},[34,5995,5996],{"class":36,"line":85},[34,5997,58],{"class":1352},[34,5999,6000],{"class":36,"line":144},[34,6001,65],{"emptyLinePlaceholder":64},[34,6003,6004,6006,6008,6010,6012],{"class":36,"line":150},[34,6005,1471],{"class":1573},[34,6007,1646],{"class":1498},[34,6009,1570],{"class":1352},[34,6011,1479],{"class":1573},[34,6013,1653],{"class":1498},[34,6015,6016,6018,6020],{"class":36,"line":156},[34,6017,1658],{"class":1352},[34,6019,1662],{"class":1661},[34,6021,1379],{"class":1352},[34,6023,6024,6026,6028],{"class":36,"line":161},[34,6025,1669],{"class":1352},[34,6027,1672],{"class":1661},[34,6029,1675],{"class":1352},[34,6031,6032,6034,6036],{"class":36,"line":166},[34,6033,1680],{"class":1352},[34,6035,1662],{"class":1661},[34,6037,1685],{"class":1352},[34,6039,6040],{"class":36,"line":1688},[34,6041,1588],{"class":1498},[10,6043,6044,1695,6046,1698,6048,443],{},[31,6045,1471],{},[31,6047,1471],{},[31,6049,1701],{},[90,6051,1704],{"id":1704},[10,6053,1707],{},[24,6055,6056],{"className":1483,"code":1710,"language":1485,"meta":29,"style":29},[31,6057,6058,6068,6082,6094,6114,6122,6128],{"__ignoreMap":29},[34,6059,6060,6062,6064,6066],{"class":36,"line":37},[34,6061,1717],{"class":1573},[34,6063,1577],{"class":1498},[34,6065,1723],{"class":1722},[34,6067,1726],{"class":1360},[34,6069,6070,6072,6074,6076,6078,6080],{"class":36,"line":43},[34,6071,1731],{"class":1498},[34,6073,1570],{"class":1352},[34,6075,1736],{"class":1573},[34,6077,1577],{"class":1498},[34,6079,1741],{"class":1722},[34,6081,1726],{"class":1360},[34,6083,6084,6086,6088,6090,6092],{"class":36,"line":49},[34,6085,1748],{"class":1498},[34,6087,1570],{"class":1352},[34,6089,1753],{"class":1498},[34,6091,1756],{"class":1352},[34,6093,1759],{"class":1498},[34,6095,6096,6098,6100,6102,6104,6106,6108,6110,6112],{"class":36,"line":55},[34,6097,1764],{"class":1352},[34,6099,1495],{"class":1352},[34,6101,1769],{"class":1352},[34,6103,1741],{"class":1498},[34,6105,1774],{"class":1352},[34,6107,1777],{"class":1356},[34,6109,1780],{"class":1352},[34,6111,1784],{"class":1783},[34,6113,1787],{"class":1352},[34,6115,6116,6118,6120],{"class":36,"line":61},[34,6117,1792],{"class":1352},[34,6119,1795],{"class":1498},[34,6121,1798],{"class":1352},[34,6123,6124,6126],{"class":36,"line":68},[34,6125,1803],{"class":1498},[34,6127,1798],{"class":1352},[34,6129,6130],{"class":36,"line":74},[34,6131,1588],{"class":1498},[10,6133,1812],{},[10,6135,1815],{},[1817,6137,6138,6148],{},[1820,6139,6140],{},[1823,6141,6142,6144,6146],{},[1826,6143,1828],{},[1826,6145,1831],{},[1826,6147,1834],{},[1836,6149,6150,6164,6180,6192],{},[1823,6151,6152,6154,6160],{},[1841,6153,1843],{},[1841,6155,6156,1849,6158],{},[31,6157,1848],{},[31,6159,1852],{},[1841,6161,1855,6162],{},[31,6163,1858],{},[1823,6165,6166,6168,6174],{},[1841,6167,1863],{},[1841,6169,6170,1849,6172],{},[31,6171,1868],{},[31,6173,1871],{},[1841,6175,6176,1849,6178],{},[31,6177,1876],{},[31,6179,1879],{},[1823,6181,6182,6184,6188],{},[1841,6183,1884],{},[1841,6185,1887,6186],{},[31,6187,1871],{},[1841,6189,6190],{},[31,6191,1736],{},[1823,6193,6194,6196,6200],{},[1841,6195,1898],{},[1841,6197,1901,6198],{},[31,6199,1904],{},[1841,6201,1907,6202],{},[31,6203,1904],{},[90,6205,1912],{"id":1912},[10,6207,1915],{},[24,6209,6210],{"className":1483,"code":1918,"language":1485,"meta":29,"style":29},[31,6211,6212],{"__ignoreMap":29},[34,6213,6214,6216,6218,6220,6222,6224,6226,6228],{"class":36,"line":37},[34,6215,1925],{"class":1573},[34,6217,1577],{"class":1498},[34,6219,1930],{"class":1722},[34,6221,1933],{"class":1360},[34,6223,1936],{"class":1498},[34,6225,1939],{"class":1352},[34,6227,1943],{"class":1942},[34,6229,1588],{"class":1498},[10,6231,1948],{},[90,6233,1951],{"id":1951},[10,6235,1954,6236,1958,6238,1962],{},[31,6237,1957],{},[31,6239,1961],{},[24,6241,6242],{"className":1483,"code":1965,"language":1485,"meta":29,"style":29},[31,6243,6244,6254,6274,6278,6282,6300,6314,6324,6328,6332,6358],{"__ignoreMap":29},[34,6245,6246,6248,6250,6252],{"class":36,"line":37},[34,6247,1972],{"class":1360},[34,6249,1975],{"class":1661},[34,6251,1978],{"class":1352},[34,6253,1981],{"class":1352},[34,6255,6256,6258,6260,6262,6264,6266,6268,6270,6272],{"class":36,"line":43},[34,6257,1986],{"class":1356},[34,6259,1780],{"class":1352},[34,6261,1600],{"class":1352},[34,6263,1993],{"class":1722},[34,6265,1780],{"class":1352},[34,6267,1998],{"class":1661},[34,6269,2001],{"class":1352},[34,6271,1933],{"class":1360},[34,6273,2006],{"class":1661},[34,6275,6276],{"class":36,"line":49},[34,6277,58],{"class":1352},[34,6279,6280],{"class":36,"line":55},[34,6281,65],{"emptyLinePlaceholder":64},[34,6283,6284,6286,6288,6290,6292,6294,6296,6298],{"class":36,"line":61},[34,6285,2019],{"class":1360},[34,6287,2022],{"class":1573},[34,6289,2025],{"class":1352},[34,6291,2028],{"class":1722},[34,6293,2031],{"class":1352},[34,6295,1975],{"class":1661},[34,6297,2001],{"class":1352},[34,6299,1981],{"class":1352},[34,6301,6302,6304,6306,6308,6310,6312],{"class":36,"line":68},[34,6303,2042],{"class":1360},[34,6305,2045],{"class":1498},[34,6307,1978],{"class":1352},[34,6309,2050],{"class":1352},[34,6311,1933],{"class":1360},[34,6313,1981],{"class":1352},[34,6315,6316,6318,6320,6322],{"class":36,"line":74},[34,6317,2059],{"class":1573},[34,6319,1577],{"class":1356},[34,6321,2064],{"class":1942},[34,6323,1588],{"class":1356},[34,6325,6326],{"class":36,"line":79},[34,6327,2071],{"class":1352},[34,6329,6330],{"class":36,"line":85},[34,6331,65],{"emptyLinePlaceholder":64},[34,6333,6334,6336,6338,6340,6342,6344,6346,6348,6350,6352,6354,6356],{"class":36,"line":144},[34,6335,2080],{"class":1492},[34,6337,2083],{"class":1352},[34,6339,1357],{"class":1356},[34,6341,1361],{"class":1360},[34,6343,1364],{"class":1352},[34,6345,1367],{"class":1352},[34,6347,2094],{"class":1370},[34,6349,1367],{"class":1352},[34,6351,2028],{"class":1360},[34,6353,2101],{"class":1352},[34,6355,2104],{"class":1498},[34,6357,2107],{"class":1352},[34,6359,6360],{"class":36,"line":150},[34,6361,58],{"class":1352},[10,6363,2114],{},[90,6365,2117],{"id":2117},[10,6367,2120],{},[10,6369,2123],{},[17,6371,1322],{"id":2126},[90,6373,6374,175,6376],{"id":2129},[31,6375,2132],{},[31,6377,298],{},[10,6379,6380,2139,6382,2143,6384,2146],{},[31,6381,2132],{},[31,6383,2142],{},[31,6385,298],{},[24,6387,6388],{"className":2149,"code":2150,"language":2126,"meta":29,"style":29},[31,6389,6390,6414,6418,6430,6448],{"__ignoreMap":29},[34,6391,6392,6394,6396,6398,6400,6402,6404,6406,6408,6410,6412],{"class":36,"line":37},[34,6393,1559],{"class":1360},[34,6395,1562],{"class":1498},[34,6397,1364],{"class":1352},[34,6399,1567],{"class":1498},[34,6401,1570],{"class":1352},[34,6403,1574],{"class":1573},[34,6405,1577],{"class":1498},[34,6407,1580],{"class":1352},[34,6409,1583],{"class":1370},[34,6411,1580],{"class":1352},[34,6413,1588],{"class":1498},[34,6415,6416],{"class":36,"line":43},[34,6417,65],{"emptyLinePlaceholder":64},[34,6419,6420,6422,6424,6426,6428],{"class":36,"line":49},[34,6421,1597],{"class":1492},[34,6423,1600],{"class":1498},[34,6425,1603],{"class":1352},[34,6427,1606],{"class":1498},[34,6429,1609],{"class":1352},[34,6431,6432,6434,6436,6438,6440,6442,6444,6446],{"class":36,"line":55},[34,6433,1614],{"class":1492},[34,6435,1617],{"class":1352},[34,6437,1620],{"class":1573},[34,6439,1577],{"class":1356},[34,6441,1580],{"class":1352},[34,6443,1627],{"class":1370},[34,6445,1580],{"class":1352},[34,6447,1588],{"class":1356},[34,6449,6450],{"class":36,"line":61},[34,6451,58],{"class":1352},[10,6453,2217,6454,2220],{},[31,6455,1603],{},[90,6457,6458],{"id":2223},[31,6459,2223],{},[10,6461,2228,6462,2231],{},[31,6463,2223],{},[24,6465,6466],{"className":2149,"code":2234,"language":2126,"meta":29,"style":29},[31,6467,6468,6478,6488,6496],{"__ignoreMap":29},[34,6469,6470,6472,6474,6476],{"class":36,"line":37},[34,6471,1972],{"class":1360},[34,6473,2243],{"class":1661},[34,6475,1978],{"class":1352},[34,6477,1981],{"class":1352},[34,6479,6480,6482,6484,6486],{"class":36,"line":43},[34,6481,2252],{"class":1360},[34,6483,2255],{"class":1356},[34,6485,1780],{"class":1352},[34,6487,2260],{"class":1661},[34,6489,6490,6492,6494],{"class":36,"line":49},[34,6491,2265],{"class":1356},[34,6493,1780],{"class":1352},[34,6495,2270],{"class":1661},[34,6497,6498],{"class":36,"line":55},[34,6499,58],{"class":1352},[10,6501,6502,2279],{},[31,6503,2223],{},[90,6505,2282],{"id":2282},[10,6507,2285],{},[24,6509,6510],{"className":1483,"code":2288,"language":1485,"meta":29,"style":29},[31,6511,6512,6538,6560],{"__ignoreMap":29},[34,6513,6514,6516,6518,6520,6522,6524,6526,6528,6530,6532,6534,6536],{"class":36,"line":37},[34,6515,2019],{"class":1360},[34,6517,2045],{"class":1573},[34,6519,1577],{"class":1352},[34,6521,2301],{"class":1722},[34,6523,1780],{"class":1352},[34,6525,2306],{"class":1661},[34,6527,1570],{"class":1352},[34,6529,2311],{"class":1661},[34,6531,1353],{"class":1352},[34,6533,2316],{"class":1661},[34,6535,2319],{"class":1352},[34,6537,1981],{"class":1352},[34,6539,6540,6542,6544,6546,6548,6550,6552,6554,6556,6558],{"class":36,"line":43},[34,6541,2326],{"class":1498},[34,6543,1570],{"class":1352},[34,6545,2331],{"class":1573},[34,6547,1577],{"class":1356},[34,6549,2301],{"class":1498},[34,6551,1570],{"class":1352},[34,6553,2340],{"class":1498},[34,6555,1570],{"class":1352},[34,6557,2345],{"class":1498},[34,6559,1588],{"class":1356},[34,6561,6562],{"class":36,"line":49},[34,6563,58],{"class":1352},[10,6565,2354,6566,2358],{},[31,6567,2357],{},[90,6569,2361],{"id":2361},[10,6571,2364,6572,2368],{},[31,6573,2367],{},[24,6575,6576],{"className":2149,"code":2371,"language":2126,"meta":29,"style":29},[31,6577,6578,6588,6596,6600,6604,6640,6668],{"__ignoreMap":29},[34,6579,6580,6582,6584,6586],{"class":36,"line":37},[34,6581,1972],{"class":1360},[34,6583,2380],{"class":1661},[34,6585,1978],{"class":1352},[34,6587,1981],{"class":1352},[34,6589,6590,6592,6594],{"class":36,"line":43},[34,6591,2389],{"class":1356},[34,6593,1780],{"class":1352},[34,6595,2260],{"class":1661},[34,6597,6598],{"class":36,"line":49},[34,6599,58],{"class":1352},[34,6601,6602],{"class":36,"line":55},[34,6603,65],{"emptyLinePlaceholder":64},[34,6605,6606,6608,6610,6612,6614,6616,6618,6620,6622,6624,6626,6628,6630,6632,6634,6636,6638],{"class":36,"line":61},[34,6607,2019],{"class":1360},[34,6609,2408],{"class":1573},[34,6611,1353],{"class":1352},[34,6613,2413],{"class":1661},[34,6615,2416],{"class":1360},[34,6617,2380],{"class":1661},[34,6619,2421],{"class":1352},[34,6621,2424],{"class":1722},[34,6623,1780],{"class":1352},[34,6625,2429],{"class":1661},[34,6627,2432],{"class":1498},[34,6629,1774],{"class":1352},[34,6631,2255],{"class":1722},[34,6633,1780],{"class":1352},[34,6635,1998],{"class":1661},[34,6637,2001],{"class":1352},[34,6639,1981],{"class":1352},[34,6641,6642,6644,6646,6648,6650,6652,6654,6656,6658,6660,6662,6664,6666],{"class":36,"line":68},[34,6643,2080],{"class":1492},[34,6645,2451],{"class":1498},[34,6647,1570],{"class":1352},[34,6649,2456],{"class":1573},[34,6651,1577],{"class":1356},[34,6653,2461],{"class":1722},[34,6655,1933],{"class":1360},[34,6657,2466],{"class":1498},[34,6659,1570],{"class":1352},[34,6661,1993],{"class":1498},[34,6663,2473],{"class":1352},[34,6665,2255],{"class":1498},[34,6667,1588],{"class":1356},[34,6669,6670],{"class":36,"line":74},[34,6671,58],{"class":1352},[10,6673,2484,6674,2487,6676,2490],{},[31,6675,2413],{},[31,6677,1993],{},[90,6679,6680,2497],{"id":2493},[31,6681,2496],{},[10,6683,6684,2502],{},[31,6685,2496],{},[24,6687,6688],{"className":2149,"code":2505,"language":2126,"meta":29,"style":29},[31,6689,6690,6700,6708,6716,6720,6724,6736],{"__ignoreMap":29},[34,6691,6692,6694,6696,6698],{"class":36,"line":37},[34,6693,1972],{"class":1360},[34,6695,2243],{"class":1661},[34,6697,1978],{"class":1352},[34,6699,1981],{"class":1352},[34,6701,6702,6704,6706],{"class":36,"line":43},[34,6703,2389],{"class":1356},[34,6705,1780],{"class":1352},[34,6707,2260],{"class":1661},[34,6709,6710,6712,6714],{"class":36,"line":49},[34,6711,2265],{"class":1356},[34,6713,1780],{"class":1352},[34,6715,2270],{"class":1661},[34,6717,6718],{"class":36,"line":55},[34,6719,58],{"class":1352},[34,6721,6722],{"class":36,"line":61},[34,6723,65],{"emptyLinePlaceholder":64},[34,6725,6726,6728,6730,6732,6734],{"class":36,"line":68},[34,6727,1972],{"class":1360},[34,6729,2548],{"class":1661},[34,6731,1978],{"class":1352},[34,6733,2553],{"class":1352},[34,6735,2556],{"class":1661},[34,6737,6738],{"class":36,"line":74},[34,6739,2562],{"class":2561},[10,6741,2565],{},[90,6743,2568],{"id":2568},[10,6745,2571],{},[24,6747,6748],{"className":2149,"code":2574,"language":2126,"meta":29,"style":29},[31,6749,6750,6760,6768,6776,6780,6784,6804,6808,6812,6830],{"__ignoreMap":29},[34,6751,6752,6754,6756,6758],{"class":36,"line":37},[34,6753,1972],{"class":1360},[34,6755,2243],{"class":1661},[34,6757,1978],{"class":1352},[34,6759,1981],{"class":1352},[34,6761,6762,6764,6766],{"class":36,"line":43},[34,6763,2389],{"class":1356},[34,6765,1780],{"class":1352},[34,6767,2260],{"class":1661},[34,6769,6770,6772,6774],{"class":36,"line":49},[34,6771,2265],{"class":1356},[34,6773,1780],{"class":1352},[34,6775,2270],{"class":1661},[34,6777,6778],{"class":36,"line":55},[34,6779,58],{"class":1352},[34,6781,6782],{"class":36,"line":61},[34,6783,65],{"emptyLinePlaceholder":64},[34,6785,6786,6788,6790,6792,6794,6796,6798,6800,6802],{"class":36,"line":68},[34,6787,1972],{"class":1360},[34,6789,2617],{"class":1661},[34,6791,1978],{"class":1352},[34,6793,2243],{"class":1661},[34,6795,2624],{"class":1498},[34,6797,1580],{"class":1352},[34,6799,1993],{"class":1370},[34,6801,1580],{"class":1352},[34,6803,401],{"class":1498},[34,6805,6806],{"class":36,"line":74},[34,6807,2637],{"class":2561},[34,6809,6810],{"class":36,"line":79},[34,6811,65],{"emptyLinePlaceholder":64},[34,6813,6814,6816,6818,6820,6822,6824,6826,6828],{"class":36,"line":85},[34,6815,1972],{"class":1360},[34,6817,2648],{"class":1661},[34,6819,1978],{"class":1352},[34,6821,2243],{"class":1661},[34,6823,2624],{"class":1498},[34,6825,2496],{"class":1352},[34,6827,2243],{"class":1661},[34,6829,401],{"class":1498},[34,6831,6832],{"class":36,"line":144},[34,6833,2665],{"class":2561},[90,6835,2668],{"id":2668},[10,6837,6838,2674],{},[31,6839,2673],{},[24,6841,6842],{"className":2149,"code":2677,"language":2126,"meta":29,"style":29},[31,6843,6844],{"__ignoreMap":29},[34,6845,6846,6848,6850,6852,6854],{"class":36,"line":37},[34,6847,2673],{"class":1360},[34,6849,2686],{"class":1360},[34,6851,2689],{"class":1498},[34,6853,1780],{"class":1352},[34,6855,2270],{"class":1661},[10,6857,2696,6858,2700,6860,2703],{},[31,6859,2699],{},[31,6861,2673],{},[90,6863,2706],{"id":2706},[10,6865,2709],{},[24,6867,6868],{"className":2149,"code":2712,"language":2126,"meta":29,"style":29},[31,6869,6870,6880,6896,6900,6904,6914,6934],{"__ignoreMap":29},[34,6871,6872,6874,6876,6878],{"class":36,"line":37},[34,6873,1972],{"class":1360},[34,6875,2721],{"class":1661},[34,6877,1978],{"class":1352},[34,6879,1981],{"class":1352},[34,6881,6882,6884,6886,6888,6890,6892,6894],{"class":36,"line":43},[34,6883,2730],{"class":1356},[34,6885,1577],{"class":1352},[34,6887,2735],{"class":1722},[34,6889,1780],{"class":1352},[34,6891,2740],{"class":1661},[34,6893,2743],{"class":1352},[34,6895,2270],{"class":1661},[34,6897,6898],{"class":36,"line":49},[34,6899,58],{"class":1352},[34,6901,6902],{"class":36,"line":55},[34,6903,65],{"emptyLinePlaceholder":64},[34,6905,6906,6908,6910,6912],{"class":36,"line":61},[34,6907,1972],{"class":1360},[34,6909,2760],{"class":1661},[34,6911,1978],{"class":1352},[34,6913,1981],{"class":1352},[34,6915,6916,6918,6920,6922,6924,6926,6928,6930,6932],{"class":36,"line":68},[34,6917,2730],{"class":1356},[34,6919,1780],{"class":1352},[34,6921,1600],{"class":1352},[34,6923,2735],{"class":1722},[34,6925,1780],{"class":1352},[34,6927,2740],{"class":1661},[34,6929,2001],{"class":1352},[34,6931,1933],{"class":1360},[34,6933,2270],{"class":1661},[34,6935,6936],{"class":36,"line":74},[34,6937,58],{"class":1352},[10,6939,2791,6940,2795],{},[31,6941,2794],{},[90,6943,2798],{"id":2798},[10,6945,2801],{},[24,6947,6948],{"className":2149,"code":2804,"language":2126,"meta":29,"style":29},[31,6949,6950,6974,6990,6994,6998,7012,7016,7028,7050],{"__ignoreMap":29},[34,6951,6952,6954,6956,6958,6960,6962,6964,6966,6968,6970,6972],{"class":36,"line":37},[34,6953,2019],{"class":1360},[34,6955,2813],{"class":1573},[34,6957,1577],{"class":1352},[34,6959,2735],{"class":1722},[34,6961,1780],{"class":1352},[34,6963,2822],{"class":1661},[34,6965,2743],{"class":1352},[34,6967,2827],{"class":1722},[34,6969,2830],{"class":1352},[34,6971,1998],{"class":1661},[34,6973,1981],{"class":1352},[34,6975,6976,6978,6980,6982,6984,6986,6988],{"class":36,"line":43},[34,6977,2080],{"class":1492},[34,6979,2841],{"class":1352},[34,6981,2827],{"class":1498},[34,6983,2473],{"class":1352},[34,6985,1508],{"class":1352},[34,6987,2850],{"class":1370},[34,6989,1513],{"class":1352},[34,6991,6992],{"class":36,"line":49},[34,6993,58],{"class":1352},[34,6995,6996],{"class":36,"line":55},[34,6997,65],{"emptyLinePlaceholder":64},[34,6999,7000,7002,7004,7006,7008,7010],{"class":36,"line":61},[34,7001,1559],{"class":1360},[34,7003,2827],{"class":1498},[34,7005,1780],{"class":1352},[34,7007,2822],{"class":1661},[34,7009,1978],{"class":1352},[34,7011,2875],{"class":1942},[34,7013,7014],{"class":36,"line":68},[34,7015,65],{"emptyLinePlaceholder":64},[34,7017,7018,7020,7022,7024,7026],{"class":36,"line":74},[34,7019,1597],{"class":1492},[34,7021,1600],{"class":1498},[34,7023,2888],{"class":1573},[34,7025,2891],{"class":1498},[34,7027,1609],{"class":1352},[34,7029,7030,7032,7034,7036,7038,7040,7042,7044,7046,7048],{"class":36,"line":79},[34,7031,2326],{"class":1498},[34,7033,1570],{"class":1352},[34,7035,2331],{"class":1573},[34,7037,1577],{"class":1356},[34,7039,2735],{"class":1498},[34,7041,1570],{"class":1352},[34,7043,2910],{"class":1573},[34,7045,1577],{"class":1356},[34,7047,2915],{"class":1942},[34,7049,2918],{"class":1356},[34,7051,7052],{"class":36,"line":85},[34,7053,58],{"class":1352},[10,7055,2925],{},[17,7057,701],{"id":701},[10,7059,2930],{},[10,7061,2933],{},[715,7063,2936],{},{"title":29,"searchDepth":43,"depth":43,"links":7065},[7066,7069,7073,7080,7091],{"id":1325,"depth":43,"text":1314,"children":7067},[7068],{"id":1328,"depth":49,"text":1328},{"id":28,"depth":43,"text":743,"children":7070},[7071,7072],{"id":1394,"depth":49,"text":1394},{"id":1445,"depth":49,"text":1446},{"id":1465,"depth":43,"text":1319,"children":7074},[7075,7076,7077,7078,7079],{"id":1468,"depth":49,"text":1471},{"id":1704,"depth":49,"text":1704},{"id":1912,"depth":49,"text":1912},{"id":1951,"depth":49,"text":1951},{"id":2117,"depth":49,"text":2117},{"id":2126,"depth":43,"text":1322,"children":7081},[7082,7083,7084,7085,7086,7087,7088,7089,7090],{"id":2129,"depth":49,"text":2956},{"id":2223,"depth":49,"text":2223},{"id":2282,"depth":49,"text":2282},{"id":2361,"depth":49,"text":2361},{"id":2493,"depth":49,"text":2493},{"id":2568,"depth":49,"text":2568},{"id":2668,"depth":49,"text":2668},{"id":2706,"depth":49,"text":2706},{"id":2798,"depth":49,"text":2798},{"id":701,"depth":43,"text":701},{},{"title":1294,"description":2966},[1319,1322],{"id":2976,"title":2977,"body":7096,"description":3455,"extension":736,"meta":7470,"navigation":64,"path":3457,"publishDate":3458,"published":64,"seo":7471,"stem":3460,"tags":7472,"thumbnail":3463,"updated":3458,"__hash__":3464},{"type":7,"value":7097,"toc":7460},[7098,7100,7102,7108,7110,7112,7114,7116,7182,7184,7188,7190,7214,7220,7264,7266,7268,7274,7290,7292,7294,7296,7298,7300,7384,7386,7396,7398,7400,7402,7422,7426,7428,7430,7434,7436,7438,7450,7452,7454,7456,7458],[10,7099,12],{},[10,7101,2984],{},[10,7103,2987,7104,1849,7106,2994],{},[31,7105,2990],{},[31,7107,2993],{},[17,7109,2997],{"id":2997},[10,7111,3000],{},[10,7113,3003],{},[10,7115,3006],{},[1817,7117,7118,7130],{},[1820,7119,7120],{},[1823,7121,7122,7124,7126,7128],{},[1826,7123,3015],{},[1826,7125,2990],{},[1826,7127,2993],{},[1826,7129,3022],{},[1836,7131,7132,7142,7152,7162,7172],{},[1823,7133,7134,7136,7138,7140],{},[1841,7135,3029],{},[1841,7137,3032],{},[1841,7139,3032],{},[1841,7141,3037],{},[1823,7143,7144,7146,7148,7150],{},[1841,7145,3042],{},[1841,7147,3045],{},[1841,7149,3045],{},[1841,7151,3050],{},[1823,7153,7154,7156,7158,7160],{},[1841,7155,3055],{},[1841,7157,3058],{},[1841,7159,3061],{},[1841,7161,3058],{},[1823,7163,7164,7166,7168,7170],{},[1841,7165,3068],{},[1841,7167,3071],{},[1841,7169,3074],{},[1841,7171,3071],{},[1823,7173,7174,7176,7178,7180],{},[1841,7175,3081],{},[1841,7177,3084],{},[1841,7179,3087],{},[1841,7181,3090],{},[17,7183,2990],{"id":3093},[10,7185,7186,3098],{},[31,7187,2990],{},[10,7189,3101],{},[24,7191,7192],{"className":26,"code":3104,"language":28,"meta":29,"style":29},[31,7193,7194,7198,7202,7206,7210],{"__ignoreMap":29},[34,7195,7196],{"class":36,"line":37},[34,7197,3111],{},[34,7199,7200],{"class":36,"line":43},[34,7201,65],{"emptyLinePlaceholder":64},[34,7203,7204],{"class":36,"line":49},[34,7205,3120],{},[34,7207,7208],{"class":36,"line":55},[34,7209,65],{"emptyLinePlaceholder":64},[34,7211,7212],{"class":36,"line":61},[34,7213,3129],{},[10,7215,3132,7216,3136,7218,3140],{},[31,7217,3135],{},[31,7219,3139],{},[24,7221,7222],{"className":26,"code":3143,"language":28,"meta":29,"style":29},[31,7223,7224,7228,7232,7236,7240,7244,7248,7252,7256,7260],{"__ignoreMap":29},[34,7225,7226],{"class":36,"line":37},[34,7227,3150],{},[34,7229,7230],{"class":36,"line":43},[34,7231,3155],{},[34,7233,7234],{"class":36,"line":49},[34,7235,3160],{},[34,7237,7238],{"class":36,"line":55},[34,7239,58],{},[34,7241,7242],{"class":36,"line":61},[34,7243,65],{"emptyLinePlaceholder":64},[34,7245,7246],{"class":36,"line":68},[34,7247,3173],{},[34,7249,7250],{"class":36,"line":74},[34,7251,65],{"emptyLinePlaceholder":64},[34,7253,7254],{"class":36,"line":79},[34,7255,3182],{},[34,7257,7258],{"class":36,"line":85},[34,7259,3187],{},[34,7261,7262],{"class":36,"line":144},[34,7263,1588],{},[10,7265,3194],{},[17,7267,2993],{"id":3197},[10,7269,7270,3202,7272,3205],{},[31,7271,2993],{},[31,7273,2990],{},[24,7275,7276],{"className":26,"code":3208,"language":28,"meta":29,"style":29},[31,7277,7278,7282,7286],{"__ignoreMap":29},[34,7279,7280],{"class":36,"line":37},[34,7281,3215],{},[34,7283,7284],{"class":36,"line":43},[34,7285,65],{"emptyLinePlaceholder":64},[34,7287,7288],{"class":36,"line":49},[34,7289,3224],{},[10,7291,3227],{},[10,7293,3230],{},[17,7295,3022],{"id":3233},[10,7297,3236],{},[10,7299,3239],{},[24,7301,7302],{"className":26,"code":3242,"language":28,"meta":29,"style":29},[31,7303,7304,7308,7312,7316,7320,7324,7328,7332,7336,7340,7344,7348,7352,7356,7360,7364,7368,7372,7376,7380],{"__ignoreMap":29},[34,7305,7306],{"class":36,"line":37},[34,7307,3249],{},[34,7309,7310],{"class":36,"line":43},[34,7311,65],{"emptyLinePlaceholder":64},[34,7313,7314],{"class":36,"line":49},[34,7315,3258],{},[34,7317,7318],{"class":36,"line":55},[34,7319,3263],{},[34,7321,7322],{"class":36,"line":61},[34,7323,65],{"emptyLinePlaceholder":64},[34,7325,7326],{"class":36,"line":68},[34,7327,3272],{},[34,7329,7330],{"class":36,"line":74},[34,7331,3277],{},[34,7333,7334],{"class":36,"line":79},[34,7335,3282],{},[34,7337,7338],{"class":36,"line":85},[34,7339,3287],{},[34,7341,7342],{"class":36,"line":144},[34,7343,3292],{},[34,7345,7346],{"class":36,"line":150},[34,7347,2071],{},[34,7349,7350],{"class":36,"line":156},[34,7351,58],{},[34,7353,7354],{"class":36,"line":161},[34,7355,65],{"emptyLinePlaceholder":64},[34,7357,7358],{"class":36,"line":166},[34,7359,3309],{},[34,7361,7362],{"class":36,"line":1688},[34,7363,3263],{},[34,7365,7366],{"class":36,"line":3316},[34,7367,3319],{},[34,7369,7370],{"class":36,"line":3322},[34,7371,3325],{},[34,7373,7374],{"class":36,"line":3328},[34,7375,65],{"emptyLinePlaceholder":64},[34,7377,7378],{"class":36,"line":3333},[34,7379,3336],{},[34,7381,7382],{"class":36,"line":3339},[34,7383,58],{},[10,7385,3344],{},[681,7387,7388,7390,7392,7394],{},[684,7389,3349],{},[684,7391,3352],{},[684,7393,3355],{},[684,7395,3358],{},[17,7397,3361],{"id":3361},[10,7399,3364],{},[10,7401,3367],{},[24,7403,7404],{"className":26,"code":3370,"language":28,"meta":29,"style":29},[31,7405,7406,7410,7414,7418],{"__ignoreMap":29},[34,7407,7408],{"class":36,"line":37},[34,7409,3377],{},[34,7411,7412],{"class":36,"line":43},[34,7413,65],{"emptyLinePlaceholder":64},[34,7415,7416],{"class":36,"line":49},[34,7417,3386],{},[34,7419,7420],{"class":36,"line":55},[34,7421,3391],{},[203,7423,7424],{"title":3394,"type":1386},[10,7425,3397],{},[17,7427,3400],{"id":3400},[10,7429,3403],{},[203,7431,7432],{"title":3406,"type":3407},[10,7433,3410],{},[17,7435,3413],{"id":3413},[10,7437,3416],{},[681,7439,7440,7444,7448],{},[684,7441,3421,7442],{},[31,7443,2990],{},[684,7445,3426,7446],{},[31,7447,2993],{},[684,7449,3431],{},[10,7451,3434],{},[17,7453,701],{"id":701},[10,7455,3439],{},[10,7457,3442],{},[715,7459,717],{},{"title":29,"searchDepth":43,"depth":43,"links":7461},[7462,7463,7464,7465,7466,7467,7468,7469],{"id":2997,"depth":43,"text":2997},{"id":3093,"depth":43,"text":2990},{"id":3197,"depth":43,"text":2993},{"id":3233,"depth":43,"text":3022},{"id":3361,"depth":43,"text":3361},{"id":3400,"depth":43,"text":3400},{"id":3413,"depth":43,"text":3413},{"id":701,"depth":43,"text":701},{},{"title":2977,"description":3455},[3462,3022],{"id":3466,"title":3467,"body":7474,"description":3946,"extension":736,"meta":7841,"navigation":64,"path":3948,"publishDate":3949,"published":64,"seo":7842,"stem":3951,"tags":7843,"thumbnail":3953,"updated":3949,"__hash__":3954},{"type":7,"value":7475,"toc":7831},[7476,7478,7483,7485,7487,7489,7491,7493,7505,7507,7509,7511,7567,7569,7595,7597,7599,7601,7603,7613,7615,7651,7653,7655,7657,7659,7669,7673,7675,7677,7679,7697,7699,7701,7703,7705,7707,7719,7721,7723,7787,7789,7794,7800,7806,7808,7822,7824,7829],[10,7477,12],{},[10,7479,3474,7480,3480],{},[1303,7481,3479],{"href":3477,"rel":7482},[1307],[10,7484,3483],{},[17,7486,3487],{"id":3486},[10,7488,3490],{},[10,7490,3493],{},[10,7492,3496],{},[681,7494,7495,7497,7499,7501,7503],{},[684,7496,3501],{},[684,7498,3504],{},[684,7500,3507],{},[684,7502,3510],{},[684,7504,3513],{},[17,7506,3501],{"id":3501},[10,7508,3518],{},[10,7510,3521],{},[24,7512,7513],{"className":26,"code":3524,"language":28,"meta":29,"style":29},[31,7514,7515,7519,7523,7527,7531,7535,7539,7543,7547,7551,7555,7559,7563],{"__ignoreMap":29},[34,7516,7517],{"class":36,"line":37},[34,7518,3531],{},[34,7520,7521],{"class":36,"line":43},[34,7522,3536],{},[34,7524,7525],{"class":36,"line":49},[34,7526,58],{},[34,7528,7529],{"class":36,"line":55},[34,7530,65],{"emptyLinePlaceholder":64},[34,7532,7533],{"class":36,"line":61},[34,7534,3549],{},[34,7536,7537],{"class":36,"line":68},[34,7538,3554],{},[34,7540,7541],{"class":36,"line":74},[34,7542,58],{},[34,7544,7545],{"class":36,"line":79},[34,7546,65],{"emptyLinePlaceholder":64},[34,7548,7549],{"class":36,"line":85},[34,7550,3567],{},[34,7552,7553],{"class":36,"line":144},[34,7554,3572],{},[34,7556,7557],{"class":36,"line":150},[34,7558,58],{},[34,7560,7561],{"class":36,"line":156},[34,7562,65],{"emptyLinePlaceholder":64},[34,7564,7565],{"class":36,"line":161},[34,7566,3585],{},[10,7568,3588],{},[3590,7570,7571,7575,7581,7587],{},[684,7572,7573,3597],{},[31,7574,3596],{},[684,7576,7577,3602,7579,3606],{},[31,7578,3596],{},[31,7580,3605],{},[684,7582,7583,3602,7585,3606],{},[31,7584,3605],{},[31,7586,3613],{},[684,7588,7589,1849,7591,1849,7593,3622],{},[31,7590,3613],{},[31,7592,3605],{},[31,7594,3596],{},[10,7596,3625],{},[17,7598,3504],{"id":3628},[10,7600,3631],{},[10,7602,3634],{},[681,7604,7605,7607,7609,7611],{},[684,7606,3639],{},[684,7608,3642],{},[684,7610,3645],{},[684,7612,3648],{},[10,7614,3651],{},[24,7616,7617],{"className":26,"code":3654,"language":28,"meta":29,"style":29},[31,7618,7619,7623,7627,7631,7635,7639,7643,7647],{"__ignoreMap":29},[34,7620,7621],{"class":36,"line":37},[34,7622,3661],{},[34,7624,7625],{"class":36,"line":43},[34,7626,3666],{},[34,7628,7629],{"class":36,"line":49},[34,7630,3671],{},[34,7632,7633],{"class":36,"line":55},[34,7634,1588],{},[34,7636,7637],{"class":36,"line":61},[34,7638,65],{"emptyLinePlaceholder":64},[34,7640,7641],{"class":36,"line":68},[34,7642,3684],{},[34,7644,7645],{"class":36,"line":74},[34,7646,3689],{},[34,7648,7649],{"class":36,"line":79},[34,7650,3694],{},[10,7652,3697],{},[17,7654,3507],{"id":3507},[10,7656,3702],{},[10,7658,3705],{},[681,7660,7661,7665,7667],{},[684,7662,7663,3713],{},[31,7664,3712],{},[684,7666,3716],{},[684,7668,3719],{},[10,7670,7671,3724],{},[31,7672,3712],{},[10,7674,3727],{},[17,7676,3510],{"id":3510},[10,7678,3732],{},[681,7680,7681,7689,7693],{},[684,7682,3737,7683,1849,7685,1849,7687],{},[31,7684,3740],{},[31,7686,3743],{},[31,7688,3746],{},[684,7690,7691,3752],{},[31,7692,3751],{},[684,7694,7695,3713],{},[31,7696,3757],{},[10,7698,3760],{},[10,7700,3763],{},[17,7702,3513],{"id":3513},[10,7704,3768],{},[10,7706,3771],{},[3590,7708,7709,7711,7713,7715,7717],{},[684,7710,3776],{},[684,7712,3779],{},[684,7714,3782],{},[684,7716,3785],{},[684,7718,3788],{},[17,7720,3791],{"id":3791},[10,7722,3794],{},[24,7724,7725],{"className":26,"code":3797,"language":28,"meta":29,"style":29},[31,7726,7727,7731,7735,7739,7743,7747,7751,7755,7759,7763,7767,7771,7775,7779,7783],{"__ignoreMap":29},[34,7728,7729],{"class":36,"line":37},[34,7730,3804],{},[34,7732,7733],{"class":36,"line":43},[34,7734,65],{"emptyLinePlaceholder":64},[34,7736,7737],{"class":36,"line":49},[34,7738,3813],{},[34,7740,7741],{"class":36,"line":55},[34,7742,3818],{},[34,7744,7745],{"class":36,"line":61},[34,7746,3823],{},[34,7748,7749],{"class":36,"line":68},[34,7750,65],{"emptyLinePlaceholder":64},[34,7752,7753],{"class":36,"line":74},[34,7754,3832],{},[34,7756,7757],{"class":36,"line":79},[34,7758,3837],{},[34,7760,7761],{"class":36,"line":85},[34,7762,3842],{},[34,7764,7765],{"class":36,"line":144},[34,7766,65],{"emptyLinePlaceholder":64},[34,7768,7769],{"class":36,"line":150},[34,7770,3851],{},[34,7772,7773],{"class":36,"line":156},[34,7774,3856],{},[34,7776,7777],{"class":36,"line":161},[34,7778,3842],{},[34,7780,7781],{"class":36,"line":166},[34,7782,65],{"emptyLinePlaceholder":64},[34,7784,7785],{"class":36,"line":1688},[34,7786,3869],{},[10,7788,3872],{},[24,7790,7792],{"className":7791,"code":3877,"language":1371,"meta":29},[3876],[31,7793,3877],{"__ignoreMap":29},[10,7795,3882,7796,3886,7798,3890],{},[31,7797,3885],{},[31,7799,3889],{},[10,7801,3893,7802,3896,7804,3899],{},[31,7803,3751],{},[31,7805,3712],{},[17,7807,701],{"id":701},[681,7809,7810,7812,7814,7816,7818,7820],{},[684,7811,3906],{},[684,7813,3909],{},[684,7815,3912],{},[684,7817,3915],{},[684,7819,3918],{},[684,7821,3921],{},[10,7823,3924],{},[10,7825,3927,7826,3933],{},[1303,7827,3932],{"href":3930,"rel":7828},[1307],[715,7830,717],{},{"title":29,"searchDepth":43,"depth":43,"links":7832},[7833,7834,7835,7836,7837,7838,7839,7840],{"id":3486,"depth":43,"text":3487},{"id":3501,"depth":43,"text":3501},{"id":3628,"depth":43,"text":3504},{"id":3507,"depth":43,"text":3507},{"id":3510,"depth":43,"text":3510},{"id":3513,"depth":43,"text":3513},{"id":3791,"depth":43,"text":3791},{"id":701,"depth":43,"text":701},{},{"title":3467,"description":3946},[743],{"id":3956,"title":3957,"body":7845,"description":4374,"extension":736,"meta":8167,"navigation":64,"path":4376,"publishDate":4377,"published":64,"seo":8168,"stem":4379,"tags":8169,"thumbnail":4381,"updated":4377,"__hash__":4382},{"type":7,"value":7846,"toc":8159},[7847,7849,7851,7853,7855,7857,7865,7870,7872,7878,7902,7912,7917,7919,7923,7959,7965,7971,7979,7999,8001,8005,8041,8045,8049,8069,8071,8077,8113,8119,8131,8133,8155,8157],[10,7848,12],{},[10,7850,3964],{},[10,7852,3967],{},[17,7854,3971],{"id":3970},[10,7856,3974],{},[10,7858,7859,1849,7861,1849,7863,3986],{},[31,7860,3979],{},[31,7862,3982],{},[31,7864,3985],{},[10,7866,3989,7867,3995],{},[1303,7868,3994],{"href":3992,"rel":7869},[1307],[17,7871,3999],{"id":3998},[10,7873,4002,7874,4005,7876,4009],{},[31,7875,280],{},[31,7877,4008],{},[24,7879,7880],{"className":26,"code":4012,"language":28,"meta":29,"style":29},[31,7881,7882,7886,7890,7894,7898],{"__ignoreMap":29},[34,7883,7884],{"class":36,"line":37},[34,7885,4019],{},[34,7887,7888],{"class":36,"line":43},[34,7889,252],{},[34,7891,7892],{"class":36,"line":49},[34,7893,58],{},[34,7895,7896],{"class":36,"line":55},[34,7897,65],{"emptyLinePlaceholder":64},[34,7899,7900],{"class":36,"line":61},[34,7901,4036],{},[10,7903,4039,7904,4043,7906,4047,7908,4050,7910,4053],{},[31,7905,4042],{},[31,7907,4046],{},[31,7909,4046],{},[31,7911,4008],{},[10,7913,4056,7914,3933],{},[1303,7915,4061],{"href":4059,"rel":7916},[1307],[17,7918,4064],{"id":4064},[10,7920,4067,7921,4071],{},[31,7922,4070],{},[24,7924,7925],{"className":26,"code":4074,"language":28,"meta":29,"style":29},[31,7926,7927,7931,7935,7939,7943,7947,7951,7955],{"__ignoreMap":29},[34,7928,7929],{"class":36,"line":37},[34,7930,4019],{},[34,7932,7933],{"class":36,"line":43},[34,7934,252],{},[34,7936,7937],{"class":36,"line":49},[34,7938,4089],{},[34,7940,7941],{"class":36,"line":55},[34,7942,4094],{},[34,7944,7945],{"class":36,"line":61},[34,7946,123],{},[34,7948,7949],{"class":36,"line":68},[34,7950,58],{},[34,7952,7953],{"class":36,"line":74},[34,7954,65],{"emptyLinePlaceholder":64},[34,7956,7957],{"class":36,"line":79},[34,7958,4111],{},[10,7960,4114,7961,4118,7963,4122],{},[31,7962,4117],{},[31,7964,4121],{},[10,7966,7967,4127,7969,4130],{},[31,7968,4042],{},[31,7970,4070],{},[10,7972,4133,7973,4137,7975,4140,7977,4143],{},[31,7974,4136],{},[31,7976,4046],{},[31,7978,4008],{},[24,7980,7981],{"className":26,"code":4146,"language":28,"meta":29,"style":29},[31,7982,7983,7987,7991,7995],{"__ignoreMap":29},[34,7984,7985],{"class":36,"line":37},[34,7986,4153],{},[34,7988,7989],{"class":36,"line":43},[34,7990,4158],{},[34,7992,7993],{"class":36,"line":49},[34,7994,65],{"emptyLinePlaceholder":64},[34,7996,7997],{"class":36,"line":55},[34,7998,4167],{},[17,8000,4171],{"id":4170},[10,8002,4174,8003,4178],{},[31,8004,4177],{},[24,8006,8007],{"className":26,"code":4181,"language":28,"meta":29,"style":29},[31,8008,8009,8013,8017,8021,8025,8029,8033,8037],{"__ignoreMap":29},[34,8010,8011],{"class":36,"line":37},[34,8012,4019],{},[34,8014,8015],{"class":36,"line":43},[34,8016,252],{},[34,8018,8019],{"class":36,"line":49},[34,8020,4089],{},[34,8022,8023],{"class":36,"line":55},[34,8024,4094],{},[34,8026,8027],{"class":36,"line":61},[34,8028,123],{},[34,8030,8031],{"class":36,"line":68},[34,8032,58],{},[34,8034,8035],{"class":36,"line":74},[34,8036,65],{"emptyLinePlaceholder":64},[34,8038,8039],{"class":36,"line":79},[34,8040,4216],{},[10,8042,4219,8043,4222],{},[31,8044,4070],{},[10,8046,8047,4227],{},[31,8048,4136],{},[24,8050,8051],{"className":26,"code":4230,"language":28,"meta":29,"style":29},[31,8052,8053,8057,8061,8065],{"__ignoreMap":29},[34,8054,8055],{"class":36,"line":37},[34,8056,4153],{},[34,8058,8059],{"class":36,"line":43},[34,8060,4158],{},[34,8062,8063],{"class":36,"line":49},[34,8064,65],{"emptyLinePlaceholder":64},[34,8066,8067],{"class":36,"line":55},[34,8068,4216],{},[17,8070,4251],{"id":4251},[10,8072,8073,4256,8075,4260],{},[31,8074,4177],{},[31,8076,4259],{},[24,8078,8079],{"className":26,"code":4263,"language":28,"meta":29,"style":29},[31,8080,8081,8085,8089,8093,8097,8101,8105,8109],{"__ignoreMap":29},[34,8082,8083],{"class":36,"line":37},[34,8084,4019],{},[34,8086,8087],{"class":36,"line":43},[34,8088,252],{},[34,8090,8091],{"class":36,"line":49},[34,8092,4089],{},[34,8094,8095],{"class":36,"line":55},[34,8096,4094],{},[34,8098,8099],{"class":36,"line":61},[34,8100,123],{},[34,8102,8103],{"class":36,"line":68},[34,8104,58],{},[34,8106,8107],{"class":36,"line":74},[34,8108,65],{"emptyLinePlaceholder":64},[34,8110,8111],{"class":36,"line":79},[34,8112,4298],{},[10,8114,8115,4304,8117,4308],{},[31,8116,4303],{},[31,8118,4307],{},[10,8120,4311,8121,4314,8123,4317,8125,4320,8127,4323,8129,4326],{},[31,8122,4046],{},[31,8124,4008],{},[31,8126,4042],{},[31,8128,4307],{},[31,8130,4042],{},[17,8132,701],{"id":701},[681,8134,8135,8139,8141,8147,8151],{},[684,8136,4333,8137,4336],{},[31,8138,4046],{},[684,8140,4339],{},[684,8142,8143,4137,8145,4346],{},[31,8144,4136],{},[31,8146,4008],{},[684,8148,4349,8149,4353],{},[31,8150,4352],{},[684,8152,4356,8153,4360],{},[31,8154,4359],{},[10,8156,4363],{},[715,8158,717],{},{"title":29,"searchDepth":43,"depth":43,"links":8160},[8161,8162,8163,8164,8165,8166],{"id":3970,"depth":43,"text":3971},{"id":3998,"depth":43,"text":3999},{"id":4064,"depth":43,"text":4064},{"id":4170,"depth":43,"text":4171},{"id":4251,"depth":43,"text":4251},{"id":701,"depth":43,"text":701},{},{"title":3957,"description":4374},[743],{"id":4384,"title":4385,"body":8171,"description":4766,"extension":736,"meta":8466,"navigation":64,"path":4768,"publishDate":4769,"published":64,"seo":8467,"stem":4771,"tags":8468,"thumbnail":4773,"updated":4769,"__hash__":4774},{"type":7,"value":8172,"toc":8459},[8173,8175,8177,8179,8181,8183,8185,8190,8192,8196,8240,8248,8260,8262,8282,8284,8292,8294,8298,8342,8346,8358,8360,8380,8390,8394,8399,8401,8403,8411,8413,8431,8435,8437,8455,8457],[10,8174,12],{},[10,8176,4392],{},[10,8178,4395],{},[17,8180,4399],{"id":4398},[10,8182,4402],{},[10,8184,4405],{},[10,8186,4408,8187,4414],{},[1303,8188,4413],{"href":4411,"rel":8189},[1307],[17,8191,4417],{"id":4417},[10,8193,4420,8194,4424],{},[31,8195,4423],{},[24,8197,8198],{"className":26,"code":4427,"language":28,"meta":29,"style":29},[31,8199,8200,8204,8208,8212,8216,8220,8224,8228,8232,8236],{"__ignoreMap":29},[34,8201,8202],{"class":36,"line":37},[34,8203,4434],{},[34,8205,8206],{"class":36,"line":43},[34,8207,4439],{},[34,8209,8210],{"class":36,"line":49},[34,8211,4444],{},[34,8213,8214],{"class":36,"line":55},[34,8215,123],{},[34,8217,8218],{"class":36,"line":61},[34,8219,4453],{},[34,8221,8222],{"class":36,"line":68},[34,8223,4458],{},[34,8225,8226],{"class":36,"line":74},[34,8227,123],{},[34,8229,8230],{"class":36,"line":79},[34,8231,58],{},[34,8233,8234],{"class":36,"line":85},[34,8235,65],{"emptyLinePlaceholder":64},[34,8237,8238],{"class":36,"line":144},[34,8239,4475],{},[10,8241,8242,4481,8244,4485,8246,4489],{},[31,8243,4480],{},[31,8245,4484],{},[31,8247,4488],{},[24,8249,8250],{"className":26,"code":4492,"language":28,"meta":29,"style":29},[31,8251,8252,8256],{"__ignoreMap":29},[34,8253,8254],{"class":36,"line":37},[34,8255,4499],{},[34,8257,8258],{"class":36,"line":43},[34,8259,4504],{},[10,8261,4507],{},[24,8263,8264],{"className":26,"code":4510,"language":28,"meta":29,"style":29},[31,8265,8266,8270,8274,8278],{"__ignoreMap":29},[34,8267,8268],{"class":36,"line":37},[34,8269,4517],{},[34,8271,8272],{"class":36,"line":43},[34,8273,65],{"emptyLinePlaceholder":64},[34,8275,8276],{"class":36,"line":49},[34,8277,4526],{},[34,8279,8280],{"class":36,"line":55},[34,8281,4531],{},[10,8283,4534],{},[24,8285,8286],{"className":26,"code":4537,"language":28,"meta":29,"style":29},[31,8287,8288],{"__ignoreMap":29},[34,8289,8290],{"class":36,"line":37},[34,8291,4537],{},[17,8293,4547],{"id":4546},[10,8295,4550,8296,4554],{},[31,8297,4553],{},[24,8299,8300],{"className":26,"code":4557,"language":28,"meta":29,"style":29},[31,8301,8302,8306,8310,8314,8318,8322,8326,8330,8334,8338],{"__ignoreMap":29},[34,8303,8304],{"class":36,"line":37},[34,8305,4434],{},[34,8307,8308],{"class":36,"line":43},[34,8309,4439],{},[34,8311,8312],{"class":36,"line":49},[34,8313,4444],{},[34,8315,8316],{"class":36,"line":55},[34,8317,123],{},[34,8319,8320],{"class":36,"line":61},[34,8321,4453],{},[34,8323,8324],{"class":36,"line":68},[34,8325,4458],{},[34,8327,8328],{"class":36,"line":74},[34,8329,123],{},[34,8331,8332],{"class":36,"line":79},[34,8333,58],{},[34,8335,8336],{"class":36,"line":85},[34,8337,65],{"emptyLinePlaceholder":64},[34,8339,8340],{"class":36,"line":144},[34,8341,4600],{},[10,8343,8344,4605],{},[31,8345,4553],{},[24,8347,8348],{"className":26,"code":4608,"language":28,"meta":29,"style":29},[31,8349,8350,8354],{"__ignoreMap":29},[34,8351,8352],{"class":36,"line":37},[34,8353,4615],{},[34,8355,8356],{"class":36,"line":43},[34,8357,4620],{},[10,8359,4623],{},[24,8361,8362],{"className":26,"code":4626,"language":28,"meta":29,"style":29},[31,8363,8364,8368,8372,8376],{"__ignoreMap":29},[34,8365,8366],{"class":36,"line":37},[34,8367,4633],{},[34,8369,8370],{"class":36,"line":43},[34,8371,65],{"emptyLinePlaceholder":64},[34,8373,8374],{"class":36,"line":49},[34,8375,4642],{},[34,8377,8378],{"class":36,"line":55},[34,8379,4647],{},[10,8381,8382,4652,8384,1849,8386,1849,8388,4662],{},[31,8383,4553],{},[31,8385,4655],{},[31,8387,4658],{},[31,8389,4661],{},[10,8391,4665,8392,4669],{},[31,8393,4668],{},[10,8395,4672,8396,4678],{},[1303,8397,4677],{"href":4675,"rel":8398},[1307],[17,8400,4682],{"id":4681},[10,8402,4685],{},[24,8404,8405],{"className":26,"code":4688,"language":28,"meta":29,"style":29},[31,8406,8407],{"__ignoreMap":29},[34,8408,8409],{"class":36,"line":37},[34,8410,4688],{},[10,8412,4697],{},[681,8414,8415,8419,8425,8429],{},[684,8416,8417,4704],{},[31,8418,4655],{},[684,8420,8421,4709,8423,4713],{},[31,8422,302],{},[31,8424,4712],{},[684,8426,8427,4719],{},[31,8428,4718],{},[684,8430,4722],{},[10,8432,4725,8433,4728],{},[31,8434,4553],{},[17,8436,701],{"id":701},[681,8438,8439,8443,8445,8449,8453],{},[684,8440,8441,4737],{},[31,8442,4423],{},[684,8444,4740],{},[684,8446,8447,4745],{},[31,8448,4553],{},[684,8450,8451,4750],{},[31,8452,4553],{},[684,8454,4753],{},[10,8456,4756],{},[715,8458,717],{},{"title":29,"searchDepth":43,"depth":43,"links":8460},[8461,8462,8463,8464,8465],{"id":4398,"depth":43,"text":4399},{"id":4417,"depth":43,"text":4417},{"id":4546,"depth":43,"text":4547},{"id":4681,"depth":43,"text":4682},{"id":701,"depth":43,"text":701},{},{"title":4385,"description":4766},[743],{"id":4776,"title":4777,"body":8470,"description":5192,"extension":736,"meta":8792,"navigation":64,"path":5194,"publishDate":5195,"published":64,"seo":8793,"stem":5197,"tags":8794,"thumbnail":5199,"updated":5200,"__hash__":5201},{"type":7,"value":8471,"toc":8784},[8472,8474,8478,8480,8484,8488,8490,8492,8496,8502,8504,8508,8512,8520,8522,8558,8562,8574,8576,8580,8594,8596,8628,8636,8650,8654,8656,8658,8698,8710,8718,8728,8734,8746,8748,8752,8778,8782],[10,8473,12],{},[10,8475,4784,8476,4787],{},[31,8477,4307],{},[17,8479,4791],{"id":4790},[10,8481,8482,4796],{},[31,8483,4307],{},[10,8485,4799,8486,4802],{},[31,8487,4307],{},[10,8489,4805],{},[17,8491,4808],{"id":4808},[10,8493,4811,8494,4814],{},[31,8495,4307],{},[681,8497,8498,8500],{},[684,8499,4819],{},[684,8501,4822],{},[17,8503,4819],{"id":4819},[10,8505,4827,8506,4830],{},[31,8507,4307],{},[10,8509,4833,8510,4836],{},[31,8511,4042],{},[24,8513,8514],{"className":26,"code":4839,"language":28,"meta":29,"style":29},[31,8515,8516],{"__ignoreMap":29},[34,8517,8518],{"class":36,"line":37},[34,8519,4839],{},[10,8521,4848],{},[24,8523,8524],{"className":26,"code":4851,"language":28,"meta":29,"style":29},[31,8525,8526,8530,8534,8538,8542,8546,8550,8554],{"__ignoreMap":29},[34,8527,8528],{"class":36,"line":37},[34,8529,4019],{},[34,8531,8532],{"class":36,"line":43},[34,8533,252],{},[34,8535,8536],{"class":36,"line":49},[34,8537,4866],{},[34,8539,8540],{"class":36,"line":55},[34,8541,4871],{},[34,8543,8544],{"class":36,"line":61},[34,8545,123],{},[34,8547,8548],{"class":36,"line":68},[34,8549,58],{},[34,8551,8552],{"class":36,"line":74},[34,8553,65],{"emptyLinePlaceholder":64},[34,8555,8556],{"class":36,"line":79},[34,8557,4888],{},[10,8559,4891,8560,4895],{},[31,8561,4894],{},[10,8563,8564,4901,8566,4904,8568,4907,8570,4904,8572,4914],{},[31,8565,4900],{},[31,8567,4307],{},[31,8569,4042],{},[31,8571,4910],{},[31,8573,4913],{},[17,8575,4822],{"id":4822},[10,8577,4919,8578,4922],{},[31,8579,4307],{},[681,8581,8582,8588],{},[684,8583,4927,8584,4930,8586,4934],{},[31,8585,4307],{},[31,8587,4933],{},[684,8589,4937,8590,4904,8592,4942],{},[31,8591,4307],{},[31,8593,302],{},[10,8595,4945],{},[24,8597,8598],{"className":26,"code":4948,"language":28,"meta":29,"style":29},[31,8599,8600,8604,8608,8612,8616,8620,8624],{"__ignoreMap":29},[34,8601,8602],{"class":36,"line":37},[34,8603,4955],{},[34,8605,8606],{"class":36,"line":43},[34,8607,65],{"emptyLinePlaceholder":64},[34,8609,8610],{"class":36,"line":49},[34,8611,4964],{},[34,8613,8614],{"class":36,"line":55},[34,8615,4969],{},[34,8617,8618],{"class":36,"line":61},[34,8619,58],{},[34,8621,8622],{"class":36,"line":68},[34,8623,65],{"emptyLinePlaceholder":64},[34,8625,8626],{"class":36,"line":74},[34,8627,4982],{},[10,8629,4985,8630,4988,8632,4992,8634,4895],{},[31,8631,4910],{},[31,8633,4991],{},[31,8635,4894],{},[4996,8637,8638],{},[10,8639,8640,4485,8642,5005,8644,5008,8646,5012,8648,5015],{},[31,8641,5002],{},[31,8643,1559],{},[31,8645,4933],{},[31,8647,5011],{},[31,8649,4933],{},[10,8651,5018,8652,5021],{},[31,8653,4307],{},[17,8655,5024],{"id":5024},[10,8657,5027],{},[24,8659,8660],{"className":26,"code":5030,"language":28,"meta":29,"style":29},[31,8661,8662,8666,8670,8674,8678,8682,8686,8690,8694],{"__ignoreMap":29},[34,8663,8664],{"class":36,"line":37},[34,8665,4019],{},[34,8667,8668],{"class":36,"line":43},[34,8669,252],{},[34,8671,8672],{"class":36,"line":49},[34,8673,4866],{},[34,8675,8676],{"class":36,"line":55},[34,8677,4871],{},[34,8679,8680],{"class":36,"line":61},[34,8681,123],{},[34,8683,8684],{"class":36,"line":68},[34,8685,58],{},[34,8687,8688],{"class":36,"line":74},[34,8689,65],{"emptyLinePlaceholder":64},[34,8691,8692],{"class":36,"line":79},[34,8693,5065],{},[34,8695,8696],{"class":36,"line":85},[34,8697,4982],{},[10,8699,8700,5075,8702,5078,8704,5082,8706,3886,8708,5087],{},[31,8701,5074],{},[31,8703,4900],{},[31,8705,5081],{},[31,8707,4307],{},[31,8709,4042],{},[10,8711,4985,8712,4988,8714,5094,8716,5097],{},[31,8713,4307],{},[31,8715,4933],{},[31,8717,4991],{},[10,8719,5100,8720,4988,8722,5105,8724,5108,8726,5111],{},[31,8721,4307],{},[31,8723,302],{},[31,8725,4910],{},[31,8727,482],{},[10,8729,5114,8730,5118,8732,5121],{},[31,8731,5117],{},[31,8733,4307],{},[24,8735,8736],{"className":26,"code":5124,"language":28,"meta":29,"style":29},[31,8737,8738,8742],{"__ignoreMap":29},[34,8739,8740],{"class":36,"line":37},[34,8741,5131],{},[34,8743,8744],{"class":36,"line":43},[34,8745,5136],{},[17,8747,701],{"id":701},[10,8749,8750,5143],{},[31,8751,4307],{},[681,8753,8754,8762,8770,8772],{},[684,8755,8756,5150,8758,4904,8760,4934],{},[31,8757,4900],{},[31,8759,4307],{},[31,8761,4042],{},[684,8763,8764,5159,8766,5162,8768,4942],{},[31,8765,5081],{},[31,8767,4933],{},[31,8769,302],{},[684,8771,5167],{},[684,8773,5170,8774,5173,8776,5176],{},[31,8775,5117],{},[31,8777,4307],{},[10,8779,8780,5181],{},[31,8781,4307],{},[715,8783,717],{},{"title":29,"searchDepth":43,"depth":43,"links":8785},[8786,8787,8788,8789,8790,8791],{"id":4790,"depth":43,"text":4791},{"id":4808,"depth":43,"text":4808},{"id":4819,"depth":43,"text":4819},{"id":4822,"depth":43,"text":4822},{"id":5024,"depth":43,"text":5024},{"id":701,"depth":43,"text":701},{},{"title":4777,"description":5192},[743],[8796],{"id":8797,"title":8798,"author":8799,"body":8800,"description":9443,"extension":736,"meta":9444,"navigation":64,"path":9445,"publishDate":9446,"published":64,"publisher":9447,"seo":9448,"stem":9449,"tags":9450,"__hash__":9452},"books\u002Fbooks\u002F2025\u002Forganize-learned-from-docker.md","Docker&仮想サーバー完全入門","リブロワークス",{"type":7,"value":8801,"toc":9430},[8802,8810,8813,8817,8820,8823,8829,8833,8836,8888,8903,8906,8927,8930,8934,8940,8964,8974,8981,8986,8992,9005,9011,9019,9025,9073,9079,9104,9108,9115,9150,9156,9159,9162,9215,9218,9225,9239,9242,9259,9269,9293,9296,9303,9317,9328,9348,9360,9364,9367,9374,9380,9383,9386,9388,9391,9394,9424,9427],[10,8803,8804,8805,8809],{},"『",[1303,8806,8798],{"href":8807,"rel":8808},"https:\u002F\u002Fbook.impress.co.jp\u002Fbooks\u002F1121101138",[1307],"』を読了したため、本書を通して学んだことをまとめます。",[10,8811,8812],{},"まだ1周目で理解が浅い部分もあるため、Dockerを実際に使いながら必要に応じて追記していきます。",[17,8814,8816],{"id":8815},"dockerでホスト環境への影響を抑える","Dockerでホスト環境への影響を抑える",[10,8818,8819],{},"Dockerを利用すると、アプリケーションに必要なランタイムやライブラリをコンテナ内にまとめられます。",[10,8821,8822],{},"ホストOSへ依存関係を直接インストールする場面を減らせるため、開発環境を整理しやすくなります。また、DockerfileやComposeファイルを共有することで、チーム内で環境を再現しやすくなります。",[203,8824,8826],{"title":8825,"type":206},"ホストOSから完全に独立するわけではない",[10,8827,8828],{},"コンテナはホストのカーネルやDocker Engineを利用します。ボリューム、ポート、CPUアーキテクチャなど、ホスト環境との接点がなくなるわけではありません。",[17,8830,8832],{"id":8831},"dockerコマンドで操作対象を明示する","Dockerコマンドで操作対象を明示する",[10,8834,8835],{},"Docker CLIには、操作対象を含めて記述するコマンドがあります。",[24,8837,8841],{"className":8838,"code":8839,"language":8840,"meta":29,"style":29},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","docker container run nginx\ndocker image pull nginx\ndocker volume ls\ndocker network ls\n","bash",[31,8842,8843,8857,8869,8879],{"__ignoreMap":29},[34,8844,8845,8848,8851,8854],{"class":36,"line":37},[34,8846,8847],{"class":1661},"docker",[34,8849,8850],{"class":1370}," container",[34,8852,8853],{"class":1370}," run",[34,8855,8856],{"class":1370}," nginx\n",[34,8858,8859,8861,8864,8867],{"class":36,"line":43},[34,8860,8847],{"class":1661},[34,8862,8863],{"class":1370}," image",[34,8865,8866],{"class":1370}," pull",[34,8868,8856],{"class":1370},[34,8870,8871,8873,8876],{"class":36,"line":49},[34,8872,8847],{"class":1661},[34,8874,8875],{"class":1370}," volume",[34,8877,8878],{"class":1370}," ls\n",[34,8880,8881,8883,8886],{"class":36,"line":55},[34,8882,8847],{"class":1661},[34,8884,8885],{"class":1370}," network",[34,8887,8878],{"class":1370},[10,8889,8890,1849,8893,1849,8896,1849,8899,8902],{},[31,8891,8892],{},"container",[31,8894,8895],{},"image",[31,8897,8898],{},"volume",[31,8900,8901],{},"network","のように対象が明示されるため、何を操作するコマンドなのか把握しやすくなります。",[10,8904,8905],{},"一方で、次の短い形式も現在利用できます。",[24,8907,8909],{"className":8838,"code":8908,"language":8840,"meta":29,"style":29},"docker run nginx\ndocker pull nginx\n",[31,8910,8911,8919],{"__ignoreMap":29},[34,8912,8913,8915,8917],{"class":36,"line":37},[34,8914,8847],{"class":1661},[34,8916,8853],{"class":1370},[34,8918,8856],{"class":1370},[34,8920,8921,8923,8925],{"class":36,"line":43},[34,8922,8847],{"class":1661},[34,8924,8866],{"class":1370},[34,8926,8856],{"class":1370},[10,8928,8929],{},"短い形式を古いという理由だけで避ける必要はありません。学習時には対象を含む形式も知っておくと、CLIの構造を理解しやすいと感じました。",[17,8931,8933],{"id":8932},"docker-compose-v2を利用する","Docker Compose V2を利用する",[10,8935,8936,8937,443],{},"現在のCompose CLIでは、ハイフンのない",[31,8938,8939],{},"docker compose",[24,8941,8943],{"className":8838,"code":8942,"language":8840,"meta":29,"style":29},"docker compose up\ndocker compose down\n",[31,8944,8945,8955],{"__ignoreMap":29},[34,8946,8947,8949,8952],{"class":36,"line":37},[34,8948,8847],{"class":1661},[34,8950,8951],{"class":1370}," compose",[34,8953,8954],{"class":1370}," up\n",[34,8956,8957,8959,8961],{"class":36,"line":43},[34,8958,8847],{"class":1661},[34,8960,8951],{"class":1370},[34,8962,8963],{"class":1370}," down\n",[10,8965,8966,8967,8970,8971,8973],{},"旧Compose V1で使われていた",[31,8968,8969],{},"docker-compose","とはコマンド形式が異なります。Docker DesktopにはCompose CLIが含まれているため、基本的には",[31,8972,8939],{},"を利用します。",[17,8975,8977,8978,689],{"id":8976},"composeファイルはcomposeyamlを使う","Composeファイルは",[31,8979,8980],{},"compose.yaml",[10,8982,8983,8984,179],{},"Composeファイルの推奨ファイル名は",[31,8985,8980],{},[24,8987,8990],{"className":8988,"code":8989,"language":1371,"meta":29},[3876],"compose.yaml\n",[31,8991,8989],{"__ignoreMap":29},[10,8993,8994,8997,8998,175,9001,9004],{},[31,8995,8996],{},"compose.yml","も利用できます。また、",[31,8999,9000],{},"docker-compose.yaml",[31,9002,9003],{},"docker-compose.yml","も後方互換性のためサポートされています。",[10,9006,9007,9008,9010],{},"複数の候補が同じ場所にある場合は",[31,9009,8980],{},"が優先されるため、新しく作る場合はこの名前へ揃えると分かりやすくなります。",[17,9012,9014,9015,9018],{"id":9013},"トップレベルのversionは不要","トップレベルの",[31,9016,9017],{},"version","は不要",[10,9020,9021,9022,9024],{},"以前のComposeファイルでは、先頭に次のような",[31,9023,9017],{},"を書く例がありました。",[24,9026,9030],{"className":9027,"code":9028,"language":9029,"meta":29,"style":29},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","version: '3'\n\nservices:\n web:\n image: nginx\n","yaml",[31,9031,9032,9045,9049,9057,9064],{"__ignoreMap":29},[34,9033,9034,9036,9038,9040,9043],{"class":36,"line":37},[34,9035,9017],{"class":1356},[34,9037,1780],{"class":1352},[34,9039,1508],{"class":1352},[34,9041,9042],{"class":1370},"3",[34,9044,1513],{"class":1352},[34,9046,9047],{"class":36,"line":43},[34,9048,65],{"emptyLinePlaceholder":64},[34,9050,9051,9054],{"class":36,"line":49},[34,9052,9053],{"class":1356},"services",[34,9055,9056],{"class":1352},":\n",[34,9058,9059,9062],{"class":36,"line":55},[34,9060,9061],{"class":1356}," web",[34,9063,9056],{"class":1352},[34,9065,9066,9069,9071],{"class":36,"line":61},[34,9067,9068],{"class":1356}," image",[34,9070,1780],{"class":1352},[34,9072,8856],{"class":1370},[10,9074,9075,9076,9078],{},"現在、トップレベルの",[31,9077,9017],{},"は後方互換性のために残されたobsoleteな項目です。指定してもComposeは最新のスキーマでファイルを検証するため、新しいComposeファイルでは省略します。",[24,9080,9082],{"className":9027,"code":9081,"language":9029,"meta":29,"style":29},"services:\n web:\n image: nginx\n",[31,9083,9084,9090,9096],{"__ignoreMap":29},[34,9085,9086,9088],{"class":36,"line":37},[34,9087,9053],{"class":1356},[34,9089,9056],{"class":1352},[34,9091,9092,9094],{"class":36,"line":43},[34,9093,9061],{"class":1356},[34,9095,9056],{"class":1352},[34,9097,9098,9100,9102],{"class":36,"line":49},[34,9099,9068],{"class":1356},[34,9101,1780],{"class":1352},[34,9103,8856],{"class":1370},[17,9105,9107],{"id":9106},"restart-policyは用途に合わせて設定する","restart policyは用途に合わせて設定する",[10,9109,9110,9111,9114],{},"Composeのサービスには、コンテナを再起動する条件を",[31,9112,9113],{},"restart","で設定できます。",[24,9116,9118],{"className":9027,"code":9117,"language":9029,"meta":29,"style":29},"services:\n web:\n image: nginx\n restart: always\n",[31,9119,9120,9126,9132,9140],{"__ignoreMap":29},[34,9121,9122,9124],{"class":36,"line":37},[34,9123,9053],{"class":1356},[34,9125,9056],{"class":1352},[34,9127,9128,9130],{"class":36,"line":43},[34,9129,9061],{"class":1356},[34,9131,9056],{"class":1352},[34,9133,9134,9136,9138],{"class":36,"line":49},[34,9135,9068],{"class":1356},[34,9137,1780],{"class":1352},[34,9139,8856],{"class":1370},[34,9141,9142,9145,9147],{"class":36,"line":55},[34,9143,9144],{"class":1356}," restart",[34,9146,1780],{"class":1352},[34,9148,9149],{"class":1370}," always\n",[10,9151,9152,9155],{},[31,9153,9154],{},"always","を指定したコンテナは、停止した場合やDockerデーモンが再起動した場合に再起動されます。",[10,9157,9158],{},"常時稼働が必要なサービスでは便利ですが、学習用コンテナへ一律に指定すると、Docker起動時に意図しないコンテナまで立ち上がることがあります。必要性を考えて設定することが大切です。",[10,9160,9161],{},"主なrestart policyには次があります。",[1817,9163,9164,9174],{},[1820,9165,9166],{},[1823,9167,9168,9171],{},[1826,9169,9170],{},"値",[1826,9172,9173],{},"動作",[1836,9175,9176,9186,9196,9205],{},[1823,9177,9178,9183],{},[1841,9179,9180],{},[31,9181,9182],{},"no",[1841,9184,9185],{},"自動的に再起動しない",[1823,9187,9188,9193],{},[1841,9189,9190],{},[31,9191,9192],{},"on-failure",[1841,9194,9195],{},"エラー終了した場合に再起動する",[1823,9197,9198,9202],{},[1841,9199,9200],{},[31,9201,9154],{},[1841,9203,9204],{},"停止した場合に常に再起動する",[1823,9206,9207,9212],{},[1841,9208,9209],{},[31,9210,9211],{},"unless-stopped",[1841,9213,9214],{},"明示的に停止されていない限り再起動する",[17,9216,9217],{"id":9217},"コンテナのログを確認する",[10,9219,9220,9221,9224],{},"Composeで起動したサービスのログは",[31,9222,9223],{},"docker compose logs","で確認できます。",[24,9226,9228],{"className":8838,"code":9227,"language":8840,"meta":29,"style":29},"docker compose logs\n",[31,9229,9230],{"__ignoreMap":29},[34,9231,9232,9234,9236],{"class":36,"line":37},[34,9233,8847],{"class":1661},[34,9235,8951],{"class":1370},[34,9237,9238],{"class":1370}," logs\n",[10,9240,9241],{},"サービスを指定すると、対象のログだけを表示できます。",[24,9243,9245],{"className":8838,"code":9244,"language":8840,"meta":29,"style":29},"docker compose logs web\n",[31,9246,9247],{"__ignoreMap":29},[34,9248,9249,9251,9253,9256],{"class":36,"line":37},[34,9250,8847],{"class":1661},[34,9252,8951],{"class":1370},[34,9254,9255],{"class":1370}," logs",[34,9257,9258],{"class":1370}," web\n",[10,9260,9261,9262,9265,9266,443],{},"ログを継続して追いかける場合は",[31,9263,9264],{},"--follow","、末尾の行数を限定する場合は",[31,9267,9268],{},"--tail",[24,9270,9272],{"className":8838,"code":9271,"language":8840,"meta":29,"style":29},"docker compose logs --follow --tail 100 web\n",[31,9273,9274],{"__ignoreMap":29},[34,9275,9276,9278,9280,9282,9285,9288,9291],{"class":36,"line":37},[34,9277,8847],{"class":1661},[34,9279,8951],{"class":1370},[34,9281,9255],{"class":1370},[34,9283,9284],{"class":1370}," --follow",[34,9286,9287],{"class":1370}," --tail",[34,9289,9290],{"class":1942}," 100",[34,9292,9258],{"class":1370},[17,9294,9295],{"id":9295},"イメージを再ビルドする",[10,9297,9298,9299,9302],{},"Composeでイメージをビルドするには",[31,9300,9301],{},"docker compose build","を使います。",[24,9304,9306],{"className":8838,"code":9305,"language":8840,"meta":29,"style":29},"docker compose build\n",[31,9307,9308],{"__ignoreMap":29},[34,9309,9310,9312,9314],{"class":36,"line":37},[34,9311,8847],{"class":1661},[34,9313,8951],{"class":1370},[34,9315,9316],{"class":1370}," build\n",[10,9318,9319,9320,9323,9324,9327],{},"コンテナの起動前にビルドも実行したい場合は、",[31,9321,9322],{},"docker compose up","へ",[31,9325,9326],{},"--build","を付けられます。",[24,9329,9331],{"className":8838,"code":9330,"language":8840,"meta":29,"style":29},"docker compose up --detach --build\n",[31,9332,9333],{"__ignoreMap":29},[34,9334,9335,9337,9339,9342,9345],{"class":36,"line":37},[34,9336,8847],{"class":1661},[34,9338,8951],{"class":1370},[34,9340,9341],{"class":1370}," up",[34,9343,9344],{"class":1370}," --detach",[34,9346,9347],{"class":1370}," --build\n",[10,9349,9350,9352,9353,299,9356,9359],{},[31,9351,9322],{},"は、サービスの設定やイメージが変更されている場合にコンテナを再作成します。ただし、Dockerfileやビルド対象を確実に再ビルドしてから起動したい場合は、",[31,9354,9355],{},"build",[31,9357,9358],{},"up --build","を明示すると意図が分かりやすくなります。",[17,9361,9363],{"id":9362},"dev-containerで開発環境をコンテナ化する","Dev Containerで開発環境をコンテナ化する",[10,9365,9366],{},"VS CodeのDev Containers拡張機能を使うと、コンテナを開発環境として利用できます。",[10,9368,9369,9370,9373],{},"プロジェクト内の",[31,9371,9372],{},".devcontainer\u002Fdevcontainer.json","へ設定を記述し、コンテナ内のランタイム、ツール、VS Code拡張機能などを揃えられます。",[24,9375,9378],{"className":9376,"code":9377,"language":1371,"meta":29},[3876],".devcontainer\u002F\n devcontainer.json\n",[31,9379,9377],{"__ignoreMap":29},[10,9381,9382],{},"ソースコードをコンテナへマウントし、ターミナル、補完、コードナビゲーション、デバッグなどを普段のVS Codeと近い操作感で利用できます。",[10,9384,9385],{},"環境構築手順を文章だけで共有するよりも、実行環境そのものを設定として共有できる点が便利だと感じました。",[17,9387,701],{"id":701},[10,9389,9390],{},"本書を通して、Dockerの基本操作だけでなく、Composeによる複数コンテナの管理や、開発環境をコンテナ化する考え方を学べました。",[10,9392,9393],{},"特に、次の点を今後の開発でも意識したいです。",[681,9395,9396,9399,9404,9409,9415,9418,9421],{},[684,9397,9398],{},"Docker CLIで何を操作しているか理解する",[684,9400,9401,9402,689],{},"Compose V2の",[31,9403,8939],{},[684,9405,8977,9406,9408],{},[31,9407,8980],{},"へ揃える",[684,9410,9411,9412,9414],{},"不要な",[31,9413,9017],{},"を記述しない",[684,9416,9417],{},"restart policyを用途に合わせて設定する",[684,9419,9420],{},"ログ確認と再ビルドのコマンドを使い分ける",[684,9422,9423],{},"Dev Containerで再現可能な開発環境を試す",[10,9425,9426],{},"Dockerはコマンドを覚えるだけでなく、イメージ、コンテナ、ボリューム、ネットワークの関係を実際に操作しながら理解していきたいです。",[715,9428,9429],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":29,"searchDepth":43,"depth":43,"links":9431},[9432,9433,9434,9435,9437,9438,9439,9440,9441,9442],{"id":8815,"depth":43,"text":8816},{"id":8831,"depth":43,"text":8832},{"id":8932,"depth":43,"text":8933},{"id":8976,"depth":43,"text":9436},"Composeファイルはcompose.yamlを使う",{"id":9013,"depth":43,"text":9013},{"id":9106,"depth":43,"text":9107},{"id":9217,"depth":43,"text":9217},{"id":9295,"depth":43,"text":9295},{"id":9362,"depth":43,"text":9363},{"id":701,"depth":43,"text":701},"『Docker&仮想サーバー完全入門』を読了したため、本書を通して学んだことをまとめます。",{},"\u002Fbooks\u002F2025\u002Forganize-learned-from-docker","2025-02-22","インプレス",{"title":8798,"description":9443},"books\u002F2025\u002Forganize-learned-from-docker",[9451],"Docker","tZTXcHlrKtyN5T4H4BpRH6Dc272-Srw05uyFSfG7w5Q",1786277109318]