[{"data":1,"prerenderedAt":10255},["ShallowReactive",2],{"article:\u002Farticles\u002F2024\u002Forganize-learned-from-todo":3,"related-articles:\u002Farticles\u002F2024\u002Forganize-learned-from-todo":1726,"search:articles":6004,"search:books":9597},{"id":4,"title":5,"body":6,"description":1716,"extension":1717,"meta":1718,"navigation":141,"path":1719,"publishDate":1720,"published":141,"seo":1721,"stem":1722,"tags":1723,"thumbnail":1724,"updated":1720,"__hash__":1725},"articles\u002Farticles\u002F2024\u002Forganize-learned-from-todo.md","Todoアプリのハンズオンで学んだことを整理する",{"type":7,"value":8,"toc":1687},"minimark",[9,13,24,40,44,53,62,105,108,116,119,122,125,178,181,185,188,199,202,205,211,220,436,448,451,454,556,559,562,656,659,662,692,695,698,709,858,861,864,867,870,873,882,894,962,968,973,979,1022,1027,1030,1033,1099,1106,1109,1116,1229,1238,1245,1250,1310,1313,1316,1319,1414,1417,1423,1442,1452,1455,1458,1537,1544,1547,1550,1671,1674,1677,1680,1683],[10,11,12],"p",{},"こんにちは、Yuriです。",[10,14,15,16,23],{},"今回は「",[17,18,22],"a",{"href":19,"rel":20},"https:\u002F\u002Fzenn.dev\u002Fsprout2000\u002Fbooks\u002F76a279bb90c3f3",[21],"nofollow","React Hooks と TypeScript でつくる Todo PWA ～入門 React ハンズオン～","」を進める中で学んだことを、次の4つに分けて整理します。",[25,26,27,31,34,37],"ul",{},[28,29,30],"li",{},"HTML",[28,32,33],{},"JavaScript",[28,35,36],{},"React",[28,38,39],{},"TypeScript",[41,42,30],"h2",{"id":43},"html",[45,46,48,52],"h3",{"id":47},"autofocus属性",[49,50,51],"code",{},"autofocus","属性",[10,54,55,57,58,61],{},[49,56,51],{},"は、ページの読み込み時や",[49,59,60],{},"dialog","要素の表示時に、指定した要素へ自動的にフォーカスするための属性です。",[63,64,68],"pre",{"className":65,"code":66,"language":43,"meta":67,"style":67},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cinput type=\"text\" autofocus>\n","",[49,69,70],{"__ignoreMap":67},[71,72,75,79,83,87,90,93,97,99,102],"span",{"class":73,"line":74},"line",1,[71,76,78],{"class":77},"sMK4o","\u003C",[71,80,82],{"class":81},"swJcz","input",[71,84,86],{"class":85},"spNyl"," type",[71,88,89],{"class":77},"=",[71,91,92],{"class":77},"\"",[71,94,96],{"class":95},"sfazB","text",[71,98,92],{"class":77},[71,100,101],{"class":85}," autofocus",[71,103,104],{"class":77},">\n",[10,106,107],{},"1つの文書やダイアログ内では、複数の要素へ指定しないようにします。複数指定した場合、最初に見つかった要素がフォーカスされます。",[109,110,113],"article-callout",{"title":111,"type":112},"アクセシビリティへの配慮","caution",[10,114,115],{},"ページを開いた直後にフォーカスが移動すると、スクリーンリーダー利用者やモバイル利用者を混乱させる場合があります。本当に自動フォーカスが必要かを検討して使用しましょう。",[41,117,33],{"id":118},"javascript",[45,120,121],{"id":121},"オブジェクトのプロパティ名を動的にする",[10,123,124],{},"オブジェクトリテラルのプロパティ名を角括弧で囲むと、式の評価結果をプロパティ名として使用できます。これは計算プロパティ名と呼ばれます。",[63,126,129],{"className":127,"code":128,"language":118,"meta":67,"style":67},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","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",[49,130,131,136,143,149,155,161,166,172],{"__ignoreMap":67},[71,132,133],{"class":73,"line":74},[71,134,135],{},"const key = 'sampleKey'\n",[71,137,139],{"class":73,"line":138},2,[71,140,142],{"emptyLinePlaceholder":141},true,"\n",[71,144,146],{"class":73,"line":145},3,[71,147,148],{},"const sample = {\n",[71,150,152],{"class":73,"line":151},4,[71,153,154],{},"  [key]: 'sampleValue',\n",[71,156,158],{"class":73,"line":157},5,[71,159,160],{},"}\n",[71,162,164],{"class":73,"line":163},6,[71,165,142],{"emptyLinePlaceholder":141},[71,167,169],{"class":73,"line":168},7,[71,170,171],{},"console.log(sample) \u002F\u002F { sampleKey: 'sampleValue' }\n",[71,173,175],{"class":73,"line":174},8,[71,176,177],{},"console.log(sample[key]) \u002F\u002F 'sampleValue'\n",[10,179,180],{},"入力項目の名前をキーとしてオブジェクトを更新する場合などに利用できます。",[45,182,184],{"id":183},"tree-shaking","Tree Shaking",[10,186,187],{},"Tree Shakingは、利用されていないコードをビルド結果から取り除く最適化です。",[10,189,190,191,194,195,198],{},"主にバンドラーがES Modulesの",[49,192,193],{},"import","と",[49,196,197],{},"export","を静的に解析し、参照されていないエクスポートを出力対象から除外します。",[10,200,201],{},"実際に削除できる範囲は、バンドラーの設定やコードに副作用があるかどうかによって変わります。",[41,203,36],{"id":204},"react",[45,206,208],{"id":207},"createroot",[49,209,210],{},"createRoot",[10,212,213,215,216,219],{},[49,214,210],{},"は、Reactが管理するルートをブラウザのDOM要素へ作成するAPIです。作成したルートの",[49,217,218],{},"render","メソッドへReact要素を渡して表示します。",[63,221,225],{"className":222,"code":223,"language":224,"meta":67,"style":67},"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",[49,226,227,253,273,290,294,328,332,349,371,376,381,396,408,420,431],{"__ignoreMap":67},[71,228,229,232,235,239,242,245,248,250],{"class":73,"line":74},[71,230,193],{"class":231},"s7zQu",[71,233,234],{"class":77}," {",[71,236,238],{"class":237},"sTEyZ"," StrictMode",[71,240,241],{"class":77}," }",[71,243,244],{"class":231}," from",[71,246,247],{"class":77}," '",[71,249,204],{"class":95},[71,251,252],{"class":77},"'\n",[71,254,255,257,259,262,264,266,268,271],{"class":73,"line":138},[71,256,193],{"class":231},[71,258,234],{"class":77},[71,260,261],{"class":237}," createRoot",[71,263,241],{"class":77},[71,265,244],{"class":231},[71,267,247],{"class":77},[71,269,270],{"class":95},"react-dom\u002Fclient",[71,272,252],{"class":77},[71,274,275,277,280,283,285,288],{"class":73,"line":145},[71,276,193],{"class":231},[71,278,279],{"class":237}," App ",[71,281,282],{"class":231},"from",[71,284,247],{"class":77},[71,286,287],{"class":95},".\u002FApp",[71,289,252],{"class":77},[71,291,292],{"class":73,"line":151},[71,293,142],{"emptyLinePlaceholder":141},[71,295,296,299,302,304,307,310,314,317,320,323,325],{"class":73,"line":157},[71,297,298],{"class":85},"const",[71,300,301],{"class":237}," container ",[71,303,89],{"class":77},[71,305,306],{"class":237}," document",[71,308,309],{"class":77},".",[71,311,313],{"class":312},"s2Zo4","getElementById",[71,315,316],{"class":237},"(",[71,318,319],{"class":77},"'",[71,321,322],{"class":95},"root",[71,324,319],{"class":77},[71,326,327],{"class":237},")\n",[71,329,330],{"class":73,"line":163},[71,331,142],{"emptyLinePlaceholder":141},[71,333,334,337,340,343,346],{"class":73,"line":168},[71,335,336],{"class":231},"if",[71,338,339],{"class":237}," (",[71,341,342],{"class":77},"!",[71,344,345],{"class":237},"container) ",[71,347,348],{"class":77},"{\n",[71,350,351,354,357,360,362,364,367,369],{"class":73,"line":174},[71,352,353],{"class":231},"  throw",[71,355,356],{"class":77}," new",[71,358,359],{"class":312}," Error",[71,361,316],{"class":81},[71,363,319],{"class":77},[71,365,366],{"class":95},"root要素が見つかりません",[71,368,319],{"class":77},[71,370,327],{"class":81},[71,372,374],{"class":73,"line":373},9,[71,375,160],{"class":77},[71,377,379],{"class":73,"line":378},10,[71,380,142],{"emptyLinePlaceholder":141},[71,382,384,386,389,391,393],{"class":73,"line":383},11,[71,385,210],{"class":312},[71,387,388],{"class":237},"(container)",[71,390,309],{"class":77},[71,392,218],{"class":312},[71,394,395],{"class":237},"(\n",[71,397,399,402,406],{"class":73,"line":398},12,[71,400,401],{"class":77},"  \u003C",[71,403,405],{"class":404},"sBMFI","StrictMode",[71,407,104],{"class":77},[71,409,411,414,417],{"class":73,"line":410},13,[71,412,413],{"class":77},"    \u003C",[71,415,416],{"class":404},"App",[71,418,419],{"class":77}," \u002F>\n",[71,421,423,426,428],{"class":73,"line":422},14,[71,424,425],{"class":77},"  \u003C\u002F",[71,427,405],{"class":404},[71,429,430],{"class":77},">,\n",[71,432,434],{"class":73,"line":433},15,[71,435,327],{"class":237},[10,437,438,440,441,443,444,447],{},[49,439,210],{},"へ渡したDOM要素の内側はReactが管理します。サーバー側でReactが生成したHTMLを再利用する場合は、",[49,442,210],{},"ではなく",[49,445,446],{},"hydrateRoot","を使用します。",[45,449,450],{"id":450},"stateを直接変更しない",[10,452,453],{},"Reactのstateに保存したオブジェクトや配列は、読み取り専用として扱います。値を直接変更せず、新しい値を作ってset関数へ渡します。",[63,455,457],{"className":222,"code":456,"language":224,"meta":67,"style":67},"setTodos(currentTodos =>\n  currentTodos.map(todo =>\n    todo.id === id\n      ? { ...todo, completed: true }\n      : todo,\n  ),\n)\n",[49,458,459,473,490,506,534,545,552],{"__ignoreMap":67},[71,460,461,464,466,470],{"class":73,"line":74},[71,462,463],{"class":312},"setTodos",[71,465,316],{"class":237},[71,467,469],{"class":468},"sHdIc","currentTodos",[71,471,472],{"class":85}," =>\n",[71,474,475,478,480,483,485,488],{"class":73,"line":138},[71,476,477],{"class":237},"  currentTodos",[71,479,309],{"class":77},[71,481,482],{"class":312},"map",[71,484,316],{"class":237},[71,486,487],{"class":468},"todo",[71,489,472],{"class":85},[71,491,492,495,497,500,503],{"class":73,"line":145},[71,493,494],{"class":237},"    todo",[71,496,309],{"class":77},[71,498,499],{"class":237},"id ",[71,501,502],{"class":77},"===",[71,504,505],{"class":237}," id\n",[71,507,508,511,513,516,518,521,524,527,531],{"class":73,"line":151},[71,509,510],{"class":77},"      ?",[71,512,234],{"class":77},[71,514,515],{"class":77}," ...",[71,517,487],{"class":237},[71,519,520],{"class":77},",",[71,522,523],{"class":81}," completed",[71,525,526],{"class":77},":",[71,528,530],{"class":529},"sfNiH"," true",[71,532,533],{"class":77}," }\n",[71,535,536,539,542],{"class":73,"line":157},[71,537,538],{"class":77},"      :",[71,540,541],{"class":237}," todo",[71,543,544],{"class":77},",\n",[71,546,547,550],{"class":73,"line":163},[71,548,549],{"class":237},"  )",[71,551,544],{"class":77},[71,553,554],{"class":73,"line":168},[71,555,327],{"class":237},[10,557,558],{},"配列を新しく作っても、その中にあるオブジェクトまでは自動的に複製されません。更新対象のオブジェクトもスプレッド構文などで新しく作る必要があります。",[10,560,561],{},"配列を更新する際は、次のように破壊的な操作を避けます。",[563,564,565,581],"table",{},[566,567,568],"thead",{},[569,570,571,575,578],"tr",{},[572,573,574],"th",{},"操作",[572,576,577],{},"避けたい方法",[572,579,580],{},"利用する方法",[582,583,584,605,626,640],"tbody",{},[569,585,586,590,599],{},[587,588,589],"td",{},"追加",[587,591,592,595,596],{},[49,593,594],{},"push","、",[49,597,598],{},"unshift",[587,600,601,602],{},"スプレッド構文、",[49,603,604],{},"concat",[569,606,607,610,618],{},[587,608,609],{},"削除",[587,611,612,595,615],{},[49,613,614],{},"pop",[49,616,617],{},"splice",[587,619,620,595,623],{},[49,621,622],{},"filter",[49,624,625],{},"slice",[569,627,628,631,636],{},[587,629,630],{},"置換",[587,632,633,634],{},"添字への代入、",[49,635,617],{},[587,637,638],{},[49,639,482],{},[569,641,642,645,651],{},[587,643,644],{},"並び替え",[587,646,647,648],{},"元配列への",[49,649,650],{},"sort",[587,652,653,654],{},"コピー後に",[49,655,650],{},[45,657,658],{"id":658},"直前のstateを基に更新する",[10,660,661],{},"更新後のstateが更新前の値に依存する場合は、set関数へ値ではなく更新用の関数を渡します。",[63,663,665],{"className":222,"code":664,"language":224,"meta":67,"style":67},"setCount(currentCount => currentCount + 1)\n",[49,666,667],{"__ignoreMap":67},[71,668,669,672,674,677,680,683,686,690],{"class":73,"line":74},[71,670,671],{"class":312},"setCount",[71,673,316],{"class":237},[71,675,676],{"class":468},"currentCount",[71,678,679],{"class":85}," =>",[71,681,682],{"class":237}," currentCount ",[71,684,685],{"class":77},"+",[71,687,689],{"class":688},"sbssI"," 1",[71,691,327],{"class":237},[10,693,694],{},"Reactはイベントハンドラーの処理をまとめてからstateを更新することがあります。更新用関数を使うことで、その時点の最新のstateを基に次の値を計算できます。",[45,696,697],{"id":697},"イベントハンドラーの命名",[10,699,700,701,704,705,708],{},"イベントを処理する関数には",[49,702,703],{},"handle","、propsとして受け渡すイベントには",[49,706,707],{},"on","を付けると役割が伝わりやすくなります。",[63,710,712],{"className":222,"code":711,"language":224,"meta":67,"style":67},"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",[49,713,714,728,753,757,761,784,801,813,818,822,854],{"__ignoreMap":67},[71,715,716,719,722,725],{"class":73,"line":74},[71,717,718],{"class":85},"type",[71,720,721],{"class":404}," TodoItemProps",[71,723,724],{"class":77}," =",[71,726,727],{"class":77}," {\n",[71,729,730,733,735,737,740,742,745,748,750],{"class":73,"line":138},[71,731,732],{"class":81},"  onChange",[71,734,526],{"class":77},[71,736,339],{"class":77},[71,738,739],{"class":468},"id",[71,741,526],{"class":77},[71,743,744],{"class":404}," number",[71,746,747],{"class":77},")",[71,749,679],{"class":85},[71,751,752],{"class":404}," void\n",[71,754,755],{"class":73,"line":145},[71,756,160],{"class":77},[71,758,759],{"class":73,"line":151},[71,760,142],{"emptyLinePlaceholder":141},[71,762,763,766,769,772,775,778,780,782],{"class":73,"line":157},[71,764,765],{"class":85},"function",[71,767,768],{"class":312}," TodoItem",[71,770,771],{"class":77},"({",[71,773,774],{"class":468}," onChange",[71,776,777],{"class":77}," }:",[71,779,721],{"class":404},[71,781,747],{"class":77},[71,783,727],{"class":77},[71,785,786,789,792,794,797,799],{"class":73,"line":163},[71,787,788],{"class":85},"  const",[71,790,791],{"class":237}," handleChange",[71,793,724],{"class":77},[71,795,796],{"class":77}," ()",[71,798,679],{"class":85},[71,800,727],{"class":77},[71,802,803,806,808,811],{"class":73,"line":168},[71,804,805],{"class":312},"    onChange",[71,807,316],{"class":81},[71,809,810],{"class":688},"1",[71,812,327],{"class":81},[71,814,815],{"class":73,"line":174},[71,816,817],{"class":77},"  }\n",[71,819,820],{"class":73,"line":373},[71,821,142],{"emptyLinePlaceholder":141},[71,823,824,827,830,832,834,836,838,841,843,845,848,851],{"class":73,"line":378},[71,825,826],{"class":231},"  return",[71,828,829],{"class":77}," \u003C",[71,831,82],{"class":81},[71,833,86],{"class":85},[71,835,89],{"class":77},[71,837,92],{"class":77},[71,839,840],{"class":95},"checkbox",[71,842,92],{"class":77},[71,844,774],{"class":85},[71,846,847],{"class":77},"={",[71,849,850],{"class":237},"handleChange",[71,852,853],{"class":77},"} \u002F>\n",[71,855,856],{"class":73,"line":383},[71,857,160],{"class":77},[10,859,860],{},"これはReactが強制する規則ではありませんが、一貫した命名はコードを読みやすくします。",[45,862,863],{"id":863},"propsの分割代入",[10,865,866],{},"propsを分割代入すると記述は短くなりますが、変数がprops由来なのかコンポーネント内で定義されたものなのか分かりにくくなる場合があります。",[10,868,869],{},"コンポーネントが大きくなった場合は、変数名やコンポーネントの責務を見直し、値の出所を追いやすくすることが大切です。",[41,871,39],{"id":872},"typescript",[45,874,876,194,879],{"id":875},"documentgetelementbyidとnull",[49,877,878],{},"document.getElementById",[49,880,881],{},"null",[10,883,884,886,887,890,891,893],{},[49,885,878],{},"の戻り値は",[49,888,889],{},"HTMLElement | null","です。対象の要素が存在しない可能性があるため、利用前に",[49,892,881],{},"を確認します。",[63,895,898],{"className":896,"code":897,"language":872,"meta":67,"style":67},"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",[49,899,900,924,928,940,958],{"__ignoreMap":67},[71,901,902,904,906,908,910,912,914,916,918,920,922],{"class":73,"line":74},[71,903,298],{"class":85},[71,905,301],{"class":237},[71,907,89],{"class":77},[71,909,306],{"class":237},[71,911,309],{"class":77},[71,913,313],{"class":312},[71,915,316],{"class":237},[71,917,319],{"class":77},[71,919,322],{"class":95},[71,921,319],{"class":77},[71,923,327],{"class":237},[71,925,926],{"class":73,"line":138},[71,927,142],{"emptyLinePlaceholder":141},[71,929,930,932,934,936,938],{"class":73,"line":145},[71,931,336],{"class":231},[71,933,339],{"class":237},[71,935,342],{"class":77},[71,937,345],{"class":237},[71,939,348],{"class":77},[71,941,942,944,946,948,950,952,954,956],{"class":73,"line":151},[71,943,353],{"class":231},[71,945,356],{"class":77},[71,947,359],{"class":312},[71,949,316],{"class":81},[71,951,319],{"class":77},[71,953,366],{"class":95},[71,955,319],{"class":77},[71,957,327],{"class":81},[71,959,960],{"class":73,"line":157},[71,961,160],{"class":77},[10,963,964,965,967],{},"Non-nullアサーション演算子（",[49,966,342],{},"）で確認を省略することもできますが、実行時に要素が必ず存在することをTypeScriptが保証するわけではありません。",[45,969,971],{"id":970},"readonly",[49,972,970],{},[10,974,975,976,978],{},"プロパティへ",[49,977,970],{},"を指定すると、そのプロパティへの再代入を型チェックで防げます。",[63,980,982],{"className":896,"code":981,"language":872,"meta":67,"style":67},"type Todo = {\n  readonly id: number\n  title: string\n}\n",[49,983,984,995,1008,1018],{"__ignoreMap":67},[71,985,986,988,991,993],{"class":73,"line":74},[71,987,718],{"class":85},[71,989,990],{"class":404}," Todo",[71,992,724],{"class":77},[71,994,727],{"class":77},[71,996,997,1000,1003,1005],{"class":73,"line":138},[71,998,999],{"class":85},"  readonly",[71,1001,1002],{"class":81}," id",[71,1004,526],{"class":77},[71,1006,1007],{"class":404}," number\n",[71,1009,1010,1013,1015],{"class":73,"line":145},[71,1011,1012],{"class":81},"  title",[71,1014,526],{"class":77},[71,1016,1017],{"class":404}," string\n",[71,1019,1020],{"class":73,"line":151},[71,1021,160],{"class":77},[10,1023,1024,1026],{},[49,1025,970],{},"はコンパイル時の制約です。また、入れ子になったオブジェクトまで自動的に読み取り専用にするものではありません。",[45,1028,1029],{"id":1029},"イベントごとの型",[10,1031,1032],{},"Reactのイベントハンドラーでは、対象に応じたイベント型を利用できます。",[63,1034,1036],{"className":222,"code":1035,"language":224,"meta":67,"style":67},"function handleChange(event: React.ChangeEvent\u003CHTMLInputElement>) {\n  console.log(event.target.checked)\n}\n",[49,1037,1038,1069,1095],{"__ignoreMap":67},[71,1039,1040,1042,1044,1046,1049,1051,1054,1056,1059,1061,1064,1067],{"class":73,"line":74},[71,1041,765],{"class":85},[71,1043,791],{"class":312},[71,1045,316],{"class":77},[71,1047,1048],{"class":468},"event",[71,1050,526],{"class":77},[71,1052,1053],{"class":404}," React",[71,1055,309],{"class":77},[71,1057,1058],{"class":404},"ChangeEvent",[71,1060,78],{"class":77},[71,1062,1063],{"class":404},"HTMLInputElement",[71,1065,1066],{"class":77},">)",[71,1068,727],{"class":77},[71,1070,1071,1074,1076,1079,1081,1083,1085,1088,1090,1093],{"class":73,"line":138},[71,1072,1073],{"class":237},"  console",[71,1075,309],{"class":77},[71,1077,1078],{"class":312},"log",[71,1080,316],{"class":81},[71,1082,1048],{"class":237},[71,1084,309],{"class":77},[71,1086,1087],{"class":237},"target",[71,1089,309],{"class":77},[71,1091,1092],{"class":237},"checked",[71,1094,327],{"class":81},[71,1096,1097],{"class":73,"line":145},[71,1098,160],{"class":77},[10,1100,1101,1102,1105],{},"イベント型だけでなく、",[49,1103,1104],{},"ChangeEventHandler\u003CHTMLInputElement>","のようなハンドラー全体の型を付ける方法もあります。",[45,1107,1108],{"id":1108},"ジェネリクスの型引数へ制約を付ける",[10,1110,1111,1112,1115],{},"型引数に",[49,1113,1114],{},"extends","を指定すると、ジェネリクスで受け取れる型に必要なプロパティを保証できます。",[63,1117,1119],{"className":896,"code":1118,"language":872,"meta":67,"style":67},"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",[49,1120,1121,1132,1141,1145,1149,1192,1225],{"__ignoreMap":67},[71,1122,1123,1125,1128,1130],{"class":73,"line":74},[71,1124,718],{"class":85},[71,1126,1127],{"class":404}," Identifiable",[71,1129,724],{"class":77},[71,1131,727],{"class":77},[71,1133,1134,1137,1139],{"class":73,"line":138},[71,1135,1136],{"class":81},"  id",[71,1138,526],{"class":77},[71,1140,1007],{"class":404},[71,1142,1143],{"class":73,"line":145},[71,1144,160],{"class":77},[71,1146,1147],{"class":73,"line":151},[71,1148,142],{"emptyLinePlaceholder":141},[71,1150,1151,1153,1156,1158,1161,1164,1166,1169,1172,1174,1177,1180,1182,1184,1186,1188,1190],{"class":73,"line":157},[71,1152,765],{"class":85},[71,1154,1155],{"class":312}," findById",[71,1157,78],{"class":77},[71,1159,1160],{"class":404},"T",[71,1162,1163],{"class":85}," extends",[71,1165,1127],{"class":404},[71,1167,1168],{"class":77},">(",[71,1170,1171],{"class":468},"items",[71,1173,526],{"class":77},[71,1175,1176],{"class":404}," T",[71,1178,1179],{"class":237},"[]",[71,1181,520],{"class":77},[71,1183,1002],{"class":468},[71,1185,526],{"class":77},[71,1187,744],{"class":404},[71,1189,747],{"class":77},[71,1191,727],{"class":77},[71,1193,1194,1196,1199,1201,1204,1206,1209,1211,1214,1216,1218,1221,1223],{"class":73,"line":163},[71,1195,826],{"class":231},[71,1197,1198],{"class":237}," items",[71,1200,309],{"class":77},[71,1202,1203],{"class":312},"find",[71,1205,316],{"class":81},[71,1207,1208],{"class":468},"item",[71,1210,679],{"class":85},[71,1212,1213],{"class":237}," item",[71,1215,309],{"class":77},[71,1217,739],{"class":237},[71,1219,1220],{"class":77}," ===",[71,1222,1002],{"class":237},[71,1224,327],{"class":81},[71,1226,1227],{"class":73,"line":168},[71,1228,160],{"class":77},[10,1230,1231,1232,1234,1235,1237],{},"制約がなければ",[49,1233,1160],{},"にどのような型が渡されるか分からないため、関数内で",[49,1236,739],{},"へ安全にアクセスできません。",[45,1239,1241,1244],{"id":1240},"keyof型演算子",[49,1242,1243],{},"keyof","型演算子",[10,1246,1247,1249],{},[49,1248,1243],{},"は、オブジェクト型のプロパティ名からユニオン型を作る型演算子です。",[63,1251,1253],{"className":896,"code":1252,"language":872,"meta":67,"style":67},"type Todo = {\n  id: number\n  title: string\n}\n\ntype TodoKey = keyof Todo\n\u002F\u002F 'id' | 'title'\n",[49,1254,1255,1265,1273,1281,1285,1289,1304],{"__ignoreMap":67},[71,1256,1257,1259,1261,1263],{"class":73,"line":74},[71,1258,718],{"class":85},[71,1260,990],{"class":404},[71,1262,724],{"class":77},[71,1264,727],{"class":77},[71,1266,1267,1269,1271],{"class":73,"line":138},[71,1268,1136],{"class":81},[71,1270,526],{"class":77},[71,1272,1007],{"class":404},[71,1274,1275,1277,1279],{"class":73,"line":145},[71,1276,1012],{"class":81},[71,1278,526],{"class":77},[71,1280,1017],{"class":404},[71,1282,1283],{"class":73,"line":151},[71,1284,160],{"class":77},[71,1286,1287],{"class":73,"line":157},[71,1288,142],{"emptyLinePlaceholder":141},[71,1290,1291,1293,1296,1298,1301],{"class":73,"line":163},[71,1292,718],{"class":85},[71,1294,1295],{"class":404}," TodoKey",[71,1297,724],{"class":77},[71,1299,1300],{"class":77}," keyof",[71,1302,1303],{"class":404}," Todo\n",[71,1305,1306],{"class":73,"line":168},[71,1307,1309],{"class":1308},"sHwdD","\u002F\u002F 'id' | 'title'\n",[10,1311,1312],{},"プロパティを追加・削除したときにユニオン型を手作業で更新する必要がなくなり、型定義との不整合を防ぎやすくなります。",[45,1314,1315],{"id":1315},"インデックスアクセス型",[10,1317,1318],{},"インデックスアクセス型を使うと、オブジェクト型から特定のプロパティの型を取り出せます。",[63,1320,1322],{"className":896,"code":1321,"language":872,"meta":67,"style":67},"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",[49,1323,1324,1334,1342,1350,1354,1358,1381,1386,1390,1409],{"__ignoreMap":67},[71,1325,1326,1328,1330,1332],{"class":73,"line":74},[71,1327,718],{"class":85},[71,1329,990],{"class":404},[71,1331,724],{"class":77},[71,1333,727],{"class":77},[71,1335,1336,1338,1340],{"class":73,"line":138},[71,1337,1136],{"class":81},[71,1339,526],{"class":77},[71,1341,1007],{"class":404},[71,1343,1344,1346,1348],{"class":73,"line":145},[71,1345,1012],{"class":81},[71,1347,526],{"class":77},[71,1349,1017],{"class":404},[71,1351,1352],{"class":73,"line":151},[71,1353,160],{"class":77},[71,1355,1356],{"class":73,"line":157},[71,1357,142],{"emptyLinePlaceholder":141},[71,1359,1360,1362,1365,1367,1369,1372,1374,1376,1378],{"class":73,"line":163},[71,1361,718],{"class":85},[71,1363,1364],{"class":404}," TodoId",[71,1366,724],{"class":77},[71,1368,990],{"class":404},[71,1370,1371],{"class":237},"[",[71,1373,319],{"class":77},[71,1375,739],{"class":95},[71,1377,319],{"class":77},[71,1379,1380],{"class":237},"]\n",[71,1382,1383],{"class":73,"line":168},[71,1384,1385],{"class":1308},"\u002F\u002F number\n",[71,1387,1388],{"class":73,"line":174},[71,1389,142],{"emptyLinePlaceholder":141},[71,1391,1392,1394,1397,1399,1401,1403,1405,1407],{"class":73,"line":373},[71,1393,718],{"class":85},[71,1395,1396],{"class":404}," TodoValue",[71,1398,724],{"class":77},[71,1400,990],{"class":404},[71,1402,1371],{"class":237},[71,1404,1243],{"class":77},[71,1406,990],{"class":404},[71,1408,1380],{"class":237},[71,1410,1411],{"class":73,"line":378},[71,1412,1413],{"class":1308},"\u002F\u002F number | string\n",[45,1415,1416],{"id":1416},"アンビエント宣言",[10,1418,1419,1422],{},[49,1420,1421],{},"declare","を使うと、実装が別の場所に存在する値や型をTypeScriptへ伝えられます。JavaScriptライブラリや実行環境が提供するグローバル変数の型を補う場合などに使用します。",[63,1424,1426],{"className":896,"code":1425,"language":872,"meta":67,"style":67},"declare const appVersion: string\n",[49,1427,1428],{"__ignoreMap":67},[71,1429,1430,1432,1435,1438,1440],{"class":73,"line":74},[71,1431,1421],{"class":85},[71,1433,1434],{"class":85}," const",[71,1436,1437],{"class":237}," appVersion",[71,1439,526],{"class":77},[71,1441,1017],{"class":404},[10,1443,1444,1445,1448,1449,1451],{},"一般的には",[49,1446,1447],{},".d.ts","形式の型定義ファイルへ記述します。",[49,1450,1421],{},"は実行時の値を作成しないため、実体が存在しなければ実行時エラーになります。",[45,1453,1454],{"id":1454},"メソッドの型注釈",[10,1456,1457],{},"オブジェクト型のメソッドは、メソッド構文と関数プロパティ構文のどちらでも表現できます。",[63,1459,1461],{"className":896,"code":1460,"language":872,"meta":67,"style":67},"type Formatter = {\n  format(value: string): string\n}\n\ntype FormatterProperty = {\n  format: (value: string) => string\n}\n",[49,1462,1463,1474,1494,1498,1502,1513,1533],{"__ignoreMap":67},[71,1464,1465,1467,1470,1472],{"class":73,"line":74},[71,1466,718],{"class":85},[71,1468,1469],{"class":404}," Formatter",[71,1471,724],{"class":77},[71,1473,727],{"class":77},[71,1475,1476,1479,1481,1484,1486,1489,1492],{"class":73,"line":138},[71,1477,1478],{"class":81},"  format",[71,1480,316],{"class":77},[71,1482,1483],{"class":468},"value",[71,1485,526],{"class":77},[71,1487,1488],{"class":404}," string",[71,1490,1491],{"class":77},"):",[71,1493,1017],{"class":404},[71,1495,1496],{"class":73,"line":145},[71,1497,160],{"class":77},[71,1499,1500],{"class":73,"line":151},[71,1501,142],{"emptyLinePlaceholder":141},[71,1503,1504,1506,1509,1511],{"class":73,"line":157},[71,1505,718],{"class":85},[71,1507,1508],{"class":404}," FormatterProperty",[71,1510,724],{"class":77},[71,1512,727],{"class":77},[71,1514,1515,1517,1519,1521,1523,1525,1527,1529,1531],{"class":73,"line":163},[71,1516,1478],{"class":81},[71,1518,526],{"class":77},[71,1520,339],{"class":77},[71,1522,1483],{"class":468},[71,1524,526],{"class":77},[71,1526,1488],{"class":404},[71,1528,747],{"class":77},[71,1530,679],{"class":85},[71,1532,1017],{"class":404},[71,1534,1535],{"class":73,"line":168},[71,1536,160],{"class":77},[10,1538,1539,1540,1543],{},"両者には、継承や",[49,1541,1542],{},"strictFunctionTypes","における引数型の扱いなどで違いがあります。プロジェクト内で意図に合った書き方へ揃えることが大切です。",[45,1545,1546],{"id":1546},"型ガード",[10,1548,1549],{},"型ガードは、実行時の確認を通して変数の型を絞り込む仕組みです。ユーザー定義型ガードでは、戻り値の型に型述語を指定します。",[63,1551,1553],{"className":896,"code":1552,"language":872,"meta":67,"style":67},"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",[49,1554,1555,1583,1601,1605,1609,1624,1628,1642,1667],{"__ignoreMap":67},[71,1556,1557,1559,1562,1564,1566,1568,1571,1573,1576,1579,1581],{"class":73,"line":74},[71,1558,765],{"class":85},[71,1560,1561],{"class":312}," isNumber",[71,1563,316],{"class":77},[71,1565,1483],{"class":468},[71,1567,526],{"class":77},[71,1569,1570],{"class":404}," unknown",[71,1572,1491],{"class":77},[71,1574,1575],{"class":468}," value",[71,1577,1578],{"class":77}," is",[71,1580,744],{"class":404},[71,1582,727],{"class":77},[71,1584,1585,1587,1590,1592,1594,1596,1599],{"class":73,"line":138},[71,1586,826],{"class":231},[71,1588,1589],{"class":77}," typeof",[71,1591,1575],{"class":237},[71,1593,1220],{"class":77},[71,1595,247],{"class":77},[71,1597,1598],{"class":95},"number",[71,1600,252],{"class":77},[71,1602,1603],{"class":73,"line":145},[71,1604,160],{"class":77},[71,1606,1607],{"class":73,"line":151},[71,1608,142],{"emptyLinePlaceholder":141},[71,1610,1611,1613,1615,1617,1619,1621],{"class":73,"line":157},[71,1612,298],{"class":85},[71,1614,1575],{"class":237},[71,1616,526],{"class":77},[71,1618,1570],{"class":404},[71,1620,724],{"class":77},[71,1622,1623],{"class":688}," 10\n",[71,1625,1626],{"class":73,"line":163},[71,1627,142],{"emptyLinePlaceholder":141},[71,1629,1630,1632,1634,1637,1640],{"class":73,"line":168},[71,1631,336],{"class":231},[71,1633,339],{"class":237},[71,1635,1636],{"class":312},"isNumber",[71,1638,1639],{"class":237},"(value)) ",[71,1641,348],{"class":77},[71,1643,1644,1646,1648,1650,1652,1654,1656,1659,1661,1664],{"class":73,"line":174},[71,1645,1073],{"class":237},[71,1647,309],{"class":77},[71,1649,1078],{"class":312},[71,1651,316],{"class":81},[71,1653,1483],{"class":237},[71,1655,309],{"class":77},[71,1657,1658],{"class":312},"toFixed",[71,1660,316],{"class":81},[71,1662,1663],{"class":688},"2",[71,1665,1666],{"class":81},"))\n",[71,1668,1669],{"class":73,"line":373},[71,1670,160],{"class":77},[10,1672,1673],{},"APIレスポンスなど外部から受け取った値は、型アサーションで決めつけるのではなく、実行時に検証してから利用すると安全です。",[41,1675,1676],{"id":1676},"まとめ",[10,1678,1679],{},"Todoアプリの実装を通して、HTML属性の使い方からReactのstate更新、TypeScriptの型操作まで、幅広い内容を学べました。",[10,1681,1682],{},"個々の構文を覚えるだけでなく、「なぜその書き方が必要なのか」を実際のアプリ開発と結び付けて理解することが大切だと感じました。",[1684,1685,1686],"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);}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":67,"searchDepth":138,"depth":138,"links":1688},[1689,1692,1696,1703,1715],{"id":43,"depth":138,"text":30,"children":1690},[1691],{"id":47,"depth":145,"text":47},{"id":118,"depth":138,"text":33,"children":1693},[1694,1695],{"id":121,"depth":145,"text":121},{"id":183,"depth":145,"text":184},{"id":204,"depth":138,"text":36,"children":1697},[1698,1699,1700,1701,1702],{"id":207,"depth":145,"text":210},{"id":450,"depth":145,"text":450},{"id":658,"depth":145,"text":658},{"id":697,"depth":145,"text":697},{"id":863,"depth":145,"text":863},{"id":872,"depth":138,"text":39,"children":1704},[1705,1707,1708,1709,1710,1711,1712,1713,1714],{"id":875,"depth":145,"text":1706},"document.getElementByIdとnull",{"id":970,"depth":145,"text":970},{"id":1029,"depth":145,"text":1029},{"id":1108,"depth":145,"text":1108},{"id":1240,"depth":145,"text":1240},{"id":1315,"depth":145,"text":1315},{"id":1416,"depth":145,"text":1416},{"id":1454,"depth":145,"text":1454},{"id":1546,"depth":145,"text":1546},{"id":1676,"depth":138,"text":1676},"React HooksとTypeScriptでTodoアプリを作るハンズオンを通して学んだ、HTML、JavaScript、React、TypeScriptのポイントを整理します。","md",{},"\u002Farticles\u002F2024\u002Forganize-learned-from-todo","2024-12-23",{"title":5,"description":1716},"articles\u002F2024\u002Forganize-learned-from-todo",[36,39],"\u002Fimages\u002Farticles\u002Forganize-learned-from-todo.png","ic1Do2Gie9Gb4WmAmZ2IL55ETNgmySMOwEHT_s3q0bk",[1727,2430,3777,4267,4757,5185,5577],{"id":1728,"title":1729,"body":1730,"description":2421,"extension":1717,"meta":2422,"navigation":141,"path":2423,"publishDate":2424,"published":141,"seo":2425,"stem":2426,"tags":2427,"thumbnail":2428,"updated":2424,"__hash__":2429},"articles\u002Farticles\u002F2024\u002Flately-learned-js-tip.md","最近学んだJavaScriptのTipsをアウトプット",{"type":7,"value":1731,"toc":2404},[1732,1734,1737,1740,1743,1790,1793,1796,1864,1881,1896,1911,1926,1929,1932,1968,1978,1986,1999,2025,2041,2044,2059,2062,2069,2125,2128,2134,2167,2177,2181,2190,2209,2212,2220,2258,2261,2285,2292,2298,2309,2337,2358,2361,2367,2370,2387,2389,2392,2401],[10,1733,12],{},[10,1735,1736],{},"今回は、最近学んだJavaScriptの小さなTipsとして、オブジェクトの分割代入とオプショナルチェーンを整理します。",[41,1738,1739],{"id":1739},"オブジェクトの分割代入",[10,1741,1742],{},"オブジェクトの分割代入を使うと、プロパティの値を取り出して変数へ代入できます。",[63,1744,1746],{"className":127,"code":1745,"language":118,"meta":67,"style":67},"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",[49,1747,1748,1753,1758,1763,1767,1771,1776,1780,1785],{"__ignoreMap":67},[71,1749,1750],{"class":73,"line":74},[71,1751,1752],{},"const user = {\n",[71,1754,1755],{"class":73,"line":138},[71,1756,1757],{},"  greeting: 'Hello',\n",[71,1759,1760],{"class":73,"line":145},[71,1761,1762],{},"  farewell: 'Bye',\n",[71,1764,1765],{"class":73,"line":151},[71,1766,160],{},[71,1768,1769],{"class":73,"line":157},[71,1770,142],{"emptyLinePlaceholder":141},[71,1772,1773],{"class":73,"line":163},[71,1774,1775],{},"const { greeting, farewell } = user\n",[71,1777,1778],{"class":73,"line":168},[71,1779,142],{"emptyLinePlaceholder":141},[71,1781,1782],{"class":73,"line":174},[71,1783,1784],{},"console.log(greeting) \u002F\u002F 'Hello'\n",[71,1786,1787],{"class":73,"line":373},[71,1788,1789],{},"console.log(farewell) \u002F\u002F 'Bye'\n",[45,1791,1792],{"id":1792},"ネストしたプロパティを取り出す",[10,1794,1795],{},"オブジェクトの中にオブジェクトがある場合は、データの構造に合わせて分割代入のパターンもネストできます。",[63,1797,1799],{"className":127,"code":1798,"language":118,"meta":67,"style":67},"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",[49,1800,1801,1805,1809,1814,1819,1824,1828,1832,1837,1842,1847,1852,1856,1860],{"__ignoreMap":67},[71,1802,1803],{"class":73,"line":74},[71,1804,1752],{},[71,1806,1807],{"class":73,"line":138},[71,1808,1757],{},[71,1810,1811],{"class":73,"line":145},[71,1812,1813],{},"  message: {\n",[71,1815,1816],{"class":73,"line":151},[71,1817,1818],{},"    farewell: 'Bye',\n",[71,1820,1821],{"class":73,"line":157},[71,1822,1823],{},"  },\n",[71,1825,1826],{"class":73,"line":163},[71,1827,160],{},[71,1829,1830],{"class":73,"line":168},[71,1831,142],{"emptyLinePlaceholder":141},[71,1833,1834],{"class":73,"line":174},[71,1835,1836],{},"const {\n",[71,1838,1839],{"class":73,"line":373},[71,1840,1841],{},"  greeting,\n",[71,1843,1844],{"class":73,"line":378},[71,1845,1846],{},"  message: { farewell },\n",[71,1848,1849],{"class":73,"line":383},[71,1850,1851],{},"} = user\n",[71,1853,1854],{"class":73,"line":398},[71,1855,142],{"emptyLinePlaceholder":141},[71,1857,1858],{"class":73,"line":410},[71,1859,1784],{},[71,1861,1862],{"class":73,"line":422},[71,1863,1789],{},[10,1865,1866,1867,194,1870,1873,1874,1877,1878,1880],{},"この例で作られる変数は",[49,1868,1869],{},"greeting",[49,1871,1872],{},"farewell","です。",[49,1875,1876],{},"message","は、内側の",[49,1879,1872],{},"へたどるためのパターンとして使われているだけなので、変数として宣言されません。",[63,1882,1884],{"className":127,"code":1883,"language":118,"meta":67,"style":67},"console.log(message)\n\u002F\u002F ReferenceError: message is not defined\n",[49,1885,1886,1891],{"__ignoreMap":67},[71,1887,1888],{"class":73,"line":74},[71,1889,1890],{},"console.log(message)\n",[71,1892,1893],{"class":73,"line":138},[71,1894,1895],{},"\u002F\u002F ReferenceError: message is not defined\n",[109,1897,1900],{"title":1898,"type":1899},"親オブジェクトも使いたい場合","note",[10,1901,1902,1904,1905,1907,1908,1910],{},[49,1903,1876],{},"自体と、その中の",[49,1906,1872],{},"を両方使いたい場合は、分割代入を分けるか、先に",[49,1909,1876],{},"を取り出してから再度分割代入します。",[63,1912,1914],{"className":127,"code":1913,"language":118,"meta":67,"style":67},"const { message } = user\nconst { farewell } = message\n",[49,1915,1916,1921],{"__ignoreMap":67},[71,1917,1918],{"class":73,"line":74},[71,1919,1920],{},"const { message } = user\n",[71,1922,1923],{"class":73,"line":138},[71,1924,1925],{},"const { farewell } = message\n",[45,1927,1928],{"id":1928},"プロパティ名とは異なる変数名で受け取る",[10,1930,1931],{},"コロンの右側へ名前を書くと、プロパティ名とは異なる変数名で値を受け取れます。",[63,1933,1935],{"className":127,"code":1934,"language":118,"meta":67,"style":67},"const user = {\n  name: 'Yuri',\n}\n\nconst { name: userName } = user\n\nconsole.log(userName) \u002F\u002F 'Yuri'\n",[49,1936,1937,1941,1946,1950,1954,1959,1963],{"__ignoreMap":67},[71,1938,1939],{"class":73,"line":74},[71,1940,1752],{},[71,1942,1943],{"class":73,"line":138},[71,1944,1945],{},"  name: 'Yuri',\n",[71,1947,1948],{"class":73,"line":145},[71,1949,160],{},[71,1951,1952],{"class":73,"line":151},[71,1953,142],{"emptyLinePlaceholder":141},[71,1955,1956],{"class":73,"line":157},[71,1957,1958],{},"const { name: userName } = user\n",[71,1960,1961],{"class":73,"line":163},[71,1962,142],{"emptyLinePlaceholder":141},[71,1964,1965],{"class":73,"line":168},[71,1966,1967],{},"console.log(userName) \u002F\u002F 'Yuri'\n",[10,1969,1970,1971,1974,1975,1873],{},"この場合も",[49,1972,1973],{},"name","という変数は作られず、作られるのは",[49,1976,1977],{},"userName",[41,1979,1981,1982,1985],{"id":1980},"オプショナルチェーン","オプショナルチェーン（",[49,1983,1984],{},"?.","）",[10,1987,1988,1989,1991,1992,1995,1996,1998],{},"オプショナルチェーンは、参照の途中にある値が",[49,1990,881],{},"または",[49,1993,1994],{},"undefined","だった場合、エラーを発生させずに",[49,1997,1994],{},"を返す演算子です。",[63,2000,2002],{"className":127,"code":2001,"language":118,"meta":67,"style":67},"const user = {\n  name: 'Yuri',\n}\n\nconsole.log(user.profile?.hobby) \u002F\u002F undefined\n",[49,2003,2004,2008,2012,2016,2020],{"__ignoreMap":67},[71,2005,2006],{"class":73,"line":74},[71,2007,1752],{},[71,2009,2010],{"class":73,"line":138},[71,2011,1945],{},[71,2013,2014],{"class":73,"line":145},[71,2015,160],{},[71,2017,2018],{"class":73,"line":151},[71,2019,142],{"emptyLinePlaceholder":141},[71,2021,2022],{"class":73,"line":157},[71,2023,2024],{},"console.log(user.profile?.hobby) \u002F\u002F undefined\n",[10,2026,2027,2030,2031,2033,2034,2036,2037,2040],{},[49,2028,2029],{},"user.profile","は",[49,2032,1994],{},"ですが、",[49,2035,1984],{},"を使っているため、その先の",[49,2038,2039],{},"hobby","へアクセスせず評価を終了します。",[10,2042,2043],{},"通常のプロパティアクセスではエラーになります。",[63,2045,2047],{"className":127,"code":2046,"language":118,"meta":67,"style":67},"console.log(user.profile.hobby)\n\u002F\u002F TypeError: Cannot read properties of undefined\n",[49,2048,2049,2054],{"__ignoreMap":67},[71,2050,2051],{"class":73,"line":74},[71,2052,2053],{},"console.log(user.profile.hobby)\n",[71,2055,2056],{"class":73,"line":138},[71,2057,2058],{},"\u002F\u002F TypeError: Cannot read properties of undefined\n",[45,2060,2061],{"id":2061},"配列の要素へアクセスする",[10,2063,2064,2065,2068],{},"角括弧によるアクセスでは、",[49,2066,2067],{},"?.[]","の形で使用します。",[63,2070,2072],{"className":127,"code":2071,"language":118,"meta":67,"style":67},"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",[49,2073,2074,2079,2084,2089,2093,2097,2102,2107,2111,2116,2120],{"__ignoreMap":67},[71,2075,2076],{"class":73,"line":74},[71,2077,2078],{},"const items = [\n",[71,2080,2081],{"class":73,"line":138},[71,2082,2083],{},"  { name: 'Item 1' },\n",[71,2085,2086],{"class":73,"line":145},[71,2087,2088],{},"  { name: 'Item 2' },\n",[71,2090,2091],{"class":73,"line":151},[71,2092,1380],{},[71,2094,2095],{"class":73,"line":157},[71,2096,142],{"emptyLinePlaceholder":141},[71,2098,2099],{"class":73,"line":163},[71,2100,2101],{},"console.log(items[1]?.name) \u002F\u002F 'Item 2'\n",[71,2103,2104],{"class":73,"line":168},[71,2105,2106],{},"console.log(items[3]?.name) \u002F\u002F undefined\n",[71,2108,2109],{"class":73,"line":174},[71,2110,142],{"emptyLinePlaceholder":141},[71,2112,2113],{"class":73,"line":373},[71,2114,2115],{},"const emptyItems = undefined\n",[71,2117,2118],{"class":73,"line":378},[71,2119,142],{"emptyLinePlaceholder":141},[71,2121,2122],{"class":73,"line":383},[71,2123,2124],{},"console.log(emptyItems?.[0]) \u002F\u002F undefined\n",[45,2126,2127],{"id":2127},"関数やメソッドを呼び出す",[10,2129,2130,2131,447],{},"関数が存在するときだけ呼び出したい場合は、",[49,2132,2133],{},"?.()",[63,2135,2137],{"className":127,"code":2136,"language":118,"meta":67,"style":67},"const actions = {\n  greet: () => 'Hello',\n}\n\nconsole.log(actions.greet?.()) \u002F\u002F 'Hello'\nconsole.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[49,2138,2139,2144,2149,2153,2157,2162],{"__ignoreMap":67},[71,2140,2141],{"class":73,"line":74},[71,2142,2143],{},"const actions = {\n",[71,2145,2146],{"class":73,"line":138},[71,2147,2148],{},"  greet: () => 'Hello',\n",[71,2150,2151],{"class":73,"line":145},[71,2152,160],{},[71,2154,2155],{"class":73,"line":151},[71,2156,142],{"emptyLinePlaceholder":141},[71,2158,2159],{"class":73,"line":157},[71,2160,2161],{},"console.log(actions.greet?.()) \u002F\u002F 'Hello'\n",[71,2163,2164],{"class":73,"line":163},[71,2165,2166],{},"console.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[10,2168,2169,2170,2173,2174,2176],{},"プロパティが存在していても、その値が関数でなければ",[49,2171,2172],{},"TypeError","になります。",[49,2175,2133],{},"は「呼び出し可能かどうか」まで確認するものではありません。",[45,2178,2180],{"id":2179},"dom要素へアクセスする","DOM要素へアクセスする",[10,2182,2183,2186,2187,2189],{},[49,2184,2185],{},"querySelector","は対象が見つからなかった場合に",[49,2188,881],{},"を返します。要素が存在するときだけプロパティを参照したい場合にも利用できます。",[63,2191,2193],{"className":127,"code":2192,"language":118,"meta":67,"style":67},"const button = document.querySelector('.sample-button')\n\nconsole.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[49,2194,2195,2200,2204],{"__ignoreMap":67},[71,2196,2197],{"class":73,"line":74},[71,2198,2199],{},"const button = document.querySelector('.sample-button')\n",[71,2201,2202],{"class":73,"line":138},[71,2203,142],{"emptyLinePlaceholder":141},[71,2205,2206],{"class":73,"line":145},[71,2207,2208],{},"console.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[45,2210,2211],{"id":2211},"短絡評価される範囲",[10,2213,2214,2215,1991,2217,2219],{},"オプショナルチェーンでは、左側が",[49,2216,881],{},[49,2218,1994],{},"の場合、そのチェーンの残りは評価されません。",[63,2221,2223],{"className":127,"code":2222,"language":118,"meta":67,"style":67},"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",[49,2224,2225,2230,2235,2239,2244,2248,2253],{"__ignoreMap":67},[71,2226,2227],{"class":73,"line":74},[71,2228,2229],{},"let index = 0\n",[71,2231,2232],{"class":73,"line":138},[71,2233,2234],{},"const items = null\n",[71,2236,2237],{"class":73,"line":145},[71,2238,142],{"emptyLinePlaceholder":141},[71,2240,2241],{"class":73,"line":151},[71,2242,2243],{},"const item = items?.[index++]\n",[71,2245,2246],{"class":73,"line":157},[71,2247,142],{"emptyLinePlaceholder":141},[71,2249,2250],{"class":73,"line":163},[71,2251,2252],{},"console.log(item) \u002F\u002F undefined\n",[71,2254,2255],{"class":73,"line":168},[71,2256,2257],{},"console.log(index) \u002F\u002F 0\n",[10,2259,2260],{},"ただし、オプショナルチェーンが途切れた後のアクセスは保護されません。",[63,2262,2264],{"className":127,"code":2263,"language":118,"meta":67,"style":67},"const user = null\n\nuser?.profile.name \u002F\u002F undefined\n(user?.profile).name \u002F\u002F TypeError\n",[49,2265,2266,2271,2275,2280],{"__ignoreMap":67},[71,2267,2268],{"class":73,"line":74},[71,2269,2270],{},"const user = null\n",[71,2272,2273],{"class":73,"line":138},[71,2274,142],{"emptyLinePlaceholder":141},[71,2276,2277],{"class":73,"line":145},[71,2278,2279],{},"user?.profile.name \u002F\u002F undefined\n",[71,2281,2282],{"class":73,"line":151},[71,2283,2284],{},"(user?.profile).name \u002F\u002F TypeError\n",[10,2286,2287,2288,2291],{},"括弧で区切ると、その後の",[49,2289,2290],{},".name","は別のプロパティアクセスとして評価されます。",[41,2293,2295,2294],{"id":2294},"と組み合わせて既定値を設定する",[49,2296,2297],{},"??",[10,2299,2300,2301,1991,2303,2305,2306,2308],{},"オプショナルチェーンで取得した結果が",[49,2302,881],{},[49,2304,1994],{},"だった場合、ヌル値合体演算子（",[49,2307,2297],{},"）で既定値を設定できます。",[63,2310,2312],{"className":127,"code":2311,"language":118,"meta":67,"style":67},"const user = {}\n\nconst hobby = user.profile?.hobby ?? '未設定'\n\nconsole.log(hobby) \u002F\u002F '未設定'\n",[49,2313,2314,2319,2323,2328,2332],{"__ignoreMap":67},[71,2315,2316],{"class":73,"line":74},[71,2317,2318],{},"const user = {}\n",[71,2320,2321],{"class":73,"line":138},[71,2322,142],{"emptyLinePlaceholder":141},[71,2324,2325],{"class":73,"line":145},[71,2326,2327],{},"const hobby = user.profile?.hobby ?? '未設定'\n",[71,2329,2330],{"class":73,"line":151},[71,2331,142],{"emptyLinePlaceholder":141},[71,2333,2334],{"class":73,"line":157},[71,2335,2336],{},"console.log(hobby) \u002F\u002F '未設定'\n",[10,2338,2339,2030,2342,2345,2346,2349,2350,2352,2353,1991,2355,2357],{},[49,2340,2341],{},"||",[49,2343,2344],{},"0","、空文字列、",[49,2347,2348],{},"false","も右側の値へ置き換えますが、",[49,2351,2297],{},"が右側を返すのは",[49,2354,881],{},[49,2356,1994],{},"の場合だけです。",[41,2359,2360],{"id":2360},"オプショナルチェーンを使うときの注意点",[10,2362,2363,2364,2366],{},"オプショナルチェーンは条件分岐を簡潔にできますが、必須であるはずの値にまで使用すると、不具合を",[49,2365,1994],{},"として見逃す可能性があります。",[10,2368,2369],{},"次のように使い分けることが大切です。",[25,2371,2372,2378,2381],{},[28,2373,2374,2375,2377],{},"値が存在しないことを仕様として許容する場合は",[49,2376,1984],{},"を使う",[28,2379,2380],{},"値が必須の場合は明示的に確認し、存在しなければエラーとして扱う",[28,2382,2383,2384,2386],{},"取得結果に既定値が必要な場合は",[49,2385,2297],{},"を組み合わせる",[41,2388,1676],{"id":1676},[10,2390,2391],{},"ネストした分割代入を使うと、深い階層の値を簡潔に変数へ取り出せます。ただし、途中のプロパティ名がそのまま変数になるわけではありません。",[10,2393,2394,2395,2397,2398,2400],{},"オプショナルチェーンを使うと、",[49,2396,881],{},"や",[49,2399,1994],{},"の可能性があるプロパティ、配列、関数へ安全にアクセスできます。便利さだけで多用せず、その値が本当に省略可能なのかを考えて使っていきたいです。",[1684,2402,2403],{},"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":67,"searchDepth":138,"depth":138,"links":2405},[2406,2410,2417,2419,2420],{"id":1739,"depth":138,"text":1739,"children":2407},[2408,2409],{"id":1792,"depth":145,"text":1792},{"id":1928,"depth":145,"text":1928},{"id":1980,"depth":138,"text":2411,"children":2412},"オプショナルチェーン（?.）",[2413,2414,2415,2416],{"id":2061,"depth":145,"text":2061},{"id":2127,"depth":145,"text":2127},{"id":2179,"depth":145,"text":2180},{"id":2211,"depth":145,"text":2211},{"id":2294,"depth":138,"text":2418},"??と組み合わせて既定値を設定する",{"id":2360,"depth":138,"text":2360},{"id":1676,"depth":138,"text":1676},"JavaScriptのネストしたオブジェクトの分割代入とオプショナルチェーンについて、コード例と注意点を交えて整理します。",{},"\u002Farticles\u002F2024\u002Flately-learned-js-tip","2024-12-28",{"title":1729,"description":2421},"articles\u002F2024\u002Flately-learned-js-tip",[33],"\u002Fimages\u002Farticles\u002Flately-learned-js-tip.png","Xi5F4LrgdP-cQxce9jEEPhpLiC086mIJfek4NR0cS3g",{"id":4,"title":5,"body":2431,"description":1716,"extension":1717,"meta":3774,"navigation":141,"path":1719,"publishDate":1720,"published":141,"seo":3775,"stem":1722,"tags":3776,"thumbnail":1724,"updated":1720,"__hash__":1725},{"type":7,"value":2432,"toc":3746},[2433,2435,2440,2450,2452,2456,2462,2486,2488,2492,2494,2496,2498,2534,2536,2538,2540,2546,2548,2550,2554,2560,2724,2732,2734,2736,2814,2816,2818,2886,2888,2890,2912,2914,2916,2922,3044,3046,3048,3050,3052,3054,3060,3068,3134,3138,3142,3146,3182,3186,3188,3190,3246,3250,3252,3256,3354,3360,3364,3368,3422,3424,3426,3428,3516,3518,3522,3538,3544,3546,3548,3620,3624,3626,3628,3736,3738,3740,3742,3744],[10,2434,12],{},[10,2436,15,2437,23],{},[17,2438,22],{"href":19,"rel":2439},[21],[25,2441,2442,2444,2446,2448],{},[28,2443,30],{},[28,2445,33],{},[28,2447,36],{},[28,2449,39],{},[41,2451,30],{"id":43},[45,2453,2454,52],{"id":47},[49,2455,51],{},[10,2457,2458,57,2460,61],{},[49,2459,51],{},[49,2461,60],{},[63,2463,2464],{"className":65,"code":66,"language":43,"meta":67,"style":67},[49,2465,2466],{"__ignoreMap":67},[71,2467,2468,2470,2472,2474,2476,2478,2480,2482,2484],{"class":73,"line":74},[71,2469,78],{"class":77},[71,2471,82],{"class":81},[71,2473,86],{"class":85},[71,2475,89],{"class":77},[71,2477,92],{"class":77},[71,2479,96],{"class":95},[71,2481,92],{"class":77},[71,2483,101],{"class":85},[71,2485,104],{"class":77},[10,2487,107],{},[109,2489,2490],{"title":111,"type":112},[10,2491,115],{},[41,2493,33],{"id":118},[45,2495,121],{"id":121},[10,2497,124],{},[63,2499,2500],{"className":127,"code":128,"language":118,"meta":67,"style":67},[49,2501,2502,2506,2510,2514,2518,2522,2526,2530],{"__ignoreMap":67},[71,2503,2504],{"class":73,"line":74},[71,2505,135],{},[71,2507,2508],{"class":73,"line":138},[71,2509,142],{"emptyLinePlaceholder":141},[71,2511,2512],{"class":73,"line":145},[71,2513,148],{},[71,2515,2516],{"class":73,"line":151},[71,2517,154],{},[71,2519,2520],{"class":73,"line":157},[71,2521,160],{},[71,2523,2524],{"class":73,"line":163},[71,2525,142],{"emptyLinePlaceholder":141},[71,2527,2528],{"class":73,"line":168},[71,2529,171],{},[71,2531,2532],{"class":73,"line":174},[71,2533,177],{},[10,2535,180],{},[45,2537,184],{"id":183},[10,2539,187],{},[10,2541,190,2542,194,2544,198],{},[49,2543,193],{},[49,2545,197],{},[10,2547,201],{},[41,2549,36],{"id":204},[45,2551,2552],{"id":207},[49,2553,210],{},[10,2555,2556,215,2558,219],{},[49,2557,210],{},[49,2559,218],{},[63,2561,2562],{"className":222,"code":223,"language":224,"meta":67,"style":67},[49,2563,2564,2582,2600,2614,2618,2642,2646,2658,2676,2680,2684,2696,2704,2712,2720],{"__ignoreMap":67},[71,2565,2566,2568,2570,2572,2574,2576,2578,2580],{"class":73,"line":74},[71,2567,193],{"class":231},[71,2569,234],{"class":77},[71,2571,238],{"class":237},[71,2573,241],{"class":77},[71,2575,244],{"class":231},[71,2577,247],{"class":77},[71,2579,204],{"class":95},[71,2581,252],{"class":77},[71,2583,2584,2586,2588,2590,2592,2594,2596,2598],{"class":73,"line":138},[71,2585,193],{"class":231},[71,2587,234],{"class":77},[71,2589,261],{"class":237},[71,2591,241],{"class":77},[71,2593,244],{"class":231},[71,2595,247],{"class":77},[71,2597,270],{"class":95},[71,2599,252],{"class":77},[71,2601,2602,2604,2606,2608,2610,2612],{"class":73,"line":145},[71,2603,193],{"class":231},[71,2605,279],{"class":237},[71,2607,282],{"class":231},[71,2609,247],{"class":77},[71,2611,287],{"class":95},[71,2613,252],{"class":77},[71,2615,2616],{"class":73,"line":151},[71,2617,142],{"emptyLinePlaceholder":141},[71,2619,2620,2622,2624,2626,2628,2630,2632,2634,2636,2638,2640],{"class":73,"line":157},[71,2621,298],{"class":85},[71,2623,301],{"class":237},[71,2625,89],{"class":77},[71,2627,306],{"class":237},[71,2629,309],{"class":77},[71,2631,313],{"class":312},[71,2633,316],{"class":237},[71,2635,319],{"class":77},[71,2637,322],{"class":95},[71,2639,319],{"class":77},[71,2641,327],{"class":237},[71,2643,2644],{"class":73,"line":163},[71,2645,142],{"emptyLinePlaceholder":141},[71,2647,2648,2650,2652,2654,2656],{"class":73,"line":168},[71,2649,336],{"class":231},[71,2651,339],{"class":237},[71,2653,342],{"class":77},[71,2655,345],{"class":237},[71,2657,348],{"class":77},[71,2659,2660,2662,2664,2666,2668,2670,2672,2674],{"class":73,"line":174},[71,2661,353],{"class":231},[71,2663,356],{"class":77},[71,2665,359],{"class":312},[71,2667,316],{"class":81},[71,2669,319],{"class":77},[71,2671,366],{"class":95},[71,2673,319],{"class":77},[71,2675,327],{"class":81},[71,2677,2678],{"class":73,"line":373},[71,2679,160],{"class":77},[71,2681,2682],{"class":73,"line":378},[71,2683,142],{"emptyLinePlaceholder":141},[71,2685,2686,2688,2690,2692,2694],{"class":73,"line":383},[71,2687,210],{"class":312},[71,2689,388],{"class":237},[71,2691,309],{"class":77},[71,2693,218],{"class":312},[71,2695,395],{"class":237},[71,2697,2698,2700,2702],{"class":73,"line":398},[71,2699,401],{"class":77},[71,2701,405],{"class":404},[71,2703,104],{"class":77},[71,2705,2706,2708,2710],{"class":73,"line":410},[71,2707,413],{"class":77},[71,2709,416],{"class":404},[71,2711,419],{"class":77},[71,2713,2714,2716,2718],{"class":73,"line":422},[71,2715,425],{"class":77},[71,2717,405],{"class":404},[71,2719,430],{"class":77},[71,2721,2722],{"class":73,"line":433},[71,2723,327],{"class":237},[10,2725,2726,440,2728,443,2730,447],{},[49,2727,210],{},[49,2729,210],{},[49,2731,446],{},[45,2733,450],{"id":450},[10,2735,453],{},[63,2737,2738],{"className":222,"code":456,"language":224,"meta":67,"style":67},[49,2739,2740,2750,2764,2776,2796,2804,2810],{"__ignoreMap":67},[71,2741,2742,2744,2746,2748],{"class":73,"line":74},[71,2743,463],{"class":312},[71,2745,316],{"class":237},[71,2747,469],{"class":468},[71,2749,472],{"class":85},[71,2751,2752,2754,2756,2758,2760,2762],{"class":73,"line":138},[71,2753,477],{"class":237},[71,2755,309],{"class":77},[71,2757,482],{"class":312},[71,2759,316],{"class":237},[71,2761,487],{"class":468},[71,2763,472],{"class":85},[71,2765,2766,2768,2770,2772,2774],{"class":73,"line":145},[71,2767,494],{"class":237},[71,2769,309],{"class":77},[71,2771,499],{"class":237},[71,2773,502],{"class":77},[71,2775,505],{"class":237},[71,2777,2778,2780,2782,2784,2786,2788,2790,2792,2794],{"class":73,"line":151},[71,2779,510],{"class":77},[71,2781,234],{"class":77},[71,2783,515],{"class":77},[71,2785,487],{"class":237},[71,2787,520],{"class":77},[71,2789,523],{"class":81},[71,2791,526],{"class":77},[71,2793,530],{"class":529},[71,2795,533],{"class":77},[71,2797,2798,2800,2802],{"class":73,"line":157},[71,2799,538],{"class":77},[71,2801,541],{"class":237},[71,2803,544],{"class":77},[71,2805,2806,2808],{"class":73,"line":163},[71,2807,549],{"class":237},[71,2809,544],{"class":77},[71,2811,2812],{"class":73,"line":168},[71,2813,327],{"class":237},[10,2815,558],{},[10,2817,561],{},[563,2819,2820,2830],{},[566,2821,2822],{},[569,2823,2824,2826,2828],{},[572,2825,574],{},[572,2827,577],{},[572,2829,580],{},[582,2831,2832,2846,2862,2874],{},[569,2833,2834,2836,2842],{},[587,2835,589],{},[587,2837,2838,595,2840],{},[49,2839,594],{},[49,2841,598],{},[587,2843,601,2844],{},[49,2845,604],{},[569,2847,2848,2850,2856],{},[587,2849,609],{},[587,2851,2852,595,2854],{},[49,2853,614],{},[49,2855,617],{},[587,2857,2858,595,2860],{},[49,2859,622],{},[49,2861,625],{},[569,2863,2864,2866,2870],{},[587,2865,630],{},[587,2867,633,2868],{},[49,2869,617],{},[587,2871,2872],{},[49,2873,482],{},[569,2875,2876,2878,2882],{},[587,2877,644],{},[587,2879,647,2880],{},[49,2881,650],{},[587,2883,653,2884],{},[49,2885,650],{},[45,2887,658],{"id":658},[10,2889,661],{},[63,2891,2892],{"className":222,"code":664,"language":224,"meta":67,"style":67},[49,2893,2894],{"__ignoreMap":67},[71,2895,2896,2898,2900,2902,2904,2906,2908,2910],{"class":73,"line":74},[71,2897,671],{"class":312},[71,2899,316],{"class":237},[71,2901,676],{"class":468},[71,2903,679],{"class":85},[71,2905,682],{"class":237},[71,2907,685],{"class":77},[71,2909,689],{"class":688},[71,2911,327],{"class":237},[10,2913,694],{},[45,2915,697],{"id":697},[10,2917,700,2918,704,2920,708],{},[49,2919,703],{},[49,2921,707],{},[63,2923,2924],{"className":222,"code":711,"language":224,"meta":67,"style":67},[49,2925,2926,2936,2956,2960,2964,2982,2996,3006,3010,3014,3040],{"__ignoreMap":67},[71,2927,2928,2930,2932,2934],{"class":73,"line":74},[71,2929,718],{"class":85},[71,2931,721],{"class":404},[71,2933,724],{"class":77},[71,2935,727],{"class":77},[71,2937,2938,2940,2942,2944,2946,2948,2950,2952,2954],{"class":73,"line":138},[71,2939,732],{"class":81},[71,2941,526],{"class":77},[71,2943,339],{"class":77},[71,2945,739],{"class":468},[71,2947,526],{"class":77},[71,2949,744],{"class":404},[71,2951,747],{"class":77},[71,2953,679],{"class":85},[71,2955,752],{"class":404},[71,2957,2958],{"class":73,"line":145},[71,2959,160],{"class":77},[71,2961,2962],{"class":73,"line":151},[71,2963,142],{"emptyLinePlaceholder":141},[71,2965,2966,2968,2970,2972,2974,2976,2978,2980],{"class":73,"line":157},[71,2967,765],{"class":85},[71,2969,768],{"class":312},[71,2971,771],{"class":77},[71,2973,774],{"class":468},[71,2975,777],{"class":77},[71,2977,721],{"class":404},[71,2979,747],{"class":77},[71,2981,727],{"class":77},[71,2983,2984,2986,2988,2990,2992,2994],{"class":73,"line":163},[71,2985,788],{"class":85},[71,2987,791],{"class":237},[71,2989,724],{"class":77},[71,2991,796],{"class":77},[71,2993,679],{"class":85},[71,2995,727],{"class":77},[71,2997,2998,3000,3002,3004],{"class":73,"line":168},[71,2999,805],{"class":312},[71,3001,316],{"class":81},[71,3003,810],{"class":688},[71,3005,327],{"class":81},[71,3007,3008],{"class":73,"line":174},[71,3009,817],{"class":77},[71,3011,3012],{"class":73,"line":373},[71,3013,142],{"emptyLinePlaceholder":141},[71,3015,3016,3018,3020,3022,3024,3026,3028,3030,3032,3034,3036,3038],{"class":73,"line":378},[71,3017,826],{"class":231},[71,3019,829],{"class":77},[71,3021,82],{"class":81},[71,3023,86],{"class":85},[71,3025,89],{"class":77},[71,3027,92],{"class":77},[71,3029,840],{"class":95},[71,3031,92],{"class":77},[71,3033,774],{"class":85},[71,3035,847],{"class":77},[71,3037,850],{"class":237},[71,3039,853],{"class":77},[71,3041,3042],{"class":73,"line":383},[71,3043,160],{"class":77},[10,3045,860],{},[45,3047,863],{"id":863},[10,3049,866],{},[10,3051,869],{},[41,3053,39],{"id":872},[45,3055,3056,194,3058],{"id":875},[49,3057,878],{},[49,3059,881],{},[10,3061,3062,886,3064,890,3066,893],{},[49,3063,878],{},[49,3065,889],{},[49,3067,881],{},[63,3069,3070],{"className":896,"code":897,"language":872,"meta":67,"style":67},[49,3071,3072,3096,3100,3112,3130],{"__ignoreMap":67},[71,3073,3074,3076,3078,3080,3082,3084,3086,3088,3090,3092,3094],{"class":73,"line":74},[71,3075,298],{"class":85},[71,3077,301],{"class":237},[71,3079,89],{"class":77},[71,3081,306],{"class":237},[71,3083,309],{"class":77},[71,3085,313],{"class":312},[71,3087,316],{"class":237},[71,3089,319],{"class":77},[71,3091,322],{"class":95},[71,3093,319],{"class":77},[71,3095,327],{"class":237},[71,3097,3098],{"class":73,"line":138},[71,3099,142],{"emptyLinePlaceholder":141},[71,3101,3102,3104,3106,3108,3110],{"class":73,"line":145},[71,3103,336],{"class":231},[71,3105,339],{"class":237},[71,3107,342],{"class":77},[71,3109,345],{"class":237},[71,3111,348],{"class":77},[71,3113,3114,3116,3118,3120,3122,3124,3126,3128],{"class":73,"line":151},[71,3115,353],{"class":231},[71,3117,356],{"class":77},[71,3119,359],{"class":312},[71,3121,316],{"class":81},[71,3123,319],{"class":77},[71,3125,366],{"class":95},[71,3127,319],{"class":77},[71,3129,327],{"class":81},[71,3131,3132],{"class":73,"line":157},[71,3133,160],{"class":77},[10,3135,964,3136,967],{},[49,3137,342],{},[45,3139,3140],{"id":970},[49,3141,970],{},[10,3143,975,3144,978],{},[49,3145,970],{},[63,3147,3148],{"className":896,"code":981,"language":872,"meta":67,"style":67},[49,3149,3150,3160,3170,3178],{"__ignoreMap":67},[71,3151,3152,3154,3156,3158],{"class":73,"line":74},[71,3153,718],{"class":85},[71,3155,990],{"class":404},[71,3157,724],{"class":77},[71,3159,727],{"class":77},[71,3161,3162,3164,3166,3168],{"class":73,"line":138},[71,3163,999],{"class":85},[71,3165,1002],{"class":81},[71,3167,526],{"class":77},[71,3169,1007],{"class":404},[71,3171,3172,3174,3176],{"class":73,"line":145},[71,3173,1012],{"class":81},[71,3175,526],{"class":77},[71,3177,1017],{"class":404},[71,3179,3180],{"class":73,"line":151},[71,3181,160],{"class":77},[10,3183,3184,1026],{},[49,3185,970],{},[45,3187,1029],{"id":1029},[10,3189,1032],{},[63,3191,3192],{"className":222,"code":1035,"language":224,"meta":67,"style":67},[49,3193,3194,3220,3242],{"__ignoreMap":67},[71,3195,3196,3198,3200,3202,3204,3206,3208,3210,3212,3214,3216,3218],{"class":73,"line":74},[71,3197,765],{"class":85},[71,3199,791],{"class":312},[71,3201,316],{"class":77},[71,3203,1048],{"class":468},[71,3205,526],{"class":77},[71,3207,1053],{"class":404},[71,3209,309],{"class":77},[71,3211,1058],{"class":404},[71,3213,78],{"class":77},[71,3215,1063],{"class":404},[71,3217,1066],{"class":77},[71,3219,727],{"class":77},[71,3221,3222,3224,3226,3228,3230,3232,3234,3236,3238,3240],{"class":73,"line":138},[71,3223,1073],{"class":237},[71,3225,309],{"class":77},[71,3227,1078],{"class":312},[71,3229,316],{"class":81},[71,3231,1048],{"class":237},[71,3233,309],{"class":77},[71,3235,1087],{"class":237},[71,3237,309],{"class":77},[71,3239,1092],{"class":237},[71,3241,327],{"class":81},[71,3243,3244],{"class":73,"line":145},[71,3245,160],{"class":77},[10,3247,1101,3248,1105],{},[49,3249,1104],{},[45,3251,1108],{"id":1108},[10,3253,1111,3254,1115],{},[49,3255,1114],{},[63,3257,3258],{"className":896,"code":1118,"language":872,"meta":67,"style":67},[49,3259,3260,3270,3278,3282,3286,3322,3350],{"__ignoreMap":67},[71,3261,3262,3264,3266,3268],{"class":73,"line":74},[71,3263,718],{"class":85},[71,3265,1127],{"class":404},[71,3267,724],{"class":77},[71,3269,727],{"class":77},[71,3271,3272,3274,3276],{"class":73,"line":138},[71,3273,1136],{"class":81},[71,3275,526],{"class":77},[71,3277,1007],{"class":404},[71,3279,3280],{"class":73,"line":145},[71,3281,160],{"class":77},[71,3283,3284],{"class":73,"line":151},[71,3285,142],{"emptyLinePlaceholder":141},[71,3287,3288,3290,3292,3294,3296,3298,3300,3302,3304,3306,3308,3310,3312,3314,3316,3318,3320],{"class":73,"line":157},[71,3289,765],{"class":85},[71,3291,1155],{"class":312},[71,3293,78],{"class":77},[71,3295,1160],{"class":404},[71,3297,1163],{"class":85},[71,3299,1127],{"class":404},[71,3301,1168],{"class":77},[71,3303,1171],{"class":468},[71,3305,526],{"class":77},[71,3307,1176],{"class":404},[71,3309,1179],{"class":237},[71,3311,520],{"class":77},[71,3313,1002],{"class":468},[71,3315,526],{"class":77},[71,3317,744],{"class":404},[71,3319,747],{"class":77},[71,3321,727],{"class":77},[71,3323,3324,3326,3328,3330,3332,3334,3336,3338,3340,3342,3344,3346,3348],{"class":73,"line":163},[71,3325,826],{"class":231},[71,3327,1198],{"class":237},[71,3329,309],{"class":77},[71,3331,1203],{"class":312},[71,3333,316],{"class":81},[71,3335,1208],{"class":468},[71,3337,679],{"class":85},[71,3339,1213],{"class":237},[71,3341,309],{"class":77},[71,3343,739],{"class":237},[71,3345,1220],{"class":77},[71,3347,1002],{"class":237},[71,3349,327],{"class":81},[71,3351,3352],{"class":73,"line":168},[71,3353,160],{"class":77},[10,3355,1231,3356,1234,3358,1237],{},[49,3357,1160],{},[49,3359,739],{},[45,3361,3362,1244],{"id":1240},[49,3363,1243],{},[10,3365,3366,1249],{},[49,3367,1243],{},[63,3369,3370],{"className":896,"code":1252,"language":872,"meta":67,"style":67},[49,3371,3372,3382,3390,3398,3402,3406,3418],{"__ignoreMap":67},[71,3373,3374,3376,3378,3380],{"class":73,"line":74},[71,3375,718],{"class":85},[71,3377,990],{"class":404},[71,3379,724],{"class":77},[71,3381,727],{"class":77},[71,3383,3384,3386,3388],{"class":73,"line":138},[71,3385,1136],{"class":81},[71,3387,526],{"class":77},[71,3389,1007],{"class":404},[71,3391,3392,3394,3396],{"class":73,"line":145},[71,3393,1012],{"class":81},[71,3395,526],{"class":77},[71,3397,1017],{"class":404},[71,3399,3400],{"class":73,"line":151},[71,3401,160],{"class":77},[71,3403,3404],{"class":73,"line":157},[71,3405,142],{"emptyLinePlaceholder":141},[71,3407,3408,3410,3412,3414,3416],{"class":73,"line":163},[71,3409,718],{"class":85},[71,3411,1295],{"class":404},[71,3413,724],{"class":77},[71,3415,1300],{"class":77},[71,3417,1303],{"class":404},[71,3419,3420],{"class":73,"line":168},[71,3421,1309],{"class":1308},[10,3423,1312],{},[45,3425,1315],{"id":1315},[10,3427,1318],{},[63,3429,3430],{"className":896,"code":1321,"language":872,"meta":67,"style":67},[49,3431,3432,3442,3450,3458,3462,3466,3486,3490,3494,3512],{"__ignoreMap":67},[71,3433,3434,3436,3438,3440],{"class":73,"line":74},[71,3435,718],{"class":85},[71,3437,990],{"class":404},[71,3439,724],{"class":77},[71,3441,727],{"class":77},[71,3443,3444,3446,3448],{"class":73,"line":138},[71,3445,1136],{"class":81},[71,3447,526],{"class":77},[71,3449,1007],{"class":404},[71,3451,3452,3454,3456],{"class":73,"line":145},[71,3453,1012],{"class":81},[71,3455,526],{"class":77},[71,3457,1017],{"class":404},[71,3459,3460],{"class":73,"line":151},[71,3461,160],{"class":77},[71,3463,3464],{"class":73,"line":157},[71,3465,142],{"emptyLinePlaceholder":141},[71,3467,3468,3470,3472,3474,3476,3478,3480,3482,3484],{"class":73,"line":163},[71,3469,718],{"class":85},[71,3471,1364],{"class":404},[71,3473,724],{"class":77},[71,3475,990],{"class":404},[71,3477,1371],{"class":237},[71,3479,319],{"class":77},[71,3481,739],{"class":95},[71,3483,319],{"class":77},[71,3485,1380],{"class":237},[71,3487,3488],{"class":73,"line":168},[71,3489,1385],{"class":1308},[71,3491,3492],{"class":73,"line":174},[71,3493,142],{"emptyLinePlaceholder":141},[71,3495,3496,3498,3500,3502,3504,3506,3508,3510],{"class":73,"line":373},[71,3497,718],{"class":85},[71,3499,1396],{"class":404},[71,3501,724],{"class":77},[71,3503,990],{"class":404},[71,3505,1371],{"class":237},[71,3507,1243],{"class":77},[71,3509,990],{"class":404},[71,3511,1380],{"class":237},[71,3513,3514],{"class":73,"line":378},[71,3515,1413],{"class":1308},[45,3517,1416],{"id":1416},[10,3519,3520,1422],{},[49,3521,1421],{},[63,3523,3524],{"className":896,"code":1425,"language":872,"meta":67,"style":67},[49,3525,3526],{"__ignoreMap":67},[71,3527,3528,3530,3532,3534,3536],{"class":73,"line":74},[71,3529,1421],{"class":85},[71,3531,1434],{"class":85},[71,3533,1437],{"class":237},[71,3535,526],{"class":77},[71,3537,1017],{"class":404},[10,3539,1444,3540,1448,3542,1451],{},[49,3541,1447],{},[49,3543,1421],{},[45,3545,1454],{"id":1454},[10,3547,1457],{},[63,3549,3550],{"className":896,"code":1460,"language":872,"meta":67,"style":67},[49,3551,3552,3562,3578,3582,3586,3596,3616],{"__ignoreMap":67},[71,3553,3554,3556,3558,3560],{"class":73,"line":74},[71,3555,718],{"class":85},[71,3557,1469],{"class":404},[71,3559,724],{"class":77},[71,3561,727],{"class":77},[71,3563,3564,3566,3568,3570,3572,3574,3576],{"class":73,"line":138},[71,3565,1478],{"class":81},[71,3567,316],{"class":77},[71,3569,1483],{"class":468},[71,3571,526],{"class":77},[71,3573,1488],{"class":404},[71,3575,1491],{"class":77},[71,3577,1017],{"class":404},[71,3579,3580],{"class":73,"line":145},[71,3581,160],{"class":77},[71,3583,3584],{"class":73,"line":151},[71,3585,142],{"emptyLinePlaceholder":141},[71,3587,3588,3590,3592,3594],{"class":73,"line":157},[71,3589,718],{"class":85},[71,3591,1508],{"class":404},[71,3593,724],{"class":77},[71,3595,727],{"class":77},[71,3597,3598,3600,3602,3604,3606,3608,3610,3612,3614],{"class":73,"line":163},[71,3599,1478],{"class":81},[71,3601,526],{"class":77},[71,3603,339],{"class":77},[71,3605,1483],{"class":468},[71,3607,526],{"class":77},[71,3609,1488],{"class":404},[71,3611,747],{"class":77},[71,3613,679],{"class":85},[71,3615,1017],{"class":404},[71,3617,3618],{"class":73,"line":168},[71,3619,160],{"class":77},[10,3621,1539,3622,1543],{},[49,3623,1542],{},[45,3625,1546],{"id":1546},[10,3627,1549],{},[63,3629,3630],{"className":896,"code":1552,"language":872,"meta":67,"style":67},[49,3631,3632,3656,3672,3676,3680,3694,3698,3710,3732],{"__ignoreMap":67},[71,3633,3634,3636,3638,3640,3642,3644,3646,3648,3650,3652,3654],{"class":73,"line":74},[71,3635,765],{"class":85},[71,3637,1561],{"class":312},[71,3639,316],{"class":77},[71,3641,1483],{"class":468},[71,3643,526],{"class":77},[71,3645,1570],{"class":404},[71,3647,1491],{"class":77},[71,3649,1575],{"class":468},[71,3651,1578],{"class":77},[71,3653,744],{"class":404},[71,3655,727],{"class":77},[71,3657,3658,3660,3662,3664,3666,3668,3670],{"class":73,"line":138},[71,3659,826],{"class":231},[71,3661,1589],{"class":77},[71,3663,1575],{"class":237},[71,3665,1220],{"class":77},[71,3667,247],{"class":77},[71,3669,1598],{"class":95},[71,3671,252],{"class":77},[71,3673,3674],{"class":73,"line":145},[71,3675,160],{"class":77},[71,3677,3678],{"class":73,"line":151},[71,3679,142],{"emptyLinePlaceholder":141},[71,3681,3682,3684,3686,3688,3690,3692],{"class":73,"line":157},[71,3683,298],{"class":85},[71,3685,1575],{"class":237},[71,3687,526],{"class":77},[71,3689,1570],{"class":404},[71,3691,724],{"class":77},[71,3693,1623],{"class":688},[71,3695,3696],{"class":73,"line":163},[71,3697,142],{"emptyLinePlaceholder":141},[71,3699,3700,3702,3704,3706,3708],{"class":73,"line":168},[71,3701,336],{"class":231},[71,3703,339],{"class":237},[71,3705,1636],{"class":312},[71,3707,1639],{"class":237},[71,3709,348],{"class":77},[71,3711,3712,3714,3716,3718,3720,3722,3724,3726,3728,3730],{"class":73,"line":174},[71,3713,1073],{"class":237},[71,3715,309],{"class":77},[71,3717,1078],{"class":312},[71,3719,316],{"class":81},[71,3721,1483],{"class":237},[71,3723,309],{"class":77},[71,3725,1658],{"class":312},[71,3727,316],{"class":81},[71,3729,1663],{"class":688},[71,3731,1666],{"class":81},[71,3733,3734],{"class":73,"line":373},[71,3735,160],{"class":77},[10,3737,1673],{},[41,3739,1676],{"id":1676},[10,3741,1679],{},[10,3743,1682],{},[1684,3745,1686],{},{"title":67,"searchDepth":138,"depth":138,"links":3747},[3748,3751,3755,3762,3773],{"id":43,"depth":138,"text":30,"children":3749},[3750],{"id":47,"depth":145,"text":47},{"id":118,"depth":138,"text":33,"children":3752},[3753,3754],{"id":121,"depth":145,"text":121},{"id":183,"depth":145,"text":184},{"id":204,"depth":138,"text":36,"children":3756},[3757,3758,3759,3760,3761],{"id":207,"depth":145,"text":210},{"id":450,"depth":145,"text":450},{"id":658,"depth":145,"text":658},{"id":697,"depth":145,"text":697},{"id":863,"depth":145,"text":863},{"id":872,"depth":138,"text":39,"children":3763},[3764,3765,3766,3767,3768,3769,3770,3771,3772],{"id":875,"depth":145,"text":1706},{"id":970,"depth":145,"text":970},{"id":1029,"depth":145,"text":1029},{"id":1108,"depth":145,"text":1108},{"id":1240,"depth":145,"text":1240},{"id":1315,"depth":145,"text":1315},{"id":1416,"depth":145,"text":1416},{"id":1454,"depth":145,"text":1454},{"id":1546,"depth":145,"text":1546},{"id":1676,"depth":138,"text":1676},{},{"title":5,"description":1716},[36,39],{"id":3778,"title":3779,"body":3780,"description":4257,"extension":1717,"meta":4258,"navigation":141,"path":4259,"publishDate":4260,"published":141,"seo":4261,"stem":4262,"tags":4263,"thumbnail":4265,"updated":4260,"__hash__":4266},"articles\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb.md","Web StorageとIndexedDBについて整理する",{"type":7,"value":3781,"toc":4247},[3782,3784,3787,3797,3800,3803,3806,3809,3893,3896,3901,3904,3932,3943,3994,3997,4000,4008,4027,4030,4033,4036,4039,4042,4144,4147,4161,4164,4167,4170,4194,4200,4203,4206,4213,4216,4219,4234,4237,4239,4242,4245],[10,3783,12],{},[10,3785,3786],{},"Todoアプリを作った際にIndexedDBを利用したのですが、ブラウザにデータを保存する方法としてはWeb Storageもあります。",[10,3788,3789,3790,595,3793,3796],{},"今回は、",[49,3791,3792],{},"localStorage",[49,3794,3795],{},"sessionStorage","、IndexedDBの特徴と使い分けを整理します。",[41,3798,3799],{"id":3799},"ブラウザにデータを保存する仕組み",[10,3801,3802],{},"Web StorageとIndexedDBは、どちらもブラウザ側にデータを保存するためのWeb APIです。",[10,3804,3805],{},"保存したデータが自動的にサーバーへ送信されることはなく、同一オリジンの制約を受けます。ただし、保存容量やデータが削除される条件はブラウザや利用状況によって異なるため、永続性を前提にしすぎないことが大切です。",[10,3807,3808],{},"主な違いは次のとおりです。",[563,3810,3811,3825],{},[566,3812,3813],{},[569,3814,3815,3818,3820,3822],{},[572,3816,3817],{},"項目",[572,3819,3792],{},[572,3821,3795],{},[572,3823,3824],{},"IndexedDB",[582,3826,3827,3840,3853,3866,3879],{},[569,3828,3829,3832,3835,3837],{},[587,3830,3831],{},"保存形式",[587,3833,3834],{},"文字列のキーバリュー",[587,3836,3834],{},[587,3838,3839],{},"オブジェクトやBlobなど",[569,3841,3842,3845,3848,3850],{},[587,3843,3844],{},"API",[587,3846,3847],{},"同期",[587,3849,3847],{},[587,3851,3852],{},"非同期",[569,3854,3855,3858,3861,3864],{},[587,3856,3857],{},"データの範囲",[587,3859,3860],{},"同一オリジン",[587,3862,3863],{},"同一オリジンかつタブ単位",[587,3865,3860],{},[569,3867,3868,3871,3874,3877],{},[587,3869,3870],{},"データの寿命",[587,3872,3873],{},"明示的に削除されるまで",[587,3875,3876],{},"タブを閉じるまで",[587,3878,3873],{},[569,3880,3881,3884,3887,3890],{},[587,3882,3883],{},"得意な用途",[587,3885,3886],{},"小さな設定値",[587,3888,3889],{},"一時的な入力状態",[587,3891,3892],{},"大量・構造化データ",[41,3894,3792],{"id":3895},"localstorage",[10,3897,3898,3900],{},[49,3899,3792],{},"は、文字列をキーバリュー形式で保存する同期APIです。",[10,3902,3903],{},"ブラウザやタブを閉じてもデータが残るため、テーマや表示設定など、小さく単純なデータの保存に向いています。",[63,3905,3907],{"className":127,"code":3906,"language":118,"meta":67,"style":67},"localStorage.setItem('theme', 'dark')\n\nconst theme = localStorage.getItem('theme')\n\nlocalStorage.removeItem('theme')\n",[49,3908,3909,3914,3918,3923,3927],{"__ignoreMap":67},[71,3910,3911],{"class":73,"line":74},[71,3912,3913],{},"localStorage.setItem('theme', 'dark')\n",[71,3915,3916],{"class":73,"line":138},[71,3917,142],{"emptyLinePlaceholder":141},[71,3919,3920],{"class":73,"line":145},[71,3921,3922],{},"const theme = localStorage.getItem('theme')\n",[71,3924,3925],{"class":73,"line":151},[71,3926,142],{"emptyLinePlaceholder":141},[71,3928,3929],{"class":73,"line":157},[71,3930,3931],{},"localStorage.removeItem('theme')\n",[10,3933,3934,3935,3938,3939,3942],{},"値は文字列として保存されます。オブジェクトを扱う場合は、保存時に",[49,3936,3937],{},"JSON.stringify()","、取得時に",[49,3940,3941],{},"JSON.parse()","が必要です。",[63,3944,3946],{"className":127,"code":3945,"language":118,"meta":67,"style":67},"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",[49,3947,3948,3953,3958,3963,3967,3971,3976,3980,3985,3990],{"__ignoreMap":67},[71,3949,3950],{"class":73,"line":74},[71,3951,3952],{},"const settings = {\n",[71,3954,3955],{"class":73,"line":138},[71,3956,3957],{},"  theme: 'dark',\n",[71,3959,3960],{"class":73,"line":145},[71,3961,3962],{},"  fontSize: 16,\n",[71,3964,3965],{"class":73,"line":151},[71,3966,160],{},[71,3968,3969],{"class":73,"line":157},[71,3970,142],{"emptyLinePlaceholder":141},[71,3972,3973],{"class":73,"line":163},[71,3974,3975],{},"localStorage.setItem('settings', JSON.stringify(settings))\n",[71,3977,3978],{"class":73,"line":168},[71,3979,142],{"emptyLinePlaceholder":141},[71,3981,3982],{"class":73,"line":174},[71,3983,3984],{},"const storedSettings = JSON.parse(\n",[71,3986,3987],{"class":73,"line":373},[71,3988,3989],{},"  localStorage.getItem('settings') ?? '{}',\n",[71,3991,3992],{"class":73,"line":378},[71,3993,327],{},[10,3995,3996],{},"同期APIのため、大きなデータを頻繁に読み書きするとメインスレッドを塞ぐ可能性があります。",[41,3998,3795],{"id":3999},"sessionstorage",[10,4001,4002,4004,4005,4007],{},[49,4003,3795],{},"も、文字列をキーバリュー形式で保存する同期APIです。基本的な操作方法は",[49,4006,3792],{},"と同じです。",[63,4009,4011],{"className":127,"code":4010,"language":118,"meta":67,"style":67},"sessionStorage.setItem('draft', '入力途中の内容')\n\nconst draft = sessionStorage.getItem('draft')\n",[49,4012,4013,4018,4022],{"__ignoreMap":67},[71,4014,4015],{"class":73,"line":74},[71,4016,4017],{},"sessionStorage.setItem('draft', '入力途中の内容')\n",[71,4019,4020],{"class":73,"line":138},[71,4021,142],{"emptyLinePlaceholder":141},[71,4023,4024],{"class":73,"line":145},[71,4025,4026],{},"const draft = sessionStorage.getItem('draft')\n",[10,4028,4029],{},"ページを再読み込みしてもデータは残りますが、保存領域はタブごとのページセッションに分かれ、タブを閉じるとデータも削除されます。",[10,4031,4032],{},"そのため、フォームの入力途中の状態や、画面遷移中だけ保持したい一時的な情報に向いています。",[41,4034,3824],{"id":4035},"indexeddb",[10,4037,4038],{},"IndexedDBは、大量の構造化データをブラウザへ保存するための非同期APIです。",[10,4040,4041],{},"JavaScriptのオブジェクトだけでなく、ファイルやBlobなども保存できます。また、オブジェクトストア、インデックス、トランザクションを利用できるため、検索や更新を伴うデータ管理に向いています。",[63,4043,4045],{"className":127,"code":4044,"language":118,"meta":67,"style":67},"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",[49,4046,4047,4052,4056,4061,4066,4070,4075,4080,4085,4090,4095,4099,4103,4107,4112,4116,4122,4128,4133,4139],{"__ignoreMap":67},[71,4048,4049],{"class":73,"line":74},[71,4050,4051],{},"const request = indexedDB.open('todo-app', 1)\n",[71,4053,4054],{"class":73,"line":138},[71,4055,142],{"emptyLinePlaceholder":141},[71,4057,4058],{"class":73,"line":145},[71,4059,4060],{},"request.onupgradeneeded = () => {\n",[71,4062,4063],{"class":73,"line":151},[71,4064,4065],{},"  const database = request.result\n",[71,4067,4068],{"class":73,"line":157},[71,4069,142],{"emptyLinePlaceholder":141},[71,4071,4072],{"class":73,"line":163},[71,4073,4074],{},"  if (!database.objectStoreNames.contains('todos')) {\n",[71,4076,4077],{"class":73,"line":168},[71,4078,4079],{},"    database.createObjectStore('todos', {\n",[71,4081,4082],{"class":73,"line":174},[71,4083,4084],{},"      keyPath: 'id',\n",[71,4086,4087],{"class":73,"line":373},[71,4088,4089],{},"      autoIncrement: true,\n",[71,4091,4092],{"class":73,"line":378},[71,4093,4094],{},"    })\n",[71,4096,4097],{"class":73,"line":383},[71,4098,817],{},[71,4100,4101],{"class":73,"line":398},[71,4102,160],{},[71,4104,4105],{"class":73,"line":410},[71,4106,142],{"emptyLinePlaceholder":141},[71,4108,4109],{"class":73,"line":422},[71,4110,4111],{},"request.onsuccess = () => {\n",[71,4113,4114],{"class":73,"line":433},[71,4115,4065],{},[71,4117,4119],{"class":73,"line":4118},16,[71,4120,4121],{},"  const transaction = database.transaction('todos', 'readwrite')\n",[71,4123,4125],{"class":73,"line":4124},17,[71,4126,4127],{},"  const todos = transaction.objectStore('todos')\n",[71,4129,4131],{"class":73,"line":4130},18,[71,4132,142],{"emptyLinePlaceholder":141},[71,4134,4136],{"class":73,"line":4135},19,[71,4137,4138],{},"  todos.add({ title: '記事を書く', completed: false })\n",[71,4140,4142],{"class":73,"line":4141},20,[71,4143,160],{},[10,4145,4146],{},"Web Storageよりも扱う概念は多いものの、次のような用途で力を発揮します。",[25,4148,4149,4152,4155,4158],{},[28,4150,4151],{},"オフラインでも利用するアプリ",[28,4153,4154],{},"Todoやメモなど、件数が増えるデータ",[28,4156,4157],{},"検索や並び替えにインデックスを使いたいデータ",[28,4159,4160],{},"画像やファイルを含むデータ",[41,4162,4163],{"id":4163},"保存容量とデータの削除",[10,4165,4166],{},"ブラウザストレージの容量は、特定の数値をどの環境でも保証できるものではありません。ブラウザ、端末の空き容量、ユーザー設定などによって変わります。",[10,4168,4169],{},"利用状況はStorage APIから概算できます。",[63,4171,4173],{"className":127,"code":4172,"language":118,"meta":67,"style":67},"const estimate = await navigator.storage.estimate()\n\nconsole.log(estimate.usage)\nconsole.log(estimate.quota)\n",[49,4174,4175,4180,4184,4189],{"__ignoreMap":67},[71,4176,4177],{"class":73,"line":74},[71,4178,4179],{},"const estimate = await navigator.storage.estimate()\n",[71,4181,4182],{"class":73,"line":138},[71,4183,142],{"emptyLinePlaceholder":141},[71,4185,4186],{"class":73,"line":145},[71,4187,4188],{},"console.log(estimate.usage)\n",[71,4190,4191],{"class":73,"line":151},[71,4192,4193],{},"console.log(estimate.quota)\n",[109,4195,4197],{"title":4196,"type":112},"ブラウザストレージを唯一の保存先にしない",[10,4198,4199],{},"保存したデータは、ユーザーによるサイトデータの削除や、ブラウザのストレージ管理によって失われる場合があります。失われると困るデータはサーバーにも保存しましょう。",[41,4201,4202],{"id":4202},"セキュリティ上の注意",[10,4204,4205],{},"Web StorageとIndexedDBは、認証された同一オリジンのJavaScriptからアクセスできます。",[109,4207,4210],{"title":4208,"type":4209},"機密情報の保存に注意する","warning",[10,4211,4212],{},"クロスサイトスクリプティング（XSS）が発生すると、保存内容を読み取られる可能性があります。アクセストークンや個人情報などの機密情報を、安易に保存しないようにしましょう。",[41,4214,4215],{"id":4215},"どれを選ぶか",[10,4217,4218],{},"選び方を簡単にまとめると、次のようになります。",[25,4220,4221,4226,4231],{},[28,4222,4223,4224],{},"小さな設定をブラウザを閉じた後も残したい場合は",[49,4225,3792],{},[28,4227,4228,4229],{},"タブを開いている間だけ一時的に残したい場合は",[49,4230,3795],{},[28,4232,4233],{},"大量のデータや構造化データを非同期で扱いたい場合はIndexedDB",[10,4235,4236],{},"Web Storageは手軽ですが、同期APIであり文字列しか保存できません。データ量が増えるアプリや、検索・更新を伴うデータにはIndexedDBを検討するとよいでしょう。",[41,4238,1676],{"id":1676},[10,4240,4241],{},"Web StorageとIndexedDBは、どちらもブラウザ側へデータを保存できますが、得意な用途が異なります。",[10,4243,4244],{},"保存するデータの量や形式だけでなく、同期処理による影響、データを保持する期間、失われた場合の影響まで考えて選ぶことが大切です。",[1684,4246,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":4248},[4249,4250,4251,4252,4253,4254,4255,4256],{"id":3799,"depth":138,"text":3799},{"id":3895,"depth":138,"text":3792},{"id":3999,"depth":138,"text":3795},{"id":4035,"depth":138,"text":3824},{"id":4163,"depth":138,"text":4163},{"id":4202,"depth":138,"text":4202},{"id":4215,"depth":138,"text":4215},{"id":1676,"depth":138,"text":1676},"localStorage、sessionStorage、IndexedDBの違いを、保存形式、同期・非同期、データの寿命、用途から整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb","2024-12-22",{"title":3779,"description":4257},"articles\u002F2024\u002Fdescribe-webstorage-indexeddb",[4264,3824],"Web Storage","\u002Fimages\u002Farticles\u002Fdescribe-webstorage-indexeddb.png","3W_8UP01CjjLWIG3qOQhJB7e1YiLPuYONYyx_372v98",{"id":4268,"title":4269,"body":4270,"description":4748,"extension":1717,"meta":4749,"navigation":141,"path":4750,"publishDate":4751,"published":141,"seo":4752,"stem":4753,"tags":4754,"thumbnail":4755,"updated":4751,"__hash__":4756},"articles\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime.md","JavaScriptのランタイム構成からイベントループを学ぶ",{"type":7,"value":4271,"toc":4738},[4272,4274,4283,4286,4290,4293,4296,4299,4316,4318,4321,4324,4388,4391,4425,4428,4431,4434,4437,4451,4454,4497,4500,4502,4505,4508,4522,4527,4530,4532,4535,4560,4563,4566,4568,4571,4574,4591,4594,4597,4672,4675,4682,4693,4702,4704,4724,4727,4736],[10,4273,12],{},[10,4275,4276,4277,4282],{},"今回は、JavaScriptのイベントループについて、動画「",[17,4278,4281],{"href":4279,"rel":4280},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=eiC58R16hb8",[21],"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue","」で学んだ内容を整理します。",[10,4284,4285],{},"ブラウザでJavaScriptがどのように同期処理と非同期処理を扱っているのか、ランタイムを構成する要素から確認していきます。",[41,4287,4289],{"id":4288},"javascriptエンジンとホスト環境","JavaScriptエンジンとホスト環境",[10,4291,4292],{},"ブラウザでJavaScriptを実行するためには、JavaScriptエンジンとブラウザというホスト環境が連携します。",[10,4294,4295],{},"JavaScriptエンジンはコードを解析・実行し、ブラウザはタイマー、ネットワーク通信、DOMイベントなどの環境固有の機能を提供します。",[10,4297,4298],{},"イベントループを理解するうえでは、次の要素を押さえておくと全体像が見えやすくなります。",[25,4300,4301,4304,4307,4310,4313],{},[28,4302,4303],{},"コールスタック",[28,4305,4306],{},"Web APIs",[28,4308,4309],{},"タスクキュー",[28,4311,4312],{},"マイクロタスクキュー",[28,4314,4315],{},"イベントループ",[41,4317,4303],{"id":4303},[10,4319,4320],{},"コールスタックは、実行中の関数や実行コンテキストを管理するスタックです。",[10,4322,4323],{},"後から追加されたものが先に取り出される、後入れ先出し（LIFO）の構造になっています。",[63,4325,4327],{"className":127,"code":4326,"language":118,"meta":67,"style":67},"function a() {\n  console.log('a')\n}\n\nfunction b() {\n  a()\n}\n\nfunction c() {\n  b()\n}\n\nc()\n",[49,4328,4329,4334,4339,4343,4347,4352,4357,4361,4365,4370,4375,4379,4383],{"__ignoreMap":67},[71,4330,4331],{"class":73,"line":74},[71,4332,4333],{},"function a() {\n",[71,4335,4336],{"class":73,"line":138},[71,4337,4338],{},"  console.log('a')\n",[71,4340,4341],{"class":73,"line":145},[71,4342,160],{},[71,4344,4345],{"class":73,"line":151},[71,4346,142],{"emptyLinePlaceholder":141},[71,4348,4349],{"class":73,"line":157},[71,4350,4351],{},"function b() {\n",[71,4353,4354],{"class":73,"line":163},[71,4355,4356],{},"  a()\n",[71,4358,4359],{"class":73,"line":168},[71,4360,160],{},[71,4362,4363],{"class":73,"line":174},[71,4364,142],{"emptyLinePlaceholder":141},[71,4366,4367],{"class":73,"line":373},[71,4368,4369],{},"function c() {\n",[71,4371,4372],{"class":73,"line":378},[71,4373,4374],{},"  b()\n",[71,4376,4377],{"class":73,"line":383},[71,4378,160],{},[71,4380,4381],{"class":73,"line":398},[71,4382,142],{"emptyLinePlaceholder":141},[71,4384,4385],{"class":73,"line":410},[71,4386,4387],{},"c()\n",[10,4389,4390],{},"このコードは、次の流れで実行されます。",[4392,4393,4394,4400,4409,4416],"ol",{},[28,4395,4396,4399],{},[49,4397,4398],{},"c()"," がスタックへ追加される",[28,4401,4402,4404,4405,4408],{},[49,4403,4398],{}," から呼ばれた ",[49,4406,4407],{},"b()"," が追加される",[28,4410,4411,4404,4413,4408],{},[49,4412,4407],{},[49,4414,4415],{},"a()",[28,4417,4418,595,4420,595,4422,4424],{},[49,4419,4415],{},[49,4421,4407],{},[49,4423,4398],{}," の順に処理を終えてスタックから取り除かれる",[10,4426,4427],{},"1つの長い同期処理がコールスタックを占有すると、その処理が終わるまでクリックや描画など、同じスレッド上のほかの処理を進められません。",[41,4429,4306],{"id":4430},"web-apis",[10,4432,4433],{},"Web APIsは、ブラウザというホスト環境が提供する機能です。",[10,4435,4436],{},"代表的なものには、次があります。",[25,4438,4439,4442,4445,4448],{},[28,4440,4441],{},"Fetch API",[28,4443,4444],{},"タイマー",[28,4446,4447],{},"Geolocation API",[28,4449,4450],{},"DOMイベント",[10,4452,4453],{},"JavaScriptからこれらの非同期APIを呼び出すと、ブラウザ側でタイマーの計測やネットワーク通信などが進みます。JavaScriptはその完了を待ってコールスタックを占有し続ける必要がないため、別のコードを実行できます。",[63,4455,4457],{"className":127,"code":4456,"language":118,"meta":67,"style":67},"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",[49,4458,4459,4464,4469,4474,4478,4482,4487,4492],{"__ignoreMap":67},[71,4460,4461],{"class":73,"line":74},[71,4462,4463],{},"navigator.geolocation.getCurrentPosition(\n",[71,4465,4466],{"class":73,"line":138},[71,4467,4468],{},"  position => console.log(position),\n",[71,4470,4471],{"class":73,"line":145},[71,4472,4473],{},"  error => console.error(error),\n",[71,4475,4476],{"class":73,"line":151},[71,4477,327],{},[71,4479,4480],{"class":73,"line":157},[71,4481,142],{"emptyLinePlaceholder":141},[71,4483,4484],{"class":73,"line":163},[71,4485,4486],{},"fetch('https:\u002F\u002Fexample.com\u002Fapi\u002Fdata')\n",[71,4488,4489],{"class":73,"line":168},[71,4490,4491],{},"  .then(response => response.json())\n",[71,4493,4494],{"class":73,"line":174},[71,4495,4496],{},"  .then(data => console.log(data))\n",[10,4498,4499],{},"APIの処理が完了しても、コールバックがその場ですぐに実行されるとは限りません。実行可能になった処理は、タスクやマイクロタスクとしてキューへ登録されます。",[41,4501,4309],{"id":4309},[10,4503,4504],{},"タスクキューには、タイマーやイベントなどをきっかけに実行可能になったタスクが並びます。",[10,4506,4507],{},"代表的な例は次のとおりです。",[25,4509,4510,4516,4519],{},[28,4511,4512,4515],{},[49,4513,4514],{},"setTimeout()"," のコールバック",[28,4517,4518],{},"ユーザー操作のイベントハンドラー",[28,4520,4521],{},"メッセージイベント",[10,4523,4524,4526],{},[49,4525,4514],{}," に指定する時間は、コールバックが必ずその時間後に実行されるという意味ではありません。指定時間を経過したあとにタスクとして実行可能になるまでの最低待機時間です。",[10,4528,4529],{},"コールスタックや先に処理されるタスクが残っていれば、実際の実行はさらに遅くなります。",[41,4531,4312],{"id":4312},[10,4533,4534],{},"マイクロタスクキューには、主に次の処理が登録されます。",[25,4536,4537,4549,4555],{},[28,4538,4539,4540,595,4543,595,4546],{},"Promiseの ",[49,4541,4542],{},"then()",[49,4544,4545],{},"catch()",[49,4547,4548],{},"finally()",[28,4550,4551,4554],{},[49,4552,4553],{},"queueMicrotask()"," に渡したコールバック",[28,4556,4557,4515],{},[49,4558,4559],{},"MutationObserver",[10,4561,4562],{},"現在のタスクと同期処理が終わってコールスタックが空になると、次のタスクへ進む前にマイクロタスクキューが空になるまで処理されます。",[10,4564,4565],{},"マイクロタスクの実行中に新しいマイクロタスクが追加された場合も、同じタイミングで続けて処理されます。そのため、マイクロタスクを追加し続ける処理は、次のタスクや画面描画を遅らせる可能性があります。",[41,4567,4315],{"id":4315},[10,4569,4570],{},"イベントループは、コールスタックと各キューの状態を見ながら、実行する処理を選び続けます。",[10,4572,4573],{},"ブラウザ上の流れを単純化すると、次のようになります。",[4392,4575,4576,4579,4582,4585,4588],{},[28,4577,4578],{},"1つのタスクを実行する",[28,4580,4581],{},"コールスタック上の同期処理を最後まで実行する",[28,4583,4584],{},"マイクロタスクキューを空になるまで処理する",[28,4586,4587],{},"必要に応じて画面を描画する",[28,4589,4590],{},"次のタスクへ進む",[41,4592,4593],{"id":4593},"コードで実行順を確認する",[10,4595,4596],{},"タスクとマイクロタスクの実行順を、コードで確認してみましょう。",[63,4598,4600],{"className":127,"code":4599,"language":118,"meta":67,"style":67},"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",[49,4601,4602,4607,4611,4616,4621,4626,4630,4635,4640,4645,4649,4654,4659,4663,4667],{"__ignoreMap":67},[71,4603,4604],{"class":73,"line":74},[71,4605,4606],{},"console.log('start')\n",[71,4608,4609],{"class":73,"line":138},[71,4610,142],{"emptyLinePlaceholder":141},[71,4612,4613],{"class":73,"line":145},[71,4614,4615],{},"setTimeout(() => {\n",[71,4617,4618],{"class":73,"line":151},[71,4619,4620],{},"  console.log('timeout')\n",[71,4622,4623],{"class":73,"line":157},[71,4624,4625],{},"}, 0)\n",[71,4627,4628],{"class":73,"line":163},[71,4629,142],{"emptyLinePlaceholder":141},[71,4631,4632],{"class":73,"line":168},[71,4633,4634],{},"Promise.resolve().then(() => {\n",[71,4636,4637],{"class":73,"line":174},[71,4638,4639],{},"  console.log('promise')\n",[71,4641,4642],{"class":73,"line":373},[71,4643,4644],{},"})\n",[71,4646,4647],{"class":73,"line":378},[71,4648,142],{"emptyLinePlaceholder":141},[71,4650,4651],{"class":73,"line":383},[71,4652,4653],{},"queueMicrotask(() => {\n",[71,4655,4656],{"class":73,"line":398},[71,4657,4658],{},"  console.log('microtask')\n",[71,4660,4661],{"class":73,"line":410},[71,4662,4644],{},[71,4664,4665],{"class":73,"line":422},[71,4666,142],{"emptyLinePlaceholder":141},[71,4668,4669],{"class":73,"line":433},[71,4670,4671],{},"console.log('end')\n",[10,4673,4674],{},"出力順は次のようになります。",[63,4676,4680],{"className":4677,"code":4679,"language":96,"meta":67},[4678],"language-text","start\nend\npromise\nmicrotask\ntimeout\n",[49,4681,4679],{"__ignoreMap":67},[10,4683,4684,4685,4688,4689,4692],{},"まず同期処理の ",[49,4686,4687],{},"start"," と ",[49,4690,4691],{},"end"," が出力されます。",[10,4694,4695,4696,4698,4699,4701],{},"続いて、登録された順にPromiseのコールバックと ",[49,4697,4553],{}," のコールバックがマイクロタスクとして実行されます。マイクロタスクキューが空になったあと、",[49,4700,4514],{}," のコールバックが次のタスクとして実行されます。",[41,4703,1676],{"id":1676},[25,4705,4706,4709,4712,4715,4718,4721],{},[28,4707,4708],{},"コールスタックは、実行中の関数をLIFOで管理する",[28,4710,4711],{},"ブラウザは、タイマーやネットワーク通信などのWeb APIsを提供する",[28,4713,4714],{},"タイマーやイベントのコールバックなどは、タスクとしてキューへ登録される",[28,4716,4717],{},"Promiseのコールバックなどは、マイクロタスクとして登録される",[28,4719,4720],{},"現在のタスクが完了すると、次のタスクより先にマイクロタスクが処理される",[28,4722,4723],{},"長い同期処理や増え続けるマイクロタスクは、画面の応答を遅らせる可能性がある",[10,4725,4726],{},"非同期処理の実行順で迷ったときは、「現在の同期処理」「マイクロタスク」「次のタスク」の順に分けて考えると整理しやすくなります。",[10,4728,4729,4730,4735],{},"より詳しい実行モデルは、",[17,4731,4734],{"href":4732,"rel":4733},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FExecution_model",[21],"MDNのJavaScript実行モデル","も参考になります。",[1684,4737,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":4739},[4740,4741,4742,4743,4744,4745,4746,4747],{"id":4288,"depth":138,"text":4289},{"id":4303,"depth":138,"text":4303},{"id":4430,"depth":138,"text":4306},{"id":4309,"depth":138,"text":4309},{"id":4312,"depth":138,"text":4312},{"id":4315,"depth":138,"text":4315},{"id":4593,"depth":138,"text":4593},{"id":1676,"depth":138,"text":1676},"ブラウザのJavaScriptランタイムを構成するコールスタック、Web APIs、タスクキュー、マイクロタスクキューとイベントループの関係を整理します。",{},"\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime","2024-11-25",{"title":4269,"description":4748},"articles\u002F2024\u002Flearn-javascript-eventloop-from-runtime",[33],"\u002Fimages\u002Farticles\u002Flearn-javascript-eventloop-from-runtime.png","BcnDDE_gLqK4tjYoVA9O89QF7-dNwS-6lyORZ07cH5g",{"id":4758,"title":4759,"body":4760,"description":5176,"extension":1717,"meta":5177,"navigation":141,"path":5178,"publishDate":5179,"published":141,"seo":5180,"stem":5181,"tags":5182,"thumbnail":5183,"updated":5179,"__hash__":5184},"articles\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects.md","JavaScriptのビルトインオブジェクトのメソッドをどう使うか",{"type":7,"value":4761,"toc":5168},[4762,4764,4767,4770,4774,4777,4789,4798,4802,4812,4839,4856,4864,4867,4874,4914,4925,4933,4946,4970,4974,4981,5019,5025,5030,5051,5054,5063,5101,5111,5129,5131,5163,5166],[10,4763,12],{},[10,4765,4766],{},"今回は、プロジェクトで「なるほど」と思った、JavaScriptのビルトインオブジェクトのメソッドの使い方を紹介します。",[10,4768,4769],{},"具体的には、オブジェクトが自身のプロパティを持っているか、安全に確認する方法です。仕組みを知っておくと、オブジェクトに同名のメソッドが定義されている場合も意図した判定ができます。",[41,4771,4773],{"id":4772},"ビルトインオブジェクトってなに","「ビルトインオブジェクト」ってなに？",[10,4775,4776],{},"ビルトインオブジェクトは「組み込みオブジェクト」とも呼ばれ、JavaScriptの実行環境にあらかじめ用意されているオブジェクトです。",[10,4778,4779,595,4782,595,4785,4788],{},[49,4780,4781],{},"Object",[49,4783,4784],{},"Array",[49,4786,4787],{},"String"," など、さまざまな種類があります。",[10,4790,4791,4792,4797],{},"詳しくは、",[17,4793,4796],{"href":4794,"rel":4795},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects",[21],"MDNの標準組み込みオブジェクト","を参照してください。",[41,4799,4801],{"id":4800},"hasownpropertyをインスタンスから呼び出す","hasOwnPropertyをインスタンスから呼び出す",[10,4803,4804,4805,4807,4808,4811],{},"まずは、オブジェクト自身が ",[49,4806,1973],{}," プロパティを持っているか、",[49,4809,4810],{},"hasOwnProperty()"," で確認してみます。",[63,4813,4815],{"className":127,"code":4814,"language":118,"meta":67,"style":67},"const obj = {\n  name: 'Yuri',\n}\n\nobj.hasOwnProperty('name') \u002F\u002F true\n",[49,4816,4817,4822,4826,4830,4834],{"__ignoreMap":67},[71,4818,4819],{"class":73,"line":74},[71,4820,4821],{},"const obj = {\n",[71,4823,4824],{"class":73,"line":138},[71,4825,1945],{},[71,4827,4828],{"class":73,"line":145},[71,4829,160],{},[71,4831,4832],{"class":73,"line":151},[71,4833,142],{"emptyLinePlaceholder":141},[71,4835,4836],{"class":73,"line":157},[71,4837,4838],{},"obj.hasOwnProperty('name') \u002F\u002F true\n",[10,4840,4841,4842,4845,4846,4849,4850,4852,4853,4855],{},"オブジェクトリテラルで作成した ",[49,4843,4844],{},"obj"," は、通常 ",[49,4847,4848],{},"Object.prototype"," を継承しています。そのため、",[49,4851,4848],{}," に定義されている ",[49,4854,4810],{}," を呼び出せます。",[10,4857,4858,4859,4735],{},"プロトタイプ継承については、",[17,4860,4863],{"href":4861,"rel":4862},"https:\u002F\u002Fja.javascript.info\u002Fprototype-inheritance",[21],"JavaScript.infoのプロトタイプ継承",[41,4865,4866],{"id":4866},"インスタンスから呼び出す場合の問題",[10,4868,4869,4870,4873],{},"では、オブジェクト自身が ",[49,4871,4872],{},"hasOwnProperty"," という同名のメソッドを持っていたらどうなるでしょうか。",[63,4875,4877],{"className":127,"code":4876,"language":118,"meta":67,"style":67},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nobj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[49,4878,4879,4883,4887,4892,4897,4901,4905,4909],{"__ignoreMap":67},[71,4880,4881],{"class":73,"line":74},[71,4882,4821],{},[71,4884,4885],{"class":73,"line":138},[71,4886,1945],{},[71,4888,4889],{"class":73,"line":145},[71,4890,4891],{},"  hasOwnProperty() {\n",[71,4893,4894],{"class":73,"line":151},[71,4895,4896],{},"    console.log('Hello')\n",[71,4898,4899],{"class":73,"line":157},[71,4900,1823],{},[71,4902,4903],{"class":73,"line":163},[71,4904,160],{},[71,4906,4907],{"class":73,"line":168},[71,4908,142],{"emptyLinePlaceholder":141},[71,4910,4911],{"class":73,"line":174},[71,4912,4913],{},"obj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[10,4915,4916,4917,4920,4921,4924],{},"先ほどは ",[49,4918,4919],{},"true"," を返していた呼び出しが、今度は ",[49,4922,4923],{},"Hello"," を出力しました。",[10,4926,4927,4929,4930,4932],{},[49,4928,4844],{}," 自身の ",[49,4931,4872],{}," が、プロトタイプから継承した同名メソッドよりも優先されたためです。外部から受け取ったオブジェクトなど、自分で構造を完全に管理できない値では、インスタンスから直接呼び出す方法は意図しない結果につながる可能性があります。",[10,4934,4935,4936,4939,4940,4942,4943,4945],{},"また、",[49,4937,4938],{},"Object.create(null)"," で作ったオブジェクトは ",[49,4941,4848],{}," を継承しないため、そもそも ",[49,4944,4810],{}," を持っていません。",[63,4947,4949],{"className":127,"code":4948,"language":118,"meta":67,"style":67},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nobj.hasOwnProperty('name') \u002F\u002F TypeError\n",[49,4950,4951,4956,4961,4965],{"__ignoreMap":67},[71,4952,4953],{"class":73,"line":74},[71,4954,4955],{},"const obj = Object.create(null)\n",[71,4957,4958],{"class":73,"line":138},[71,4959,4960],{},"obj.name = 'Yuri'\n",[71,4962,4963],{"class":73,"line":145},[71,4964,142],{"emptyLinePlaceholder":141},[71,4966,4967],{"class":73,"line":151},[71,4968,4969],{},"obj.hasOwnProperty('name') \u002F\u002F TypeError\n",[41,4971,4973],{"id":4972},"objecthasownを使う","Object.hasOwnを使う",[10,4975,4976,4977,4980],{},"現在は、オブジェクト自身のプロパティを調べる場合、静的メソッドの ",[49,4978,4979],{},"Object.hasOwn()"," を使うと簡潔です。",[63,4982,4984],{"className":127,"code":4983,"language":118,"meta":67,"style":67},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[49,4985,4986,4990,4994,4998,5002,5006,5010,5014],{"__ignoreMap":67},[71,4987,4988],{"class":73,"line":74},[71,4989,4821],{},[71,4991,4992],{"class":73,"line":138},[71,4993,1945],{},[71,4995,4996],{"class":73,"line":145},[71,4997,4891],{},[71,4999,5000],{"class":73,"line":151},[71,5001,4896],{},[71,5003,5004],{"class":73,"line":157},[71,5005,1823],{},[71,5007,5008],{"class":73,"line":163},[71,5009,160],{},[71,5011,5012],{"class":73,"line":168},[71,5013,142],{"emptyLinePlaceholder":141},[71,5015,5016],{"class":73,"line":174},[71,5017,5018],{},"Object.hasOwn(obj, 'name') \u002F\u002F true\n",[10,5020,5021,5022,5024],{},"第1引数に調べたいオブジェクト、第2引数にプロパティ名を渡します。対象のオブジェクトに同名の ",[49,5023,4872],{}," が定義されていても影響を受けません。",[10,5026,5027,5029],{},[49,5028,4938],{}," で作ったオブジェクトにも使用できます。",[63,5031,5033],{"className":127,"code":5032,"language":118,"meta":67,"style":67},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[49,5034,5035,5039,5043,5047],{"__ignoreMap":67},[71,5036,5037],{"class":73,"line":74},[71,5038,4955],{},[71,5040,5041],{"class":73,"line":138},[71,5042,4960],{},[71,5044,5045],{"class":73,"line":145},[71,5046,142],{"emptyLinePlaceholder":141},[71,5048,5049],{"class":73,"line":151},[71,5050,5018],{},[41,5052,5053],{"id":5053},"古い実行環境も考慮する場合",[10,5055,5056,5058,5059,5062],{},[49,5057,4979],{}," を利用できない古い実行環境まで考慮する場合は、",[49,5060,5061],{},"Object.prototype.hasOwnProperty.call()"," という書き方もできます。",[63,5064,5066],{"className":127,"code":5065,"language":118,"meta":67,"style":67},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nObject.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[49,5067,5068,5072,5076,5080,5084,5088,5092,5096],{"__ignoreMap":67},[71,5069,5070],{"class":73,"line":74},[71,5071,4821],{},[71,5073,5074],{"class":73,"line":138},[71,5075,1945],{},[71,5077,5078],{"class":73,"line":145},[71,5079,4891],{},[71,5081,5082],{"class":73,"line":151},[71,5083,4896],{},[71,5085,5086],{"class":73,"line":157},[71,5087,1823],{},[71,5089,5090],{"class":73,"line":163},[71,5091,160],{},[71,5093,5094],{"class":73,"line":168},[71,5095,142],{"emptyLinePlaceholder":141},[71,5097,5098],{"class":73,"line":174},[71,5099,5100],{},"Object.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[10,5102,5103,5106,5107,5110],{},[49,5104,5105],{},"call()"," の第1引数に ",[49,5108,5109],{},"this"," として扱うオブジェクトを指定し、それ以降の引数を元のメソッドへ渡しています。",[10,5112,5113,5114,5116,5117,5119,5120,5122,5123,5125,5126,5128],{},"この例では ",[49,5115,4848],{}," が持つ本来の ",[49,5118,4810],{}," を直接取得し、",[49,5121,4844],{}," を ",[49,5124,5109],{}," として呼び出しています。そのため、",[49,5127,4844],{}," 自身に定義された同名メソッドの影響を受けません。",[41,5130,1676],{"id":1676},[25,5132,5133,5139,5142,5149,5156],{},[28,5134,5135,5136,5138],{},"オブジェクトリテラルは通常、",[49,5137,4848],{}," のメソッドを継承する",[28,5140,5141],{},"オブジェクト自身が同名メソッドを持つと、継承したメソッドは隠される",[28,5143,5144,4939,5146,5148],{},[49,5145,4938],{},[49,5147,4810],{}," を継承しない",[28,5150,5151,5152,5155],{},"自身のプロパティを確認する場合は、基本的に ",[49,5153,5154],{},"Object.hasOwn(obj, property)"," を使う",[28,5157,5158,5159,5162],{},"古い実行環境も考慮する場合は、",[49,5160,5161],{},"Object.prototype.hasOwnProperty.call(obj, property)"," を使える",[10,5164,5165],{},"オブジェクトの出所や構造を完全には把握できない場合も、インスタンスの同名メソッドに依存しない呼び出し方を選ぶと安全です。",[1684,5167,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":5169},[5170,5171,5172,5173,5174,5175],{"id":4772,"depth":138,"text":4773},{"id":4800,"depth":138,"text":4801},{"id":4866,"depth":138,"text":4866},{"id":4972,"depth":138,"text":4973},{"id":5053,"depth":138,"text":5053},{"id":1676,"depth":138,"text":1676},"JavaScriptでオブジェクト自身のプロパティを安全に確認する方法を、hasOwnPropertyとObject.hasOwnの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects","2024-11-24",{"title":4759,"description":5176},"articles\u002F2024\u002Fhow-to-use-javascript-built-in-objects",[33],"\u002Fimages\u002Farticles\u002Fhow-to-use-javascript-built-in-objects.png","nujvvO9Kj5xXhtbuHUxO1l6JeNtgWjuj3S4rljZKkdU",{"id":5186,"title":5187,"body":5188,"description":5568,"extension":1717,"meta":5569,"navigation":141,"path":5570,"publishDate":5571,"published":141,"seo":5572,"stem":5573,"tags":5574,"thumbnail":5575,"updated":5571,"__hash__":5576},"articles\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy.md","JavaScriptのディープコピーとは？",{"type":7,"value":5189,"toc":5561},[5190,5192,5195,5198,5202,5205,5208,5217,5220,5227,5278,5292,5307,5310,5334,5337,5346,5350,5357,5403,5408,5423,5426,5450,5465,5472,5481,5485,5488,5497,5500,5525,5531,5533,5556,5559],[10,5191,12],{},[10,5193,5194],{},"今回は、JavaScriptにおけるオブジェクトのディープコピーについて紹介します。",[10,5196,5197],{},"シャローコピーとの違いや実装方法を理解しておくと、コピー先の変更が意図せずコピー元へ影響する問題を避けられます。",[41,5199,5201],{"id":5200},"ディープコピーとは","ディープコピーとは？",[10,5203,5204],{},"ディープコピーとは、コピー元とコピー先が、内部にあるオブジェクトの参照を共有しないコピーのことです。",[10,5206,5207],{},"たとえば、入れ子になったオブジェクトをコピーしたあと、コピー先の内側にある値を変更しても、コピー元の値には影響しません。",[10,5209,5210,5211,5216],{},"詳しい定義は、",[17,5212,5215],{"href":5213,"rel":5214},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FGlossary\u002FDeep_copy",[21],"MDNのディープコピー","も参照してください。",[41,5218,5219],{"id":5219},"シャローコピーでは参照が共有される",[10,5221,5222,5223,5226],{},"まずは、",[49,5224,5225],{},"Object.assign()"," を使ったシャローコピーを確認します。",[63,5228,5230],{"className":127,"code":5229,"language":118,"meta":67,"style":67},"const original = {\n  user: {\n    name: 'Yuri',\n  },\n  settings: {\n    theme: 'light',\n  },\n}\n\nconst shallowCopy = Object.assign({}, original)\n",[49,5231,5232,5237,5242,5247,5251,5256,5261,5265,5269,5273],{"__ignoreMap":67},[71,5233,5234],{"class":73,"line":74},[71,5235,5236],{},"const original = {\n",[71,5238,5239],{"class":73,"line":138},[71,5240,5241],{},"  user: {\n",[71,5243,5244],{"class":73,"line":145},[71,5245,5246],{},"    name: 'Yuri',\n",[71,5248,5249],{"class":73,"line":151},[71,5250,1823],{},[71,5252,5253],{"class":73,"line":157},[71,5254,5255],{},"  settings: {\n",[71,5257,5258],{"class":73,"line":163},[71,5259,5260],{},"    theme: 'light',\n",[71,5262,5263],{"class":73,"line":168},[71,5264,1823],{},[71,5266,5267],{"class":73,"line":174},[71,5268,160],{},[71,5270,5271],{"class":73,"line":373},[71,5272,142],{"emptyLinePlaceholder":141},[71,5274,5275],{"class":73,"line":378},[71,5276,5277],{},"const shallowCopy = Object.assign({}, original)\n",[10,5279,5280,5283,5284,5287,5288,5291],{},[49,5281,5282],{},"Object.assign({}, original)"," で新しい外側のオブジェクトは作られますが、",[49,5285,5286],{},"user"," や ",[49,5289,5290],{},"settings"," はコピー元と同じオブジェクトを参照しています。",[63,5293,5295],{"className":127,"code":5294,"language":118,"meta":67,"style":67},"console.log(original === shallowCopy) \u002F\u002F false\nconsole.log(original.user === shallowCopy.user) \u002F\u002F true\n",[49,5296,5297,5302],{"__ignoreMap":67},[71,5298,5299],{"class":73,"line":74},[71,5300,5301],{},"console.log(original === shallowCopy) \u002F\u002F false\n",[71,5303,5304],{"class":73,"line":138},[71,5305,5306],{},"console.log(original.user === shallowCopy.user) \u002F\u002F true\n",[10,5308,5309],{},"そのため、コピー先にある入れ子の値を変更すると、コピー元にも影響します。",[63,5311,5313],{"className":127,"code":5312,"language":118,"meta":67,"style":67},"shallowCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Kohei」\nconsole.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[49,5314,5315,5320,5324,5329],{"__ignoreMap":67},[71,5316,5317],{"class":73,"line":74},[71,5318,5319],{},"shallowCopy.user.name = 'Kohei'\n",[71,5321,5322],{"class":73,"line":138},[71,5323,142],{"emptyLinePlaceholder":141},[71,5325,5326],{"class":73,"line":145},[71,5327,5328],{},"console.log(original.user.name) \u002F\u002F 「Kohei」\n",[71,5330,5331],{"class":73,"line":151},[71,5332,5333],{},"console.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[10,5335,5336],{},"オブジェクトスプレッド構文も、同様にシャローコピーです。",[63,5338,5340],{"className":127,"code":5339,"language":118,"meta":67,"style":67},"const shallowCopy = { ...original }\n",[49,5341,5342],{"__ignoreMap":67},[71,5343,5344],{"class":73,"line":74},[71,5345,5339],{},[41,5347,5349],{"id":5348},"structuredcloneでディープコピーする","structuredCloneでディープコピーする",[10,5351,5352,5353,5356],{},"ディープコピーには、",[49,5354,5355],{},"structuredClone()"," を利用できます。",[63,5358,5360],{"className":127,"code":5359,"language":118,"meta":67,"style":67},"const original = {\n  user: {\n    name: 'Yuri',\n  },\n  settings: {\n    theme: 'light',\n  },\n}\n\nconst deepCopy = structuredClone(original)\n",[49,5361,5362,5366,5370,5374,5378,5382,5386,5390,5394,5398],{"__ignoreMap":67},[71,5363,5364],{"class":73,"line":74},[71,5365,5236],{},[71,5367,5368],{"class":73,"line":138},[71,5369,5241],{},[71,5371,5372],{"class":73,"line":145},[71,5373,5246],{},[71,5375,5376],{"class":73,"line":151},[71,5377,1823],{},[71,5379,5380],{"class":73,"line":157},[71,5381,5255],{},[71,5383,5384],{"class":73,"line":163},[71,5385,5260],{},[71,5387,5388],{"class":73,"line":168},[71,5389,1823],{},[71,5391,5392],{"class":73,"line":174},[71,5393,160],{},[71,5395,5396],{"class":73,"line":373},[71,5397,142],{"emptyLinePlaceholder":141},[71,5399,5400],{"class":73,"line":378},[71,5401,5402],{},"const deepCopy = structuredClone(original)\n",[10,5404,5405,5407],{},[49,5406,5355],{}," で作ったコピーは、入れ子のオブジェクトもコピー元とは異なる参照になります。",[63,5409,5411],{"className":127,"code":5410,"language":118,"meta":67,"style":67},"console.log(original === deepCopy) \u002F\u002F false\nconsole.log(original.user === deepCopy.user) \u002F\u002F false\n",[49,5412,5413,5418],{"__ignoreMap":67},[71,5414,5415],{"class":73,"line":74},[71,5416,5417],{},"console.log(original === deepCopy) \u002F\u002F false\n",[71,5419,5420],{"class":73,"line":138},[71,5421,5422],{},"console.log(original.user === deepCopy.user) \u002F\u002F false\n",[10,5424,5425],{},"コピー先を変更しても、コピー元には影響しません。",[63,5427,5429],{"className":127,"code":5428,"language":118,"meta":67,"style":67},"deepCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Yuri」\nconsole.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[49,5430,5431,5436,5440,5445],{"__ignoreMap":67},[71,5432,5433],{"class":73,"line":74},[71,5434,5435],{},"deepCopy.user.name = 'Kohei'\n",[71,5437,5438],{"class":73,"line":138},[71,5439,142],{"emptyLinePlaceholder":141},[71,5441,5442],{"class":73,"line":145},[71,5443,5444],{},"console.log(original.user.name) \u002F\u002F 「Yuri」\n",[71,5446,5447],{"class":73,"line":151},[71,5448,5449],{},"console.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[10,5451,5452,5454,5455,595,5458,595,5461,5464],{},[49,5453,5355],{}," は通常のオブジェクトや配列だけでなく、",[49,5456,5457],{},"Date",[49,5459,5460],{},"Map",[49,5462,5463],{},"Set"," など、構造化複製アルゴリズムが対応している型をコピーできます。また、循環参照を持つオブジェクトにも対応しています。",[10,5466,5467,5468,5471],{},"ただし、関数など構造化複製できない値が含まれている場合は ",[49,5469,5470],{},"DataCloneError"," が発生します。すべてのJavaScriptの値を無条件にコピーできるわけではありません。",[10,5473,5474,5475,5480],{},"詳しい対応範囲は、",[17,5476,5479],{"href":5477,"rel":5478},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FstructuredClone",[21],"MDNのstructuredClone()","を確認してください。",[41,5482,5484],{"id":5483},"jsonを使ったディープコピーの注意点","JSONを使ったディープコピーの注意点",[10,5486,5487],{},"単純なデータだけを扱う場合、JSONへ変換して戻す方法もあります。",[63,5489,5491],{"className":127,"code":5490,"language":118,"meta":67,"style":67},"const deepCopy = JSON.parse(JSON.stringify(original))\n",[49,5492,5493],{"__ignoreMap":67},[71,5494,5495],{"class":73,"line":74},[71,5496,5490],{},[10,5498,5499],{},"ただし、この方法はJSONとして表現できる値に限られます。",[25,5501,5502,5507,5516,5522],{},[28,5503,5504,5506],{},[49,5505,5457],{}," は文字列へ変換される",[28,5508,5509,5511,5512,5515],{},[49,5510,1994],{},"、関数、",[49,5513,5514],{},"Symbol"," などは正しく保持できない",[28,5517,5518,5521],{},[49,5519,5520],{},"BigInt"," を含むと例外が発生する",[28,5523,5524],{},"循環参照を持つオブジェクトは変換できない",[10,5526,5527,5528,5530],{},"対象がJSON互換のデータだと分かっている場合には使えますが、一般的なディープコピーとしては ",[49,5529,5355],{}," の方が意図を表しやすく、扱える型も多くなります。",[41,5532,1676],{"id":1676},[25,5534,5535,5540,5543,5548,5553],{},[28,5536,5537,5539],{},[49,5538,5225],{}," とオブジェクトスプレッド構文はシャローコピーになる",[28,5541,5542],{},"シャローコピーでは、入れ子のオブジェクトの参照がコピー元と共有される",[28,5544,5545,5547],{},[49,5546,5355],{}," を使うと、対応している値をディープコピーできる",[28,5549,5550,5552],{},[49,5551,5355],{}," でも、関数などコピーできない値がある",[28,5554,5555],{},"JSONによるコピーは、JSON互換データだけに限定して使う",[10,5557,5558],{},"コピー方法を選ぶときは、対象のデータ構造と、コピー後にどの階層まで独立して変更したいかを確認することが大切です。",[1684,5560,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":5562},[5563,5564,5565,5566,5567],{"id":5200,"depth":138,"text":5201},{"id":5219,"depth":138,"text":5219},{"id":5348,"depth":138,"text":5349},{"id":5483,"depth":138,"text":5484},{"id":1676,"depth":138,"text":1676},"JavaScriptのシャローコピーとディープコピーの違いを確認し、structuredCloneを使った実装方法と注意点を整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy","2024-11-23",{"title":5187,"description":5568},"articles\u002F2024\u002Fdescribe-javascript-deepcopy",[33],"\u002Fimages\u002Farticles\u002Fdescribe-javascript-deepcopy.png","dtSQ5LrS1Kfo1hFYE2MzMKOvrhU_5JGE1X1eQ9eHhIY",{"id":5578,"title":5579,"body":5580,"description":5994,"extension":1717,"meta":5995,"navigation":141,"path":5996,"publishDate":5997,"published":141,"seo":5998,"stem":5999,"tags":6000,"thumbnail":6001,"updated":6002,"__hash__":6003},"articles\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this.md","JavaScriptのthisの挙動について呼び出し元で整理する",{"type":7,"value":5581,"toc":5986},[5582,5584,5590,5594,5599,5605,5608,5611,5617,5625,5627,5633,5639,5648,5651,5691,5698,5717,5719,5725,5745,5748,5785,5797,5818,5824,5827,5830,5872,5890,5900,5914,5924,5939,5941,5946,5979,5984],[10,5583,12],{},[10,5585,5586,5587,5589],{},"今回は、プロジェクトや個人開発で振り回されることが多かったJavaScriptの ",[49,5588,5109],{}," の挙動について、あらためて振り返ります。自分をはじめ、初学者の方も知っておくと開発が楽になるかと思います。",[41,5591,5593],{"id":5592},"そもそもthisってなんだ","そもそも「this」ってなんだ？",[10,5595,5596,5598],{},[49,5597,5109],{}," は、関数が実行されたときのコンテキストを参照するためのキーワードです。",[10,5600,5601,5602,5604],{},"同じ関数であっても、どのように呼び出されたかによって ",[49,5603,5109],{}," が参照する値は変わります。この特徴が便利なところでもあり、難しいところでもあります。",[10,5606,5607],{},"それでは、呼び出し方によって参照先がどう変わるのか見てみましょう。",[41,5609,5610],{"id":5610},"使用する場所ごとのthis",[10,5612,5613,5614,5616],{},"この記事では、",[49,5615,5109],{}," を使用するケースを次の2つに分けて確認します。",[25,5618,5619,5622],{},[28,5620,5621],{},"オブジェクトのメソッドとして呼び出す場合",[28,5623,5624],{},"通常の関数として呼び出す場合",[41,5626,5621],{"id":5621},[10,5628,5629,5630,5632],{},"オブジェクトのメソッドとして呼び出した場合、",[49,5631,5109],{}," は基本的に呼び出し元のオブジェクトを参照します。",[10,5634,5635,5636,5638],{},"ここでいう呼び出し元のオブジェクトとは、次の例では ",[49,5637,4844],{}," のことです。",[63,5640,5642],{"className":127,"code":5641,"language":118,"meta":67,"style":67},"const obj = {}\n",[49,5643,5644],{"__ignoreMap":67},[71,5645,5646],{"class":73,"line":74},[71,5647,5641],{},[10,5649,5650],{},"実際に挙動を見てみましょう。",[63,5652,5654],{"className":127,"code":5653,"language":118,"meta":67,"style":67},"const obj = {\n  name: 'Yuri',\n  message: function () {\n    console.log('Hello ' + this.name)\n  },\n}\n\nobj.message()\n",[49,5655,5656,5660,5664,5669,5674,5678,5682,5686],{"__ignoreMap":67},[71,5657,5658],{"class":73,"line":74},[71,5659,4821],{},[71,5661,5662],{"class":73,"line":138},[71,5663,1945],{},[71,5665,5666],{"class":73,"line":145},[71,5667,5668],{},"  message: function () {\n",[71,5670,5671],{"class":73,"line":151},[71,5672,5673],{},"    console.log('Hello ' + this.name)\n",[71,5675,5676],{"class":73,"line":157},[71,5677,1823],{},[71,5679,5680],{"class":73,"line":163},[71,5681,160],{},[71,5683,5684],{"class":73,"line":168},[71,5685,142],{"emptyLinePlaceholder":141},[71,5687,5688],{"class":73,"line":174},[71,5689,5690],{},"obj.message()\n",[10,5692,5693,5694,5697],{},"この例では、",[49,5695,5696],{},"Hello Yuri"," と出力されます。",[10,5699,5700,5703,5704,5706,5707,5709,5710,5706,5713,5716],{},[49,5701,5702],{},"obj.message()"," という形で呼び出しているため、メソッド内の ",[49,5705,5109],{}," は ",[49,5708,4844],{}," を参照します。したがって、",[49,5711,5712],{},"this.name",[49,5714,5715],{},"obj.name"," として評価されます。",[41,5718,5624],{"id":5624},[10,5720,5721,5722,5724],{},"通常の関数として呼び出した場合、",[49,5723,5109],{}," の値は実行モードによって異なります。",[25,5726,5727,5737],{},[28,5728,5729,5730,5732,5733,5736],{},"非厳格モードのブラウザでは、",[49,5731,5109],{}," はグローバルオブジェクトの ",[49,5734,5735],{},"window"," を参照する",[28,5738,5739,5740,5706,5742,5744],{},"厳格モードやES Modulesでは、",[49,5741,5109],{},[49,5743,1994],{}," になる",[10,5746,5747],{},"次のコードは、ブラウザの非厳格モードで実行する例です。",[63,5749,5751],{"className":127,"code":5750,"language":118,"meta":67,"style":67},"window.name = 'Yuri'\n\nfunction message() {\n  console.log('Hello ' + this.name)\n}\n\nmessage()\n",[49,5752,5753,5758,5762,5767,5772,5776,5780],{"__ignoreMap":67},[71,5754,5755],{"class":73,"line":74},[71,5756,5757],{},"window.name = 'Yuri'\n",[71,5759,5760],{"class":73,"line":138},[71,5761,142],{"emptyLinePlaceholder":141},[71,5763,5764],{"class":73,"line":145},[71,5765,5766],{},"function message() {\n",[71,5768,5769],{"class":73,"line":151},[71,5770,5771],{},"  console.log('Hello ' + this.name)\n",[71,5773,5774],{"class":73,"line":157},[71,5775,160],{},[71,5777,5778],{"class":73,"line":163},[71,5779,142],{"emptyLinePlaceholder":141},[71,5781,5782],{"class":73,"line":168},[71,5783,5784],{},"message()\n",[10,5786,5787,5788,5790,5791,5794,5795,5697],{},"非厳格モードでは ",[49,5789,5712],{}," が ",[49,5792,5793],{},"window.name"," として評価されるため、",[49,5796,5696],{},[5798,5799,5800],"blockquote",{},[10,5801,5802,5287,5805,5807,5808,5810,5811,5814,5815,5817],{},[49,5803,5804],{},"let",[49,5806,298],{}," で宣言した変数は、",[49,5809,5735],{}," オブジェクトのプロパティとして追加されません。一方、ブラウザでトップレベルに ",[49,5812,5813],{},"var"," を使って宣言した変数は、",[49,5816,5735],{}," のプロパティになります。",[10,5819,5820,5821,5823],{},"現在のフロントエンド開発ではES Modulesが広く使われています。ES Modulesは自動的に厳格モードとして扱われるため、通常の関数呼び出しで ",[49,5822,5109],{}," に依存する実装は避けた方が安全です。",[41,5825,5826],{"id":5826},"オブジェクトのメソッドを変数へ代入した場合",[10,5828,5829],{},"ここまでを踏まえて、オブジェクトのメソッドを変数へ代入した場合の挙動を見てみましょう。",[63,5831,5833],{"className":127,"code":5832,"language":118,"meta":67,"style":67},"const obj = {\n  name: 'Yuri',\n  message: function () {\n    console.log('Hello ' + this.name)\n  },\n}\n\nconst message = obj.message\nmessage()\n",[49,5834,5835,5839,5843,5847,5851,5855,5859,5863,5868],{"__ignoreMap":67},[71,5836,5837],{"class":73,"line":74},[71,5838,4821],{},[71,5840,5841],{"class":73,"line":138},[71,5842,1945],{},[71,5844,5845],{"class":73,"line":145},[71,5846,5668],{},[71,5848,5849],{"class":73,"line":151},[71,5850,5673],{},[71,5852,5853],{"class":73,"line":157},[71,5854,1823],{},[71,5856,5857],{"class":73,"line":163},[71,5858,160],{},[71,5860,5861],{"class":73,"line":168},[71,5862,142],{"emptyLinePlaceholder":141},[71,5864,5865],{"class":73,"line":174},[71,5866,5867],{},"const message = obj.message\n",[71,5869,5870],{"class":73,"line":373},[71,5871,5784],{},[10,5873,5874,5877,5878,5880,5881,5884,5885,4688,5887,5889],{},[49,5875,5876],{},"const message = obj.message"," では、関数そのものを変数へ代入しています。その後は ",[49,5879,5702],{}," ではなく ",[49,5882,5883],{},"message()"," として呼び出しているため、",[49,5886,5109],{},[49,5888,4844],{}," の結び付きは失われます。",[10,5891,5787,5892,5790,5894,5896,5897,5899],{},[49,5893,5109],{},[49,5895,5735],{}," を参照します。",[49,5898,5793],{}," が設定されていなければ、実行環境に応じて空文字などが返ります。",[10,5901,5902,5903,5790,5905,5907,5908,5910,5911,5913],{},"厳格モードやES Modulesでは ",[49,5904,5109],{},[49,5906,1994],{}," になるため、",[49,5909,5712],{}," を読み取ろうとすると ",[49,5912,2172],{}," が発生します。",[10,5915,5916,5917,5920,5921,5923],{},"このような場合は、",[49,5918,5919],{},"bind()"," を使って ",[49,5922,5109],{}," の参照先を固定できます。",[63,5925,5927],{"className":127,"code":5926,"language":118,"meta":67,"style":67},"const message = obj.message.bind(obj)\nmessage() \u002F\u002F 「Hello Yuri」と出力される\n",[49,5928,5929,5934],{"__ignoreMap":67},[71,5930,5931],{"class":73,"line":74},[71,5932,5933],{},"const message = obj.message.bind(obj)\n",[71,5935,5936],{"class":73,"line":138},[71,5937,5938],{},"message() \u002F\u002F 「Hello Yuri」と出力される\n",[41,5940,1676],{"id":1676},[10,5942,5943,5945],{},[49,5944,5109],{}," の参照先は、関数を定義した場所だけではなく、主に関数の呼び出し方によって決まります。",[25,5947,5948,5957,5967,5970],{},[28,5949,5950,5952,5953,5706,5955,5736],{},[49,5951,5702],{}," のようなメソッド呼び出しでは、",[49,5954,5109],{},[49,5956,4844],{},[28,5958,5959,5961,5962,5964,5965,5744],{},[49,5960,5883],{}," のような通常の関数呼び出しでは、非厳格モードのブラウザなら ",[49,5963,5735],{},"、厳格モードやES Modulesなら ",[49,5966,1994],{},[28,5968,5969],{},"メソッドを変数へ代入すると、元のオブジェクトとの結び付きは失われる",[28,5971,5972,5973,5975,5976,5978],{},"元のオブジェクトを参照させたい場合は、",[49,5974,5919],{}," で ",[49,5977,5109],{}," を固定できる",[10,5980,5981,5983],{},[49,5982,5109],{}," で迷ったときは「この関数はどのような形で呼び出されているか」を確認すると、参照先を判断しやすくなります。",[1684,5985,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":5987},[5988,5989,5990,5991,5992,5993],{"id":5592,"depth":138,"text":5593},{"id":5610,"depth":138,"text":5610},{"id":5621,"depth":138,"text":5621},{"id":5624,"depth":138,"text":5624},{"id":5826,"depth":138,"text":5826},{"id":1676,"depth":138,"text":1676},"JavaScriptのthisが何を参照するのか、メソッド呼び出しと関数呼び出しの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this","2024-11-20",{"title":5579,"description":5994},"articles\u002F2024\u002Fdescribe-behavior-javascript-this",[33],"\u002Fimages\u002Farticles\u002Fdescribe-behavior-javascript-this.png","2025-03-21","Kay_1TeIK8YsouKEwYLRPzbQMnabHxZ_GWvHciKSZBs",[6005,6550,7897,8275,8646,8972,9271],{"id":1728,"title":1729,"body":6006,"description":2421,"extension":1717,"meta":6547,"navigation":141,"path":2423,"publishDate":2424,"published":141,"seo":6548,"stem":2426,"tags":6549,"thumbnail":2428,"updated":2424,"__hash__":2429},{"type":7,"value":6007,"toc":6532},[6008,6010,6012,6014,6016,6056,6058,6060,6120,6130,6142,6152,6164,6166,6168,6200,6206,6210,6218,6242,6252,6254,6266,6268,6272,6320,6322,6326,6354,6360,6362,6368,6384,6386,6392,6424,6426,6446,6450,6454,6462,6486,6500,6502,6506,6508,6520,6522,6524,6530],[10,6009,12],{},[10,6011,1736],{},[41,6013,1739],{"id":1739},[10,6015,1742],{},[63,6017,6018],{"className":127,"code":1745,"language":118,"meta":67,"style":67},[49,6019,6020,6024,6028,6032,6036,6040,6044,6048,6052],{"__ignoreMap":67},[71,6021,6022],{"class":73,"line":74},[71,6023,1752],{},[71,6025,6026],{"class":73,"line":138},[71,6027,1757],{},[71,6029,6030],{"class":73,"line":145},[71,6031,1762],{},[71,6033,6034],{"class":73,"line":151},[71,6035,160],{},[71,6037,6038],{"class":73,"line":157},[71,6039,142],{"emptyLinePlaceholder":141},[71,6041,6042],{"class":73,"line":163},[71,6043,1775],{},[71,6045,6046],{"class":73,"line":168},[71,6047,142],{"emptyLinePlaceholder":141},[71,6049,6050],{"class":73,"line":174},[71,6051,1784],{},[71,6053,6054],{"class":73,"line":373},[71,6055,1789],{},[45,6057,1792],{"id":1792},[10,6059,1795],{},[63,6061,6062],{"className":127,"code":1798,"language":118,"meta":67,"style":67},[49,6063,6064,6068,6072,6076,6080,6084,6088,6092,6096,6100,6104,6108,6112,6116],{"__ignoreMap":67},[71,6065,6066],{"class":73,"line":74},[71,6067,1752],{},[71,6069,6070],{"class":73,"line":138},[71,6071,1757],{},[71,6073,6074],{"class":73,"line":145},[71,6075,1813],{},[71,6077,6078],{"class":73,"line":151},[71,6079,1818],{},[71,6081,6082],{"class":73,"line":157},[71,6083,1823],{},[71,6085,6086],{"class":73,"line":163},[71,6087,160],{},[71,6089,6090],{"class":73,"line":168},[71,6091,142],{"emptyLinePlaceholder":141},[71,6093,6094],{"class":73,"line":174},[71,6095,1836],{},[71,6097,6098],{"class":73,"line":373},[71,6099,1841],{},[71,6101,6102],{"class":73,"line":378},[71,6103,1846],{},[71,6105,6106],{"class":73,"line":383},[71,6107,1851],{},[71,6109,6110],{"class":73,"line":398},[71,6111,142],{"emptyLinePlaceholder":141},[71,6113,6114],{"class":73,"line":410},[71,6115,1784],{},[71,6117,6118],{"class":73,"line":422},[71,6119,1789],{},[10,6121,1866,6122,194,6124,1873,6126,1877,6128,1880],{},[49,6123,1869],{},[49,6125,1872],{},[49,6127,1876],{},[49,6129,1872],{},[63,6131,6132],{"className":127,"code":1883,"language":118,"meta":67,"style":67},[49,6133,6134,6138],{"__ignoreMap":67},[71,6135,6136],{"class":73,"line":74},[71,6137,1890],{},[71,6139,6140],{"class":73,"line":138},[71,6141,1895],{},[109,6143,6144],{"title":1898,"type":1899},[10,6145,6146,1904,6148,1907,6150,1910],{},[49,6147,1876],{},[49,6149,1872],{},[49,6151,1876],{},[63,6153,6154],{"className":127,"code":1913,"language":118,"meta":67,"style":67},[49,6155,6156,6160],{"__ignoreMap":67},[71,6157,6158],{"class":73,"line":74},[71,6159,1920],{},[71,6161,6162],{"class":73,"line":138},[71,6163,1925],{},[45,6165,1928],{"id":1928},[10,6167,1931],{},[63,6169,6170],{"className":127,"code":1934,"language":118,"meta":67,"style":67},[49,6171,6172,6176,6180,6184,6188,6192,6196],{"__ignoreMap":67},[71,6173,6174],{"class":73,"line":74},[71,6175,1752],{},[71,6177,6178],{"class":73,"line":138},[71,6179,1945],{},[71,6181,6182],{"class":73,"line":145},[71,6183,160],{},[71,6185,6186],{"class":73,"line":151},[71,6187,142],{"emptyLinePlaceholder":141},[71,6189,6190],{"class":73,"line":157},[71,6191,1958],{},[71,6193,6194],{"class":73,"line":163},[71,6195,142],{"emptyLinePlaceholder":141},[71,6197,6198],{"class":73,"line":168},[71,6199,1967],{},[10,6201,1970,6202,1974,6204,1873],{},[49,6203,1973],{},[49,6205,1977],{},[41,6207,1981,6208,1985],{"id":1980},[49,6209,1984],{},[10,6211,1988,6212,1991,6214,1995,6216,1998],{},[49,6213,881],{},[49,6215,1994],{},[49,6217,1994],{},[63,6219,6220],{"className":127,"code":2001,"language":118,"meta":67,"style":67},[49,6221,6222,6226,6230,6234,6238],{"__ignoreMap":67},[71,6223,6224],{"class":73,"line":74},[71,6225,1752],{},[71,6227,6228],{"class":73,"line":138},[71,6229,1945],{},[71,6231,6232],{"class":73,"line":145},[71,6233,160],{},[71,6235,6236],{"class":73,"line":151},[71,6237,142],{"emptyLinePlaceholder":141},[71,6239,6240],{"class":73,"line":157},[71,6241,2024],{},[10,6243,6244,2030,6246,2033,6248,2036,6250,2040],{},[49,6245,2029],{},[49,6247,1994],{},[49,6249,1984],{},[49,6251,2039],{},[10,6253,2043],{},[63,6255,6256],{"className":127,"code":2046,"language":118,"meta":67,"style":67},[49,6257,6258,6262],{"__ignoreMap":67},[71,6259,6260],{"class":73,"line":74},[71,6261,2053],{},[71,6263,6264],{"class":73,"line":138},[71,6265,2058],{},[45,6267,2061],{"id":2061},[10,6269,2064,6270,2068],{},[49,6271,2067],{},[63,6273,6274],{"className":127,"code":2071,"language":118,"meta":67,"style":67},[49,6275,6276,6280,6284,6288,6292,6296,6300,6304,6308,6312,6316],{"__ignoreMap":67},[71,6277,6278],{"class":73,"line":74},[71,6279,2078],{},[71,6281,6282],{"class":73,"line":138},[71,6283,2083],{},[71,6285,6286],{"class":73,"line":145},[71,6287,2088],{},[71,6289,6290],{"class":73,"line":151},[71,6291,1380],{},[71,6293,6294],{"class":73,"line":157},[71,6295,142],{"emptyLinePlaceholder":141},[71,6297,6298],{"class":73,"line":163},[71,6299,2101],{},[71,6301,6302],{"class":73,"line":168},[71,6303,2106],{},[71,6305,6306],{"class":73,"line":174},[71,6307,142],{"emptyLinePlaceholder":141},[71,6309,6310],{"class":73,"line":373},[71,6311,2115],{},[71,6313,6314],{"class":73,"line":378},[71,6315,142],{"emptyLinePlaceholder":141},[71,6317,6318],{"class":73,"line":383},[71,6319,2124],{},[45,6321,2127],{"id":2127},[10,6323,2130,6324,447],{},[49,6325,2133],{},[63,6327,6328],{"className":127,"code":2136,"language":118,"meta":67,"style":67},[49,6329,6330,6334,6338,6342,6346,6350],{"__ignoreMap":67},[71,6331,6332],{"class":73,"line":74},[71,6333,2143],{},[71,6335,6336],{"class":73,"line":138},[71,6337,2148],{},[71,6339,6340],{"class":73,"line":145},[71,6341,160],{},[71,6343,6344],{"class":73,"line":151},[71,6345,142],{"emptyLinePlaceholder":141},[71,6347,6348],{"class":73,"line":157},[71,6349,2161],{},[71,6351,6352],{"class":73,"line":163},[71,6353,2166],{},[10,6355,2169,6356,2173,6358,2176],{},[49,6357,2172],{},[49,6359,2133],{},[45,6361,2180],{"id":2179},[10,6363,6364,2186,6366,2189],{},[49,6365,2185],{},[49,6367,881],{},[63,6369,6370],{"className":127,"code":2192,"language":118,"meta":67,"style":67},[49,6371,6372,6376,6380],{"__ignoreMap":67},[71,6373,6374],{"class":73,"line":74},[71,6375,2199],{},[71,6377,6378],{"class":73,"line":138},[71,6379,142],{"emptyLinePlaceholder":141},[71,6381,6382],{"class":73,"line":145},[71,6383,2208],{},[45,6385,2211],{"id":2211},[10,6387,2214,6388,1991,6390,2219],{},[49,6389,881],{},[49,6391,1994],{},[63,6393,6394],{"className":127,"code":2222,"language":118,"meta":67,"style":67},[49,6395,6396,6400,6404,6408,6412,6416,6420],{"__ignoreMap":67},[71,6397,6398],{"class":73,"line":74},[71,6399,2229],{},[71,6401,6402],{"class":73,"line":138},[71,6403,2234],{},[71,6405,6406],{"class":73,"line":145},[71,6407,142],{"emptyLinePlaceholder":141},[71,6409,6410],{"class":73,"line":151},[71,6411,2243],{},[71,6413,6414],{"class":73,"line":157},[71,6415,142],{"emptyLinePlaceholder":141},[71,6417,6418],{"class":73,"line":163},[71,6419,2252],{},[71,6421,6422],{"class":73,"line":168},[71,6423,2257],{},[10,6425,2260],{},[63,6427,6428],{"className":127,"code":2263,"language":118,"meta":67,"style":67},[49,6429,6430,6434,6438,6442],{"__ignoreMap":67},[71,6431,6432],{"class":73,"line":74},[71,6433,2270],{},[71,6435,6436],{"class":73,"line":138},[71,6437,142],{"emptyLinePlaceholder":141},[71,6439,6440],{"class":73,"line":145},[71,6441,2279],{},[71,6443,6444],{"class":73,"line":151},[71,6445,2284],{},[10,6447,2287,6448,2291],{},[49,6449,2290],{},[41,6451,6452,2294],{"id":2294},[49,6453,2297],{},[10,6455,2300,6456,1991,6458,2305,6460,2308],{},[49,6457,881],{},[49,6459,1994],{},[49,6461,2297],{},[63,6463,6464],{"className":127,"code":2311,"language":118,"meta":67,"style":67},[49,6465,6466,6470,6474,6478,6482],{"__ignoreMap":67},[71,6467,6468],{"class":73,"line":74},[71,6469,2318],{},[71,6471,6472],{"class":73,"line":138},[71,6473,142],{"emptyLinePlaceholder":141},[71,6475,6476],{"class":73,"line":145},[71,6477,2327],{},[71,6479,6480],{"class":73,"line":151},[71,6481,142],{"emptyLinePlaceholder":141},[71,6483,6484],{"class":73,"line":157},[71,6485,2336],{},[10,6487,6488,2030,6490,2345,6492,2349,6494,2352,6496,1991,6498,2357],{},[49,6489,2341],{},[49,6491,2344],{},[49,6493,2348],{},[49,6495,2297],{},[49,6497,881],{},[49,6499,1994],{},[41,6501,2360],{"id":2360},[10,6503,2363,6504,2366],{},[49,6505,1994],{},[10,6507,2369],{},[25,6509,6510,6514,6516],{},[28,6511,2374,6512,2377],{},[49,6513,1984],{},[28,6515,2380],{},[28,6517,2383,6518,2386],{},[49,6519,2297],{},[41,6521,1676],{"id":1676},[10,6523,2391],{},[10,6525,2394,6526,2397,6528,2400],{},[49,6527,881],{},[49,6529,1994],{},[1684,6531,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":6533},[6534,6538,6544,6545,6546],{"id":1739,"depth":138,"text":1739,"children":6535},[6536,6537],{"id":1792,"depth":145,"text":1792},{"id":1928,"depth":145,"text":1928},{"id":1980,"depth":138,"text":2411,"children":6539},[6540,6541,6542,6543],{"id":2061,"depth":145,"text":2061},{"id":2127,"depth":145,"text":2127},{"id":2179,"depth":145,"text":2180},{"id":2211,"depth":145,"text":2211},{"id":2294,"depth":138,"text":2418},{"id":2360,"depth":138,"text":2360},{"id":1676,"depth":138,"text":1676},{},{"title":1729,"description":2421},[33],{"id":4,"title":5,"body":6551,"description":1716,"extension":1717,"meta":7894,"navigation":141,"path":1719,"publishDate":1720,"published":141,"seo":7895,"stem":1722,"tags":7896,"thumbnail":1724,"updated":1720,"__hash__":1725},{"type":7,"value":6552,"toc":7866},[6553,6555,6560,6570,6572,6576,6582,6606,6608,6612,6614,6616,6618,6654,6656,6658,6660,6666,6668,6670,6674,6680,6844,6852,6854,6856,6934,6936,6938,7006,7008,7010,7032,7034,7036,7042,7164,7166,7168,7170,7172,7174,7180,7188,7254,7258,7262,7266,7302,7306,7308,7310,7366,7370,7372,7376,7474,7480,7484,7488,7542,7544,7546,7548,7636,7638,7642,7658,7664,7666,7668,7740,7744,7746,7748,7856,7858,7860,7862,7864],[10,6554,12],{},[10,6556,15,6557,23],{},[17,6558,22],{"href":19,"rel":6559},[21],[25,6561,6562,6564,6566,6568],{},[28,6563,30],{},[28,6565,33],{},[28,6567,36],{},[28,6569,39],{},[41,6571,30],{"id":43},[45,6573,6574,52],{"id":47},[49,6575,51],{},[10,6577,6578,57,6580,61],{},[49,6579,51],{},[49,6581,60],{},[63,6583,6584],{"className":65,"code":66,"language":43,"meta":67,"style":67},[49,6585,6586],{"__ignoreMap":67},[71,6587,6588,6590,6592,6594,6596,6598,6600,6602,6604],{"class":73,"line":74},[71,6589,78],{"class":77},[71,6591,82],{"class":81},[71,6593,86],{"class":85},[71,6595,89],{"class":77},[71,6597,92],{"class":77},[71,6599,96],{"class":95},[71,6601,92],{"class":77},[71,6603,101],{"class":85},[71,6605,104],{"class":77},[10,6607,107],{},[109,6609,6610],{"title":111,"type":112},[10,6611,115],{},[41,6613,33],{"id":118},[45,6615,121],{"id":121},[10,6617,124],{},[63,6619,6620],{"className":127,"code":128,"language":118,"meta":67,"style":67},[49,6621,6622,6626,6630,6634,6638,6642,6646,6650],{"__ignoreMap":67},[71,6623,6624],{"class":73,"line":74},[71,6625,135],{},[71,6627,6628],{"class":73,"line":138},[71,6629,142],{"emptyLinePlaceholder":141},[71,6631,6632],{"class":73,"line":145},[71,6633,148],{},[71,6635,6636],{"class":73,"line":151},[71,6637,154],{},[71,6639,6640],{"class":73,"line":157},[71,6641,160],{},[71,6643,6644],{"class":73,"line":163},[71,6645,142],{"emptyLinePlaceholder":141},[71,6647,6648],{"class":73,"line":168},[71,6649,171],{},[71,6651,6652],{"class":73,"line":174},[71,6653,177],{},[10,6655,180],{},[45,6657,184],{"id":183},[10,6659,187],{},[10,6661,190,6662,194,6664,198],{},[49,6663,193],{},[49,6665,197],{},[10,6667,201],{},[41,6669,36],{"id":204},[45,6671,6672],{"id":207},[49,6673,210],{},[10,6675,6676,215,6678,219],{},[49,6677,210],{},[49,6679,218],{},[63,6681,6682],{"className":222,"code":223,"language":224,"meta":67,"style":67},[49,6683,6684,6702,6720,6734,6738,6762,6766,6778,6796,6800,6804,6816,6824,6832,6840],{"__ignoreMap":67},[71,6685,6686,6688,6690,6692,6694,6696,6698,6700],{"class":73,"line":74},[71,6687,193],{"class":231},[71,6689,234],{"class":77},[71,6691,238],{"class":237},[71,6693,241],{"class":77},[71,6695,244],{"class":231},[71,6697,247],{"class":77},[71,6699,204],{"class":95},[71,6701,252],{"class":77},[71,6703,6704,6706,6708,6710,6712,6714,6716,6718],{"class":73,"line":138},[71,6705,193],{"class":231},[71,6707,234],{"class":77},[71,6709,261],{"class":237},[71,6711,241],{"class":77},[71,6713,244],{"class":231},[71,6715,247],{"class":77},[71,6717,270],{"class":95},[71,6719,252],{"class":77},[71,6721,6722,6724,6726,6728,6730,6732],{"class":73,"line":145},[71,6723,193],{"class":231},[71,6725,279],{"class":237},[71,6727,282],{"class":231},[71,6729,247],{"class":77},[71,6731,287],{"class":95},[71,6733,252],{"class":77},[71,6735,6736],{"class":73,"line":151},[71,6737,142],{"emptyLinePlaceholder":141},[71,6739,6740,6742,6744,6746,6748,6750,6752,6754,6756,6758,6760],{"class":73,"line":157},[71,6741,298],{"class":85},[71,6743,301],{"class":237},[71,6745,89],{"class":77},[71,6747,306],{"class":237},[71,6749,309],{"class":77},[71,6751,313],{"class":312},[71,6753,316],{"class":237},[71,6755,319],{"class":77},[71,6757,322],{"class":95},[71,6759,319],{"class":77},[71,6761,327],{"class":237},[71,6763,6764],{"class":73,"line":163},[71,6765,142],{"emptyLinePlaceholder":141},[71,6767,6768,6770,6772,6774,6776],{"class":73,"line":168},[71,6769,336],{"class":231},[71,6771,339],{"class":237},[71,6773,342],{"class":77},[71,6775,345],{"class":237},[71,6777,348],{"class":77},[71,6779,6780,6782,6784,6786,6788,6790,6792,6794],{"class":73,"line":174},[71,6781,353],{"class":231},[71,6783,356],{"class":77},[71,6785,359],{"class":312},[71,6787,316],{"class":81},[71,6789,319],{"class":77},[71,6791,366],{"class":95},[71,6793,319],{"class":77},[71,6795,327],{"class":81},[71,6797,6798],{"class":73,"line":373},[71,6799,160],{"class":77},[71,6801,6802],{"class":73,"line":378},[71,6803,142],{"emptyLinePlaceholder":141},[71,6805,6806,6808,6810,6812,6814],{"class":73,"line":383},[71,6807,210],{"class":312},[71,6809,388],{"class":237},[71,6811,309],{"class":77},[71,6813,218],{"class":312},[71,6815,395],{"class":237},[71,6817,6818,6820,6822],{"class":73,"line":398},[71,6819,401],{"class":77},[71,6821,405],{"class":404},[71,6823,104],{"class":77},[71,6825,6826,6828,6830],{"class":73,"line":410},[71,6827,413],{"class":77},[71,6829,416],{"class":404},[71,6831,419],{"class":77},[71,6833,6834,6836,6838],{"class":73,"line":422},[71,6835,425],{"class":77},[71,6837,405],{"class":404},[71,6839,430],{"class":77},[71,6841,6842],{"class":73,"line":433},[71,6843,327],{"class":237},[10,6845,6846,440,6848,443,6850,447],{},[49,6847,210],{},[49,6849,210],{},[49,6851,446],{},[45,6853,450],{"id":450},[10,6855,453],{},[63,6857,6858],{"className":222,"code":456,"language":224,"meta":67,"style":67},[49,6859,6860,6870,6884,6896,6916,6924,6930],{"__ignoreMap":67},[71,6861,6862,6864,6866,6868],{"class":73,"line":74},[71,6863,463],{"class":312},[71,6865,316],{"class":237},[71,6867,469],{"class":468},[71,6869,472],{"class":85},[71,6871,6872,6874,6876,6878,6880,6882],{"class":73,"line":138},[71,6873,477],{"class":237},[71,6875,309],{"class":77},[71,6877,482],{"class":312},[71,6879,316],{"class":237},[71,6881,487],{"class":468},[71,6883,472],{"class":85},[71,6885,6886,6888,6890,6892,6894],{"class":73,"line":145},[71,6887,494],{"class":237},[71,6889,309],{"class":77},[71,6891,499],{"class":237},[71,6893,502],{"class":77},[71,6895,505],{"class":237},[71,6897,6898,6900,6902,6904,6906,6908,6910,6912,6914],{"class":73,"line":151},[71,6899,510],{"class":77},[71,6901,234],{"class":77},[71,6903,515],{"class":77},[71,6905,487],{"class":237},[71,6907,520],{"class":77},[71,6909,523],{"class":81},[71,6911,526],{"class":77},[71,6913,530],{"class":529},[71,6915,533],{"class":77},[71,6917,6918,6920,6922],{"class":73,"line":157},[71,6919,538],{"class":77},[71,6921,541],{"class":237},[71,6923,544],{"class":77},[71,6925,6926,6928],{"class":73,"line":163},[71,6927,549],{"class":237},[71,6929,544],{"class":77},[71,6931,6932],{"class":73,"line":168},[71,6933,327],{"class":237},[10,6935,558],{},[10,6937,561],{},[563,6939,6940,6950],{},[566,6941,6942],{},[569,6943,6944,6946,6948],{},[572,6945,574],{},[572,6947,577],{},[572,6949,580],{},[582,6951,6952,6966,6982,6994],{},[569,6953,6954,6956,6962],{},[587,6955,589],{},[587,6957,6958,595,6960],{},[49,6959,594],{},[49,6961,598],{},[587,6963,601,6964],{},[49,6965,604],{},[569,6967,6968,6970,6976],{},[587,6969,609],{},[587,6971,6972,595,6974],{},[49,6973,614],{},[49,6975,617],{},[587,6977,6978,595,6980],{},[49,6979,622],{},[49,6981,625],{},[569,6983,6984,6986,6990],{},[587,6985,630],{},[587,6987,633,6988],{},[49,6989,617],{},[587,6991,6992],{},[49,6993,482],{},[569,6995,6996,6998,7002],{},[587,6997,644],{},[587,6999,647,7000],{},[49,7001,650],{},[587,7003,653,7004],{},[49,7005,650],{},[45,7007,658],{"id":658},[10,7009,661],{},[63,7011,7012],{"className":222,"code":664,"language":224,"meta":67,"style":67},[49,7013,7014],{"__ignoreMap":67},[71,7015,7016,7018,7020,7022,7024,7026,7028,7030],{"class":73,"line":74},[71,7017,671],{"class":312},[71,7019,316],{"class":237},[71,7021,676],{"class":468},[71,7023,679],{"class":85},[71,7025,682],{"class":237},[71,7027,685],{"class":77},[71,7029,689],{"class":688},[71,7031,327],{"class":237},[10,7033,694],{},[45,7035,697],{"id":697},[10,7037,700,7038,704,7040,708],{},[49,7039,703],{},[49,7041,707],{},[63,7043,7044],{"className":222,"code":711,"language":224,"meta":67,"style":67},[49,7045,7046,7056,7076,7080,7084,7102,7116,7126,7130,7134,7160],{"__ignoreMap":67},[71,7047,7048,7050,7052,7054],{"class":73,"line":74},[71,7049,718],{"class":85},[71,7051,721],{"class":404},[71,7053,724],{"class":77},[71,7055,727],{"class":77},[71,7057,7058,7060,7062,7064,7066,7068,7070,7072,7074],{"class":73,"line":138},[71,7059,732],{"class":81},[71,7061,526],{"class":77},[71,7063,339],{"class":77},[71,7065,739],{"class":468},[71,7067,526],{"class":77},[71,7069,744],{"class":404},[71,7071,747],{"class":77},[71,7073,679],{"class":85},[71,7075,752],{"class":404},[71,7077,7078],{"class":73,"line":145},[71,7079,160],{"class":77},[71,7081,7082],{"class":73,"line":151},[71,7083,142],{"emptyLinePlaceholder":141},[71,7085,7086,7088,7090,7092,7094,7096,7098,7100],{"class":73,"line":157},[71,7087,765],{"class":85},[71,7089,768],{"class":312},[71,7091,771],{"class":77},[71,7093,774],{"class":468},[71,7095,777],{"class":77},[71,7097,721],{"class":404},[71,7099,747],{"class":77},[71,7101,727],{"class":77},[71,7103,7104,7106,7108,7110,7112,7114],{"class":73,"line":163},[71,7105,788],{"class":85},[71,7107,791],{"class":237},[71,7109,724],{"class":77},[71,7111,796],{"class":77},[71,7113,679],{"class":85},[71,7115,727],{"class":77},[71,7117,7118,7120,7122,7124],{"class":73,"line":168},[71,7119,805],{"class":312},[71,7121,316],{"class":81},[71,7123,810],{"class":688},[71,7125,327],{"class":81},[71,7127,7128],{"class":73,"line":174},[71,7129,817],{"class":77},[71,7131,7132],{"class":73,"line":373},[71,7133,142],{"emptyLinePlaceholder":141},[71,7135,7136,7138,7140,7142,7144,7146,7148,7150,7152,7154,7156,7158],{"class":73,"line":378},[71,7137,826],{"class":231},[71,7139,829],{"class":77},[71,7141,82],{"class":81},[71,7143,86],{"class":85},[71,7145,89],{"class":77},[71,7147,92],{"class":77},[71,7149,840],{"class":95},[71,7151,92],{"class":77},[71,7153,774],{"class":85},[71,7155,847],{"class":77},[71,7157,850],{"class":237},[71,7159,853],{"class":77},[71,7161,7162],{"class":73,"line":383},[71,7163,160],{"class":77},[10,7165,860],{},[45,7167,863],{"id":863},[10,7169,866],{},[10,7171,869],{},[41,7173,39],{"id":872},[45,7175,7176,194,7178],{"id":875},[49,7177,878],{},[49,7179,881],{},[10,7181,7182,886,7184,890,7186,893],{},[49,7183,878],{},[49,7185,889],{},[49,7187,881],{},[63,7189,7190],{"className":896,"code":897,"language":872,"meta":67,"style":67},[49,7191,7192,7216,7220,7232,7250],{"__ignoreMap":67},[71,7193,7194,7196,7198,7200,7202,7204,7206,7208,7210,7212,7214],{"class":73,"line":74},[71,7195,298],{"class":85},[71,7197,301],{"class":237},[71,7199,89],{"class":77},[71,7201,306],{"class":237},[71,7203,309],{"class":77},[71,7205,313],{"class":312},[71,7207,316],{"class":237},[71,7209,319],{"class":77},[71,7211,322],{"class":95},[71,7213,319],{"class":77},[71,7215,327],{"class":237},[71,7217,7218],{"class":73,"line":138},[71,7219,142],{"emptyLinePlaceholder":141},[71,7221,7222,7224,7226,7228,7230],{"class":73,"line":145},[71,7223,336],{"class":231},[71,7225,339],{"class":237},[71,7227,342],{"class":77},[71,7229,345],{"class":237},[71,7231,348],{"class":77},[71,7233,7234,7236,7238,7240,7242,7244,7246,7248],{"class":73,"line":151},[71,7235,353],{"class":231},[71,7237,356],{"class":77},[71,7239,359],{"class":312},[71,7241,316],{"class":81},[71,7243,319],{"class":77},[71,7245,366],{"class":95},[71,7247,319],{"class":77},[71,7249,327],{"class":81},[71,7251,7252],{"class":73,"line":157},[71,7253,160],{"class":77},[10,7255,964,7256,967],{},[49,7257,342],{},[45,7259,7260],{"id":970},[49,7261,970],{},[10,7263,975,7264,978],{},[49,7265,970],{},[63,7267,7268],{"className":896,"code":981,"language":872,"meta":67,"style":67},[49,7269,7270,7280,7290,7298],{"__ignoreMap":67},[71,7271,7272,7274,7276,7278],{"class":73,"line":74},[71,7273,718],{"class":85},[71,7275,990],{"class":404},[71,7277,724],{"class":77},[71,7279,727],{"class":77},[71,7281,7282,7284,7286,7288],{"class":73,"line":138},[71,7283,999],{"class":85},[71,7285,1002],{"class":81},[71,7287,526],{"class":77},[71,7289,1007],{"class":404},[71,7291,7292,7294,7296],{"class":73,"line":145},[71,7293,1012],{"class":81},[71,7295,526],{"class":77},[71,7297,1017],{"class":404},[71,7299,7300],{"class":73,"line":151},[71,7301,160],{"class":77},[10,7303,7304,1026],{},[49,7305,970],{},[45,7307,1029],{"id":1029},[10,7309,1032],{},[63,7311,7312],{"className":222,"code":1035,"language":224,"meta":67,"style":67},[49,7313,7314,7340,7362],{"__ignoreMap":67},[71,7315,7316,7318,7320,7322,7324,7326,7328,7330,7332,7334,7336,7338],{"class":73,"line":74},[71,7317,765],{"class":85},[71,7319,791],{"class":312},[71,7321,316],{"class":77},[71,7323,1048],{"class":468},[71,7325,526],{"class":77},[71,7327,1053],{"class":404},[71,7329,309],{"class":77},[71,7331,1058],{"class":404},[71,7333,78],{"class":77},[71,7335,1063],{"class":404},[71,7337,1066],{"class":77},[71,7339,727],{"class":77},[71,7341,7342,7344,7346,7348,7350,7352,7354,7356,7358,7360],{"class":73,"line":138},[71,7343,1073],{"class":237},[71,7345,309],{"class":77},[71,7347,1078],{"class":312},[71,7349,316],{"class":81},[71,7351,1048],{"class":237},[71,7353,309],{"class":77},[71,7355,1087],{"class":237},[71,7357,309],{"class":77},[71,7359,1092],{"class":237},[71,7361,327],{"class":81},[71,7363,7364],{"class":73,"line":145},[71,7365,160],{"class":77},[10,7367,1101,7368,1105],{},[49,7369,1104],{},[45,7371,1108],{"id":1108},[10,7373,1111,7374,1115],{},[49,7375,1114],{},[63,7377,7378],{"className":896,"code":1118,"language":872,"meta":67,"style":67},[49,7379,7380,7390,7398,7402,7406,7442,7470],{"__ignoreMap":67},[71,7381,7382,7384,7386,7388],{"class":73,"line":74},[71,7383,718],{"class":85},[71,7385,1127],{"class":404},[71,7387,724],{"class":77},[71,7389,727],{"class":77},[71,7391,7392,7394,7396],{"class":73,"line":138},[71,7393,1136],{"class":81},[71,7395,526],{"class":77},[71,7397,1007],{"class":404},[71,7399,7400],{"class":73,"line":145},[71,7401,160],{"class":77},[71,7403,7404],{"class":73,"line":151},[71,7405,142],{"emptyLinePlaceholder":141},[71,7407,7408,7410,7412,7414,7416,7418,7420,7422,7424,7426,7428,7430,7432,7434,7436,7438,7440],{"class":73,"line":157},[71,7409,765],{"class":85},[71,7411,1155],{"class":312},[71,7413,78],{"class":77},[71,7415,1160],{"class":404},[71,7417,1163],{"class":85},[71,7419,1127],{"class":404},[71,7421,1168],{"class":77},[71,7423,1171],{"class":468},[71,7425,526],{"class":77},[71,7427,1176],{"class":404},[71,7429,1179],{"class":237},[71,7431,520],{"class":77},[71,7433,1002],{"class":468},[71,7435,526],{"class":77},[71,7437,744],{"class":404},[71,7439,747],{"class":77},[71,7441,727],{"class":77},[71,7443,7444,7446,7448,7450,7452,7454,7456,7458,7460,7462,7464,7466,7468],{"class":73,"line":163},[71,7445,826],{"class":231},[71,7447,1198],{"class":237},[71,7449,309],{"class":77},[71,7451,1203],{"class":312},[71,7453,316],{"class":81},[71,7455,1208],{"class":468},[71,7457,679],{"class":85},[71,7459,1213],{"class":237},[71,7461,309],{"class":77},[71,7463,739],{"class":237},[71,7465,1220],{"class":77},[71,7467,1002],{"class":237},[71,7469,327],{"class":81},[71,7471,7472],{"class":73,"line":168},[71,7473,160],{"class":77},[10,7475,1231,7476,1234,7478,1237],{},[49,7477,1160],{},[49,7479,739],{},[45,7481,7482,1244],{"id":1240},[49,7483,1243],{},[10,7485,7486,1249],{},[49,7487,1243],{},[63,7489,7490],{"className":896,"code":1252,"language":872,"meta":67,"style":67},[49,7491,7492,7502,7510,7518,7522,7526,7538],{"__ignoreMap":67},[71,7493,7494,7496,7498,7500],{"class":73,"line":74},[71,7495,718],{"class":85},[71,7497,990],{"class":404},[71,7499,724],{"class":77},[71,7501,727],{"class":77},[71,7503,7504,7506,7508],{"class":73,"line":138},[71,7505,1136],{"class":81},[71,7507,526],{"class":77},[71,7509,1007],{"class":404},[71,7511,7512,7514,7516],{"class":73,"line":145},[71,7513,1012],{"class":81},[71,7515,526],{"class":77},[71,7517,1017],{"class":404},[71,7519,7520],{"class":73,"line":151},[71,7521,160],{"class":77},[71,7523,7524],{"class":73,"line":157},[71,7525,142],{"emptyLinePlaceholder":141},[71,7527,7528,7530,7532,7534,7536],{"class":73,"line":163},[71,7529,718],{"class":85},[71,7531,1295],{"class":404},[71,7533,724],{"class":77},[71,7535,1300],{"class":77},[71,7537,1303],{"class":404},[71,7539,7540],{"class":73,"line":168},[71,7541,1309],{"class":1308},[10,7543,1312],{},[45,7545,1315],{"id":1315},[10,7547,1318],{},[63,7549,7550],{"className":896,"code":1321,"language":872,"meta":67,"style":67},[49,7551,7552,7562,7570,7578,7582,7586,7606,7610,7614,7632],{"__ignoreMap":67},[71,7553,7554,7556,7558,7560],{"class":73,"line":74},[71,7555,718],{"class":85},[71,7557,990],{"class":404},[71,7559,724],{"class":77},[71,7561,727],{"class":77},[71,7563,7564,7566,7568],{"class":73,"line":138},[71,7565,1136],{"class":81},[71,7567,526],{"class":77},[71,7569,1007],{"class":404},[71,7571,7572,7574,7576],{"class":73,"line":145},[71,7573,1012],{"class":81},[71,7575,526],{"class":77},[71,7577,1017],{"class":404},[71,7579,7580],{"class":73,"line":151},[71,7581,160],{"class":77},[71,7583,7584],{"class":73,"line":157},[71,7585,142],{"emptyLinePlaceholder":141},[71,7587,7588,7590,7592,7594,7596,7598,7600,7602,7604],{"class":73,"line":163},[71,7589,718],{"class":85},[71,7591,1364],{"class":404},[71,7593,724],{"class":77},[71,7595,990],{"class":404},[71,7597,1371],{"class":237},[71,7599,319],{"class":77},[71,7601,739],{"class":95},[71,7603,319],{"class":77},[71,7605,1380],{"class":237},[71,7607,7608],{"class":73,"line":168},[71,7609,1385],{"class":1308},[71,7611,7612],{"class":73,"line":174},[71,7613,142],{"emptyLinePlaceholder":141},[71,7615,7616,7618,7620,7622,7624,7626,7628,7630],{"class":73,"line":373},[71,7617,718],{"class":85},[71,7619,1396],{"class":404},[71,7621,724],{"class":77},[71,7623,990],{"class":404},[71,7625,1371],{"class":237},[71,7627,1243],{"class":77},[71,7629,990],{"class":404},[71,7631,1380],{"class":237},[71,7633,7634],{"class":73,"line":378},[71,7635,1413],{"class":1308},[45,7637,1416],{"id":1416},[10,7639,7640,1422],{},[49,7641,1421],{},[63,7643,7644],{"className":896,"code":1425,"language":872,"meta":67,"style":67},[49,7645,7646],{"__ignoreMap":67},[71,7647,7648,7650,7652,7654,7656],{"class":73,"line":74},[71,7649,1421],{"class":85},[71,7651,1434],{"class":85},[71,7653,1437],{"class":237},[71,7655,526],{"class":77},[71,7657,1017],{"class":404},[10,7659,1444,7660,1448,7662,1451],{},[49,7661,1447],{},[49,7663,1421],{},[45,7665,1454],{"id":1454},[10,7667,1457],{},[63,7669,7670],{"className":896,"code":1460,"language":872,"meta":67,"style":67},[49,7671,7672,7682,7698,7702,7706,7716,7736],{"__ignoreMap":67},[71,7673,7674,7676,7678,7680],{"class":73,"line":74},[71,7675,718],{"class":85},[71,7677,1469],{"class":404},[71,7679,724],{"class":77},[71,7681,727],{"class":77},[71,7683,7684,7686,7688,7690,7692,7694,7696],{"class":73,"line":138},[71,7685,1478],{"class":81},[71,7687,316],{"class":77},[71,7689,1483],{"class":468},[71,7691,526],{"class":77},[71,7693,1488],{"class":404},[71,7695,1491],{"class":77},[71,7697,1017],{"class":404},[71,7699,7700],{"class":73,"line":145},[71,7701,160],{"class":77},[71,7703,7704],{"class":73,"line":151},[71,7705,142],{"emptyLinePlaceholder":141},[71,7707,7708,7710,7712,7714],{"class":73,"line":157},[71,7709,718],{"class":85},[71,7711,1508],{"class":404},[71,7713,724],{"class":77},[71,7715,727],{"class":77},[71,7717,7718,7720,7722,7724,7726,7728,7730,7732,7734],{"class":73,"line":163},[71,7719,1478],{"class":81},[71,7721,526],{"class":77},[71,7723,339],{"class":77},[71,7725,1483],{"class":468},[71,7727,526],{"class":77},[71,7729,1488],{"class":404},[71,7731,747],{"class":77},[71,7733,679],{"class":85},[71,7735,1017],{"class":404},[71,7737,7738],{"class":73,"line":168},[71,7739,160],{"class":77},[10,7741,1539,7742,1543],{},[49,7743,1542],{},[45,7745,1546],{"id":1546},[10,7747,1549],{},[63,7749,7750],{"className":896,"code":1552,"language":872,"meta":67,"style":67},[49,7751,7752,7776,7792,7796,7800,7814,7818,7830,7852],{"__ignoreMap":67},[71,7753,7754,7756,7758,7760,7762,7764,7766,7768,7770,7772,7774],{"class":73,"line":74},[71,7755,765],{"class":85},[71,7757,1561],{"class":312},[71,7759,316],{"class":77},[71,7761,1483],{"class":468},[71,7763,526],{"class":77},[71,7765,1570],{"class":404},[71,7767,1491],{"class":77},[71,7769,1575],{"class":468},[71,7771,1578],{"class":77},[71,7773,744],{"class":404},[71,7775,727],{"class":77},[71,7777,7778,7780,7782,7784,7786,7788,7790],{"class":73,"line":138},[71,7779,826],{"class":231},[71,7781,1589],{"class":77},[71,7783,1575],{"class":237},[71,7785,1220],{"class":77},[71,7787,247],{"class":77},[71,7789,1598],{"class":95},[71,7791,252],{"class":77},[71,7793,7794],{"class":73,"line":145},[71,7795,160],{"class":77},[71,7797,7798],{"class":73,"line":151},[71,7799,142],{"emptyLinePlaceholder":141},[71,7801,7802,7804,7806,7808,7810,7812],{"class":73,"line":157},[71,7803,298],{"class":85},[71,7805,1575],{"class":237},[71,7807,526],{"class":77},[71,7809,1570],{"class":404},[71,7811,724],{"class":77},[71,7813,1623],{"class":688},[71,7815,7816],{"class":73,"line":163},[71,7817,142],{"emptyLinePlaceholder":141},[71,7819,7820,7822,7824,7826,7828],{"class":73,"line":168},[71,7821,336],{"class":231},[71,7823,339],{"class":237},[71,7825,1636],{"class":312},[71,7827,1639],{"class":237},[71,7829,348],{"class":77},[71,7831,7832,7834,7836,7838,7840,7842,7844,7846,7848,7850],{"class":73,"line":174},[71,7833,1073],{"class":237},[71,7835,309],{"class":77},[71,7837,1078],{"class":312},[71,7839,316],{"class":81},[71,7841,1483],{"class":237},[71,7843,309],{"class":77},[71,7845,1658],{"class":312},[71,7847,316],{"class":81},[71,7849,1663],{"class":688},[71,7851,1666],{"class":81},[71,7853,7854],{"class":73,"line":373},[71,7855,160],{"class":77},[10,7857,1673],{},[41,7859,1676],{"id":1676},[10,7861,1679],{},[10,7863,1682],{},[1684,7865,1686],{},{"title":67,"searchDepth":138,"depth":138,"links":7867},[7868,7871,7875,7882,7893],{"id":43,"depth":138,"text":30,"children":7869},[7870],{"id":47,"depth":145,"text":47},{"id":118,"depth":138,"text":33,"children":7872},[7873,7874],{"id":121,"depth":145,"text":121},{"id":183,"depth":145,"text":184},{"id":204,"depth":138,"text":36,"children":7876},[7877,7878,7879,7880,7881],{"id":207,"depth":145,"text":210},{"id":450,"depth":145,"text":450},{"id":658,"depth":145,"text":658},{"id":697,"depth":145,"text":697},{"id":863,"depth":145,"text":863},{"id":872,"depth":138,"text":39,"children":7883},[7884,7885,7886,7887,7888,7889,7890,7891,7892],{"id":875,"depth":145,"text":1706},{"id":970,"depth":145,"text":970},{"id":1029,"depth":145,"text":1029},{"id":1108,"depth":145,"text":1108},{"id":1240,"depth":145,"text":1240},{"id":1315,"depth":145,"text":1315},{"id":1416,"depth":145,"text":1416},{"id":1454,"depth":145,"text":1454},{"id":1546,"depth":145,"text":1546},{"id":1676,"depth":138,"text":1676},{},{"title":5,"description":1716},[36,39],{"id":3778,"title":3779,"body":7898,"description":4257,"extension":1717,"meta":8272,"navigation":141,"path":4259,"publishDate":4260,"published":141,"seo":8273,"stem":4262,"tags":8274,"thumbnail":4265,"updated":4260,"__hash__":4266},{"type":7,"value":7899,"toc":8262},[7900,7902,7904,7910,7912,7914,7916,7918,7984,7986,7990,7992,8016,8022,8066,8068,8070,8076,8092,8094,8096,8098,8100,8102,8186,8188,8198,8200,8202,8204,8224,8228,8230,8232,8236,8238,8240,8252,8254,8256,8258,8260],[10,7901,12],{},[10,7903,3786],{},[10,7905,3789,7906,595,7908,3796],{},[49,7907,3792],{},[49,7909,3795],{},[41,7911,3799],{"id":3799},[10,7913,3802],{},[10,7915,3805],{},[10,7917,3808],{},[563,7919,7920,7932],{},[566,7921,7922],{},[569,7923,7924,7926,7928,7930],{},[572,7925,3817],{},[572,7927,3792],{},[572,7929,3795],{},[572,7931,3824],{},[582,7933,7934,7944,7954,7964,7974],{},[569,7935,7936,7938,7940,7942],{},[587,7937,3831],{},[587,7939,3834],{},[587,7941,3834],{},[587,7943,3839],{},[569,7945,7946,7948,7950,7952],{},[587,7947,3844],{},[587,7949,3847],{},[587,7951,3847],{},[587,7953,3852],{},[569,7955,7956,7958,7960,7962],{},[587,7957,3857],{},[587,7959,3860],{},[587,7961,3863],{},[587,7963,3860],{},[569,7965,7966,7968,7970,7972],{},[587,7967,3870],{},[587,7969,3873],{},[587,7971,3876],{},[587,7973,3873],{},[569,7975,7976,7978,7980,7982],{},[587,7977,3883],{},[587,7979,3886],{},[587,7981,3889],{},[587,7983,3892],{},[41,7985,3792],{"id":3895},[10,7987,7988,3900],{},[49,7989,3792],{},[10,7991,3903],{},[63,7993,7994],{"className":127,"code":3906,"language":118,"meta":67,"style":67},[49,7995,7996,8000,8004,8008,8012],{"__ignoreMap":67},[71,7997,7998],{"class":73,"line":74},[71,7999,3913],{},[71,8001,8002],{"class":73,"line":138},[71,8003,142],{"emptyLinePlaceholder":141},[71,8005,8006],{"class":73,"line":145},[71,8007,3922],{},[71,8009,8010],{"class":73,"line":151},[71,8011,142],{"emptyLinePlaceholder":141},[71,8013,8014],{"class":73,"line":157},[71,8015,3931],{},[10,8017,3934,8018,3938,8020,3942],{},[49,8019,3937],{},[49,8021,3941],{},[63,8023,8024],{"className":127,"code":3945,"language":118,"meta":67,"style":67},[49,8025,8026,8030,8034,8038,8042,8046,8050,8054,8058,8062],{"__ignoreMap":67},[71,8027,8028],{"class":73,"line":74},[71,8029,3952],{},[71,8031,8032],{"class":73,"line":138},[71,8033,3957],{},[71,8035,8036],{"class":73,"line":145},[71,8037,3962],{},[71,8039,8040],{"class":73,"line":151},[71,8041,160],{},[71,8043,8044],{"class":73,"line":157},[71,8045,142],{"emptyLinePlaceholder":141},[71,8047,8048],{"class":73,"line":163},[71,8049,3975],{},[71,8051,8052],{"class":73,"line":168},[71,8053,142],{"emptyLinePlaceholder":141},[71,8055,8056],{"class":73,"line":174},[71,8057,3984],{},[71,8059,8060],{"class":73,"line":373},[71,8061,3989],{},[71,8063,8064],{"class":73,"line":378},[71,8065,327],{},[10,8067,3996],{},[41,8069,3795],{"id":3999},[10,8071,8072,4004,8074,4007],{},[49,8073,3795],{},[49,8075,3792],{},[63,8077,8078],{"className":127,"code":4010,"language":118,"meta":67,"style":67},[49,8079,8080,8084,8088],{"__ignoreMap":67},[71,8081,8082],{"class":73,"line":74},[71,8083,4017],{},[71,8085,8086],{"class":73,"line":138},[71,8087,142],{"emptyLinePlaceholder":141},[71,8089,8090],{"class":73,"line":145},[71,8091,4026],{},[10,8093,4029],{},[10,8095,4032],{},[41,8097,3824],{"id":4035},[10,8099,4038],{},[10,8101,4041],{},[63,8103,8104],{"className":127,"code":4044,"language":118,"meta":67,"style":67},[49,8105,8106,8110,8114,8118,8122,8126,8130,8134,8138,8142,8146,8150,8154,8158,8162,8166,8170,8174,8178,8182],{"__ignoreMap":67},[71,8107,8108],{"class":73,"line":74},[71,8109,4051],{},[71,8111,8112],{"class":73,"line":138},[71,8113,142],{"emptyLinePlaceholder":141},[71,8115,8116],{"class":73,"line":145},[71,8117,4060],{},[71,8119,8120],{"class":73,"line":151},[71,8121,4065],{},[71,8123,8124],{"class":73,"line":157},[71,8125,142],{"emptyLinePlaceholder":141},[71,8127,8128],{"class":73,"line":163},[71,8129,4074],{},[71,8131,8132],{"class":73,"line":168},[71,8133,4079],{},[71,8135,8136],{"class":73,"line":174},[71,8137,4084],{},[71,8139,8140],{"class":73,"line":373},[71,8141,4089],{},[71,8143,8144],{"class":73,"line":378},[71,8145,4094],{},[71,8147,8148],{"class":73,"line":383},[71,8149,817],{},[71,8151,8152],{"class":73,"line":398},[71,8153,160],{},[71,8155,8156],{"class":73,"line":410},[71,8157,142],{"emptyLinePlaceholder":141},[71,8159,8160],{"class":73,"line":422},[71,8161,4111],{},[71,8163,8164],{"class":73,"line":433},[71,8165,4065],{},[71,8167,8168],{"class":73,"line":4118},[71,8169,4121],{},[71,8171,8172],{"class":73,"line":4124},[71,8173,4127],{},[71,8175,8176],{"class":73,"line":4130},[71,8177,142],{"emptyLinePlaceholder":141},[71,8179,8180],{"class":73,"line":4135},[71,8181,4138],{},[71,8183,8184],{"class":73,"line":4141},[71,8185,160],{},[10,8187,4146],{},[25,8189,8190,8192,8194,8196],{},[28,8191,4151],{},[28,8193,4154],{},[28,8195,4157],{},[28,8197,4160],{},[41,8199,4163],{"id":4163},[10,8201,4166],{},[10,8203,4169],{},[63,8205,8206],{"className":127,"code":4172,"language":118,"meta":67,"style":67},[49,8207,8208,8212,8216,8220],{"__ignoreMap":67},[71,8209,8210],{"class":73,"line":74},[71,8211,4179],{},[71,8213,8214],{"class":73,"line":138},[71,8215,142],{"emptyLinePlaceholder":141},[71,8217,8218],{"class":73,"line":145},[71,8219,4188],{},[71,8221,8222],{"class":73,"line":151},[71,8223,4193],{},[109,8225,8226],{"title":4196,"type":112},[10,8227,4199],{},[41,8229,4202],{"id":4202},[10,8231,4205],{},[109,8233,8234],{"title":4208,"type":4209},[10,8235,4212],{},[41,8237,4215],{"id":4215},[10,8239,4218],{},[25,8241,8242,8246,8250],{},[28,8243,4223,8244],{},[49,8245,3792],{},[28,8247,4228,8248],{},[49,8249,3795],{},[28,8251,4233],{},[10,8253,4236],{},[41,8255,1676],{"id":1676},[10,8257,4241],{},[10,8259,4244],{},[1684,8261,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":8263},[8264,8265,8266,8267,8268,8269,8270,8271],{"id":3799,"depth":138,"text":3799},{"id":3895,"depth":138,"text":3792},{"id":3999,"depth":138,"text":3795},{"id":4035,"depth":138,"text":3824},{"id":4163,"depth":138,"text":4163},{"id":4202,"depth":138,"text":4202},{"id":4215,"depth":138,"text":4215},{"id":1676,"depth":138,"text":1676},{},{"title":3779,"description":4257},[4264,3824],{"id":4268,"title":4269,"body":8276,"description":4748,"extension":1717,"meta":8643,"navigation":141,"path":4750,"publishDate":4751,"published":141,"seo":8644,"stem":4753,"tags":8645,"thumbnail":4755,"updated":4751,"__hash__":4756},{"type":7,"value":8277,"toc":8633},[8278,8280,8285,8287,8289,8291,8293,8295,8307,8309,8311,8313,8369,8371,8397,8399,8401,8403,8405,8415,8417,8453,8455,8457,8459,8461,8471,8475,8477,8479,8481,8499,8501,8503,8505,8507,8509,8521,8523,8525,8589,8591,8596,8602,8608,8610,8624,8626,8631],[10,8279,12],{},[10,8281,4276,8282,4282],{},[17,8283,4281],{"href":4279,"rel":8284},[21],[10,8286,4285],{},[41,8288,4289],{"id":4288},[10,8290,4292],{},[10,8292,4295],{},[10,8294,4298],{},[25,8296,8297,8299,8301,8303,8305],{},[28,8298,4303],{},[28,8300,4306],{},[28,8302,4309],{},[28,8304,4312],{},[28,8306,4315],{},[41,8308,4303],{"id":4303},[10,8310,4320],{},[10,8312,4323],{},[63,8314,8315],{"className":127,"code":4326,"language":118,"meta":67,"style":67},[49,8316,8317,8321,8325,8329,8333,8337,8341,8345,8349,8353,8357,8361,8365],{"__ignoreMap":67},[71,8318,8319],{"class":73,"line":74},[71,8320,4333],{},[71,8322,8323],{"class":73,"line":138},[71,8324,4338],{},[71,8326,8327],{"class":73,"line":145},[71,8328,160],{},[71,8330,8331],{"class":73,"line":151},[71,8332,142],{"emptyLinePlaceholder":141},[71,8334,8335],{"class":73,"line":157},[71,8336,4351],{},[71,8338,8339],{"class":73,"line":163},[71,8340,4356],{},[71,8342,8343],{"class":73,"line":168},[71,8344,160],{},[71,8346,8347],{"class":73,"line":174},[71,8348,142],{"emptyLinePlaceholder":141},[71,8350,8351],{"class":73,"line":373},[71,8352,4369],{},[71,8354,8355],{"class":73,"line":378},[71,8356,4374],{},[71,8358,8359],{"class":73,"line":383},[71,8360,160],{},[71,8362,8363],{"class":73,"line":398},[71,8364,142],{"emptyLinePlaceholder":141},[71,8366,8367],{"class":73,"line":410},[71,8368,4387],{},[10,8370,4390],{},[4392,8372,8373,8377,8383,8389],{},[28,8374,8375,4399],{},[49,8376,4398],{},[28,8378,8379,4404,8381,4408],{},[49,8380,4398],{},[49,8382,4407],{},[28,8384,8385,4404,8387,4408],{},[49,8386,4407],{},[49,8388,4415],{},[28,8390,8391,595,8393,595,8395,4424],{},[49,8392,4415],{},[49,8394,4407],{},[49,8396,4398],{},[10,8398,4427],{},[41,8400,4306],{"id":4430},[10,8402,4433],{},[10,8404,4436],{},[25,8406,8407,8409,8411,8413],{},[28,8408,4441],{},[28,8410,4444],{},[28,8412,4447],{},[28,8414,4450],{},[10,8416,4453],{},[63,8418,8419],{"className":127,"code":4456,"language":118,"meta":67,"style":67},[49,8420,8421,8425,8429,8433,8437,8441,8445,8449],{"__ignoreMap":67},[71,8422,8423],{"class":73,"line":74},[71,8424,4463],{},[71,8426,8427],{"class":73,"line":138},[71,8428,4468],{},[71,8430,8431],{"class":73,"line":145},[71,8432,4473],{},[71,8434,8435],{"class":73,"line":151},[71,8436,327],{},[71,8438,8439],{"class":73,"line":157},[71,8440,142],{"emptyLinePlaceholder":141},[71,8442,8443],{"class":73,"line":163},[71,8444,4486],{},[71,8446,8447],{"class":73,"line":168},[71,8448,4491],{},[71,8450,8451],{"class":73,"line":174},[71,8452,4496],{},[10,8454,4499],{},[41,8456,4309],{"id":4309},[10,8458,4504],{},[10,8460,4507],{},[25,8462,8463,8467,8469],{},[28,8464,8465,4515],{},[49,8466,4514],{},[28,8468,4518],{},[28,8470,4521],{},[10,8472,8473,4526],{},[49,8474,4514],{},[10,8476,4529],{},[41,8478,4312],{"id":4312},[10,8480,4534],{},[25,8482,8483,8491,8495],{},[28,8484,4539,8485,595,8487,595,8489],{},[49,8486,4542],{},[49,8488,4545],{},[49,8490,4548],{},[28,8492,8493,4554],{},[49,8494,4553],{},[28,8496,8497,4515],{},[49,8498,4559],{},[10,8500,4562],{},[10,8502,4565],{},[41,8504,4315],{"id":4315},[10,8506,4570],{},[10,8508,4573],{},[4392,8510,8511,8513,8515,8517,8519],{},[28,8512,4578],{},[28,8514,4581],{},[28,8516,4584],{},[28,8518,4587],{},[28,8520,4590],{},[41,8522,4593],{"id":4593},[10,8524,4596],{},[63,8526,8527],{"className":127,"code":4599,"language":118,"meta":67,"style":67},[49,8528,8529,8533,8537,8541,8545,8549,8553,8557,8561,8565,8569,8573,8577,8581,8585],{"__ignoreMap":67},[71,8530,8531],{"class":73,"line":74},[71,8532,4606],{},[71,8534,8535],{"class":73,"line":138},[71,8536,142],{"emptyLinePlaceholder":141},[71,8538,8539],{"class":73,"line":145},[71,8540,4615],{},[71,8542,8543],{"class":73,"line":151},[71,8544,4620],{},[71,8546,8547],{"class":73,"line":157},[71,8548,4625],{},[71,8550,8551],{"class":73,"line":163},[71,8552,142],{"emptyLinePlaceholder":141},[71,8554,8555],{"class":73,"line":168},[71,8556,4634],{},[71,8558,8559],{"class":73,"line":174},[71,8560,4639],{},[71,8562,8563],{"class":73,"line":373},[71,8564,4644],{},[71,8566,8567],{"class":73,"line":378},[71,8568,142],{"emptyLinePlaceholder":141},[71,8570,8571],{"class":73,"line":383},[71,8572,4653],{},[71,8574,8575],{"class":73,"line":398},[71,8576,4658],{},[71,8578,8579],{"class":73,"line":410},[71,8580,4644],{},[71,8582,8583],{"class":73,"line":422},[71,8584,142],{"emptyLinePlaceholder":141},[71,8586,8587],{"class":73,"line":433},[71,8588,4671],{},[10,8590,4674],{},[63,8592,8594],{"className":8593,"code":4679,"language":96,"meta":67},[4678],[49,8595,4679],{"__ignoreMap":67},[10,8597,4684,8598,4688,8600,4692],{},[49,8599,4687],{},[49,8601,4691],{},[10,8603,4695,8604,4698,8606,4701],{},[49,8605,4553],{},[49,8607,4514],{},[41,8609,1676],{"id":1676},[25,8611,8612,8614,8616,8618,8620,8622],{},[28,8613,4708],{},[28,8615,4711],{},[28,8617,4714],{},[28,8619,4717],{},[28,8621,4720],{},[28,8623,4723],{},[10,8625,4726],{},[10,8627,4729,8628,4735],{},[17,8629,4734],{"href":4732,"rel":8630},[21],[1684,8632,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":8634},[8635,8636,8637,8638,8639,8640,8641,8642],{"id":4288,"depth":138,"text":4289},{"id":4303,"depth":138,"text":4303},{"id":4430,"depth":138,"text":4306},{"id":4309,"depth":138,"text":4309},{"id":4312,"depth":138,"text":4312},{"id":4315,"depth":138,"text":4315},{"id":4593,"depth":138,"text":4593},{"id":1676,"depth":138,"text":1676},{},{"title":4269,"description":4748},[33],{"id":4758,"title":4759,"body":8647,"description":5176,"extension":1717,"meta":8969,"navigation":141,"path":5178,"publishDate":5179,"published":141,"seo":8970,"stem":5181,"tags":8971,"thumbnail":5183,"updated":5179,"__hash__":5184},{"type":7,"value":8648,"toc":8961},[8649,8651,8653,8655,8657,8659,8667,8672,8674,8680,8704,8714,8719,8721,8725,8761,8767,8773,8781,8801,8803,8807,8843,8847,8851,8871,8873,8879,8915,8921,8933,8935,8957,8959],[10,8650,12],{},[10,8652,4766],{},[10,8654,4769],{},[41,8656,4773],{"id":4772},[10,8658,4776],{},[10,8660,8661,595,8663,595,8665,4788],{},[49,8662,4781],{},[49,8664,4784],{},[49,8666,4787],{},[10,8668,4791,8669,4797],{},[17,8670,4796],{"href":4794,"rel":8671},[21],[41,8673,4801],{"id":4800},[10,8675,4804,8676,4807,8678,4811],{},[49,8677,1973],{},[49,8679,4810],{},[63,8681,8682],{"className":127,"code":4814,"language":118,"meta":67,"style":67},[49,8683,8684,8688,8692,8696,8700],{"__ignoreMap":67},[71,8685,8686],{"class":73,"line":74},[71,8687,4821],{},[71,8689,8690],{"class":73,"line":138},[71,8691,1945],{},[71,8693,8694],{"class":73,"line":145},[71,8695,160],{},[71,8697,8698],{"class":73,"line":151},[71,8699,142],{"emptyLinePlaceholder":141},[71,8701,8702],{"class":73,"line":157},[71,8703,4838],{},[10,8705,4841,8706,4845,8708,4849,8710,4852,8712,4855],{},[49,8707,4844],{},[49,8709,4848],{},[49,8711,4848],{},[49,8713,4810],{},[10,8715,4858,8716,4735],{},[17,8717,4863],{"href":4861,"rel":8718},[21],[41,8720,4866],{"id":4866},[10,8722,4869,8723,4873],{},[49,8724,4872],{},[63,8726,8727],{"className":127,"code":4876,"language":118,"meta":67,"style":67},[49,8728,8729,8733,8737,8741,8745,8749,8753,8757],{"__ignoreMap":67},[71,8730,8731],{"class":73,"line":74},[71,8732,4821],{},[71,8734,8735],{"class":73,"line":138},[71,8736,1945],{},[71,8738,8739],{"class":73,"line":145},[71,8740,4891],{},[71,8742,8743],{"class":73,"line":151},[71,8744,4896],{},[71,8746,8747],{"class":73,"line":157},[71,8748,1823],{},[71,8750,8751],{"class":73,"line":163},[71,8752,160],{},[71,8754,8755],{"class":73,"line":168},[71,8756,142],{"emptyLinePlaceholder":141},[71,8758,8759],{"class":73,"line":174},[71,8760,4913],{},[10,8762,4916,8763,4920,8765,4924],{},[49,8764,4919],{},[49,8766,4923],{},[10,8768,8769,4929,8771,4932],{},[49,8770,4844],{},[49,8772,4872],{},[10,8774,4935,8775,4939,8777,4942,8779,4945],{},[49,8776,4938],{},[49,8778,4848],{},[49,8780,4810],{},[63,8782,8783],{"className":127,"code":4948,"language":118,"meta":67,"style":67},[49,8784,8785,8789,8793,8797],{"__ignoreMap":67},[71,8786,8787],{"class":73,"line":74},[71,8788,4955],{},[71,8790,8791],{"class":73,"line":138},[71,8792,4960],{},[71,8794,8795],{"class":73,"line":145},[71,8796,142],{"emptyLinePlaceholder":141},[71,8798,8799],{"class":73,"line":151},[71,8800,4969],{},[41,8802,4973],{"id":4972},[10,8804,4976,8805,4980],{},[49,8806,4979],{},[63,8808,8809],{"className":127,"code":4983,"language":118,"meta":67,"style":67},[49,8810,8811,8815,8819,8823,8827,8831,8835,8839],{"__ignoreMap":67},[71,8812,8813],{"class":73,"line":74},[71,8814,4821],{},[71,8816,8817],{"class":73,"line":138},[71,8818,1945],{},[71,8820,8821],{"class":73,"line":145},[71,8822,4891],{},[71,8824,8825],{"class":73,"line":151},[71,8826,4896],{},[71,8828,8829],{"class":73,"line":157},[71,8830,1823],{},[71,8832,8833],{"class":73,"line":163},[71,8834,160],{},[71,8836,8837],{"class":73,"line":168},[71,8838,142],{"emptyLinePlaceholder":141},[71,8840,8841],{"class":73,"line":174},[71,8842,5018],{},[10,8844,5021,8845,5024],{},[49,8846,4872],{},[10,8848,8849,5029],{},[49,8850,4938],{},[63,8852,8853],{"className":127,"code":5032,"language":118,"meta":67,"style":67},[49,8854,8855,8859,8863,8867],{"__ignoreMap":67},[71,8856,8857],{"class":73,"line":74},[71,8858,4955],{},[71,8860,8861],{"class":73,"line":138},[71,8862,4960],{},[71,8864,8865],{"class":73,"line":145},[71,8866,142],{"emptyLinePlaceholder":141},[71,8868,8869],{"class":73,"line":151},[71,8870,5018],{},[41,8872,5053],{"id":5053},[10,8874,8875,5058,8877,5062],{},[49,8876,4979],{},[49,8878,5061],{},[63,8880,8881],{"className":127,"code":5065,"language":118,"meta":67,"style":67},[49,8882,8883,8887,8891,8895,8899,8903,8907,8911],{"__ignoreMap":67},[71,8884,8885],{"class":73,"line":74},[71,8886,4821],{},[71,8888,8889],{"class":73,"line":138},[71,8890,1945],{},[71,8892,8893],{"class":73,"line":145},[71,8894,4891],{},[71,8896,8897],{"class":73,"line":151},[71,8898,4896],{},[71,8900,8901],{"class":73,"line":157},[71,8902,1823],{},[71,8904,8905],{"class":73,"line":163},[71,8906,160],{},[71,8908,8909],{"class":73,"line":168},[71,8910,142],{"emptyLinePlaceholder":141},[71,8912,8913],{"class":73,"line":174},[71,8914,5100],{},[10,8916,8917,5106,8919,5110],{},[49,8918,5105],{},[49,8920,5109],{},[10,8922,5113,8923,5116,8925,5119,8927,5122,8929,5125,8931,5128],{},[49,8924,4848],{},[49,8926,4810],{},[49,8928,4844],{},[49,8930,5109],{},[49,8932,4844],{},[41,8934,1676],{"id":1676},[25,8936,8937,8941,8943,8949,8953],{},[28,8938,5135,8939,5138],{},[49,8940,4848],{},[28,8942,5141],{},[28,8944,8945,4939,8947,5148],{},[49,8946,4938],{},[49,8948,4810],{},[28,8950,5151,8951,5155],{},[49,8952,5154],{},[28,8954,5158,8955,5162],{},[49,8956,5161],{},[10,8958,5165],{},[1684,8960,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":8962},[8963,8964,8965,8966,8967,8968],{"id":4772,"depth":138,"text":4773},{"id":4800,"depth":138,"text":4801},{"id":4866,"depth":138,"text":4866},{"id":4972,"depth":138,"text":4973},{"id":5053,"depth":138,"text":5053},{"id":1676,"depth":138,"text":1676},{},{"title":4759,"description":5176},[33],{"id":5186,"title":5187,"body":8973,"description":5568,"extension":1717,"meta":9268,"navigation":141,"path":5570,"publishDate":5571,"published":141,"seo":9269,"stem":5573,"tags":9270,"thumbnail":5575,"updated":5571,"__hash__":5576},{"type":7,"value":8974,"toc":9261},[8975,8977,8979,8981,8983,8985,8987,8992,8994,8998,9042,9050,9062,9064,9084,9086,9094,9096,9100,9144,9148,9160,9162,9182,9192,9196,9201,9203,9205,9213,9215,9233,9237,9239,9257,9259],[10,8976,12],{},[10,8978,5194],{},[10,8980,5197],{},[41,8982,5201],{"id":5200},[10,8984,5204],{},[10,8986,5207],{},[10,8988,5210,8989,5216],{},[17,8990,5215],{"href":5213,"rel":8991},[21],[41,8993,5219],{"id":5219},[10,8995,5222,8996,5226],{},[49,8997,5225],{},[63,8999,9000],{"className":127,"code":5229,"language":118,"meta":67,"style":67},[49,9001,9002,9006,9010,9014,9018,9022,9026,9030,9034,9038],{"__ignoreMap":67},[71,9003,9004],{"class":73,"line":74},[71,9005,5236],{},[71,9007,9008],{"class":73,"line":138},[71,9009,5241],{},[71,9011,9012],{"class":73,"line":145},[71,9013,5246],{},[71,9015,9016],{"class":73,"line":151},[71,9017,1823],{},[71,9019,9020],{"class":73,"line":157},[71,9021,5255],{},[71,9023,9024],{"class":73,"line":163},[71,9025,5260],{},[71,9027,9028],{"class":73,"line":168},[71,9029,1823],{},[71,9031,9032],{"class":73,"line":174},[71,9033,160],{},[71,9035,9036],{"class":73,"line":373},[71,9037,142],{"emptyLinePlaceholder":141},[71,9039,9040],{"class":73,"line":378},[71,9041,5277],{},[10,9043,9044,5283,9046,5287,9048,5291],{},[49,9045,5282],{},[49,9047,5286],{},[49,9049,5290],{},[63,9051,9052],{"className":127,"code":5294,"language":118,"meta":67,"style":67},[49,9053,9054,9058],{"__ignoreMap":67},[71,9055,9056],{"class":73,"line":74},[71,9057,5301],{},[71,9059,9060],{"class":73,"line":138},[71,9061,5306],{},[10,9063,5309],{},[63,9065,9066],{"className":127,"code":5312,"language":118,"meta":67,"style":67},[49,9067,9068,9072,9076,9080],{"__ignoreMap":67},[71,9069,9070],{"class":73,"line":74},[71,9071,5319],{},[71,9073,9074],{"class":73,"line":138},[71,9075,142],{"emptyLinePlaceholder":141},[71,9077,9078],{"class":73,"line":145},[71,9079,5328],{},[71,9081,9082],{"class":73,"line":151},[71,9083,5333],{},[10,9085,5336],{},[63,9087,9088],{"className":127,"code":5339,"language":118,"meta":67,"style":67},[49,9089,9090],{"__ignoreMap":67},[71,9091,9092],{"class":73,"line":74},[71,9093,5339],{},[41,9095,5349],{"id":5348},[10,9097,5352,9098,5356],{},[49,9099,5355],{},[63,9101,9102],{"className":127,"code":5359,"language":118,"meta":67,"style":67},[49,9103,9104,9108,9112,9116,9120,9124,9128,9132,9136,9140],{"__ignoreMap":67},[71,9105,9106],{"class":73,"line":74},[71,9107,5236],{},[71,9109,9110],{"class":73,"line":138},[71,9111,5241],{},[71,9113,9114],{"class":73,"line":145},[71,9115,5246],{},[71,9117,9118],{"class":73,"line":151},[71,9119,1823],{},[71,9121,9122],{"class":73,"line":157},[71,9123,5255],{},[71,9125,9126],{"class":73,"line":163},[71,9127,5260],{},[71,9129,9130],{"class":73,"line":168},[71,9131,1823],{},[71,9133,9134],{"class":73,"line":174},[71,9135,160],{},[71,9137,9138],{"class":73,"line":373},[71,9139,142],{"emptyLinePlaceholder":141},[71,9141,9142],{"class":73,"line":378},[71,9143,5402],{},[10,9145,9146,5407],{},[49,9147,5355],{},[63,9149,9150],{"className":127,"code":5410,"language":118,"meta":67,"style":67},[49,9151,9152,9156],{"__ignoreMap":67},[71,9153,9154],{"class":73,"line":74},[71,9155,5417],{},[71,9157,9158],{"class":73,"line":138},[71,9159,5422],{},[10,9161,5425],{},[63,9163,9164],{"className":127,"code":5428,"language":118,"meta":67,"style":67},[49,9165,9166,9170,9174,9178],{"__ignoreMap":67},[71,9167,9168],{"class":73,"line":74},[71,9169,5435],{},[71,9171,9172],{"class":73,"line":138},[71,9173,142],{"emptyLinePlaceholder":141},[71,9175,9176],{"class":73,"line":145},[71,9177,5444],{},[71,9179,9180],{"class":73,"line":151},[71,9181,5449],{},[10,9183,9184,5454,9186,595,9188,595,9190,5464],{},[49,9185,5355],{},[49,9187,5457],{},[49,9189,5460],{},[49,9191,5463],{},[10,9193,5467,9194,5471],{},[49,9195,5470],{},[10,9197,5474,9198,5480],{},[17,9199,5479],{"href":5477,"rel":9200},[21],[41,9202,5484],{"id":5483},[10,9204,5487],{},[63,9206,9207],{"className":127,"code":5490,"language":118,"meta":67,"style":67},[49,9208,9209],{"__ignoreMap":67},[71,9210,9211],{"class":73,"line":74},[71,9212,5490],{},[10,9214,5499],{},[25,9216,9217,9221,9227,9231],{},[28,9218,9219,5506],{},[49,9220,5457],{},[28,9222,9223,5511,9225,5515],{},[49,9224,1994],{},[49,9226,5514],{},[28,9228,9229,5521],{},[49,9230,5520],{},[28,9232,5524],{},[10,9234,5527,9235,5530],{},[49,9236,5355],{},[41,9238,1676],{"id":1676},[25,9240,9241,9245,9247,9251,9255],{},[28,9242,9243,5539],{},[49,9244,5225],{},[28,9246,5542],{},[28,9248,9249,5547],{},[49,9250,5355],{},[28,9252,9253,5552],{},[49,9254,5355],{},[28,9256,5555],{},[10,9258,5558],{},[1684,9260,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":9262},[9263,9264,9265,9266,9267],{"id":5200,"depth":138,"text":5201},{"id":5219,"depth":138,"text":5219},{"id":5348,"depth":138,"text":5349},{"id":5483,"depth":138,"text":5484},{"id":1676,"depth":138,"text":1676},{},{"title":5187,"description":5568},[33],{"id":5578,"title":5579,"body":9272,"description":5994,"extension":1717,"meta":9594,"navigation":141,"path":5996,"publishDate":5997,"published":141,"seo":9595,"stem":5999,"tags":9596,"thumbnail":6001,"updated":6002,"__hash__":6003},{"type":7,"value":9273,"toc":9586},[9274,9276,9280,9282,9286,9290,9292,9294,9298,9304,9306,9310,9314,9322,9324,9360,9364,9376,9378,9382,9396,9398,9430,9438,9452,9456,9458,9460,9500,9512,9520,9530,9536,9548,9550,9554,9580,9584],[10,9275,12],{},[10,9277,5586,9278,5589],{},[49,9279,5109],{},[41,9281,5593],{"id":5592},[10,9283,9284,5598],{},[49,9285,5109],{},[10,9287,5601,9288,5604],{},[49,9289,5109],{},[10,9291,5607],{},[41,9293,5610],{"id":5610},[10,9295,5613,9296,5616],{},[49,9297,5109],{},[25,9299,9300,9302],{},[28,9301,5621],{},[28,9303,5624],{},[41,9305,5621],{"id":5621},[10,9307,5629,9308,5632],{},[49,9309,5109],{},[10,9311,5635,9312,5638],{},[49,9313,4844],{},[63,9315,9316],{"className":127,"code":5641,"language":118,"meta":67,"style":67},[49,9317,9318],{"__ignoreMap":67},[71,9319,9320],{"class":73,"line":74},[71,9321,5641],{},[10,9323,5650],{},[63,9325,9326],{"className":127,"code":5653,"language":118,"meta":67,"style":67},[49,9327,9328,9332,9336,9340,9344,9348,9352,9356],{"__ignoreMap":67},[71,9329,9330],{"class":73,"line":74},[71,9331,4821],{},[71,9333,9334],{"class":73,"line":138},[71,9335,1945],{},[71,9337,9338],{"class":73,"line":145},[71,9339,5668],{},[71,9341,9342],{"class":73,"line":151},[71,9343,5673],{},[71,9345,9346],{"class":73,"line":157},[71,9347,1823],{},[71,9349,9350],{"class":73,"line":163},[71,9351,160],{},[71,9353,9354],{"class":73,"line":168},[71,9355,142],{"emptyLinePlaceholder":141},[71,9357,9358],{"class":73,"line":174},[71,9359,5690],{},[10,9361,5693,9362,5697],{},[49,9363,5696],{},[10,9365,9366,5703,9368,5706,9370,5709,9372,5706,9374,5716],{},[49,9367,5702],{},[49,9369,5109],{},[49,9371,4844],{},[49,9373,5712],{},[49,9375,5715],{},[41,9377,5624],{"id":5624},[10,9379,5721,9380,5724],{},[49,9381,5109],{},[25,9383,9384,9390],{},[28,9385,5729,9386,5732,9388,5736],{},[49,9387,5109],{},[49,9389,5735],{},[28,9391,5739,9392,5706,9394,5744],{},[49,9393,5109],{},[49,9395,1994],{},[10,9397,5747],{},[63,9399,9400],{"className":127,"code":5750,"language":118,"meta":67,"style":67},[49,9401,9402,9406,9410,9414,9418,9422,9426],{"__ignoreMap":67},[71,9403,9404],{"class":73,"line":74},[71,9405,5757],{},[71,9407,9408],{"class":73,"line":138},[71,9409,142],{"emptyLinePlaceholder":141},[71,9411,9412],{"class":73,"line":145},[71,9413,5766],{},[71,9415,9416],{"class":73,"line":151},[71,9417,5771],{},[71,9419,9420],{"class":73,"line":157},[71,9421,160],{},[71,9423,9424],{"class":73,"line":163},[71,9425,142],{"emptyLinePlaceholder":141},[71,9427,9428],{"class":73,"line":168},[71,9429,5784],{},[10,9431,5787,9432,5790,9434,5794,9436,5697],{},[49,9433,5712],{},[49,9435,5793],{},[49,9437,5696],{},[5798,9439,9440],{},[10,9441,9442,5287,9444,5807,9446,5810,9448,5814,9450,5817],{},[49,9443,5804],{},[49,9445,298],{},[49,9447,5735],{},[49,9449,5813],{},[49,9451,5735],{},[10,9453,5820,9454,5823],{},[49,9455,5109],{},[41,9457,5826],{"id":5826},[10,9459,5829],{},[63,9461,9462],{"className":127,"code":5832,"language":118,"meta":67,"style":67},[49,9463,9464,9468,9472,9476,9480,9484,9488,9492,9496],{"__ignoreMap":67},[71,9465,9466],{"class":73,"line":74},[71,9467,4821],{},[71,9469,9470],{"class":73,"line":138},[71,9471,1945],{},[71,9473,9474],{"class":73,"line":145},[71,9475,5668],{},[71,9477,9478],{"class":73,"line":151},[71,9479,5673],{},[71,9481,9482],{"class":73,"line":157},[71,9483,1823],{},[71,9485,9486],{"class":73,"line":163},[71,9487,160],{},[71,9489,9490],{"class":73,"line":168},[71,9491,142],{"emptyLinePlaceholder":141},[71,9493,9494],{"class":73,"line":174},[71,9495,5867],{},[71,9497,9498],{"class":73,"line":373},[71,9499,5784],{},[10,9501,9502,5877,9504,5880,9506,5884,9508,4688,9510,5889],{},[49,9503,5876],{},[49,9505,5702],{},[49,9507,5883],{},[49,9509,5109],{},[49,9511,4844],{},[10,9513,5787,9514,5790,9516,5896,9518,5899],{},[49,9515,5109],{},[49,9517,5735],{},[49,9519,5793],{},[10,9521,5902,9522,5790,9524,5907,9526,5910,9528,5913],{},[49,9523,5109],{},[49,9525,1994],{},[49,9527,5712],{},[49,9529,2172],{},[10,9531,5916,9532,5920,9534,5923],{},[49,9533,5919],{},[49,9535,5109],{},[63,9537,9538],{"className":127,"code":5926,"language":118,"meta":67,"style":67},[49,9539,9540,9544],{"__ignoreMap":67},[71,9541,9542],{"class":73,"line":74},[71,9543,5933],{},[71,9545,9546],{"class":73,"line":138},[71,9547,5938],{},[41,9549,1676],{"id":1676},[10,9551,9552,5945],{},[49,9553,5109],{},[25,9555,9556,9564,9572,9574],{},[28,9557,9558,5952,9560,5706,9562,5736],{},[49,9559,5702],{},[49,9561,5109],{},[49,9563,4844],{},[28,9565,9566,5961,9568,5964,9570,5744],{},[49,9567,5883],{},[49,9569,5735],{},[49,9571,1994],{},[28,9573,5969],{},[28,9575,5972,9576,5975,9578,5978],{},[49,9577,5919],{},[49,9579,5109],{},[10,9581,9582,5983],{},[49,9583,5109],{},[1684,9585,2403],{},{"title":67,"searchDepth":138,"depth":138,"links":9587},[9588,9589,9590,9591,9592,9593],{"id":5592,"depth":138,"text":5593},{"id":5610,"depth":138,"text":5610},{"id":5621,"depth":138,"text":5621},{"id":5624,"depth":138,"text":5624},{"id":5826,"depth":138,"text":5826},{"id":1676,"depth":138,"text":1676},{},{"title":5579,"description":5994},[33],[9598],{"id":9599,"title":9600,"author":9601,"body":9602,"description":10245,"extension":1717,"meta":10246,"navigation":141,"path":10247,"publishDate":10248,"published":141,"publisher":10249,"seo":10250,"stem":10251,"tags":10252,"__hash__":10254},"books\u002Fbooks\u002F2025\u002Forganize-learned-from-docker.md","Docker&仮想サーバー完全入門","リブロワークス",{"type":7,"value":9603,"toc":10232},[9604,9612,9615,9619,9622,9625,9631,9635,9638,9690,9705,9708,9729,9732,9736,9742,9766,9776,9783,9788,9794,9807,9813,9821,9827,9875,9881,9906,9910,9917,9952,9958,9961,9964,10017,10020,10027,10041,10044,10061,10071,10095,10098,10105,10119,10130,10150,10162,10166,10169,10176,10182,10185,10188,10190,10193,10196,10226,10229],[10,9605,9606,9607,9611],{},"『",[17,9608,9600],{"href":9609,"rel":9610},"https:\u002F\u002Fbook.impress.co.jp\u002Fbooks\u002F1121101138",[21],"』を読了したため、本書を通して学んだことをまとめます。",[10,9613,9614],{},"まだ1周目で理解が浅い部分もあるため、Dockerを実際に使いながら必要に応じて追記していきます。",[41,9616,9618],{"id":9617},"dockerでホスト環境への影響を抑える","Dockerでホスト環境への影響を抑える",[10,9620,9621],{},"Dockerを利用すると、アプリケーションに必要なランタイムやライブラリをコンテナ内にまとめられます。",[10,9623,9624],{},"ホストOSへ依存関係を直接インストールする場面を減らせるため、開発環境を整理しやすくなります。また、DockerfileやComposeファイルを共有することで、チーム内で環境を再現しやすくなります。",[109,9626,9628],{"title":9627,"type":1899},"ホストOSから完全に独立するわけではない",[10,9629,9630],{},"コンテナはホストのカーネルやDocker Engineを利用します。ボリューム、ポート、CPUアーキテクチャなど、ホスト環境との接点がなくなるわけではありません。",[41,9632,9634],{"id":9633},"dockerコマンドで操作対象を明示する","Dockerコマンドで操作対象を明示する",[10,9636,9637],{},"Docker CLIには、操作対象を含めて記述するコマンドがあります。",[63,9639,9643],{"className":9640,"code":9641,"language":9642,"meta":67,"style":67},"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",[49,9644,9645,9659,9671,9681],{"__ignoreMap":67},[71,9646,9647,9650,9653,9656],{"class":73,"line":74},[71,9648,9649],{"class":404},"docker",[71,9651,9652],{"class":95}," container",[71,9654,9655],{"class":95}," run",[71,9657,9658],{"class":95}," nginx\n",[71,9660,9661,9663,9666,9669],{"class":73,"line":138},[71,9662,9649],{"class":404},[71,9664,9665],{"class":95}," image",[71,9667,9668],{"class":95}," pull",[71,9670,9658],{"class":95},[71,9672,9673,9675,9678],{"class":73,"line":145},[71,9674,9649],{"class":404},[71,9676,9677],{"class":95}," volume",[71,9679,9680],{"class":95}," ls\n",[71,9682,9683,9685,9688],{"class":73,"line":151},[71,9684,9649],{"class":404},[71,9686,9687],{"class":95}," network",[71,9689,9680],{"class":95},[10,9691,9692,595,9695,595,9698,595,9701,9704],{},[49,9693,9694],{},"container",[49,9696,9697],{},"image",[49,9699,9700],{},"volume",[49,9702,9703],{},"network","のように対象が明示されるため、何を操作するコマンドなのか把握しやすくなります。",[10,9706,9707],{},"一方で、次の短い形式も現在利用できます。",[63,9709,9711],{"className":9640,"code":9710,"language":9642,"meta":67,"style":67},"docker run nginx\ndocker pull nginx\n",[49,9712,9713,9721],{"__ignoreMap":67},[71,9714,9715,9717,9719],{"class":73,"line":74},[71,9716,9649],{"class":404},[71,9718,9655],{"class":95},[71,9720,9658],{"class":95},[71,9722,9723,9725,9727],{"class":73,"line":138},[71,9724,9649],{"class":404},[71,9726,9668],{"class":95},[71,9728,9658],{"class":95},[10,9730,9731],{},"短い形式を古いという理由だけで避ける必要はありません。学習時には対象を含む形式も知っておくと、CLIの構造を理解しやすいと感じました。",[41,9733,9735],{"id":9734},"docker-compose-v2を利用する","Docker Compose V2を利用する",[10,9737,9738,9739,447],{},"現在のCompose CLIでは、ハイフンのない",[49,9740,9741],{},"docker compose",[63,9743,9745],{"className":9640,"code":9744,"language":9642,"meta":67,"style":67},"docker compose up\ndocker compose down\n",[49,9746,9747,9757],{"__ignoreMap":67},[71,9748,9749,9751,9754],{"class":73,"line":74},[71,9750,9649],{"class":404},[71,9752,9753],{"class":95}," compose",[71,9755,9756],{"class":95}," up\n",[71,9758,9759,9761,9763],{"class":73,"line":138},[71,9760,9649],{"class":404},[71,9762,9753],{"class":95},[71,9764,9765],{"class":95}," down\n",[10,9767,9768,9769,9772,9773,9775],{},"旧Compose V1で使われていた",[49,9770,9771],{},"docker-compose","とはコマンド形式が異なります。Docker DesktopにはCompose CLIが含まれているため、基本的には",[49,9774,9741],{},"を利用します。",[41,9777,9779,9780,2377],{"id":9778},"composeファイルはcomposeyamlを使う","Composeファイルは",[49,9781,9782],{},"compose.yaml",[10,9784,9785,9786,1873],{},"Composeファイルの推奨ファイル名は",[49,9787,9782],{},[63,9789,9792],{"className":9790,"code":9791,"language":96,"meta":67},[4678],"compose.yaml\n",[49,9793,9791],{"__ignoreMap":67},[10,9795,9796,9799,9800,194,9803,9806],{},[49,9797,9798],{},"compose.yml","も利用できます。また、",[49,9801,9802],{},"docker-compose.yaml",[49,9804,9805],{},"docker-compose.yml","も後方互換性のためサポートされています。",[10,9808,9809,9810,9812],{},"複数の候補が同じ場所にある場合は",[49,9811,9782],{},"が優先されるため、新しく作る場合はこの名前へ揃えると分かりやすくなります。",[41,9814,9816,9817,9820],{"id":9815},"トップレベルのversionは不要","トップレベルの",[49,9818,9819],{},"version","は不要",[10,9822,9823,9824,9826],{},"以前のComposeファイルでは、先頭に次のような",[49,9825,9819],{},"を書く例がありました。",[63,9828,9832],{"className":9829,"code":9830,"language":9831,"meta":67,"style":67},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","version: '3'\n\nservices:\n  web:\n    image: nginx\n","yaml",[49,9833,9834,9847,9851,9859,9866],{"__ignoreMap":67},[71,9835,9836,9838,9840,9842,9845],{"class":73,"line":74},[71,9837,9819],{"class":81},[71,9839,526],{"class":77},[71,9841,247],{"class":77},[71,9843,9844],{"class":95},"3",[71,9846,252],{"class":77},[71,9848,9849],{"class":73,"line":138},[71,9850,142],{"emptyLinePlaceholder":141},[71,9852,9853,9856],{"class":73,"line":145},[71,9854,9855],{"class":81},"services",[71,9857,9858],{"class":77},":\n",[71,9860,9861,9864],{"class":73,"line":151},[71,9862,9863],{"class":81},"  web",[71,9865,9858],{"class":77},[71,9867,9868,9871,9873],{"class":73,"line":157},[71,9869,9870],{"class":81},"    image",[71,9872,526],{"class":77},[71,9874,9658],{"class":95},[10,9876,9877,9878,9880],{},"現在、トップレベルの",[49,9879,9819],{},"は後方互換性のために残されたobsoleteな項目です。指定してもComposeは最新のスキーマでファイルを検証するため、新しいComposeファイルでは省略します。",[63,9882,9884],{"className":9829,"code":9883,"language":9831,"meta":67,"style":67},"services:\n  web:\n    image: nginx\n",[49,9885,9886,9892,9898],{"__ignoreMap":67},[71,9887,9888,9890],{"class":73,"line":74},[71,9889,9855],{"class":81},[71,9891,9858],{"class":77},[71,9893,9894,9896],{"class":73,"line":138},[71,9895,9863],{"class":81},[71,9897,9858],{"class":77},[71,9899,9900,9902,9904],{"class":73,"line":145},[71,9901,9870],{"class":81},[71,9903,526],{"class":77},[71,9905,9658],{"class":95},[41,9907,9909],{"id":9908},"restart-policyは用途に合わせて設定する","restart policyは用途に合わせて設定する",[10,9911,9912,9913,9916],{},"Composeのサービスには、コンテナを再起動する条件を",[49,9914,9915],{},"restart","で設定できます。",[63,9918,9920],{"className":9829,"code":9919,"language":9831,"meta":67,"style":67},"services:\n  web:\n    image: nginx\n    restart: always\n",[49,9921,9922,9928,9934,9942],{"__ignoreMap":67},[71,9923,9924,9926],{"class":73,"line":74},[71,9925,9855],{"class":81},[71,9927,9858],{"class":77},[71,9929,9930,9932],{"class":73,"line":138},[71,9931,9863],{"class":81},[71,9933,9858],{"class":77},[71,9935,9936,9938,9940],{"class":73,"line":145},[71,9937,9870],{"class":81},[71,9939,526],{"class":77},[71,9941,9658],{"class":95},[71,9943,9944,9947,9949],{"class":73,"line":151},[71,9945,9946],{"class":81},"    restart",[71,9948,526],{"class":77},[71,9950,9951],{"class":95}," always\n",[10,9953,9954,9957],{},[49,9955,9956],{},"always","を指定したコンテナは、停止した場合やDockerデーモンが再起動した場合に再起動されます。",[10,9959,9960],{},"常時稼働が必要なサービスでは便利ですが、学習用コンテナへ一律に指定すると、Docker起動時に意図しないコンテナまで立ち上がることがあります。必要性を考えて設定することが大切です。",[10,9962,9963],{},"主なrestart policyには次があります。",[563,9965,9966,9976],{},[566,9967,9968],{},[569,9969,9970,9973],{},[572,9971,9972],{},"値",[572,9974,9975],{},"動作",[582,9977,9978,9988,9998,10007],{},[569,9979,9980,9985],{},[587,9981,9982],{},[49,9983,9984],{},"no",[587,9986,9987],{},"自動的に再起動しない",[569,9989,9990,9995],{},[587,9991,9992],{},[49,9993,9994],{},"on-failure",[587,9996,9997],{},"エラー終了した場合に再起動する",[569,9999,10000,10004],{},[587,10001,10002],{},[49,10003,9956],{},[587,10005,10006],{},"停止した場合に常に再起動する",[569,10008,10009,10014],{},[587,10010,10011],{},[49,10012,10013],{},"unless-stopped",[587,10015,10016],{},"明示的に停止されていない限り再起動する",[41,10018,10019],{"id":10019},"コンテナのログを確認する",[10,10021,10022,10023,10026],{},"Composeで起動したサービスのログは",[49,10024,10025],{},"docker compose logs","で確認できます。",[63,10028,10030],{"className":9640,"code":10029,"language":9642,"meta":67,"style":67},"docker compose logs\n",[49,10031,10032],{"__ignoreMap":67},[71,10033,10034,10036,10038],{"class":73,"line":74},[71,10035,9649],{"class":404},[71,10037,9753],{"class":95},[71,10039,10040],{"class":95}," logs\n",[10,10042,10043],{},"サービスを指定すると、対象のログだけを表示できます。",[63,10045,10047],{"className":9640,"code":10046,"language":9642,"meta":67,"style":67},"docker compose logs web\n",[49,10048,10049],{"__ignoreMap":67},[71,10050,10051,10053,10055,10058],{"class":73,"line":74},[71,10052,9649],{"class":404},[71,10054,9753],{"class":95},[71,10056,10057],{"class":95}," logs",[71,10059,10060],{"class":95}," web\n",[10,10062,10063,10064,10067,10068,447],{},"ログを継続して追いかける場合は",[49,10065,10066],{},"--follow","、末尾の行数を限定する場合は",[49,10069,10070],{},"--tail",[63,10072,10074],{"className":9640,"code":10073,"language":9642,"meta":67,"style":67},"docker compose logs --follow --tail 100 web\n",[49,10075,10076],{"__ignoreMap":67},[71,10077,10078,10080,10082,10084,10087,10090,10093],{"class":73,"line":74},[71,10079,9649],{"class":404},[71,10081,9753],{"class":95},[71,10083,10057],{"class":95},[71,10085,10086],{"class":95}," --follow",[71,10088,10089],{"class":95}," --tail",[71,10091,10092],{"class":688}," 100",[71,10094,10060],{"class":95},[41,10096,10097],{"id":10097},"イメージを再ビルドする",[10,10099,10100,10101,10104],{},"Composeでイメージをビルドするには",[49,10102,10103],{},"docker compose build","を使います。",[63,10106,10108],{"className":9640,"code":10107,"language":9642,"meta":67,"style":67},"docker compose build\n",[49,10109,10110],{"__ignoreMap":67},[71,10111,10112,10114,10116],{"class":73,"line":74},[71,10113,9649],{"class":404},[71,10115,9753],{"class":95},[71,10117,10118],{"class":95}," build\n",[10,10120,10121,10122,10125,10126,10129],{},"コンテナの起動前にビルドも実行したい場合は、",[49,10123,10124],{},"docker compose up","へ",[49,10127,10128],{},"--build","を付けられます。",[63,10131,10133],{"className":9640,"code":10132,"language":9642,"meta":67,"style":67},"docker compose up --detach --build\n",[49,10134,10135],{"__ignoreMap":67},[71,10136,10137,10139,10141,10144,10147],{"class":73,"line":74},[71,10138,9649],{"class":404},[71,10140,9753],{"class":95},[71,10142,10143],{"class":95}," up",[71,10145,10146],{"class":95}," --detach",[71,10148,10149],{"class":95}," --build\n",[10,10151,10152,10154,10155,1991,10158,10161],{},[49,10153,10124],{},"は、サービスの設定やイメージが変更されている場合にコンテナを再作成します。ただし、Dockerfileやビルド対象を確実に再ビルドしてから起動したい場合は、",[49,10156,10157],{},"build",[49,10159,10160],{},"up --build","を明示すると意図が分かりやすくなります。",[41,10163,10165],{"id":10164},"dev-containerで開発環境をコンテナ化する","Dev Containerで開発環境をコンテナ化する",[10,10167,10168],{},"VS CodeのDev Containers拡張機能を使うと、コンテナを開発環境として利用できます。",[10,10170,10171,10172,10175],{},"プロジェクト内の",[49,10173,10174],{},".devcontainer\u002Fdevcontainer.json","へ設定を記述し、コンテナ内のランタイム、ツール、VS Code拡張機能などを揃えられます。",[63,10177,10180],{"className":10178,"code":10179,"language":96,"meta":67},[4678],".devcontainer\u002F\n  devcontainer.json\n",[49,10181,10179],{"__ignoreMap":67},[10,10183,10184],{},"ソースコードをコンテナへマウントし、ターミナル、補完、コードナビゲーション、デバッグなどを普段のVS Codeと近い操作感で利用できます。",[10,10186,10187],{},"環境構築手順を文章だけで共有するよりも、実行環境そのものを設定として共有できる点が便利だと感じました。",[41,10189,1676],{"id":1676},[10,10191,10192],{},"本書を通して、Dockerの基本操作だけでなく、Composeによる複数コンテナの管理や、開発環境をコンテナ化する考え方を学べました。",[10,10194,10195],{},"特に、次の点を今後の開発でも意識したいです。",[25,10197,10198,10201,10206,10211,10217,10220,10223],{},[28,10199,10200],{},"Docker CLIで何を操作しているか理解する",[28,10202,10203,10204,2377],{},"Compose V2の",[49,10205,9741],{},[28,10207,9779,10208,10210],{},[49,10209,9782],{},"へ揃える",[28,10212,10213,10214,10216],{},"不要な",[49,10215,9819],{},"を記述しない",[28,10218,10219],{},"restart policyを用途に合わせて設定する",[28,10221,10222],{},"ログ確認と再ビルドのコマンドを使い分ける",[28,10224,10225],{},"Dev Containerで再現可能な開発環境を試す",[10,10227,10228],{},"Dockerはコマンドを覚えるだけでなく、イメージ、コンテナ、ボリューム、ネットワークの関係を実際に操作しながら理解していきたいです。",[1684,10230,10231],{},"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":67,"searchDepth":138,"depth":138,"links":10233},[10234,10235,10236,10237,10239,10240,10241,10242,10243,10244],{"id":9617,"depth":138,"text":9618},{"id":9633,"depth":138,"text":9634},{"id":9734,"depth":138,"text":9735},{"id":9778,"depth":138,"text":10238},"Composeファイルはcompose.yamlを使う",{"id":9815,"depth":138,"text":9815},{"id":9908,"depth":138,"text":9909},{"id":10019,"depth":138,"text":10019},{"id":10097,"depth":138,"text":10097},{"id":10164,"depth":138,"text":10165},{"id":1676,"depth":138,"text":1676},"『Docker&仮想サーバー完全入門』を読了したため、本書を通して学んだことをまとめます。",{},"\u002Fbooks\u002F2025\u002Forganize-learned-from-docker","2025-02-22","インプレス",{"title":9600,"description":10245},"books\u002F2025\u002Forganize-learned-from-docker",[10253],"Docker","tZTXcHlrKtyN5T4H4BpRH6Dc272-Srw05uyFSfG7w5Q",1786277109318]