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