[{"data":1,"prerenderedAt":10480},["ShallowReactive",2],{"tags:articles":3,"tags:books":5277,"search:articles":5929,"search:books":9986},[4,658,1384,3054,3543,4031,4459,4851],{"id":5,"title":6,"body":7,"description":645,"extension":646,"meta":647,"navigation":648,"path":649,"publishDate":650,"published":648,"seo":651,"stem":652,"tags":653,"thumbnail":656,"updated":650,"__hash__":657},"articles\u002Farticles\u002F2026\u002Fresolve-mac-system-data-storage-shortage-with-docker.md","Macの「システムデータ」が267GBに増えた原因はDockerだった",{"type":8,"value":9,"toc":634},"minimark",[10,14,22,25,32,35,43,48,51,62,65,71,74,77,80,126,135,142,148,154,182,189,195,201,229,232,238,241,244,248,251,267,270,276,279,324,330,334,337,355,361,364,370,373,377,380,392,395,410,413,419,426,430,433,450,453,459,462,465,476,485,488,494,497,511,514,517,520,563,566,573,576,579,609,612,615,627,630],[11,12,13],"p",{},"こんにちは、Yuriです。",[11,15,16,17,21],{},"Xcodeをインストールしてアプリ開発するため、一応MacBookのストレージを確認したところ、「システムデータ」が ",[18,19,20],"strong",{},"267GB"," まで増えていました、、",[11,23,24],{},"システムデータはmacOSがまとめて表示している領域で、ストレージ設定を見ただけでは、何に容量を使っているのか全然分かりませんでした。",[11,26,27,28,31],{},"そこでターミナルから使用量を調べた結果、主な原因は ",[18,29,30],{},"Docker Desktopのデータ"," でした。",[11,33,34],{},"今回は、原因を特定した手順と、DockerのBuild Cache、Image、Volumeを整理して空き容量を増やした方法を紹介します。",[36,37,40],"article-callout",{"title":38,"type":39},"削除前に必要なデータを確認する","caution",[11,41,42],{},"この記事にはDockerのデータを削除するコマンドが登場します。必要なImageやVolumeまで削除しないよう、各コマンドの対象を確認し、DBなどの重要なデータは事前にバックアップしてください。",[44,45,47],"h2",{"id":46},"macのストレージ状況を確認する","Macのストレージ状況を確認する",[11,49,50],{},"macOSでは、次の順番でストレージの使用状況を確認できます。",[52,53,59],"pre",{"className":54,"code":56,"language":57,"meta":58},[55],"language-text","メニュー\n  ↓\nシステム設定\n  ↓\n一般\n  ↓\nストレージ\n","text","",[60,61,56],"code",{"__ignoreMap":58},[11,63,64],{},"今回確認したときは、システムデータだけで267GBを使用していました。",[52,66,69],{"className":67,"code":68,"language":57,"meta":58},[55],"システムデータ  267GB\n",[60,70,68],{"__ignoreMap":58},[11,72,73],{},"通常のファイル整理だけでは解消できそうになかったため、どのディレクトリが容量を使っているのか調べました。",[44,75,76],{"id":76},"容量を使っているディレクトリを調べる",[11,78,79],{},"まず、ホームディレクトリ直下の使用量を確認します。",[52,81,85],{"className":82,"code":83,"language":84,"meta":58,"style":58},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","du -h -d 1 ~ 2>\u002Fdev\u002Fnull | sort -h\n","bash",[60,86,87],{"__ignoreMap":58},[88,89,92,96,100,103,107,110,114,117,120,123],"span",{"class":90,"line":91},"line",1,[88,93,95],{"class":94},"sBMFI","du",[88,97,99],{"class":98},"sfazB"," -h",[88,101,102],{"class":98}," -d",[88,104,106],{"class":105},"sbssI"," 1",[88,108,109],{"class":98}," ~",[88,111,113],{"class":112},"sMK4o"," 2>",[88,115,116],{"class":98},"\u002Fdev\u002Fnull",[88,118,119],{"class":112}," |",[88,121,122],{"class":94}," sort",[88,124,125],{"class":98}," -h\n",[11,127,128,130,131,134],{},[60,129,95],{}," はディレクトリごとの使用量を表示するコマンドです。",[60,132,133],{},"-d 1"," を指定すると、1階層下までを集計できます。",[11,136,137,138,141],{},"結果を見ると、",[60,139,140],{},"~\u002FLibrary"," が約254GBを占めていました。",[52,143,146],{"className":144,"code":145,"language":57,"meta":58},[55],"254G  \u002FUsers\u002Fxxxxx\u002FLibrary\n",[60,147,145],{"__ignoreMap":58},[11,149,150,151,153],{},"次に、",[60,152,140],{}," の内訳を確認します。",[52,155,157],{"className":82,"code":156,"language":84,"meta":58,"style":58},"du -h -d 1 ~\u002FLibrary 2>\u002Fdev\u002Fnull | sort -h\n",[60,158,159],{"__ignoreMap":58},[88,160,161,163,165,167,169,172,174,176,178,180],{"class":90,"line":91},[88,162,95],{"class":94},[88,164,99],{"class":98},[88,166,102],{"class":98},[88,168,106],{"class":105},[88,170,171],{"class":98}," ~\u002FLibrary",[88,173,113],{"class":112},[88,175,116],{"class":98},[88,177,119],{"class":112},[88,179,122],{"class":94},[88,181,125],{"class":98},[11,183,184,185,188],{},"ここでは、",[60,186,187],{},"Containers"," が約210GBを使用していました。",[52,190,193],{"className":191,"code":192,"language":57,"meta":58},[55],"210G  \u002FUsers\u002Fxxxxx\u002FLibrary\u002FContainers\n",[60,194,192],{"__ignoreMap":58},[11,196,197,198,200],{},"さらに、",[60,199,187],{}," の中を調べます。",[52,202,204],{"className":82,"code":203,"language":84,"meta":58,"style":58},"du -h -d 1 ~\u002FLibrary\u002FContainers 2>\u002Fdev\u002Fnull | sort -h\n",[60,205,206],{"__ignoreMap":58},[88,207,208,210,212,214,216,219,221,223,225,227],{"class":90,"line":91},[88,209,95],{"class":94},[88,211,99],{"class":98},[88,213,102],{"class":98},[88,215,106],{"class":105},[88,217,218],{"class":98}," ~\u002FLibrary\u002FContainers",[88,220,113],{"class":112},[88,222,116],{"class":98},[88,224,119],{"class":112},[88,226,122],{"class":94},[88,228,125],{"class":98},[11,230,231],{},"すると、Docker Desktopのコンテナーディレクトリが約210GBを占めていることが分かりました。",[52,233,236],{"className":234,"code":235,"language":57,"meta":58},[55],"210G  \u002FUsers\u002Fxxxxx\u002FLibrary\u002FContainers\u002Fcom.docker.docker\n",[60,237,235],{"__ignoreMap":58},[11,239,240],{},"macOS版のDocker Desktopは、Linuxコンテナーを動かすための仮想ディスクをMac上に保存しています。",[11,242,243],{},"そのためDockerのImage、Volume、Build Cacheなどが増えると、macOSではシステムデータとして大きく表示されることがあります。",[44,245,247],{"id":246},"dockerの使用量を確認する","Dockerの使用量を確認する",[11,249,250],{},"Docker側の内訳は、次のコマンドで確認できます。",[52,252,254],{"className":82,"code":253,"language":84,"meta":58,"style":58},"docker system df\n",[60,255,256],{"__ignoreMap":58},[88,257,258,261,264],{"class":90,"line":91},[88,259,260],{"class":94},"docker",[88,262,263],{"class":98}," system",[88,265,266],{"class":98}," df\n",[11,268,269],{},"今回の主な結果は次のとおりでした。",[52,271,274],{"className":272,"code":273,"language":57,"meta":58},[55],"TYPE            TOTAL     SIZE\nImages          20        107.6GB\nContainers      12        526MB\nLocal Volumes   46        100.2GB\nBuild Cache     196       73GB\n",[60,275,273],{"__ignoreMap":58},[11,277,278],{},"特に容量が大きかったのは、次の3項目です。",[280,281,282,296],"table",{},[283,284,285],"thead",{},[286,287,288,292],"tr",{},[289,290,291],"th",{},"項目",[289,293,295],{"align":294},"right","容量",[297,298,299,308,316],"tbody",{},[286,300,301,305],{},[302,303,304],"td",{},"Images",[302,306,307],{"align":294},"107.6GB",[286,309,310,313],{},[302,311,312],{},"Local Volumes",[302,314,315],{"align":294},"100.2GB",[286,317,318,321],{},[302,319,320],{},"Build Cache",[302,322,323],{"align":294},"73GB",[11,325,326,329],{},[60,327,328],{},"docker system df"," の数値には共有レイヤーなども含まれるため、表示された値の合計が、そのままMac上で解放できる容量になるとは限りません。ただし、どの種類のデータから調べるべきかを判断する目安になります。",[44,331,333],{"id":332},"build-cacheを削除する","Build Cacheを削除する",[11,335,336],{},"まず、最も整理しやすいBuild Cacheを削除しました。",[52,338,340],{"className":82,"code":339,"language":84,"meta":58,"style":58},"docker builder prune -a\n",[60,341,342],{"__ignoreMap":58},[88,343,344,346,349,352],{"class":90,"line":91},[88,345,260],{"class":94},[88,347,348],{"class":98}," builder",[88,350,351],{"class":98}," prune",[88,353,354],{"class":98}," -a\n",[11,356,357,360],{},[60,358,359],{},"-a"," を付けると、現在使われていないBuild Cacheがまとめて削除されます。実行前には削除対象と確認メッセージが表示されます。",[11,362,363],{},"今回、Build Cacheは73GBから0Bになりました。",[52,365,368],{"className":366,"code":367,"language":57,"meta":58},[55],"73GB → 0B\n",[60,369,367],{"__ignoreMap":58},[11,371,372],{},"Build CacheはDocker Imageをビルドするときに再利用される中間データです。削除しても必要に応じて再生成されますが、次回のビルドには時間がかかる場合があります。",[44,374,376],{"id":375},"不要なimageを整理する","不要なImageを整理する",[11,378,379],{},"次に、保存されているImageを確認しました。",[52,381,383],{"className":82,"code":382,"language":84,"meta":58,"style":58},"docker images\n",[60,384,385],{"__ignoreMap":58},[88,386,387,389],{"class":90,"line":91},[88,388,260],{"class":94},[88,390,391],{"class":98}," images\n",[11,393,394],{},"まずは、タグがなく、コンテナーから参照されていないdangling imageを削除します。",[52,396,398],{"className":82,"code":397,"language":84,"meta":58,"style":58},"docker image prune\n",[60,399,400],{"__ignoreMap":58},[88,401,402,404,407],{"class":90,"line":91},[88,403,260],{"class":94},[88,405,406],{"class":98}," image",[88,408,409],{"class":98}," prune\n",[11,411,412],{},"今回の削除量は約2.4GBでした。",[52,414,417],{"className":415,"code":416,"language":57,"meta":58},[55],"Total reclaimed space: 2.355GB\n",[60,418,416],{"__ignoreMap":58},[11,420,421,422,425],{},"すべての未使用Imageを対象にする ",[60,423,424],{},"docker image prune -a"," もありますが、次回の起動時に再取得が必要になるImageまで削除されます。今回は一覧を確認しながら、必要なImageを残して整理しました。",[44,427,429],{"id":428},"大きなvolumeの中身を調べる","大きなVolumeの中身を調べる",[11,431,432],{},"Volumeごとの詳しい使用量は、次のコマンドで確認できます。",[52,434,436],{"className":82,"code":435,"language":84,"meta":58,"style":58},"docker system df -v\n",[60,437,438],{"__ignoreMap":58},[88,439,440,442,444,447],{"class":90,"line":91},[88,441,260],{"class":94},[88,443,263],{"class":98},[88,445,446],{"class":98}," df",[88,448,449],{"class":98}," -v\n",[11,451,452],{},"確認したところ、開発用DBのデータを保存しているVolumeが84.28GBを使用していました。",[52,454,457],{"className":455,"code":456,"language":57,"meta":58},[55],"xxxxxx_db-store  84.28GB\n",[60,458,456],{"__ignoreMap":58},[11,460,461],{},"このVolumeは現在利用しているプロジェクトのDBだったため、Volume自体は削除できません。そこで、DBの中に残っている不要な開発用スキーマを確認し、必要なデータではないことを確かめてから削除しました。",[11,463,464],{},"MySQLでは、次のSQLでスキーマを削除できます。",[52,466,470],{"className":467,"code":468,"language":469,"meta":58,"style":58},"language-sql shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","DROP SCHEMA schema_name;\n","sql",[60,471,472],{"__ignoreMap":58},[88,473,474],{"class":90,"line":91},[88,475,468],{},[36,477,479],{"title":478,"type":39},"DROP SCHEMAは元に戻せない",[11,480,481,484],{},[60,482,483],{},"DROP SCHEMA"," を実行すると、スキーマ内のテーブルやデータも削除されます。対象名をよく確認し、必要に応じてバックアップを取得してから実行してください。",[11,486,487],{},"不要なスキーマを整理した結果、Local Volumesの使用量は100.2GBから53.89GBまで減りました。",[52,489,492],{"className":490,"code":491,"language":57,"meta":58},[55],"100.2GB → 53.89GB\n",[60,493,491],{"__ignoreMap":58},[11,495,496],{},"なお、使われていないVolumeをまとめて削除する場合は、次のコマンドを利用できます。",[52,498,500],{"className":82,"code":499,"language":84,"meta":58,"style":58},"docker volume prune\n",[60,501,502],{"__ignoreMap":58},[88,503,504,506,509],{"class":90,"line":91},[88,505,260],{"class":94},[88,507,508],{"class":98}," volume",[88,510,409],{"class":98},[11,512,513],{},"VolumeにはDBなどの永続データが保存されていることがあります。名前や利用状況を確認せずに実行するのは避けたほうが安全です。",[44,515,516],{"id":516},"整理後の結果",[11,518,519],{},"整理前と整理後のDocker使用量は、次のようになりました。",[280,521,522,534],{},[283,523,524],{},[286,525,526,528,531],{},[289,527,291],{},[289,529,530],{"align":294},"整理前",[289,532,533],{"align":294},"整理後",[297,535,536,545,554],{},[286,537,538,540,542],{},[302,539,304],{},[302,541,307],{"align":294},[302,543,544],{"align":294},"50.4GB",[286,546,547,549,551],{},[302,548,312],{},[302,550,315],{"align":294},[302,552,553],{"align":294},"53.89GB",[286,555,556,558,560],{},[302,557,320],{},[302,559,323],{"align":294},[302,561,562],{"align":294},"0B",[11,564,565],{},"Build Cacheの削除と、不要なImage、DBスキーマの整理によって、Docker関連のデータを100GB以上削減できました。",[11,567,568,569,572],{},"Docker Desktopの仮想ディスクはスパースファイルとして管理されるため、Docker上でデータを削除しても、ファイル自体の見かけの最大サイズがすぐに小さくならない場合があります。実際の空き容量はmacOSのストレージ画面や ",[60,570,571],{},"df -h"," でも確認すると確実です。",[44,574,575],{"id":575},"まとめ",[11,577,578],{},"Macのシステムデータが異常に増えた場合は、次の順番で調べると原因を絞り込めます。",[580,581,582,591,597,603,606],"ol",{},[583,584,585,587,588,590],"li",{},[60,586,95],{}," で ",[60,589,140],{}," の使用量を確認する",[583,592,593,596],{},[60,594,595],{},"~\u002FLibrary\u002FContainers"," に大きなディレクトリがないか確認する",[583,598,599,600,602],{},"Docker Desktopが大きい場合は ",[60,601,328],{}," で内訳を確認する",[583,604,605],{},"不要なBuild CacheやImageを整理する",[583,607,608],{},"大きなVolumeは削除せず、保存されているデータの中身まで確認する",[11,610,611],{},"特にDocker Desktopを長期間使っていると、過去のBuild CacheやImage、開発用DBのデータが蓄積します。",[11,613,614],{},"Macの容量不足に気づいてから慌てないよう、定期的に次のコマンドで使用量を確認しておくと安心です。",[52,616,617],{"className":82,"code":253,"language":84,"meta":58,"style":58},[60,618,619],{"__ignoreMap":58},[88,620,621,623,625],{"class":90,"line":91},[88,622,260],{"class":94},[88,624,263],{"class":98},[88,626,266],{"class":98},[11,628,629],{},"Macのシステムデータが数百GBまで増えている場合は、Docker Desktopのデータが原因になっていないか確認してみてください。",[631,632,633],"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 .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 pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}",{"title":58,"searchDepth":635,"depth":635,"links":636},2,[637,638,639,640,641,642,643,644],{"id":46,"depth":635,"text":47},{"id":76,"depth":635,"text":76},{"id":246,"depth":635,"text":247},{"id":332,"depth":635,"text":333},{"id":375,"depth":635,"text":376},{"id":428,"depth":635,"text":429},{"id":516,"depth":635,"text":516},{"id":575,"depth":635,"text":575},"Macの容量不足をきっかけに「システムデータ」が267GBまで肥大化した原因を調査し、DockerのBuild Cache、Image、DB Volumeを整理した手順を紹介します。","md",{},true,"\u002Farticles\u002F2026\u002Fresolve-mac-system-data-storage-shortage-with-docker","2026-08-10",{"title":6,"description":645},"articles\u002F2026\u002Fresolve-mac-system-data-storage-shortage-with-docker",[654,655],"Mac","Docker","\u002Fimages\u002Farticles\u002Fresolve-mac-system-data-storage-shortage-with-docker.png","KWp9gSbK5ytqT20G5ObWg3n5uQyKFKVp9aGSMNPqbgs",{"id":659,"title":660,"body":661,"description":1374,"extension":646,"meta":1375,"navigation":648,"path":1376,"publishDate":1377,"published":648,"seo":1378,"stem":1379,"tags":1380,"thumbnail":1382,"updated":1377,"__hash__":1383},"articles\u002Farticles\u002F2024\u002Flately-learned-js-tip.md","最近学んだJavaScriptのTipsをアウトプット",{"type":8,"value":662,"toc":1357},[663,665,668,671,674,732,736,739,812,830,845,860,875,878,881,917,927,935,949,975,991,994,1009,1012,1019,1076,1079,1086,1119,1129,1133,1142,1161,1164,1172,1210,1213,1237,1244,1250,1261,1289,1310,1313,1319,1322,1340,1342,1345,1354],[11,664,13],{},[11,666,667],{},"今回は、最近学んだJavaScriptの小さなTipsとして、オブジェクトの分割代入とオプショナルチェーンを整理します。",[44,669,670],{"id":670},"オブジェクトの分割代入",[11,672,673],{},"オブジェクトの分割代入を使うと、プロパティの値を取り出して変数へ代入できます。",[52,675,679],{"className":676,"code":677,"language":678,"meta":58,"style":58},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const user = {\n  greeting: 'Hello',\n  farewell: 'Bye',\n}\n\nconst { greeting, farewell } = user\n\nconsole.log(greeting) \u002F\u002F 'Hello'\nconsole.log(farewell) \u002F\u002F 'Bye'\n","javascript",[60,680,681,686,691,697,703,709,715,720,726],{"__ignoreMap":58},[88,682,683],{"class":90,"line":91},[88,684,685],{},"const user = {\n",[88,687,688],{"class":90,"line":635},[88,689,690],{},"  greeting: 'Hello',\n",[88,692,694],{"class":90,"line":693},3,[88,695,696],{},"  farewell: 'Bye',\n",[88,698,700],{"class":90,"line":699},4,[88,701,702],{},"}\n",[88,704,706],{"class":90,"line":705},5,[88,707,708],{"emptyLinePlaceholder":648},"\n",[88,710,712],{"class":90,"line":711},6,[88,713,714],{},"const { greeting, farewell } = user\n",[88,716,718],{"class":90,"line":717},7,[88,719,708],{"emptyLinePlaceholder":648},[88,721,723],{"class":90,"line":722},8,[88,724,725],{},"console.log(greeting) \u002F\u002F 'Hello'\n",[88,727,729],{"class":90,"line":728},9,[88,730,731],{},"console.log(farewell) \u002F\u002F 'Bye'\n",[733,734,735],"h3",{"id":735},"ネストしたプロパティを取り出す",[11,737,738],{},"オブジェクトの中にオブジェクトがある場合は、データの構造に合わせて分割代入のパターンもネストできます。",[52,740,742],{"className":676,"code":741,"language":678,"meta":58,"style":58},"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",[60,743,744,748,752,757,762,767,771,775,780,785,791,797,802,807],{"__ignoreMap":58},[88,745,746],{"class":90,"line":91},[88,747,685],{},[88,749,750],{"class":90,"line":635},[88,751,690],{},[88,753,754],{"class":90,"line":693},[88,755,756],{},"  message: {\n",[88,758,759],{"class":90,"line":699},[88,760,761],{},"    farewell: 'Bye',\n",[88,763,764],{"class":90,"line":705},[88,765,766],{},"  },\n",[88,768,769],{"class":90,"line":711},[88,770,702],{},[88,772,773],{"class":90,"line":717},[88,774,708],{"emptyLinePlaceholder":648},[88,776,777],{"class":90,"line":722},[88,778,779],{},"const {\n",[88,781,782],{"class":90,"line":728},[88,783,784],{},"  greeting,\n",[88,786,788],{"class":90,"line":787},10,[88,789,790],{},"  message: { farewell },\n",[88,792,794],{"class":90,"line":793},11,[88,795,796],{},"} = user\n",[88,798,800],{"class":90,"line":799},12,[88,801,708],{"emptyLinePlaceholder":648},[88,803,805],{"class":90,"line":804},13,[88,806,725],{},[88,808,810],{"class":90,"line":809},14,[88,811,731],{},[11,813,814,815,818,819,822,823,826,827,829],{},"この例で作られる変数は",[60,816,817],{},"greeting","と",[60,820,821],{},"farewell","です。",[60,824,825],{},"message","は、内側の",[60,828,821],{},"へたどるためのパターンとして使われているだけなので、変数として宣言されません。",[52,831,833],{"className":676,"code":832,"language":678,"meta":58,"style":58},"console.log(message)\n\u002F\u002F ReferenceError: message is not defined\n",[60,834,835,840],{"__ignoreMap":58},[88,836,837],{"class":90,"line":91},[88,838,839],{},"console.log(message)\n",[88,841,842],{"class":90,"line":635},[88,843,844],{},"\u002F\u002F ReferenceError: message is not defined\n",[36,846,849],{"title":847,"type":848},"親オブジェクトも使いたい場合","note",[11,850,851,853,854,856,857,859],{},[60,852,825],{},"自体と、その中の",[60,855,821],{},"を両方使いたい場合は、分割代入を分けるか、先に",[60,858,825],{},"を取り出してから再度分割代入します。",[52,861,863],{"className":676,"code":862,"language":678,"meta":58,"style":58},"const { message } = user\nconst { farewell } = message\n",[60,864,865,870],{"__ignoreMap":58},[88,866,867],{"class":90,"line":91},[88,868,869],{},"const { message } = user\n",[88,871,872],{"class":90,"line":635},[88,873,874],{},"const { farewell } = message\n",[733,876,877],{"id":877},"プロパティ名とは異なる変数名で受け取る",[11,879,880],{},"コロンの右側へ名前を書くと、プロパティ名とは異なる変数名で値を受け取れます。",[52,882,884],{"className":676,"code":883,"language":678,"meta":58,"style":58},"const user = {\n  name: 'Yuri',\n}\n\nconst { name: userName } = user\n\nconsole.log(userName) \u002F\u002F 'Yuri'\n",[60,885,886,890,895,899,903,908,912],{"__ignoreMap":58},[88,887,888],{"class":90,"line":91},[88,889,685],{},[88,891,892],{"class":90,"line":635},[88,893,894],{},"  name: 'Yuri',\n",[88,896,897],{"class":90,"line":693},[88,898,702],{},[88,900,901],{"class":90,"line":699},[88,902,708],{"emptyLinePlaceholder":648},[88,904,905],{"class":90,"line":705},[88,906,907],{},"const { name: userName } = user\n",[88,909,910],{"class":90,"line":711},[88,911,708],{"emptyLinePlaceholder":648},[88,913,914],{"class":90,"line":717},[88,915,916],{},"console.log(userName) \u002F\u002F 'Yuri'\n",[11,918,919,920,923,924,822],{},"この場合も",[60,921,922],{},"name","という変数は作られず、作られるのは",[60,925,926],{},"userName",[44,928,930,931,934],{"id":929},"オプショナルチェーン","オプショナルチェーン（",[60,932,933],{},"?.","）",[11,936,937,938,941,942,945,946,948],{},"オプショナルチェーンは、参照の途中にある値が",[60,939,940],{},"null","または",[60,943,944],{},"undefined","だった場合、エラーを発生させずに",[60,947,944],{},"を返す演算子です。",[52,950,952],{"className":676,"code":951,"language":678,"meta":58,"style":58},"const user = {\n  name: 'Yuri',\n}\n\nconsole.log(user.profile?.hobby) \u002F\u002F undefined\n",[60,953,954,958,962,966,970],{"__ignoreMap":58},[88,955,956],{"class":90,"line":91},[88,957,685],{},[88,959,960],{"class":90,"line":635},[88,961,894],{},[88,963,964],{"class":90,"line":693},[88,965,702],{},[88,967,968],{"class":90,"line":699},[88,969,708],{"emptyLinePlaceholder":648},[88,971,972],{"class":90,"line":705},[88,973,974],{},"console.log(user.profile?.hobby) \u002F\u002F undefined\n",[11,976,977,980,981,983,984,986,987,990],{},[60,978,979],{},"user.profile","は",[60,982,944],{},"ですが、",[60,985,933],{},"を使っているため、その先の",[60,988,989],{},"hobby","へアクセスせず評価を終了します。",[11,992,993],{},"通常のプロパティアクセスではエラーになります。",[52,995,997],{"className":676,"code":996,"language":678,"meta":58,"style":58},"console.log(user.profile.hobby)\n\u002F\u002F TypeError: Cannot read properties of undefined\n",[60,998,999,1004],{"__ignoreMap":58},[88,1000,1001],{"class":90,"line":91},[88,1002,1003],{},"console.log(user.profile.hobby)\n",[88,1005,1006],{"class":90,"line":635},[88,1007,1008],{},"\u002F\u002F TypeError: Cannot read properties of undefined\n",[733,1010,1011],{"id":1011},"配列の要素へアクセスする",[11,1013,1014,1015,1018],{},"角括弧によるアクセスでは、",[60,1016,1017],{},"?.[]","の形で使用します。",[52,1020,1022],{"className":676,"code":1021,"language":678,"meta":58,"style":58},"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",[60,1023,1024,1029,1034,1039,1044,1048,1053,1058,1062,1067,1071],{"__ignoreMap":58},[88,1025,1026],{"class":90,"line":91},[88,1027,1028],{},"const items = [\n",[88,1030,1031],{"class":90,"line":635},[88,1032,1033],{},"  { name: 'Item 1' },\n",[88,1035,1036],{"class":90,"line":693},[88,1037,1038],{},"  { name: 'Item 2' },\n",[88,1040,1041],{"class":90,"line":699},[88,1042,1043],{},"]\n",[88,1045,1046],{"class":90,"line":705},[88,1047,708],{"emptyLinePlaceholder":648},[88,1049,1050],{"class":90,"line":711},[88,1051,1052],{},"console.log(items[1]?.name) \u002F\u002F 'Item 2'\n",[88,1054,1055],{"class":90,"line":717},[88,1056,1057],{},"console.log(items[3]?.name) \u002F\u002F undefined\n",[88,1059,1060],{"class":90,"line":722},[88,1061,708],{"emptyLinePlaceholder":648},[88,1063,1064],{"class":90,"line":728},[88,1065,1066],{},"const emptyItems = undefined\n",[88,1068,1069],{"class":90,"line":787},[88,1070,708],{"emptyLinePlaceholder":648},[88,1072,1073],{"class":90,"line":793},[88,1074,1075],{},"console.log(emptyItems?.[0]) \u002F\u002F undefined\n",[733,1077,1078],{"id":1078},"関数やメソッドを呼び出す",[11,1080,1081,1082,1085],{},"関数が存在するときだけ呼び出したい場合は、",[60,1083,1084],{},"?.()","を使用します。",[52,1087,1089],{"className":676,"code":1088,"language":678,"meta":58,"style":58},"const actions = {\n  greet: () => 'Hello',\n}\n\nconsole.log(actions.greet?.()) \u002F\u002F 'Hello'\nconsole.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[60,1090,1091,1096,1101,1105,1109,1114],{"__ignoreMap":58},[88,1092,1093],{"class":90,"line":91},[88,1094,1095],{},"const actions = {\n",[88,1097,1098],{"class":90,"line":635},[88,1099,1100],{},"  greet: () => 'Hello',\n",[88,1102,1103],{"class":90,"line":693},[88,1104,702],{},[88,1106,1107],{"class":90,"line":699},[88,1108,708],{"emptyLinePlaceholder":648},[88,1110,1111],{"class":90,"line":705},[88,1112,1113],{},"console.log(actions.greet?.()) \u002F\u002F 'Hello'\n",[88,1115,1116],{"class":90,"line":711},[88,1117,1118],{},"console.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[11,1120,1121,1122,1125,1126,1128],{},"プロパティが存在していても、その値が関数でなければ",[60,1123,1124],{},"TypeError","になります。",[60,1127,1084],{},"は「呼び出し可能かどうか」まで確認するものではありません。",[733,1130,1132],{"id":1131},"dom要素へアクセスする","DOM要素へアクセスする",[11,1134,1135,1138,1139,1141],{},[60,1136,1137],{},"querySelector","は対象が見つからなかった場合に",[60,1140,940],{},"を返します。要素が存在するときだけプロパティを参照したい場合にも利用できます。",[52,1143,1145],{"className":676,"code":1144,"language":678,"meta":58,"style":58},"const button = document.querySelector('.sample-button')\n\nconsole.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[60,1146,1147,1152,1156],{"__ignoreMap":58},[88,1148,1149],{"class":90,"line":91},[88,1150,1151],{},"const button = document.querySelector('.sample-button')\n",[88,1153,1154],{"class":90,"line":635},[88,1155,708],{"emptyLinePlaceholder":648},[88,1157,1158],{"class":90,"line":693},[88,1159,1160],{},"console.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[733,1162,1163],{"id":1163},"短絡評価される範囲",[11,1165,1166,1167,941,1169,1171],{},"オプショナルチェーンでは、左側が",[60,1168,940],{},[60,1170,944],{},"の場合、そのチェーンの残りは評価されません。",[52,1173,1175],{"className":676,"code":1174,"language":678,"meta":58,"style":58},"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",[60,1176,1177,1182,1187,1191,1196,1200,1205],{"__ignoreMap":58},[88,1178,1179],{"class":90,"line":91},[88,1180,1181],{},"let index = 0\n",[88,1183,1184],{"class":90,"line":635},[88,1185,1186],{},"const items = null\n",[88,1188,1189],{"class":90,"line":693},[88,1190,708],{"emptyLinePlaceholder":648},[88,1192,1193],{"class":90,"line":699},[88,1194,1195],{},"const item = items?.[index++]\n",[88,1197,1198],{"class":90,"line":705},[88,1199,708],{"emptyLinePlaceholder":648},[88,1201,1202],{"class":90,"line":711},[88,1203,1204],{},"console.log(item) \u002F\u002F undefined\n",[88,1206,1207],{"class":90,"line":717},[88,1208,1209],{},"console.log(index) \u002F\u002F 0\n",[11,1211,1212],{},"ただし、オプショナルチェーンが途切れた後のアクセスは保護されません。",[52,1214,1216],{"className":676,"code":1215,"language":678,"meta":58,"style":58},"const user = null\n\nuser?.profile.name \u002F\u002F undefined\n(user?.profile).name \u002F\u002F TypeError\n",[60,1217,1218,1223,1227,1232],{"__ignoreMap":58},[88,1219,1220],{"class":90,"line":91},[88,1221,1222],{},"const user = null\n",[88,1224,1225],{"class":90,"line":635},[88,1226,708],{"emptyLinePlaceholder":648},[88,1228,1229],{"class":90,"line":693},[88,1230,1231],{},"user?.profile.name \u002F\u002F undefined\n",[88,1233,1234],{"class":90,"line":699},[88,1235,1236],{},"(user?.profile).name \u002F\u002F TypeError\n",[11,1238,1239,1240,1243],{},"括弧で区切ると、その後の",[60,1241,1242],{},".name","は別のプロパティアクセスとして評価されます。",[44,1245,1247,1246],{"id":1246},"と組み合わせて既定値を設定する",[60,1248,1249],{},"??",[11,1251,1252,1253,941,1255,1257,1258,1260],{},"オプショナルチェーンで取得した結果が",[60,1254,940],{},[60,1256,944],{},"だった場合、ヌル値合体演算子（",[60,1259,1249],{},"）で既定値を設定できます。",[52,1262,1264],{"className":676,"code":1263,"language":678,"meta":58,"style":58},"const user = {}\n\nconst hobby = user.profile?.hobby ?? '未設定'\n\nconsole.log(hobby) \u002F\u002F '未設定'\n",[60,1265,1266,1271,1275,1280,1284],{"__ignoreMap":58},[88,1267,1268],{"class":90,"line":91},[88,1269,1270],{},"const user = {}\n",[88,1272,1273],{"class":90,"line":635},[88,1274,708],{"emptyLinePlaceholder":648},[88,1276,1277],{"class":90,"line":693},[88,1278,1279],{},"const hobby = user.profile?.hobby ?? '未設定'\n",[88,1281,1282],{"class":90,"line":699},[88,1283,708],{"emptyLinePlaceholder":648},[88,1285,1286],{"class":90,"line":705},[88,1287,1288],{},"console.log(hobby) \u002F\u002F '未設定'\n",[11,1290,1291,980,1294,1297,1298,1301,1302,1304,1305,941,1307,1309],{},[60,1292,1293],{},"||",[60,1295,1296],{},"0","、空文字列、",[60,1299,1300],{},"false","も右側の値へ置き換えますが、",[60,1303,1249],{},"が右側を返すのは",[60,1306,940],{},[60,1308,944],{},"の場合だけです。",[44,1311,1312],{"id":1312},"オプショナルチェーンを使うときの注意点",[11,1314,1315,1316,1318],{},"オプショナルチェーンは条件分岐を簡潔にできますが、必須であるはずの値にまで使用すると、不具合を",[60,1317,944],{},"として見逃す可能性があります。",[11,1320,1321],{},"次のように使い分けることが大切です。",[1323,1324,1325,1331,1334],"ul",{},[583,1326,1327,1328,1330],{},"値が存在しないことを仕様として許容する場合は",[60,1329,933],{},"を使う",[583,1332,1333],{},"値が必須の場合は明示的に確認し、存在しなければエラーとして扱う",[583,1335,1336,1337,1339],{},"取得結果に既定値が必要な場合は",[60,1338,1249],{},"を組み合わせる",[44,1341,575],{"id":575},[11,1343,1344],{},"ネストした分割代入を使うと、深い階層の値を簡潔に変数へ取り出せます。ただし、途中のプロパティ名がそのまま変数になるわけではありません。",[11,1346,1347,1348,1350,1351,1353],{},"オプショナルチェーンを使うと、",[60,1349,940],{},"や",[60,1352,944],{},"の可能性があるプロパティ、配列、関数へ安全にアクセスできます。便利さだけで多用せず、その値が本当に省略可能なのかを考えて使っていきたいです。",[631,1355,1356],{},"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":58,"searchDepth":635,"depth":635,"links":1358},[1359,1363,1370,1372,1373],{"id":670,"depth":635,"text":670,"children":1360},[1361,1362],{"id":735,"depth":693,"text":735},{"id":877,"depth":693,"text":877},{"id":929,"depth":635,"text":1364,"children":1365},"オプショナルチェーン（?.）",[1366,1367,1368,1369],{"id":1011,"depth":693,"text":1011},{"id":1078,"depth":693,"text":1078},{"id":1131,"depth":693,"text":1132},{"id":1163,"depth":693,"text":1163},{"id":1246,"depth":635,"text":1371},"??と組み合わせて既定値を設定する",{"id":1312,"depth":635,"text":1312},{"id":575,"depth":635,"text":575},"JavaScriptのネストしたオブジェクトの分割代入とオプショナルチェーンについて、コード例と注意点を交えて整理します。",{},"\u002Farticles\u002F2024\u002Flately-learned-js-tip","2024-12-28",{"title":660,"description":1374},"articles\u002F2024\u002Flately-learned-js-tip",[1381],"JavaScript","\u002Fimages\u002Farticles\u002Flately-learned-js-tip.png","Xi5F4LrgdP-cQxce9jEEPhpLiC086mIJfek4NR0cS3g",{"id":1385,"title":1386,"body":1387,"description":3045,"extension":646,"meta":3046,"navigation":648,"path":3047,"publishDate":3048,"published":648,"seo":3049,"stem":3050,"tags":3051,"thumbnail":3052,"updated":3048,"__hash__":3053},"articles\u002Farticles\u002F2024\u002Forganize-learned-from-todo.md","Todoアプリのハンズオンで学んだことを整理する",{"type":8,"value":1388,"toc":3016},[1389,1391,1402,1415,1418,1425,1434,1469,1472,1478,1480,1483,1486,1528,1531,1535,1538,1548,1551,1554,1560,1569,1778,1789,1792,1795,1897,1900,1903,1991,1994,1997,2025,2028,2031,2042,2191,2194,2197,2200,2203,2206,2214,2226,2294,2300,2305,2311,2354,2359,2362,2365,2431,2438,2441,2448,2561,2570,2577,2582,2642,2645,2648,2651,2745,2748,2754,2773,2783,2786,2789,2868,2875,2878,2881,3002,3005,3007,3010,3013],[11,1390,13],{},[11,1392,1393,1394,1401],{},"今回は「",[1395,1396,1400],"a",{"href":1397,"rel":1398},"https:\u002F\u002Fzenn.dev\u002Fsprout2000\u002Fbooks\u002F76a279bb90c3f3",[1399],"nofollow","React Hooks と TypeScript でつくる Todo PWA ～入門 React ハンズオン～","」を進める中で学んだことを、次の4つに分けて整理します。",[1323,1403,1404,1407,1409,1412],{},[583,1405,1406],{},"HTML",[583,1408,1381],{},[583,1410,1411],{},"React",[583,1413,1414],{},"TypeScript",[44,1416,1406],{"id":1417},"html",[733,1419,1421,1424],{"id":1420},"autofocus属性",[60,1422,1423],{},"autofocus","属性",[11,1426,1427,1429,1430,1433],{},[60,1428,1423],{},"は、ページの読み込み時や",[60,1431,1432],{},"dialog","要素の表示時に、指定した要素へ自動的にフォーカスするための属性です。",[52,1435,1438],{"className":1436,"code":1437,"language":1417,"meta":58,"style":58},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cinput type=\"text\" autofocus>\n",[60,1439,1440],{"__ignoreMap":58},[88,1441,1442,1445,1449,1453,1456,1459,1461,1463,1466],{"class":90,"line":91},[88,1443,1444],{"class":112},"\u003C",[88,1446,1448],{"class":1447},"swJcz","input",[88,1450,1452],{"class":1451},"spNyl"," type",[88,1454,1455],{"class":112},"=",[88,1457,1458],{"class":112},"\"",[88,1460,57],{"class":98},[88,1462,1458],{"class":112},[88,1464,1465],{"class":1451}," autofocus",[88,1467,1468],{"class":112},">\n",[11,1470,1471],{},"1つの文書やダイアログ内では、複数の要素へ指定しないようにします。複数指定した場合、最初に見つかった要素がフォーカスされます。",[36,1473,1475],{"title":1474,"type":39},"アクセシビリティへの配慮",[11,1476,1477],{},"ページを開いた直後にフォーカスが移動すると、スクリーンリーダー利用者やモバイル利用者を混乱させる場合があります。本当に自動フォーカスが必要かを検討して使用しましょう。",[44,1479,1381],{"id":678},[733,1481,1482],{"id":1482},"オブジェクトのプロパティ名を動的にする",[11,1484,1485],{},"オブジェクトリテラルのプロパティ名を角括弧で囲むと、式の評価結果をプロパティ名として使用できます。これは計算プロパティ名と呼ばれます。",[52,1487,1489],{"className":676,"code":1488,"language":678,"meta":58,"style":58},"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",[60,1490,1491,1496,1500,1505,1510,1514,1518,1523],{"__ignoreMap":58},[88,1492,1493],{"class":90,"line":91},[88,1494,1495],{},"const key = 'sampleKey'\n",[88,1497,1498],{"class":90,"line":635},[88,1499,708],{"emptyLinePlaceholder":648},[88,1501,1502],{"class":90,"line":693},[88,1503,1504],{},"const sample = {\n",[88,1506,1507],{"class":90,"line":699},[88,1508,1509],{},"  [key]: 'sampleValue',\n",[88,1511,1512],{"class":90,"line":705},[88,1513,702],{},[88,1515,1516],{"class":90,"line":711},[88,1517,708],{"emptyLinePlaceholder":648},[88,1519,1520],{"class":90,"line":717},[88,1521,1522],{},"console.log(sample) \u002F\u002F { sampleKey: 'sampleValue' }\n",[88,1524,1525],{"class":90,"line":722},[88,1526,1527],{},"console.log(sample[key]) \u002F\u002F 'sampleValue'\n",[11,1529,1530],{},"入力項目の名前をキーとしてオブジェクトを更新する場合などに利用できます。",[733,1532,1534],{"id":1533},"tree-shaking","Tree Shaking",[11,1536,1537],{},"Tree Shakingは、利用されていないコードをビルド結果から取り除く最適化です。",[11,1539,1540,1541,818,1544,1547],{},"主にバンドラーがES Modulesの",[60,1542,1543],{},"import",[60,1545,1546],{},"export","を静的に解析し、参照されていないエクスポートを出力対象から除外します。",[11,1549,1550],{},"実際に削除できる範囲は、バンドラーの設定やコードに副作用があるかどうかによって変わります。",[44,1552,1411],{"id":1553},"react",[733,1555,1557],{"id":1556},"createroot",[60,1558,1559],{},"createRoot",[11,1561,1562,1564,1565,1568],{},[60,1563,1559],{},"は、Reactが管理するルートをブラウザのDOM要素へ作成するAPIです。作成したルートの",[60,1566,1567],{},"render","メソッドへReact要素を渡して表示します。",[52,1570,1574],{"className":1571,"code":1572,"language":1573,"meta":58,"style":58},"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",[60,1575,1576,1602,1622,1639,1643,1677,1681,1698,1720,1724,1728,1742,1752,1763,1773],{"__ignoreMap":58},[88,1577,1578,1581,1584,1588,1591,1594,1597,1599],{"class":90,"line":91},[88,1579,1543],{"class":1580},"s7zQu",[88,1582,1583],{"class":112}," {",[88,1585,1587],{"class":1586},"sTEyZ"," StrictMode",[88,1589,1590],{"class":112}," }",[88,1592,1593],{"class":1580}," from",[88,1595,1596],{"class":112}," '",[88,1598,1553],{"class":98},[88,1600,1601],{"class":112},"'\n",[88,1603,1604,1606,1608,1611,1613,1615,1617,1620],{"class":90,"line":635},[88,1605,1543],{"class":1580},[88,1607,1583],{"class":112},[88,1609,1610],{"class":1586}," createRoot",[88,1612,1590],{"class":112},[88,1614,1593],{"class":1580},[88,1616,1596],{"class":112},[88,1618,1619],{"class":98},"react-dom\u002Fclient",[88,1621,1601],{"class":112},[88,1623,1624,1626,1629,1632,1634,1637],{"class":90,"line":693},[88,1625,1543],{"class":1580},[88,1627,1628],{"class":1586}," App ",[88,1630,1631],{"class":1580},"from",[88,1633,1596],{"class":112},[88,1635,1636],{"class":98},".\u002FApp",[88,1638,1601],{"class":112},[88,1640,1641],{"class":90,"line":699},[88,1642,708],{"emptyLinePlaceholder":648},[88,1644,1645,1648,1651,1653,1656,1659,1663,1666,1669,1672,1674],{"class":90,"line":705},[88,1646,1647],{"class":1451},"const",[88,1649,1650],{"class":1586}," container ",[88,1652,1455],{"class":112},[88,1654,1655],{"class":1586}," document",[88,1657,1658],{"class":112},".",[88,1660,1662],{"class":1661},"s2Zo4","getElementById",[88,1664,1665],{"class":1586},"(",[88,1667,1668],{"class":112},"'",[88,1670,1671],{"class":98},"root",[88,1673,1668],{"class":112},[88,1675,1676],{"class":1586},")\n",[88,1678,1679],{"class":90,"line":711},[88,1680,708],{"emptyLinePlaceholder":648},[88,1682,1683,1686,1689,1692,1695],{"class":90,"line":717},[88,1684,1685],{"class":1580},"if",[88,1687,1688],{"class":1586}," (",[88,1690,1691],{"class":112},"!",[88,1693,1694],{"class":1586},"container) ",[88,1696,1697],{"class":112},"{\n",[88,1699,1700,1703,1706,1709,1711,1713,1716,1718],{"class":90,"line":722},[88,1701,1702],{"class":1580},"  throw",[88,1704,1705],{"class":112}," new",[88,1707,1708],{"class":1661}," Error",[88,1710,1665],{"class":1447},[88,1712,1668],{"class":112},[88,1714,1715],{"class":98},"root要素が見つかりません",[88,1717,1668],{"class":112},[88,1719,1676],{"class":1447},[88,1721,1722],{"class":90,"line":728},[88,1723,702],{"class":112},[88,1725,1726],{"class":90,"line":787},[88,1727,708],{"emptyLinePlaceholder":648},[88,1729,1730,1732,1735,1737,1739],{"class":90,"line":793},[88,1731,1559],{"class":1661},[88,1733,1734],{"class":1586},"(container)",[88,1736,1658],{"class":112},[88,1738,1567],{"class":1661},[88,1740,1741],{"class":1586},"(\n",[88,1743,1744,1747,1750],{"class":90,"line":799},[88,1745,1746],{"class":112},"  \u003C",[88,1748,1749],{"class":94},"StrictMode",[88,1751,1468],{"class":112},[88,1753,1754,1757,1760],{"class":90,"line":804},[88,1755,1756],{"class":112},"    \u003C",[88,1758,1759],{"class":94},"App",[88,1761,1762],{"class":112}," \u002F>\n",[88,1764,1765,1768,1770],{"class":90,"line":809},[88,1766,1767],{"class":112},"  \u003C\u002F",[88,1769,1749],{"class":94},[88,1771,1772],{"class":112},">,\n",[88,1774,1776],{"class":90,"line":1775},15,[88,1777,1676],{"class":1586},[11,1779,1780,1782,1783,1785,1786,1085],{},[60,1781,1559],{},"へ渡したDOM要素の内側はReactが管理します。サーバー側でReactが生成したHTMLを再利用する場合は、",[60,1784,1559],{},"ではなく",[60,1787,1788],{},"hydrateRoot",[733,1790,1791],{"id":1791},"stateを直接変更しない",[11,1793,1794],{},"Reactのstateに保存したオブジェクトや配列は、読み取り専用として扱います。値を直接変更せず、新しい値を作ってset関数へ渡します。",[52,1796,1798],{"className":1571,"code":1797,"language":1573,"meta":58,"style":58},"setTodos(currentTodos =>\n  currentTodos.map(todo =>\n    todo.id === id\n      ? { ...todo, completed: true }\n      : todo,\n  ),\n)\n",[60,1799,1800,1814,1831,1847,1875,1886,1893],{"__ignoreMap":58},[88,1801,1802,1805,1807,1811],{"class":90,"line":91},[88,1803,1804],{"class":1661},"setTodos",[88,1806,1665],{"class":1586},[88,1808,1810],{"class":1809},"sHdIc","currentTodos",[88,1812,1813],{"class":1451}," =>\n",[88,1815,1816,1819,1821,1824,1826,1829],{"class":90,"line":635},[88,1817,1818],{"class":1586},"  currentTodos",[88,1820,1658],{"class":112},[88,1822,1823],{"class":1661},"map",[88,1825,1665],{"class":1586},[88,1827,1828],{"class":1809},"todo",[88,1830,1813],{"class":1451},[88,1832,1833,1836,1838,1841,1844],{"class":90,"line":693},[88,1834,1835],{"class":1586},"    todo",[88,1837,1658],{"class":112},[88,1839,1840],{"class":1586},"id ",[88,1842,1843],{"class":112},"===",[88,1845,1846],{"class":1586}," id\n",[88,1848,1849,1852,1854,1857,1859,1862,1865,1868,1872],{"class":90,"line":699},[88,1850,1851],{"class":112},"      ?",[88,1853,1583],{"class":112},[88,1855,1856],{"class":112}," ...",[88,1858,1828],{"class":1586},[88,1860,1861],{"class":112},",",[88,1863,1864],{"class":1447}," completed",[88,1866,1867],{"class":112},":",[88,1869,1871],{"class":1870},"sfNiH"," true",[88,1873,1874],{"class":112}," }\n",[88,1876,1877,1880,1883],{"class":90,"line":705},[88,1878,1879],{"class":112},"      :",[88,1881,1882],{"class":1586}," todo",[88,1884,1885],{"class":112},",\n",[88,1887,1888,1891],{"class":90,"line":711},[88,1889,1890],{"class":1586},"  )",[88,1892,1885],{"class":112},[88,1894,1895],{"class":90,"line":717},[88,1896,1676],{"class":1586},[11,1898,1899],{},"配列を新しく作っても、その中にあるオブジェクトまでは自動的に複製されません。更新対象のオブジェクトもスプレッド構文などで新しく作る必要があります。",[11,1901,1902],{},"配列を更新する際は、次のように破壊的な操作を避けます。",[280,1904,1905,1918],{},[283,1906,1907],{},[286,1908,1909,1912,1915],{},[289,1910,1911],{},"操作",[289,1913,1914],{},"避けたい方法",[289,1916,1917],{},"利用する方法",[297,1919,1920,1940,1961,1975],{},[286,1921,1922,1925,1934],{},[302,1923,1924],{},"追加",[302,1926,1927,1930,1931],{},[60,1928,1929],{},"push","、",[60,1932,1933],{},"unshift",[302,1935,1936,1937],{},"スプレッド構文、",[60,1938,1939],{},"concat",[286,1941,1942,1945,1953],{},[302,1943,1944],{},"削除",[302,1946,1947,1930,1950],{},[60,1948,1949],{},"pop",[60,1951,1952],{},"splice",[302,1954,1955,1930,1958],{},[60,1956,1957],{},"filter",[60,1959,1960],{},"slice",[286,1962,1963,1966,1971],{},[302,1964,1965],{},"置換",[302,1967,1968,1969],{},"添字への代入、",[60,1970,1952],{},[302,1972,1973],{},[60,1974,1823],{},[286,1976,1977,1980,1986],{},[302,1978,1979],{},"並び替え",[302,1981,1982,1983],{},"元配列への",[60,1984,1985],{},"sort",[302,1987,1988,1989],{},"コピー後に",[60,1990,1985],{},[733,1992,1993],{"id":1993},"直前のstateを基に更新する",[11,1995,1996],{},"更新後のstateが更新前の値に依存する場合は、set関数へ値ではなく更新用の関数を渡します。",[52,1998,2000],{"className":1571,"code":1999,"language":1573,"meta":58,"style":58},"setCount(currentCount => currentCount + 1)\n",[60,2001,2002],{"__ignoreMap":58},[88,2003,2004,2007,2009,2012,2015,2018,2021,2023],{"class":90,"line":91},[88,2005,2006],{"class":1661},"setCount",[88,2008,1665],{"class":1586},[88,2010,2011],{"class":1809},"currentCount",[88,2013,2014],{"class":1451}," =>",[88,2016,2017],{"class":1586}," currentCount ",[88,2019,2020],{"class":112},"+",[88,2022,106],{"class":105},[88,2024,1676],{"class":1586},[11,2026,2027],{},"Reactはイベントハンドラーの処理をまとめてからstateを更新することがあります。更新用関数を使うことで、その時点の最新のstateを基に次の値を計算できます。",[733,2029,2030],{"id":2030},"イベントハンドラーの命名",[11,2032,2033,2034,2037,2038,2041],{},"イベントを処理する関数には",[60,2035,2036],{},"handle","、propsとして受け渡すイベントには",[60,2039,2040],{},"on","を付けると役割が伝わりやすくなります。",[52,2043,2045],{"className":1571,"code":2044,"language":1573,"meta":58,"style":58},"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",[60,2046,2047,2061,2086,2090,2094,2117,2134,2146,2151,2155,2187],{"__ignoreMap":58},[88,2048,2049,2052,2055,2058],{"class":90,"line":91},[88,2050,2051],{"class":1451},"type",[88,2053,2054],{"class":94}," TodoItemProps",[88,2056,2057],{"class":112}," =",[88,2059,2060],{"class":112}," {\n",[88,2062,2063,2066,2068,2070,2073,2075,2078,2081,2083],{"class":90,"line":635},[88,2064,2065],{"class":1447},"  onChange",[88,2067,1867],{"class":112},[88,2069,1688],{"class":112},[88,2071,2072],{"class":1809},"id",[88,2074,1867],{"class":112},[88,2076,2077],{"class":94}," number",[88,2079,2080],{"class":112},")",[88,2082,2014],{"class":1451},[88,2084,2085],{"class":94}," void\n",[88,2087,2088],{"class":90,"line":693},[88,2089,702],{"class":112},[88,2091,2092],{"class":90,"line":699},[88,2093,708],{"emptyLinePlaceholder":648},[88,2095,2096,2099,2102,2105,2108,2111,2113,2115],{"class":90,"line":705},[88,2097,2098],{"class":1451},"function",[88,2100,2101],{"class":1661}," TodoItem",[88,2103,2104],{"class":112},"({",[88,2106,2107],{"class":1809}," onChange",[88,2109,2110],{"class":112}," }:",[88,2112,2054],{"class":94},[88,2114,2080],{"class":112},[88,2116,2060],{"class":112},[88,2118,2119,2122,2125,2127,2130,2132],{"class":90,"line":711},[88,2120,2121],{"class":1451},"  const",[88,2123,2124],{"class":1586}," handleChange",[88,2126,2057],{"class":112},[88,2128,2129],{"class":112}," ()",[88,2131,2014],{"class":1451},[88,2133,2060],{"class":112},[88,2135,2136,2139,2141,2144],{"class":90,"line":717},[88,2137,2138],{"class":1661},"    onChange",[88,2140,1665],{"class":1447},[88,2142,2143],{"class":105},"1",[88,2145,1676],{"class":1447},[88,2147,2148],{"class":90,"line":722},[88,2149,2150],{"class":112},"  }\n",[88,2152,2153],{"class":90,"line":728},[88,2154,708],{"emptyLinePlaceholder":648},[88,2156,2157,2160,2163,2165,2167,2169,2171,2174,2176,2178,2181,2184],{"class":90,"line":787},[88,2158,2159],{"class":1580},"  return",[88,2161,2162],{"class":112}," \u003C",[88,2164,1448],{"class":1447},[88,2166,1452],{"class":1451},[88,2168,1455],{"class":112},[88,2170,1458],{"class":112},[88,2172,2173],{"class":98},"checkbox",[88,2175,1458],{"class":112},[88,2177,2107],{"class":1451},[88,2179,2180],{"class":112},"={",[88,2182,2183],{"class":1586},"handleChange",[88,2185,2186],{"class":112},"} \u002F>\n",[88,2188,2189],{"class":90,"line":793},[88,2190,702],{"class":112},[11,2192,2193],{},"これはReactが強制する規則ではありませんが、一貫した命名はコードを読みやすくします。",[733,2195,2196],{"id":2196},"propsの分割代入",[11,2198,2199],{},"propsを分割代入すると記述は短くなりますが、変数がprops由来なのかコンポーネント内で定義されたものなのか分かりにくくなる場合があります。",[11,2201,2202],{},"コンポーネントが大きくなった場合は、変数名やコンポーネントの責務を見直し、値の出所を追いやすくすることが大切です。",[44,2204,1414],{"id":2205},"typescript",[733,2207,2209,818,2212],{"id":2208},"documentgetelementbyidとnull",[60,2210,2211],{},"document.getElementById",[60,2213,940],{},[11,2215,2216,2218,2219,2222,2223,2225],{},[60,2217,2211],{},"の戻り値は",[60,2220,2221],{},"HTMLElement | null","です。対象の要素が存在しない可能性があるため、利用前に",[60,2224,940],{},"を確認します。",[52,2227,2230],{"className":2228,"code":2229,"language":2205,"meta":58,"style":58},"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",[60,2231,2232,2256,2260,2272,2290],{"__ignoreMap":58},[88,2233,2234,2236,2238,2240,2242,2244,2246,2248,2250,2252,2254],{"class":90,"line":91},[88,2235,1647],{"class":1451},[88,2237,1650],{"class":1586},[88,2239,1455],{"class":112},[88,2241,1655],{"class":1586},[88,2243,1658],{"class":112},[88,2245,1662],{"class":1661},[88,2247,1665],{"class":1586},[88,2249,1668],{"class":112},[88,2251,1671],{"class":98},[88,2253,1668],{"class":112},[88,2255,1676],{"class":1586},[88,2257,2258],{"class":90,"line":635},[88,2259,708],{"emptyLinePlaceholder":648},[88,2261,2262,2264,2266,2268,2270],{"class":90,"line":693},[88,2263,1685],{"class":1580},[88,2265,1688],{"class":1586},[88,2267,1691],{"class":112},[88,2269,1694],{"class":1586},[88,2271,1697],{"class":112},[88,2273,2274,2276,2278,2280,2282,2284,2286,2288],{"class":90,"line":699},[88,2275,1702],{"class":1580},[88,2277,1705],{"class":112},[88,2279,1708],{"class":1661},[88,2281,1665],{"class":1447},[88,2283,1668],{"class":112},[88,2285,1715],{"class":98},[88,2287,1668],{"class":112},[88,2289,1676],{"class":1447},[88,2291,2292],{"class":90,"line":705},[88,2293,702],{"class":112},[11,2295,2296,2297,2299],{},"Non-nullアサーション演算子（",[60,2298,1691],{},"）で確認を省略することもできますが、実行時に要素が必ず存在することをTypeScriptが保証するわけではありません。",[733,2301,2303],{"id":2302},"readonly",[60,2304,2302],{},[11,2306,2307,2308,2310],{},"プロパティへ",[60,2309,2302],{},"を指定すると、そのプロパティへの再代入を型チェックで防げます。",[52,2312,2314],{"className":2228,"code":2313,"language":2205,"meta":58,"style":58},"type Todo = {\n  readonly id: number\n  title: string\n}\n",[60,2315,2316,2327,2340,2350],{"__ignoreMap":58},[88,2317,2318,2320,2323,2325],{"class":90,"line":91},[88,2319,2051],{"class":1451},[88,2321,2322],{"class":94}," Todo",[88,2324,2057],{"class":112},[88,2326,2060],{"class":112},[88,2328,2329,2332,2335,2337],{"class":90,"line":635},[88,2330,2331],{"class":1451},"  readonly",[88,2333,2334],{"class":1447}," id",[88,2336,1867],{"class":112},[88,2338,2339],{"class":94}," number\n",[88,2341,2342,2345,2347],{"class":90,"line":693},[88,2343,2344],{"class":1447},"  title",[88,2346,1867],{"class":112},[88,2348,2349],{"class":94}," string\n",[88,2351,2352],{"class":90,"line":699},[88,2353,702],{"class":112},[11,2355,2356,2358],{},[60,2357,2302],{},"はコンパイル時の制約です。また、入れ子になったオブジェクトまで自動的に読み取り専用にするものではありません。",[733,2360,2361],{"id":2361},"イベントごとの型",[11,2363,2364],{},"Reactのイベントハンドラーでは、対象に応じたイベント型を利用できます。",[52,2366,2368],{"className":1571,"code":2367,"language":1573,"meta":58,"style":58},"function handleChange(event: React.ChangeEvent\u003CHTMLInputElement>) {\n  console.log(event.target.checked)\n}\n",[60,2369,2370,2401,2427],{"__ignoreMap":58},[88,2371,2372,2374,2376,2378,2381,2383,2386,2388,2391,2393,2396,2399],{"class":90,"line":91},[88,2373,2098],{"class":1451},[88,2375,2124],{"class":1661},[88,2377,1665],{"class":112},[88,2379,2380],{"class":1809},"event",[88,2382,1867],{"class":112},[88,2384,2385],{"class":94}," React",[88,2387,1658],{"class":112},[88,2389,2390],{"class":94},"ChangeEvent",[88,2392,1444],{"class":112},[88,2394,2395],{"class":94},"HTMLInputElement",[88,2397,2398],{"class":112},">)",[88,2400,2060],{"class":112},[88,2402,2403,2406,2408,2411,2413,2415,2417,2420,2422,2425],{"class":90,"line":635},[88,2404,2405],{"class":1586},"  console",[88,2407,1658],{"class":112},[88,2409,2410],{"class":1661},"log",[88,2412,1665],{"class":1447},[88,2414,2380],{"class":1586},[88,2416,1658],{"class":112},[88,2418,2419],{"class":1586},"target",[88,2421,1658],{"class":112},[88,2423,2424],{"class":1586},"checked",[88,2426,1676],{"class":1447},[88,2428,2429],{"class":90,"line":693},[88,2430,702],{"class":112},[11,2432,2433,2434,2437],{},"イベント型だけでなく、",[60,2435,2436],{},"ChangeEventHandler\u003CHTMLInputElement>","のようなハンドラー全体の型を付ける方法もあります。",[733,2439,2440],{"id":2440},"ジェネリクスの型引数へ制約を付ける",[11,2442,2443,2444,2447],{},"型引数に",[60,2445,2446],{},"extends","を指定すると、ジェネリクスで受け取れる型に必要なプロパティを保証できます。",[52,2449,2451],{"className":2228,"code":2450,"language":2205,"meta":58,"style":58},"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",[60,2452,2453,2464,2473,2477,2481,2524,2557],{"__ignoreMap":58},[88,2454,2455,2457,2460,2462],{"class":90,"line":91},[88,2456,2051],{"class":1451},[88,2458,2459],{"class":94}," Identifiable",[88,2461,2057],{"class":112},[88,2463,2060],{"class":112},[88,2465,2466,2469,2471],{"class":90,"line":635},[88,2467,2468],{"class":1447},"  id",[88,2470,1867],{"class":112},[88,2472,2339],{"class":94},[88,2474,2475],{"class":90,"line":693},[88,2476,702],{"class":112},[88,2478,2479],{"class":90,"line":699},[88,2480,708],{"emptyLinePlaceholder":648},[88,2482,2483,2485,2488,2490,2493,2496,2498,2501,2504,2506,2509,2512,2514,2516,2518,2520,2522],{"class":90,"line":705},[88,2484,2098],{"class":1451},[88,2486,2487],{"class":1661}," findById",[88,2489,1444],{"class":112},[88,2491,2492],{"class":94},"T",[88,2494,2495],{"class":1451}," extends",[88,2497,2459],{"class":94},[88,2499,2500],{"class":112},">(",[88,2502,2503],{"class":1809},"items",[88,2505,1867],{"class":112},[88,2507,2508],{"class":94}," T",[88,2510,2511],{"class":1586},"[]",[88,2513,1861],{"class":112},[88,2515,2334],{"class":1809},[88,2517,1867],{"class":112},[88,2519,2077],{"class":94},[88,2521,2080],{"class":112},[88,2523,2060],{"class":112},[88,2525,2526,2528,2531,2533,2536,2538,2541,2543,2546,2548,2550,2553,2555],{"class":90,"line":711},[88,2527,2159],{"class":1580},[88,2529,2530],{"class":1586}," items",[88,2532,1658],{"class":112},[88,2534,2535],{"class":1661},"find",[88,2537,1665],{"class":1447},[88,2539,2540],{"class":1809},"item",[88,2542,2014],{"class":1451},[88,2544,2545],{"class":1586}," item",[88,2547,1658],{"class":112},[88,2549,2072],{"class":1586},[88,2551,2552],{"class":112}," ===",[88,2554,2334],{"class":1586},[88,2556,1676],{"class":1447},[88,2558,2559],{"class":90,"line":717},[88,2560,702],{"class":112},[11,2562,2563,2564,2566,2567,2569],{},"制約がなければ",[60,2565,2492],{},"にどのような型が渡されるか分からないため、関数内で",[60,2568,2072],{},"へ安全にアクセスできません。",[733,2571,2573,2576],{"id":2572},"keyof型演算子",[60,2574,2575],{},"keyof","型演算子",[11,2578,2579,2581],{},[60,2580,2575],{},"は、オブジェクト型のプロパティ名からユニオン型を作る型演算子です。",[52,2583,2585],{"className":2228,"code":2584,"language":2205,"meta":58,"style":58},"type Todo = {\n  id: number\n  title: string\n}\n\ntype TodoKey = keyof Todo\n\u002F\u002F 'id' | 'title'\n",[60,2586,2587,2597,2605,2613,2617,2621,2636],{"__ignoreMap":58},[88,2588,2589,2591,2593,2595],{"class":90,"line":91},[88,2590,2051],{"class":1451},[88,2592,2322],{"class":94},[88,2594,2057],{"class":112},[88,2596,2060],{"class":112},[88,2598,2599,2601,2603],{"class":90,"line":635},[88,2600,2468],{"class":1447},[88,2602,1867],{"class":112},[88,2604,2339],{"class":94},[88,2606,2607,2609,2611],{"class":90,"line":693},[88,2608,2344],{"class":1447},[88,2610,1867],{"class":112},[88,2612,2349],{"class":94},[88,2614,2615],{"class":90,"line":699},[88,2616,702],{"class":112},[88,2618,2619],{"class":90,"line":705},[88,2620,708],{"emptyLinePlaceholder":648},[88,2622,2623,2625,2628,2630,2633],{"class":90,"line":711},[88,2624,2051],{"class":1451},[88,2626,2627],{"class":94}," TodoKey",[88,2629,2057],{"class":112},[88,2631,2632],{"class":112}," keyof",[88,2634,2635],{"class":94}," Todo\n",[88,2637,2638],{"class":90,"line":717},[88,2639,2641],{"class":2640},"sHwdD","\u002F\u002F 'id' | 'title'\n",[11,2643,2644],{},"プロパティを追加・削除したときにユニオン型を手作業で更新する必要がなくなり、型定義との不整合を防ぎやすくなります。",[733,2646,2647],{"id":2647},"インデックスアクセス型",[11,2649,2650],{},"インデックスアクセス型を使うと、オブジェクト型から特定のプロパティの型を取り出せます。",[52,2652,2654],{"className":2228,"code":2653,"language":2205,"meta":58,"style":58},"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",[60,2655,2656,2666,2674,2682,2686,2690,2712,2717,2721,2740],{"__ignoreMap":58},[88,2657,2658,2660,2662,2664],{"class":90,"line":91},[88,2659,2051],{"class":1451},[88,2661,2322],{"class":94},[88,2663,2057],{"class":112},[88,2665,2060],{"class":112},[88,2667,2668,2670,2672],{"class":90,"line":635},[88,2669,2468],{"class":1447},[88,2671,1867],{"class":112},[88,2673,2339],{"class":94},[88,2675,2676,2678,2680],{"class":90,"line":693},[88,2677,2344],{"class":1447},[88,2679,1867],{"class":112},[88,2681,2349],{"class":94},[88,2683,2684],{"class":90,"line":699},[88,2685,702],{"class":112},[88,2687,2688],{"class":90,"line":705},[88,2689,708],{"emptyLinePlaceholder":648},[88,2691,2692,2694,2697,2699,2701,2704,2706,2708,2710],{"class":90,"line":711},[88,2693,2051],{"class":1451},[88,2695,2696],{"class":94}," TodoId",[88,2698,2057],{"class":112},[88,2700,2322],{"class":94},[88,2702,2703],{"class":1586},"[",[88,2705,1668],{"class":112},[88,2707,2072],{"class":98},[88,2709,1668],{"class":112},[88,2711,1043],{"class":1586},[88,2713,2714],{"class":90,"line":717},[88,2715,2716],{"class":2640},"\u002F\u002F number\n",[88,2718,2719],{"class":90,"line":722},[88,2720,708],{"emptyLinePlaceholder":648},[88,2722,2723,2725,2728,2730,2732,2734,2736,2738],{"class":90,"line":728},[88,2724,2051],{"class":1451},[88,2726,2727],{"class":94}," TodoValue",[88,2729,2057],{"class":112},[88,2731,2322],{"class":94},[88,2733,2703],{"class":1586},[88,2735,2575],{"class":112},[88,2737,2322],{"class":94},[88,2739,1043],{"class":1586},[88,2741,2742],{"class":90,"line":787},[88,2743,2744],{"class":2640},"\u002F\u002F number | string\n",[733,2746,2747],{"id":2747},"アンビエント宣言",[11,2749,2750,2753],{},[60,2751,2752],{},"declare","を使うと、実装が別の場所に存在する値や型をTypeScriptへ伝えられます。JavaScriptライブラリや実行環境が提供するグローバル変数の型を補う場合などに使用します。",[52,2755,2757],{"className":2228,"code":2756,"language":2205,"meta":58,"style":58},"declare const appVersion: string\n",[60,2758,2759],{"__ignoreMap":58},[88,2760,2761,2763,2766,2769,2771],{"class":90,"line":91},[88,2762,2752],{"class":1451},[88,2764,2765],{"class":1451}," const",[88,2767,2768],{"class":1586}," appVersion",[88,2770,1867],{"class":112},[88,2772,2349],{"class":94},[11,2774,2775,2776,2779,2780,2782],{},"一般的には",[60,2777,2778],{},".d.ts","形式の型定義ファイルへ記述します。",[60,2781,2752],{},"は実行時の値を作成しないため、実体が存在しなければ実行時エラーになります。",[733,2784,2785],{"id":2785},"メソッドの型注釈",[11,2787,2788],{},"オブジェクト型のメソッドは、メソッド構文と関数プロパティ構文のどちらでも表現できます。",[52,2790,2792],{"className":2228,"code":2791,"language":2205,"meta":58,"style":58},"type Formatter = {\n  format(value: string): string\n}\n\ntype FormatterProperty = {\n  format: (value: string) => string\n}\n",[60,2793,2794,2805,2825,2829,2833,2844,2864],{"__ignoreMap":58},[88,2795,2796,2798,2801,2803],{"class":90,"line":91},[88,2797,2051],{"class":1451},[88,2799,2800],{"class":94}," Formatter",[88,2802,2057],{"class":112},[88,2804,2060],{"class":112},[88,2806,2807,2810,2812,2815,2817,2820,2823],{"class":90,"line":635},[88,2808,2809],{"class":1447},"  format",[88,2811,1665],{"class":112},[88,2813,2814],{"class":1809},"value",[88,2816,1867],{"class":112},[88,2818,2819],{"class":94}," string",[88,2821,2822],{"class":112},"):",[88,2824,2349],{"class":94},[88,2826,2827],{"class":90,"line":693},[88,2828,702],{"class":112},[88,2830,2831],{"class":90,"line":699},[88,2832,708],{"emptyLinePlaceholder":648},[88,2834,2835,2837,2840,2842],{"class":90,"line":705},[88,2836,2051],{"class":1451},[88,2838,2839],{"class":94}," FormatterProperty",[88,2841,2057],{"class":112},[88,2843,2060],{"class":112},[88,2845,2846,2848,2850,2852,2854,2856,2858,2860,2862],{"class":90,"line":711},[88,2847,2809],{"class":1447},[88,2849,1867],{"class":112},[88,2851,1688],{"class":112},[88,2853,2814],{"class":1809},[88,2855,1867],{"class":112},[88,2857,2819],{"class":94},[88,2859,2080],{"class":112},[88,2861,2014],{"class":1451},[88,2863,2349],{"class":94},[88,2865,2866],{"class":90,"line":717},[88,2867,702],{"class":112},[11,2869,2870,2871,2874],{},"両者には、継承や",[60,2872,2873],{},"strictFunctionTypes","における引数型の扱いなどで違いがあります。プロジェクト内で意図に合った書き方へ揃えることが大切です。",[733,2876,2877],{"id":2877},"型ガード",[11,2879,2880],{},"型ガードは、実行時の確認を通して変数の型を絞り込む仕組みです。ユーザー定義型ガードでは、戻り値の型に型述語を指定します。",[52,2882,2884],{"className":2228,"code":2883,"language":2205,"meta":58,"style":58},"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",[60,2885,2886,2914,2932,2936,2940,2955,2959,2973,2998],{"__ignoreMap":58},[88,2887,2888,2890,2893,2895,2897,2899,2902,2904,2907,2910,2912],{"class":90,"line":91},[88,2889,2098],{"class":1451},[88,2891,2892],{"class":1661}," isNumber",[88,2894,1665],{"class":112},[88,2896,2814],{"class":1809},[88,2898,1867],{"class":112},[88,2900,2901],{"class":94}," unknown",[88,2903,2822],{"class":112},[88,2905,2906],{"class":1809}," value",[88,2908,2909],{"class":112}," is",[88,2911,2077],{"class":94},[88,2913,2060],{"class":112},[88,2915,2916,2918,2921,2923,2925,2927,2930],{"class":90,"line":635},[88,2917,2159],{"class":1580},[88,2919,2920],{"class":112}," typeof",[88,2922,2906],{"class":1586},[88,2924,2552],{"class":112},[88,2926,1596],{"class":112},[88,2928,2929],{"class":98},"number",[88,2931,1601],{"class":112},[88,2933,2934],{"class":90,"line":693},[88,2935,702],{"class":112},[88,2937,2938],{"class":90,"line":699},[88,2939,708],{"emptyLinePlaceholder":648},[88,2941,2942,2944,2946,2948,2950,2952],{"class":90,"line":705},[88,2943,1647],{"class":1451},[88,2945,2906],{"class":1586},[88,2947,1867],{"class":112},[88,2949,2901],{"class":94},[88,2951,2057],{"class":112},[88,2953,2954],{"class":105}," 10\n",[88,2956,2957],{"class":90,"line":711},[88,2958,708],{"emptyLinePlaceholder":648},[88,2960,2961,2963,2965,2968,2971],{"class":90,"line":717},[88,2962,1685],{"class":1580},[88,2964,1688],{"class":1586},[88,2966,2967],{"class":1661},"isNumber",[88,2969,2970],{"class":1586},"(value)) ",[88,2972,1697],{"class":112},[88,2974,2975,2977,2979,2981,2983,2985,2987,2990,2992,2995],{"class":90,"line":722},[88,2976,2405],{"class":1586},[88,2978,1658],{"class":112},[88,2980,2410],{"class":1661},[88,2982,1665],{"class":1447},[88,2984,2814],{"class":1586},[88,2986,1658],{"class":112},[88,2988,2989],{"class":1661},"toFixed",[88,2991,1665],{"class":1447},[88,2993,2994],{"class":105},"2",[88,2996,2997],{"class":1447},"))\n",[88,2999,3000],{"class":90,"line":728},[88,3001,702],{"class":112},[11,3003,3004],{},"APIレスポンスなど外部から受け取った値は、型アサーションで決めつけるのではなく、実行時に検証してから利用すると安全です。",[44,3006,575],{"id":575},[11,3008,3009],{},"Todoアプリの実装を通して、HTML属性の使い方からReactのstate更新、TypeScriptの型操作まで、幅広い内容を学べました。",[11,3011,3012],{},"個々の構文を覚えるだけでなく、「なぜその書き方が必要なのか」を実際のアプリ開発と結び付けて理解することが大切だと感じました。",[631,3014,3015],{},"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":58,"searchDepth":635,"depth":635,"links":3017},[3018,3021,3025,3032,3044],{"id":1417,"depth":635,"text":1406,"children":3019},[3020],{"id":1420,"depth":693,"text":1420},{"id":678,"depth":635,"text":1381,"children":3022},[3023,3024],{"id":1482,"depth":693,"text":1482},{"id":1533,"depth":693,"text":1534},{"id":1553,"depth":635,"text":1411,"children":3026},[3027,3028,3029,3030,3031],{"id":1556,"depth":693,"text":1559},{"id":1791,"depth":693,"text":1791},{"id":1993,"depth":693,"text":1993},{"id":2030,"depth":693,"text":2030},{"id":2196,"depth":693,"text":2196},{"id":2205,"depth":635,"text":1414,"children":3033},[3034,3036,3037,3038,3039,3040,3041,3042,3043],{"id":2208,"depth":693,"text":3035},"document.getElementByIdとnull",{"id":2302,"depth":693,"text":2302},{"id":2361,"depth":693,"text":2361},{"id":2440,"depth":693,"text":2440},{"id":2572,"depth":693,"text":2572},{"id":2647,"depth":693,"text":2647},{"id":2747,"depth":693,"text":2747},{"id":2785,"depth":693,"text":2785},{"id":2877,"depth":693,"text":2877},{"id":575,"depth":635,"text":575},"React HooksとTypeScriptでTodoアプリを作るハンズオンを通して学んだ、HTML、JavaScript、React、TypeScriptのポイントを整理します。",{},"\u002Farticles\u002F2024\u002Forganize-learned-from-todo","2024-12-23",{"title":1386,"description":3045},"articles\u002F2024\u002Forganize-learned-from-todo",[1411,1414],"\u002Fimages\u002Farticles\u002Forganize-learned-from-todo.png","ic1Do2Gie9Gb4WmAmZ2IL55ETNgmySMOwEHT_s3q0bk",{"id":3055,"title":3056,"body":3057,"description":3533,"extension":646,"meta":3534,"navigation":648,"path":3535,"publishDate":3536,"published":648,"seo":3537,"stem":3538,"tags":3539,"thumbnail":3541,"updated":3536,"__hash__":3542},"articles\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb.md","Web StorageとIndexedDBについて整理する",{"type":8,"value":3058,"toc":3523},[3059,3061,3064,3074,3077,3080,3083,3086,3169,3172,3177,3180,3208,3219,3270,3273,3276,3284,3303,3306,3309,3312,3315,3318,3420,3423,3437,3440,3443,3446,3470,3476,3479,3482,3489,3492,3495,3510,3513,3515,3518,3521],[11,3060,13],{},[11,3062,3063],{},"Todoアプリを作った際にIndexedDBを利用したのですが、ブラウザにデータを保存する方法としてはWeb Storageもあります。",[11,3065,3066,3067,1930,3070,3073],{},"今回は、",[60,3068,3069],{},"localStorage",[60,3071,3072],{},"sessionStorage","、IndexedDBの特徴と使い分けを整理します。",[44,3075,3076],{"id":3076},"ブラウザにデータを保存する仕組み",[11,3078,3079],{},"Web StorageとIndexedDBは、どちらもブラウザ側にデータを保存するためのWeb APIです。",[11,3081,3082],{},"保存したデータが自動的にサーバーへ送信されることはなく、同一オリジンの制約を受けます。ただし、保存容量やデータが削除される条件はブラウザや利用状況によって異なるため、永続性を前提にしすぎないことが大切です。",[11,3084,3085],{},"主な違いは次のとおりです。",[280,3087,3088,3101],{},[283,3089,3090],{},[286,3091,3092,3094,3096,3098],{},[289,3093,291],{},[289,3095,3069],{},[289,3097,3072],{},[289,3099,3100],{},"IndexedDB",[297,3102,3103,3116,3129,3142,3155],{},[286,3104,3105,3108,3111,3113],{},[302,3106,3107],{},"保存形式",[302,3109,3110],{},"文字列のキーバリュー",[302,3112,3110],{},[302,3114,3115],{},"オブジェクトやBlobなど",[286,3117,3118,3121,3124,3126],{},[302,3119,3120],{},"API",[302,3122,3123],{},"同期",[302,3125,3123],{},[302,3127,3128],{},"非同期",[286,3130,3131,3134,3137,3140],{},[302,3132,3133],{},"データの範囲",[302,3135,3136],{},"同一オリジン",[302,3138,3139],{},"同一オリジンかつタブ単位",[302,3141,3136],{},[286,3143,3144,3147,3150,3153],{},[302,3145,3146],{},"データの寿命",[302,3148,3149],{},"明示的に削除されるまで",[302,3151,3152],{},"タブを閉じるまで",[302,3154,3149],{},[286,3156,3157,3160,3163,3166],{},[302,3158,3159],{},"得意な用途",[302,3161,3162],{},"小さな設定値",[302,3164,3165],{},"一時的な入力状態",[302,3167,3168],{},"大量・構造化データ",[44,3170,3069],{"id":3171},"localstorage",[11,3173,3174,3176],{},[60,3175,3069],{},"は、文字列をキーバリュー形式で保存する同期APIです。",[11,3178,3179],{},"ブラウザやタブを閉じてもデータが残るため、テーマや表示設定など、小さく単純なデータの保存に向いています。",[52,3181,3183],{"className":676,"code":3182,"language":678,"meta":58,"style":58},"localStorage.setItem('theme', 'dark')\n\nconst theme = localStorage.getItem('theme')\n\nlocalStorage.removeItem('theme')\n",[60,3184,3185,3190,3194,3199,3203],{"__ignoreMap":58},[88,3186,3187],{"class":90,"line":91},[88,3188,3189],{},"localStorage.setItem('theme', 'dark')\n",[88,3191,3192],{"class":90,"line":635},[88,3193,708],{"emptyLinePlaceholder":648},[88,3195,3196],{"class":90,"line":693},[88,3197,3198],{},"const theme = localStorage.getItem('theme')\n",[88,3200,3201],{"class":90,"line":699},[88,3202,708],{"emptyLinePlaceholder":648},[88,3204,3205],{"class":90,"line":705},[88,3206,3207],{},"localStorage.removeItem('theme')\n",[11,3209,3210,3211,3214,3215,3218],{},"値は文字列として保存されます。オブジェクトを扱う場合は、保存時に",[60,3212,3213],{},"JSON.stringify()","、取得時に",[60,3216,3217],{},"JSON.parse()","が必要です。",[52,3220,3222],{"className":676,"code":3221,"language":678,"meta":58,"style":58},"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",[60,3223,3224,3229,3234,3239,3243,3247,3252,3256,3261,3266],{"__ignoreMap":58},[88,3225,3226],{"class":90,"line":91},[88,3227,3228],{},"const settings = {\n",[88,3230,3231],{"class":90,"line":635},[88,3232,3233],{},"  theme: 'dark',\n",[88,3235,3236],{"class":90,"line":693},[88,3237,3238],{},"  fontSize: 16,\n",[88,3240,3241],{"class":90,"line":699},[88,3242,702],{},[88,3244,3245],{"class":90,"line":705},[88,3246,708],{"emptyLinePlaceholder":648},[88,3248,3249],{"class":90,"line":711},[88,3250,3251],{},"localStorage.setItem('settings', JSON.stringify(settings))\n",[88,3253,3254],{"class":90,"line":717},[88,3255,708],{"emptyLinePlaceholder":648},[88,3257,3258],{"class":90,"line":722},[88,3259,3260],{},"const storedSettings = JSON.parse(\n",[88,3262,3263],{"class":90,"line":728},[88,3264,3265],{},"  localStorage.getItem('settings') ?? '{}',\n",[88,3267,3268],{"class":90,"line":787},[88,3269,1676],{},[11,3271,3272],{},"同期APIのため、大きなデータを頻繁に読み書きするとメインスレッドを塞ぐ可能性があります。",[44,3274,3072],{"id":3275},"sessionstorage",[11,3277,3278,3280,3281,3283],{},[60,3279,3072],{},"も、文字列をキーバリュー形式で保存する同期APIです。基本的な操作方法は",[60,3282,3069],{},"と同じです。",[52,3285,3287],{"className":676,"code":3286,"language":678,"meta":58,"style":58},"sessionStorage.setItem('draft', '入力途中の内容')\n\nconst draft = sessionStorage.getItem('draft')\n",[60,3288,3289,3294,3298],{"__ignoreMap":58},[88,3290,3291],{"class":90,"line":91},[88,3292,3293],{},"sessionStorage.setItem('draft', '入力途中の内容')\n",[88,3295,3296],{"class":90,"line":635},[88,3297,708],{"emptyLinePlaceholder":648},[88,3299,3300],{"class":90,"line":693},[88,3301,3302],{},"const draft = sessionStorage.getItem('draft')\n",[11,3304,3305],{},"ページを再読み込みしてもデータは残りますが、保存領域はタブごとのページセッションに分かれ、タブを閉じるとデータも削除されます。",[11,3307,3308],{},"そのため、フォームの入力途中の状態や、画面遷移中だけ保持したい一時的な情報に向いています。",[44,3310,3100],{"id":3311},"indexeddb",[11,3313,3314],{},"IndexedDBは、大量の構造化データをブラウザへ保存するための非同期APIです。",[11,3316,3317],{},"JavaScriptのオブジェクトだけでなく、ファイルやBlobなども保存できます。また、オブジェクトストア、インデックス、トランザクションを利用できるため、検索や更新を伴うデータ管理に向いています。",[52,3319,3321],{"className":676,"code":3320,"language":678,"meta":58,"style":58},"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",[60,3322,3323,3328,3332,3337,3342,3346,3351,3356,3361,3366,3371,3375,3379,3383,3388,3392,3398,3404,3409,3415],{"__ignoreMap":58},[88,3324,3325],{"class":90,"line":91},[88,3326,3327],{},"const request = indexedDB.open('todo-app', 1)\n",[88,3329,3330],{"class":90,"line":635},[88,3331,708],{"emptyLinePlaceholder":648},[88,3333,3334],{"class":90,"line":693},[88,3335,3336],{},"request.onupgradeneeded = () => {\n",[88,3338,3339],{"class":90,"line":699},[88,3340,3341],{},"  const database = request.result\n",[88,3343,3344],{"class":90,"line":705},[88,3345,708],{"emptyLinePlaceholder":648},[88,3347,3348],{"class":90,"line":711},[88,3349,3350],{},"  if (!database.objectStoreNames.contains('todos')) {\n",[88,3352,3353],{"class":90,"line":717},[88,3354,3355],{},"    database.createObjectStore('todos', {\n",[88,3357,3358],{"class":90,"line":722},[88,3359,3360],{},"      keyPath: 'id',\n",[88,3362,3363],{"class":90,"line":728},[88,3364,3365],{},"      autoIncrement: true,\n",[88,3367,3368],{"class":90,"line":787},[88,3369,3370],{},"    })\n",[88,3372,3373],{"class":90,"line":793},[88,3374,2150],{},[88,3376,3377],{"class":90,"line":799},[88,3378,702],{},[88,3380,3381],{"class":90,"line":804},[88,3382,708],{"emptyLinePlaceholder":648},[88,3384,3385],{"class":90,"line":809},[88,3386,3387],{},"request.onsuccess = () => {\n",[88,3389,3390],{"class":90,"line":1775},[88,3391,3341],{},[88,3393,3395],{"class":90,"line":3394},16,[88,3396,3397],{},"  const transaction = database.transaction('todos', 'readwrite')\n",[88,3399,3401],{"class":90,"line":3400},17,[88,3402,3403],{},"  const todos = transaction.objectStore('todos')\n",[88,3405,3407],{"class":90,"line":3406},18,[88,3408,708],{"emptyLinePlaceholder":648},[88,3410,3412],{"class":90,"line":3411},19,[88,3413,3414],{},"  todos.add({ title: '記事を書く', completed: false })\n",[88,3416,3418],{"class":90,"line":3417},20,[88,3419,702],{},[11,3421,3422],{},"Web Storageよりも扱う概念は多いものの、次のような用途で力を発揮します。",[1323,3424,3425,3428,3431,3434],{},[583,3426,3427],{},"オフラインでも利用するアプリ",[583,3429,3430],{},"Todoやメモなど、件数が増えるデータ",[583,3432,3433],{},"検索や並び替えにインデックスを使いたいデータ",[583,3435,3436],{},"画像やファイルを含むデータ",[44,3438,3439],{"id":3439},"保存容量とデータの削除",[11,3441,3442],{},"ブラウザストレージの容量は、特定の数値をどの環境でも保証できるものではありません。ブラウザ、端末の空き容量、ユーザー設定などによって変わります。",[11,3444,3445],{},"利用状況はStorage APIから概算できます。",[52,3447,3449],{"className":676,"code":3448,"language":678,"meta":58,"style":58},"const estimate = await navigator.storage.estimate()\n\nconsole.log(estimate.usage)\nconsole.log(estimate.quota)\n",[60,3450,3451,3456,3460,3465],{"__ignoreMap":58},[88,3452,3453],{"class":90,"line":91},[88,3454,3455],{},"const estimate = await navigator.storage.estimate()\n",[88,3457,3458],{"class":90,"line":635},[88,3459,708],{"emptyLinePlaceholder":648},[88,3461,3462],{"class":90,"line":693},[88,3463,3464],{},"console.log(estimate.usage)\n",[88,3466,3467],{"class":90,"line":699},[88,3468,3469],{},"console.log(estimate.quota)\n",[36,3471,3473],{"title":3472,"type":39},"ブラウザストレージを唯一の保存先にしない",[11,3474,3475],{},"保存したデータは、ユーザーによるサイトデータの削除や、ブラウザのストレージ管理によって失われる場合があります。失われると困るデータはサーバーにも保存しましょう。",[44,3477,3478],{"id":3478},"セキュリティ上の注意",[11,3480,3481],{},"Web StorageとIndexedDBは、認証された同一オリジンのJavaScriptからアクセスできます。",[36,3483,3486],{"title":3484,"type":3485},"機密情報の保存に注意する","warning",[11,3487,3488],{},"クロスサイトスクリプティング（XSS）が発生すると、保存内容を読み取られる可能性があります。アクセストークンや個人情報などの機密情報を、安易に保存しないようにしましょう。",[44,3490,3491],{"id":3491},"どれを選ぶか",[11,3493,3494],{},"選び方を簡単にまとめると、次のようになります。",[1323,3496,3497,3502,3507],{},[583,3498,3499,3500],{},"小さな設定をブラウザを閉じた後も残したい場合は",[60,3501,3069],{},[583,3503,3504,3505],{},"タブを開いている間だけ一時的に残したい場合は",[60,3506,3072],{},[583,3508,3509],{},"大量のデータや構造化データを非同期で扱いたい場合はIndexedDB",[11,3511,3512],{},"Web Storageは手軽ですが、同期APIであり文字列しか保存できません。データ量が増えるアプリや、検索・更新を伴うデータにはIndexedDBを検討するとよいでしょう。",[44,3514,575],{"id":575},[11,3516,3517],{},"Web StorageとIndexedDBは、どちらもブラウザ側へデータを保存できますが、得意な用途が異なります。",[11,3519,3520],{},"保存するデータの量や形式だけでなく、同期処理による影響、データを保持する期間、失われた場合の影響まで考えて選ぶことが大切です。",[631,3522,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":3524},[3525,3526,3527,3528,3529,3530,3531,3532],{"id":3076,"depth":635,"text":3076},{"id":3171,"depth":635,"text":3069},{"id":3275,"depth":635,"text":3072},{"id":3311,"depth":635,"text":3100},{"id":3439,"depth":635,"text":3439},{"id":3478,"depth":635,"text":3478},{"id":3491,"depth":635,"text":3491},{"id":575,"depth":635,"text":575},"localStorage、sessionStorage、IndexedDBの違いを、保存形式、同期・非同期、データの寿命、用途から整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb","2024-12-22",{"title":3056,"description":3533},"articles\u002F2024\u002Fdescribe-webstorage-indexeddb",[3540,3100],"Web Storage","\u002Fimages\u002Farticles\u002Fdescribe-webstorage-indexeddb.png","3W_8UP01CjjLWIG3qOQhJB7e1YiLPuYONYyx_372v98",{"id":3544,"title":3545,"body":3546,"description":4022,"extension":646,"meta":4023,"navigation":648,"path":4024,"publishDate":4025,"published":648,"seo":4026,"stem":4027,"tags":4028,"thumbnail":4029,"updated":4025,"__hash__":4030},"articles\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime.md","JavaScriptのランタイム構成からイベントループを学ぶ",{"type":8,"value":3547,"toc":4012},[3548,3550,3559,3562,3566,3569,3572,3575,3592,3594,3597,3600,3664,3667,3700,3703,3706,3709,3712,3726,3729,3772,3775,3777,3780,3783,3797,3802,3805,3807,3810,3835,3838,3841,3843,3846,3849,3866,3869,3872,3947,3950,3956,3967,3976,3978,3998,4001,4010],[11,3549,13],{},[11,3551,3552,3553,3558],{},"今回は、JavaScriptのイベントループについて、動画「",[1395,3554,3557],{"href":3555,"rel":3556},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=eiC58R16hb8",[1399],"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue","」で学んだ内容を整理します。",[11,3560,3561],{},"ブラウザでJavaScriptがどのように同期処理と非同期処理を扱っているのか、ランタイムを構成する要素から確認していきます。",[44,3563,3565],{"id":3564},"javascriptエンジンとホスト環境","JavaScriptエンジンとホスト環境",[11,3567,3568],{},"ブラウザでJavaScriptを実行するためには、JavaScriptエンジンとブラウザというホスト環境が連携します。",[11,3570,3571],{},"JavaScriptエンジンはコードを解析・実行し、ブラウザはタイマー、ネットワーク通信、DOMイベントなどの環境固有の機能を提供します。",[11,3573,3574],{},"イベントループを理解するうえでは、次の要素を押さえておくと全体像が見えやすくなります。",[1323,3576,3577,3580,3583,3586,3589],{},[583,3578,3579],{},"コールスタック",[583,3581,3582],{},"Web APIs",[583,3584,3585],{},"タスクキュー",[583,3587,3588],{},"マイクロタスクキュー",[583,3590,3591],{},"イベントループ",[44,3593,3579],{"id":3579},[11,3595,3596],{},"コールスタックは、実行中の関数や実行コンテキストを管理するスタックです。",[11,3598,3599],{},"後から追加されたものが先に取り出される、後入れ先出し（LIFO）の構造になっています。",[52,3601,3603],{"className":676,"code":3602,"language":678,"meta":58,"style":58},"function a() {\n  console.log('a')\n}\n\nfunction b() {\n  a()\n}\n\nfunction c() {\n  b()\n}\n\nc()\n",[60,3604,3605,3610,3615,3619,3623,3628,3633,3637,3641,3646,3651,3655,3659],{"__ignoreMap":58},[88,3606,3607],{"class":90,"line":91},[88,3608,3609],{},"function a() {\n",[88,3611,3612],{"class":90,"line":635},[88,3613,3614],{},"  console.log('a')\n",[88,3616,3617],{"class":90,"line":693},[88,3618,702],{},[88,3620,3621],{"class":90,"line":699},[88,3622,708],{"emptyLinePlaceholder":648},[88,3624,3625],{"class":90,"line":705},[88,3626,3627],{},"function b() {\n",[88,3629,3630],{"class":90,"line":711},[88,3631,3632],{},"  a()\n",[88,3634,3635],{"class":90,"line":717},[88,3636,702],{},[88,3638,3639],{"class":90,"line":722},[88,3640,708],{"emptyLinePlaceholder":648},[88,3642,3643],{"class":90,"line":728},[88,3644,3645],{},"function c() {\n",[88,3647,3648],{"class":90,"line":787},[88,3649,3650],{},"  b()\n",[88,3652,3653],{"class":90,"line":793},[88,3654,702],{},[88,3656,3657],{"class":90,"line":799},[88,3658,708],{"emptyLinePlaceholder":648},[88,3660,3661],{"class":90,"line":804},[88,3662,3663],{},"c()\n",[11,3665,3666],{},"このコードは、次の流れで実行されます。",[580,3668,3669,3675,3684,3691],{},[583,3670,3671,3674],{},[60,3672,3673],{},"c()"," がスタックへ追加される",[583,3676,3677,3679,3680,3683],{},[60,3678,3673],{}," から呼ばれた ",[60,3681,3682],{},"b()"," が追加される",[583,3685,3686,3679,3688,3683],{},[60,3687,3682],{},[60,3689,3690],{},"a()",[583,3692,3693,1930,3695,1930,3697,3699],{},[60,3694,3690],{},[60,3696,3682],{},[60,3698,3673],{}," の順に処理を終えてスタックから取り除かれる",[11,3701,3702],{},"1つの長い同期処理がコールスタックを占有すると、その処理が終わるまでクリックや描画など、同じスレッド上のほかの処理を進められません。",[44,3704,3582],{"id":3705},"web-apis",[11,3707,3708],{},"Web APIsは、ブラウザというホスト環境が提供する機能です。",[11,3710,3711],{},"代表的なものには、次があります。",[1323,3713,3714,3717,3720,3723],{},[583,3715,3716],{},"Fetch API",[583,3718,3719],{},"タイマー",[583,3721,3722],{},"Geolocation API",[583,3724,3725],{},"DOMイベント",[11,3727,3728],{},"JavaScriptからこれらの非同期APIを呼び出すと、ブラウザ側でタイマーの計測やネットワーク通信などが進みます。JavaScriptはその完了を待ってコールスタックを占有し続ける必要がないため、別のコードを実行できます。",[52,3730,3732],{"className":676,"code":3731,"language":678,"meta":58,"style":58},"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",[60,3733,3734,3739,3744,3749,3753,3757,3762,3767],{"__ignoreMap":58},[88,3735,3736],{"class":90,"line":91},[88,3737,3738],{},"navigator.geolocation.getCurrentPosition(\n",[88,3740,3741],{"class":90,"line":635},[88,3742,3743],{},"  position => console.log(position),\n",[88,3745,3746],{"class":90,"line":693},[88,3747,3748],{},"  error => console.error(error),\n",[88,3750,3751],{"class":90,"line":699},[88,3752,1676],{},[88,3754,3755],{"class":90,"line":705},[88,3756,708],{"emptyLinePlaceholder":648},[88,3758,3759],{"class":90,"line":711},[88,3760,3761],{},"fetch('https:\u002F\u002Fexample.com\u002Fapi\u002Fdata')\n",[88,3763,3764],{"class":90,"line":717},[88,3765,3766],{},"  .then(response => response.json())\n",[88,3768,3769],{"class":90,"line":722},[88,3770,3771],{},"  .then(data => console.log(data))\n",[11,3773,3774],{},"APIの処理が完了しても、コールバックがその場ですぐに実行されるとは限りません。実行可能になった処理は、タスクやマイクロタスクとしてキューへ登録されます。",[44,3776,3585],{"id":3585},[11,3778,3779],{},"タスクキューには、タイマーやイベントなどをきっかけに実行可能になったタスクが並びます。",[11,3781,3782],{},"代表的な例は次のとおりです。",[1323,3784,3785,3791,3794],{},[583,3786,3787,3790],{},[60,3788,3789],{},"setTimeout()"," のコールバック",[583,3792,3793],{},"ユーザー操作のイベントハンドラー",[583,3795,3796],{},"メッセージイベント",[11,3798,3799,3801],{},[60,3800,3789],{}," に指定する時間は、コールバックが必ずその時間後に実行されるという意味ではありません。指定時間を経過したあとにタスクとして実行可能になるまでの最低待機時間です。",[11,3803,3804],{},"コールスタックや先に処理されるタスクが残っていれば、実際の実行はさらに遅くなります。",[44,3806,3588],{"id":3588},[11,3808,3809],{},"マイクロタスクキューには、主に次の処理が登録されます。",[1323,3811,3812,3824,3830],{},[583,3813,3814,3815,1930,3818,1930,3821],{},"Promiseの ",[60,3816,3817],{},"then()",[60,3819,3820],{},"catch()",[60,3822,3823],{},"finally()",[583,3825,3826,3829],{},[60,3827,3828],{},"queueMicrotask()"," に渡したコールバック",[583,3831,3832,3790],{},[60,3833,3834],{},"MutationObserver",[11,3836,3837],{},"現在のタスクと同期処理が終わってコールスタックが空になると、次のタスクへ進む前にマイクロタスクキューが空になるまで処理されます。",[11,3839,3840],{},"マイクロタスクの実行中に新しいマイクロタスクが追加された場合も、同じタイミングで続けて処理されます。そのため、マイクロタスクを追加し続ける処理は、次のタスクや画面描画を遅らせる可能性があります。",[44,3842,3591],{"id":3591},[11,3844,3845],{},"イベントループは、コールスタックと各キューの状態を見ながら、実行する処理を選び続けます。",[11,3847,3848],{},"ブラウザ上の流れを単純化すると、次のようになります。",[580,3850,3851,3854,3857,3860,3863],{},[583,3852,3853],{},"1つのタスクを実行する",[583,3855,3856],{},"コールスタック上の同期処理を最後まで実行する",[583,3858,3859],{},"マイクロタスクキューを空になるまで処理する",[583,3861,3862],{},"必要に応じて画面を描画する",[583,3864,3865],{},"次のタスクへ進む",[44,3867,3868],{"id":3868},"コードで実行順を確認する",[11,3870,3871],{},"タスクとマイクロタスクの実行順を、コードで確認してみましょう。",[52,3873,3875],{"className":676,"code":3874,"language":678,"meta":58,"style":58},"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",[60,3876,3877,3882,3886,3891,3896,3901,3905,3910,3915,3920,3924,3929,3934,3938,3942],{"__ignoreMap":58},[88,3878,3879],{"class":90,"line":91},[88,3880,3881],{},"console.log('start')\n",[88,3883,3884],{"class":90,"line":635},[88,3885,708],{"emptyLinePlaceholder":648},[88,3887,3888],{"class":90,"line":693},[88,3889,3890],{},"setTimeout(() => {\n",[88,3892,3893],{"class":90,"line":699},[88,3894,3895],{},"  console.log('timeout')\n",[88,3897,3898],{"class":90,"line":705},[88,3899,3900],{},"}, 0)\n",[88,3902,3903],{"class":90,"line":711},[88,3904,708],{"emptyLinePlaceholder":648},[88,3906,3907],{"class":90,"line":717},[88,3908,3909],{},"Promise.resolve().then(() => {\n",[88,3911,3912],{"class":90,"line":722},[88,3913,3914],{},"  console.log('promise')\n",[88,3916,3917],{"class":90,"line":728},[88,3918,3919],{},"})\n",[88,3921,3922],{"class":90,"line":787},[88,3923,708],{"emptyLinePlaceholder":648},[88,3925,3926],{"class":90,"line":793},[88,3927,3928],{},"queueMicrotask(() => {\n",[88,3930,3931],{"class":90,"line":799},[88,3932,3933],{},"  console.log('microtask')\n",[88,3935,3936],{"class":90,"line":804},[88,3937,3919],{},[88,3939,3940],{"class":90,"line":809},[88,3941,708],{"emptyLinePlaceholder":648},[88,3943,3944],{"class":90,"line":1775},[88,3945,3946],{},"console.log('end')\n",[11,3948,3949],{},"出力順は次のようになります。",[52,3951,3954],{"className":3952,"code":3953,"language":57,"meta":58},[55],"start\nend\npromise\nmicrotask\ntimeout\n",[60,3955,3953],{"__ignoreMap":58},[11,3957,3958,3959,3962,3963,3966],{},"まず同期処理の ",[60,3960,3961],{},"start"," と ",[60,3964,3965],{},"end"," が出力されます。",[11,3968,3969,3970,3972,3973,3975],{},"続いて、登録された順にPromiseのコールバックと ",[60,3971,3828],{}," のコールバックがマイクロタスクとして実行されます。マイクロタスクキューが空になったあと、",[60,3974,3789],{}," のコールバックが次のタスクとして実行されます。",[44,3977,575],{"id":575},[1323,3979,3980,3983,3986,3989,3992,3995],{},[583,3981,3982],{},"コールスタックは、実行中の関数をLIFOで管理する",[583,3984,3985],{},"ブラウザは、タイマーやネットワーク通信などのWeb APIsを提供する",[583,3987,3988],{},"タイマーやイベントのコールバックなどは、タスクとしてキューへ登録される",[583,3990,3991],{},"Promiseのコールバックなどは、マイクロタスクとして登録される",[583,3993,3994],{},"現在のタスクが完了すると、次のタスクより先にマイクロタスクが処理される",[583,3996,3997],{},"長い同期処理や増え続けるマイクロタスクは、画面の応答を遅らせる可能性がある",[11,3999,4000],{},"非同期処理の実行順で迷ったときは、「現在の同期処理」「マイクロタスク」「次のタスク」の順に分けて考えると整理しやすくなります。",[11,4002,4003,4004,4009],{},"より詳しい実行モデルは、",[1395,4005,4008],{"href":4006,"rel":4007},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FExecution_model",[1399],"MDNのJavaScript実行モデル","も参考になります。",[631,4011,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":4013},[4014,4015,4016,4017,4018,4019,4020,4021],{"id":3564,"depth":635,"text":3565},{"id":3579,"depth":635,"text":3579},{"id":3705,"depth":635,"text":3582},{"id":3585,"depth":635,"text":3585},{"id":3588,"depth":635,"text":3588},{"id":3591,"depth":635,"text":3591},{"id":3868,"depth":635,"text":3868},{"id":575,"depth":635,"text":575},"ブラウザのJavaScriptランタイムを構成するコールスタック、Web APIs、タスクキュー、マイクロタスクキューとイベントループの関係を整理します。",{},"\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime","2024-11-25",{"title":3545,"description":4022},"articles\u002F2024\u002Flearn-javascript-eventloop-from-runtime",[1381],"\u002Fimages\u002Farticles\u002Flearn-javascript-eventloop-from-runtime.png","BcnDDE_gLqK4tjYoVA9O89QF7-dNwS-6lyORZ07cH5g",{"id":4032,"title":4033,"body":4034,"description":4450,"extension":646,"meta":4451,"navigation":648,"path":4452,"publishDate":4453,"published":648,"seo":4454,"stem":4455,"tags":4456,"thumbnail":4457,"updated":4453,"__hash__":4458},"articles\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects.md","JavaScriptのビルトインオブジェクトのメソッドをどう使うか",{"type":8,"value":4035,"toc":4442},[4036,4038,4041,4044,4048,4051,4063,4072,4076,4086,4113,4130,4138,4141,4148,4188,4199,4207,4220,4244,4248,4255,4293,4299,4304,4325,4328,4337,4375,4385,4403,4405,4437,4440],[11,4037,13],{},[11,4039,4040],{},"今回は、プロジェクトで「なるほど」と思った、JavaScriptのビルトインオブジェクトのメソッドの使い方を紹介します。",[11,4042,4043],{},"具体的には、オブジェクトが自身のプロパティを持っているか、安全に確認する方法です。仕組みを知っておくと、オブジェクトに同名のメソッドが定義されている場合も意図した判定ができます。",[44,4045,4047],{"id":4046},"ビルトインオブジェクトってなに","「ビルトインオブジェクト」ってなに？",[11,4049,4050],{},"ビルトインオブジェクトは「組み込みオブジェクト」とも呼ばれ、JavaScriptの実行環境にあらかじめ用意されているオブジェクトです。",[11,4052,4053,1930,4056,1930,4059,4062],{},[60,4054,4055],{},"Object",[60,4057,4058],{},"Array",[60,4060,4061],{},"String"," など、さまざまな種類があります。",[11,4064,4065,4066,4071],{},"詳しくは、",[1395,4067,4070],{"href":4068,"rel":4069},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects",[1399],"MDNの標準組み込みオブジェクト","を参照してください。",[44,4073,4075],{"id":4074},"hasownpropertyをインスタンスから呼び出す","hasOwnPropertyをインスタンスから呼び出す",[11,4077,4078,4079,4081,4082,4085],{},"まずは、オブジェクト自身が ",[60,4080,922],{}," プロパティを持っているか、",[60,4083,4084],{},"hasOwnProperty()"," で確認してみます。",[52,4087,4089],{"className":676,"code":4088,"language":678,"meta":58,"style":58},"const obj = {\n  name: 'Yuri',\n}\n\nobj.hasOwnProperty('name') \u002F\u002F true\n",[60,4090,4091,4096,4100,4104,4108],{"__ignoreMap":58},[88,4092,4093],{"class":90,"line":91},[88,4094,4095],{},"const obj = {\n",[88,4097,4098],{"class":90,"line":635},[88,4099,894],{},[88,4101,4102],{"class":90,"line":693},[88,4103,702],{},[88,4105,4106],{"class":90,"line":699},[88,4107,708],{"emptyLinePlaceholder":648},[88,4109,4110],{"class":90,"line":705},[88,4111,4112],{},"obj.hasOwnProperty('name') \u002F\u002F true\n",[11,4114,4115,4116,4119,4120,4123,4124,4126,4127,4129],{},"オブジェクトリテラルで作成した ",[60,4117,4118],{},"obj"," は、通常 ",[60,4121,4122],{},"Object.prototype"," を継承しています。そのため、",[60,4125,4122],{}," に定義されている ",[60,4128,4084],{}," を呼び出せます。",[11,4131,4132,4133,4009],{},"プロトタイプ継承については、",[1395,4134,4137],{"href":4135,"rel":4136},"https:\u002F\u002Fja.javascript.info\u002Fprototype-inheritance",[1399],"JavaScript.infoのプロトタイプ継承",[44,4139,4140],{"id":4140},"インスタンスから呼び出す場合の問題",[11,4142,4143,4144,4147],{},"では、オブジェクト自身が ",[60,4145,4146],{},"hasOwnProperty"," という同名のメソッドを持っていたらどうなるでしょうか。",[52,4149,4151],{"className":676,"code":4150,"language":678,"meta":58,"style":58},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nobj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[60,4152,4153,4157,4161,4166,4171,4175,4179,4183],{"__ignoreMap":58},[88,4154,4155],{"class":90,"line":91},[88,4156,4095],{},[88,4158,4159],{"class":90,"line":635},[88,4160,894],{},[88,4162,4163],{"class":90,"line":693},[88,4164,4165],{},"  hasOwnProperty() {\n",[88,4167,4168],{"class":90,"line":699},[88,4169,4170],{},"    console.log('Hello')\n",[88,4172,4173],{"class":90,"line":705},[88,4174,766],{},[88,4176,4177],{"class":90,"line":711},[88,4178,702],{},[88,4180,4181],{"class":90,"line":717},[88,4182,708],{"emptyLinePlaceholder":648},[88,4184,4185],{"class":90,"line":722},[88,4186,4187],{},"obj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[11,4189,4190,4191,4194,4195,4198],{},"先ほどは ",[60,4192,4193],{},"true"," を返していた呼び出しが、今度は ",[60,4196,4197],{},"Hello"," を出力しました。",[11,4200,4201,4203,4204,4206],{},[60,4202,4118],{}," 自身の ",[60,4205,4146],{}," が、プロトタイプから継承した同名メソッドよりも優先されたためです。外部から受け取ったオブジェクトなど、自分で構造を完全に管理できない値では、インスタンスから直接呼び出す方法は意図しない結果につながる可能性があります。",[11,4208,4209,4210,4213,4214,4216,4217,4219],{},"また、",[60,4211,4212],{},"Object.create(null)"," で作ったオブジェクトは ",[60,4215,4122],{}," を継承しないため、そもそも ",[60,4218,4084],{}," を持っていません。",[52,4221,4223],{"className":676,"code":4222,"language":678,"meta":58,"style":58},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nobj.hasOwnProperty('name') \u002F\u002F TypeError\n",[60,4224,4225,4230,4235,4239],{"__ignoreMap":58},[88,4226,4227],{"class":90,"line":91},[88,4228,4229],{},"const obj = Object.create(null)\n",[88,4231,4232],{"class":90,"line":635},[88,4233,4234],{},"obj.name = 'Yuri'\n",[88,4236,4237],{"class":90,"line":693},[88,4238,708],{"emptyLinePlaceholder":648},[88,4240,4241],{"class":90,"line":699},[88,4242,4243],{},"obj.hasOwnProperty('name') \u002F\u002F TypeError\n",[44,4245,4247],{"id":4246},"objecthasownを使う","Object.hasOwnを使う",[11,4249,4250,4251,4254],{},"現在は、オブジェクト自身のプロパティを調べる場合、静的メソッドの ",[60,4252,4253],{},"Object.hasOwn()"," を使うと簡潔です。",[52,4256,4258],{"className":676,"code":4257,"language":678,"meta":58,"style":58},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[60,4259,4260,4264,4268,4272,4276,4280,4284,4288],{"__ignoreMap":58},[88,4261,4262],{"class":90,"line":91},[88,4263,4095],{},[88,4265,4266],{"class":90,"line":635},[88,4267,894],{},[88,4269,4270],{"class":90,"line":693},[88,4271,4165],{},[88,4273,4274],{"class":90,"line":699},[88,4275,4170],{},[88,4277,4278],{"class":90,"line":705},[88,4279,766],{},[88,4281,4282],{"class":90,"line":711},[88,4283,702],{},[88,4285,4286],{"class":90,"line":717},[88,4287,708],{"emptyLinePlaceholder":648},[88,4289,4290],{"class":90,"line":722},[88,4291,4292],{},"Object.hasOwn(obj, 'name') \u002F\u002F true\n",[11,4294,4295,4296,4298],{},"第1引数に調べたいオブジェクト、第2引数にプロパティ名を渡します。対象のオブジェクトに同名の ",[60,4297,4146],{}," が定義されていても影響を受けません。",[11,4300,4301,4303],{},[60,4302,4212],{}," で作ったオブジェクトにも使用できます。",[52,4305,4307],{"className":676,"code":4306,"language":678,"meta":58,"style":58},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[60,4308,4309,4313,4317,4321],{"__ignoreMap":58},[88,4310,4311],{"class":90,"line":91},[88,4312,4229],{},[88,4314,4315],{"class":90,"line":635},[88,4316,4234],{},[88,4318,4319],{"class":90,"line":693},[88,4320,708],{"emptyLinePlaceholder":648},[88,4322,4323],{"class":90,"line":699},[88,4324,4292],{},[44,4326,4327],{"id":4327},"古い実行環境も考慮する場合",[11,4329,4330,4332,4333,4336],{},[60,4331,4253],{}," を利用できない古い実行環境まで考慮する場合は、",[60,4334,4335],{},"Object.prototype.hasOwnProperty.call()"," という書き方もできます。",[52,4338,4340],{"className":676,"code":4339,"language":678,"meta":58,"style":58},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nObject.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[60,4341,4342,4346,4350,4354,4358,4362,4366,4370],{"__ignoreMap":58},[88,4343,4344],{"class":90,"line":91},[88,4345,4095],{},[88,4347,4348],{"class":90,"line":635},[88,4349,894],{},[88,4351,4352],{"class":90,"line":693},[88,4353,4165],{},[88,4355,4356],{"class":90,"line":699},[88,4357,4170],{},[88,4359,4360],{"class":90,"line":705},[88,4361,766],{},[88,4363,4364],{"class":90,"line":711},[88,4365,702],{},[88,4367,4368],{"class":90,"line":717},[88,4369,708],{"emptyLinePlaceholder":648},[88,4371,4372],{"class":90,"line":722},[88,4373,4374],{},"Object.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[11,4376,4377,4380,4381,4384],{},[60,4378,4379],{},"call()"," の第1引数に ",[60,4382,4383],{},"this"," として扱うオブジェクトを指定し、それ以降の引数を元のメソッドへ渡しています。",[11,4386,4387,4388,4390,4391,4393,4394,4396,4397,4399,4400,4402],{},"この例では ",[60,4389,4122],{}," が持つ本来の ",[60,4392,4084],{}," を直接取得し、",[60,4395,4118],{}," を ",[60,4398,4383],{}," として呼び出しています。そのため、",[60,4401,4118],{}," 自身に定義された同名メソッドの影響を受けません。",[44,4404,575],{"id":575},[1323,4406,4407,4413,4416,4423,4430],{},[583,4408,4409,4410,4412],{},"オブジェクトリテラルは通常、",[60,4411,4122],{}," のメソッドを継承する",[583,4414,4415],{},"オブジェクト自身が同名メソッドを持つと、継承したメソッドは隠される",[583,4417,4418,4213,4420,4422],{},[60,4419,4212],{},[60,4421,4084],{}," を継承しない",[583,4424,4425,4426,4429],{},"自身のプロパティを確認する場合は、基本的に ",[60,4427,4428],{},"Object.hasOwn(obj, property)"," を使う",[583,4431,4432,4433,4436],{},"古い実行環境も考慮する場合は、",[60,4434,4435],{},"Object.prototype.hasOwnProperty.call(obj, property)"," を使える",[11,4438,4439],{},"オブジェクトの出所や構造を完全には把握できない場合も、インスタンスの同名メソッドに依存しない呼び出し方を選ぶと安全です。",[631,4441,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":4443},[4444,4445,4446,4447,4448,4449],{"id":4046,"depth":635,"text":4047},{"id":4074,"depth":635,"text":4075},{"id":4140,"depth":635,"text":4140},{"id":4246,"depth":635,"text":4247},{"id":4327,"depth":635,"text":4327},{"id":575,"depth":635,"text":575},"JavaScriptでオブジェクト自身のプロパティを安全に確認する方法を、hasOwnPropertyとObject.hasOwnの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects","2024-11-24",{"title":4033,"description":4450},"articles\u002F2024\u002Fhow-to-use-javascript-built-in-objects",[1381],"\u002Fimages\u002Farticles\u002Fhow-to-use-javascript-built-in-objects.png","nujvvO9Kj5xXhtbuHUxO1l6JeNtgWjuj3S4rljZKkdU",{"id":4460,"title":4461,"body":4462,"description":4842,"extension":646,"meta":4843,"navigation":648,"path":4844,"publishDate":4845,"published":648,"seo":4846,"stem":4847,"tags":4848,"thumbnail":4849,"updated":4845,"__hash__":4850},"articles\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy.md","JavaScriptのディープコピーとは？",{"type":8,"value":4463,"toc":4835},[4464,4466,4469,4472,4476,4479,4482,4491,4494,4501,4552,4566,4581,4584,4608,4611,4620,4624,4631,4677,4682,4697,4700,4724,4739,4746,4755,4759,4762,4771,4774,4799,4805,4807,4830,4833],[11,4465,13],{},[11,4467,4468],{},"今回は、JavaScriptにおけるオブジェクトのディープコピーについて紹介します。",[11,4470,4471],{},"シャローコピーとの違いや実装方法を理解しておくと、コピー先の変更が意図せずコピー元へ影響する問題を避けられます。",[44,4473,4475],{"id":4474},"ディープコピーとは","ディープコピーとは？",[11,4477,4478],{},"ディープコピーとは、コピー元とコピー先が、内部にあるオブジェクトの参照を共有しないコピーのことです。",[11,4480,4481],{},"たとえば、入れ子になったオブジェクトをコピーしたあと、コピー先の内側にある値を変更しても、コピー元の値には影響しません。",[11,4483,4484,4485,4490],{},"詳しい定義は、",[1395,4486,4489],{"href":4487,"rel":4488},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FGlossary\u002FDeep_copy",[1399],"MDNのディープコピー","も参照してください。",[44,4492,4493],{"id":4493},"シャローコピーでは参照が共有される",[11,4495,4496,4497,4500],{},"まずは、",[60,4498,4499],{},"Object.assign()"," を使ったシャローコピーを確認します。",[52,4502,4504],{"className":676,"code":4503,"language":678,"meta":58,"style":58},"const original = {\n  user: {\n    name: 'Yuri',\n  },\n  settings: {\n    theme: 'light',\n  },\n}\n\nconst shallowCopy = Object.assign({}, original)\n",[60,4505,4506,4511,4516,4521,4525,4530,4535,4539,4543,4547],{"__ignoreMap":58},[88,4507,4508],{"class":90,"line":91},[88,4509,4510],{},"const original = {\n",[88,4512,4513],{"class":90,"line":635},[88,4514,4515],{},"  user: {\n",[88,4517,4518],{"class":90,"line":693},[88,4519,4520],{},"    name: 'Yuri',\n",[88,4522,4523],{"class":90,"line":699},[88,4524,766],{},[88,4526,4527],{"class":90,"line":705},[88,4528,4529],{},"  settings: {\n",[88,4531,4532],{"class":90,"line":711},[88,4533,4534],{},"    theme: 'light',\n",[88,4536,4537],{"class":90,"line":717},[88,4538,766],{},[88,4540,4541],{"class":90,"line":722},[88,4542,702],{},[88,4544,4545],{"class":90,"line":728},[88,4546,708],{"emptyLinePlaceholder":648},[88,4548,4549],{"class":90,"line":787},[88,4550,4551],{},"const shallowCopy = Object.assign({}, original)\n",[11,4553,4554,4557,4558,4561,4562,4565],{},[60,4555,4556],{},"Object.assign({}, original)"," で新しい外側のオブジェクトは作られますが、",[60,4559,4560],{},"user"," や ",[60,4563,4564],{},"settings"," はコピー元と同じオブジェクトを参照しています。",[52,4567,4569],{"className":676,"code":4568,"language":678,"meta":58,"style":58},"console.log(original === shallowCopy) \u002F\u002F false\nconsole.log(original.user === shallowCopy.user) \u002F\u002F true\n",[60,4570,4571,4576],{"__ignoreMap":58},[88,4572,4573],{"class":90,"line":91},[88,4574,4575],{},"console.log(original === shallowCopy) \u002F\u002F false\n",[88,4577,4578],{"class":90,"line":635},[88,4579,4580],{},"console.log(original.user === shallowCopy.user) \u002F\u002F true\n",[11,4582,4583],{},"そのため、コピー先にある入れ子の値を変更すると、コピー元にも影響します。",[52,4585,4587],{"className":676,"code":4586,"language":678,"meta":58,"style":58},"shallowCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Kohei」\nconsole.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[60,4588,4589,4594,4598,4603],{"__ignoreMap":58},[88,4590,4591],{"class":90,"line":91},[88,4592,4593],{},"shallowCopy.user.name = 'Kohei'\n",[88,4595,4596],{"class":90,"line":635},[88,4597,708],{"emptyLinePlaceholder":648},[88,4599,4600],{"class":90,"line":693},[88,4601,4602],{},"console.log(original.user.name) \u002F\u002F 「Kohei」\n",[88,4604,4605],{"class":90,"line":699},[88,4606,4607],{},"console.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[11,4609,4610],{},"オブジェクトスプレッド構文も、同様にシャローコピーです。",[52,4612,4614],{"className":676,"code":4613,"language":678,"meta":58,"style":58},"const shallowCopy = { ...original }\n",[60,4615,4616],{"__ignoreMap":58},[88,4617,4618],{"class":90,"line":91},[88,4619,4613],{},[44,4621,4623],{"id":4622},"structuredcloneでディープコピーする","structuredCloneでディープコピーする",[11,4625,4626,4627,4630],{},"ディープコピーには、",[60,4628,4629],{},"structuredClone()"," を利用できます。",[52,4632,4634],{"className":676,"code":4633,"language":678,"meta":58,"style":58},"const original = {\n  user: {\n    name: 'Yuri',\n  },\n  settings: {\n    theme: 'light',\n  },\n}\n\nconst deepCopy = structuredClone(original)\n",[60,4635,4636,4640,4644,4648,4652,4656,4660,4664,4668,4672],{"__ignoreMap":58},[88,4637,4638],{"class":90,"line":91},[88,4639,4510],{},[88,4641,4642],{"class":90,"line":635},[88,4643,4515],{},[88,4645,4646],{"class":90,"line":693},[88,4647,4520],{},[88,4649,4650],{"class":90,"line":699},[88,4651,766],{},[88,4653,4654],{"class":90,"line":705},[88,4655,4529],{},[88,4657,4658],{"class":90,"line":711},[88,4659,4534],{},[88,4661,4662],{"class":90,"line":717},[88,4663,766],{},[88,4665,4666],{"class":90,"line":722},[88,4667,702],{},[88,4669,4670],{"class":90,"line":728},[88,4671,708],{"emptyLinePlaceholder":648},[88,4673,4674],{"class":90,"line":787},[88,4675,4676],{},"const deepCopy = structuredClone(original)\n",[11,4678,4679,4681],{},[60,4680,4629],{}," で作ったコピーは、入れ子のオブジェクトもコピー元とは異なる参照になります。",[52,4683,4685],{"className":676,"code":4684,"language":678,"meta":58,"style":58},"console.log(original === deepCopy) \u002F\u002F false\nconsole.log(original.user === deepCopy.user) \u002F\u002F false\n",[60,4686,4687,4692],{"__ignoreMap":58},[88,4688,4689],{"class":90,"line":91},[88,4690,4691],{},"console.log(original === deepCopy) \u002F\u002F false\n",[88,4693,4694],{"class":90,"line":635},[88,4695,4696],{},"console.log(original.user === deepCopy.user) \u002F\u002F false\n",[11,4698,4699],{},"コピー先を変更しても、コピー元には影響しません。",[52,4701,4703],{"className":676,"code":4702,"language":678,"meta":58,"style":58},"deepCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Yuri」\nconsole.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[60,4704,4705,4710,4714,4719],{"__ignoreMap":58},[88,4706,4707],{"class":90,"line":91},[88,4708,4709],{},"deepCopy.user.name = 'Kohei'\n",[88,4711,4712],{"class":90,"line":635},[88,4713,708],{"emptyLinePlaceholder":648},[88,4715,4716],{"class":90,"line":693},[88,4717,4718],{},"console.log(original.user.name) \u002F\u002F 「Yuri」\n",[88,4720,4721],{"class":90,"line":699},[88,4722,4723],{},"console.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[11,4725,4726,4728,4729,1930,4732,1930,4735,4738],{},[60,4727,4629],{}," は通常のオブジェクトや配列だけでなく、",[60,4730,4731],{},"Date",[60,4733,4734],{},"Map",[60,4736,4737],{},"Set"," など、構造化複製アルゴリズムが対応している型をコピーできます。また、循環参照を持つオブジェクトにも対応しています。",[11,4740,4741,4742,4745],{},"ただし、関数など構造化複製できない値が含まれている場合は ",[60,4743,4744],{},"DataCloneError"," が発生します。すべてのJavaScriptの値を無条件にコピーできるわけではありません。",[11,4747,4748,4749,4754],{},"詳しい対応範囲は、",[1395,4750,4753],{"href":4751,"rel":4752},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FstructuredClone",[1399],"MDNのstructuredClone()","を確認してください。",[44,4756,4758],{"id":4757},"jsonを使ったディープコピーの注意点","JSONを使ったディープコピーの注意点",[11,4760,4761],{},"単純なデータだけを扱う場合、JSONへ変換して戻す方法もあります。",[52,4763,4765],{"className":676,"code":4764,"language":678,"meta":58,"style":58},"const deepCopy = JSON.parse(JSON.stringify(original))\n",[60,4766,4767],{"__ignoreMap":58},[88,4768,4769],{"class":90,"line":91},[88,4770,4764],{},[11,4772,4773],{},"ただし、この方法はJSONとして表現できる値に限られます。",[1323,4775,4776,4781,4790,4796],{},[583,4777,4778,4780],{},[60,4779,4731],{}," は文字列へ変換される",[583,4782,4783,4785,4786,4789],{},[60,4784,944],{},"、関数、",[60,4787,4788],{},"Symbol"," などは正しく保持できない",[583,4791,4792,4795],{},[60,4793,4794],{},"BigInt"," を含むと例外が発生する",[583,4797,4798],{},"循環参照を持つオブジェクトは変換できない",[11,4800,4801,4802,4804],{},"対象がJSON互換のデータだと分かっている場合には使えますが、一般的なディープコピーとしては ",[60,4803,4629],{}," の方が意図を表しやすく、扱える型も多くなります。",[44,4806,575],{"id":575},[1323,4808,4809,4814,4817,4822,4827],{},[583,4810,4811,4813],{},[60,4812,4499],{}," とオブジェクトスプレッド構文はシャローコピーになる",[583,4815,4816],{},"シャローコピーでは、入れ子のオブジェクトの参照がコピー元と共有される",[583,4818,4819,4821],{},[60,4820,4629],{}," を使うと、対応している値をディープコピーできる",[583,4823,4824,4826],{},[60,4825,4629],{}," でも、関数などコピーできない値がある",[583,4828,4829],{},"JSONによるコピーは、JSON互換データだけに限定して使う",[11,4831,4832],{},"コピー方法を選ぶときは、対象のデータ構造と、コピー後にどの階層まで独立して変更したいかを確認することが大切です。",[631,4834,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":4836},[4837,4838,4839,4840,4841],{"id":4474,"depth":635,"text":4475},{"id":4493,"depth":635,"text":4493},{"id":4622,"depth":635,"text":4623},{"id":4757,"depth":635,"text":4758},{"id":575,"depth":635,"text":575},"JavaScriptのシャローコピーとディープコピーの違いを確認し、structuredCloneを使った実装方法と注意点を整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy","2024-11-23",{"title":4461,"description":4842},"articles\u002F2024\u002Fdescribe-javascript-deepcopy",[1381],"\u002Fimages\u002Farticles\u002Fdescribe-javascript-deepcopy.png","dtSQ5LrS1Kfo1hFYE2MzMKOvrhU_5JGE1X1eQ9eHhIY",{"id":4852,"title":4853,"body":4854,"description":5267,"extension":646,"meta":5268,"navigation":648,"path":5269,"publishDate":5270,"published":648,"seo":5271,"stem":5272,"tags":5273,"thumbnail":5274,"updated":5275,"__hash__":5276},"articles\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this.md","JavaScriptのthisの挙動について呼び出し元で整理する",{"type":8,"value":4855,"toc":5259},[4856,4858,4864,4868,4873,4879,4882,4885,4891,4899,4901,4907,4913,4922,4925,4965,4972,4991,4993,4999,5019,5022,5059,5071,5092,5098,5101,5104,5146,5164,5174,5188,5198,5213,5215,5220,5252,5257],[11,4857,13],{},[11,4859,4860,4861,4863],{},"今回は、プロジェクトや個人開発で振り回されることが多かったJavaScriptの ",[60,4862,4383],{}," の挙動について、あらためて振り返ります。自分をはじめ、初学者の方も知っておくと開発が楽になるかと思います。",[44,4865,4867],{"id":4866},"そもそもthisってなんだ","そもそも「this」ってなんだ？",[11,4869,4870,4872],{},[60,4871,4383],{}," は、関数が実行されたときのコンテキストを参照するためのキーワードです。",[11,4874,4875,4876,4878],{},"同じ関数であっても、どのように呼び出されたかによって ",[60,4877,4383],{}," が参照する値は変わります。この特徴が便利なところでもあり、難しいところでもあります。",[11,4880,4881],{},"それでは、呼び出し方によって参照先がどう変わるのか見てみましょう。",[44,4883,4884],{"id":4884},"使用する場所ごとのthis",[11,4886,4887,4888,4890],{},"この記事では、",[60,4889,4383],{}," を使用するケースを次の2つに分けて確認します。",[1323,4892,4893,4896],{},[583,4894,4895],{},"オブジェクトのメソッドとして呼び出す場合",[583,4897,4898],{},"通常の関数として呼び出す場合",[44,4900,4895],{"id":4895},[11,4902,4903,4904,4906],{},"オブジェクトのメソッドとして呼び出した場合、",[60,4905,4383],{}," は基本的に呼び出し元のオブジェクトを参照します。",[11,4908,4909,4910,4912],{},"ここでいう呼び出し元のオブジェクトとは、次の例では ",[60,4911,4118],{}," のことです。",[52,4914,4916],{"className":676,"code":4915,"language":678,"meta":58,"style":58},"const obj = {}\n",[60,4917,4918],{"__ignoreMap":58},[88,4919,4920],{"class":90,"line":91},[88,4921,4915],{},[11,4923,4924],{},"実際に挙動を見てみましょう。",[52,4926,4928],{"className":676,"code":4927,"language":678,"meta":58,"style":58},"const obj = {\n  name: 'Yuri',\n  message: function () {\n    console.log('Hello ' + this.name)\n  },\n}\n\nobj.message()\n",[60,4929,4930,4934,4938,4943,4948,4952,4956,4960],{"__ignoreMap":58},[88,4931,4932],{"class":90,"line":91},[88,4933,4095],{},[88,4935,4936],{"class":90,"line":635},[88,4937,894],{},[88,4939,4940],{"class":90,"line":693},[88,4941,4942],{},"  message: function () {\n",[88,4944,4945],{"class":90,"line":699},[88,4946,4947],{},"    console.log('Hello ' + this.name)\n",[88,4949,4950],{"class":90,"line":705},[88,4951,766],{},[88,4953,4954],{"class":90,"line":711},[88,4955,702],{},[88,4957,4958],{"class":90,"line":717},[88,4959,708],{"emptyLinePlaceholder":648},[88,4961,4962],{"class":90,"line":722},[88,4963,4964],{},"obj.message()\n",[11,4966,4967,4968,4971],{},"この例では、",[60,4969,4970],{},"Hello Yuri"," と出力されます。",[11,4973,4974,4977,4978,4980,4981,4983,4984,4980,4987,4990],{},[60,4975,4976],{},"obj.message()"," という形で呼び出しているため、メソッド内の ",[60,4979,4383],{}," は ",[60,4982,4118],{}," を参照します。したがって、",[60,4985,4986],{},"this.name",[60,4988,4989],{},"obj.name"," として評価されます。",[44,4992,4898],{"id":4898},[11,4994,4995,4996,4998],{},"通常の関数として呼び出した場合、",[60,4997,4383],{}," の値は実行モードによって異なります。",[1323,5000,5001,5011],{},[583,5002,5003,5004,5006,5007,5010],{},"非厳格モードのブラウザでは、",[60,5005,4383],{}," はグローバルオブジェクトの ",[60,5008,5009],{},"window"," を参照する",[583,5012,5013,5014,4980,5016,5018],{},"厳格モードやES Modulesでは、",[60,5015,4383],{},[60,5017,944],{}," になる",[11,5020,5021],{},"次のコードは、ブラウザの非厳格モードで実行する例です。",[52,5023,5025],{"className":676,"code":5024,"language":678,"meta":58,"style":58},"window.name = 'Yuri'\n\nfunction message() {\n  console.log('Hello ' + this.name)\n}\n\nmessage()\n",[60,5026,5027,5032,5036,5041,5046,5050,5054],{"__ignoreMap":58},[88,5028,5029],{"class":90,"line":91},[88,5030,5031],{},"window.name = 'Yuri'\n",[88,5033,5034],{"class":90,"line":635},[88,5035,708],{"emptyLinePlaceholder":648},[88,5037,5038],{"class":90,"line":693},[88,5039,5040],{},"function message() {\n",[88,5042,5043],{"class":90,"line":699},[88,5044,5045],{},"  console.log('Hello ' + this.name)\n",[88,5047,5048],{"class":90,"line":705},[88,5049,702],{},[88,5051,5052],{"class":90,"line":711},[88,5053,708],{"emptyLinePlaceholder":648},[88,5055,5056],{"class":90,"line":717},[88,5057,5058],{},"message()\n",[11,5060,5061,5062,5064,5065,5068,5069,4971],{},"非厳格モードでは ",[60,5063,4986],{}," が ",[60,5066,5067],{},"window.name"," として評価されるため、",[60,5070,4970],{},[5072,5073,5074],"blockquote",{},[11,5075,5076,4561,5079,5081,5082,5084,5085,5088,5089,5091],{},[60,5077,5078],{},"let",[60,5080,1647],{}," で宣言した変数は、",[60,5083,5009],{}," オブジェクトのプロパティとして追加されません。一方、ブラウザでトップレベルに ",[60,5086,5087],{},"var"," を使って宣言した変数は、",[60,5090,5009],{}," のプロパティになります。",[11,5093,5094,5095,5097],{},"現在のフロントエンド開発ではES Modulesが広く使われています。ES Modulesは自動的に厳格モードとして扱われるため、通常の関数呼び出しで ",[60,5096,4383],{}," に依存する実装は避けた方が安全です。",[44,5099,5100],{"id":5100},"オブジェクトのメソッドを変数へ代入した場合",[11,5102,5103],{},"ここまでを踏まえて、オブジェクトのメソッドを変数へ代入した場合の挙動を見てみましょう。",[52,5105,5107],{"className":676,"code":5106,"language":678,"meta":58,"style":58},"const obj = {\n  name: 'Yuri',\n  message: function () {\n    console.log('Hello ' + this.name)\n  },\n}\n\nconst message = obj.message\nmessage()\n",[60,5108,5109,5113,5117,5121,5125,5129,5133,5137,5142],{"__ignoreMap":58},[88,5110,5111],{"class":90,"line":91},[88,5112,4095],{},[88,5114,5115],{"class":90,"line":635},[88,5116,894],{},[88,5118,5119],{"class":90,"line":693},[88,5120,4942],{},[88,5122,5123],{"class":90,"line":699},[88,5124,4947],{},[88,5126,5127],{"class":90,"line":705},[88,5128,766],{},[88,5130,5131],{"class":90,"line":711},[88,5132,702],{},[88,5134,5135],{"class":90,"line":717},[88,5136,708],{"emptyLinePlaceholder":648},[88,5138,5139],{"class":90,"line":722},[88,5140,5141],{},"const message = obj.message\n",[88,5143,5144],{"class":90,"line":728},[88,5145,5058],{},[11,5147,5148,5151,5152,5154,5155,5158,5159,3962,5161,5163],{},[60,5149,5150],{},"const message = obj.message"," では、関数そのものを変数へ代入しています。その後は ",[60,5153,4976],{}," ではなく ",[60,5156,5157],{},"message()"," として呼び出しているため、",[60,5160,4383],{},[60,5162,4118],{}," の結び付きは失われます。",[11,5165,5061,5166,5064,5168,5170,5171,5173],{},[60,5167,4383],{},[60,5169,5009],{}," を参照します。",[60,5172,5067],{}," が設定されていなければ、実行環境に応じて空文字などが返ります。",[11,5175,5176,5177,5064,5179,5181,5182,5184,5185,5187],{},"厳格モードやES Modulesでは ",[60,5178,4383],{},[60,5180,944],{}," になるため、",[60,5183,4986],{}," を読み取ろうとすると ",[60,5186,1124],{}," が発生します。",[11,5189,5190,5191,5194,5195,5197],{},"このような場合は、",[60,5192,5193],{},"bind()"," を使って ",[60,5196,4383],{}," の参照先を固定できます。",[52,5199,5201],{"className":676,"code":5200,"language":678,"meta":58,"style":58},"const message = obj.message.bind(obj)\nmessage() \u002F\u002F 「Hello Yuri」と出力される\n",[60,5202,5203,5208],{"__ignoreMap":58},[88,5204,5205],{"class":90,"line":91},[88,5206,5207],{},"const message = obj.message.bind(obj)\n",[88,5209,5210],{"class":90,"line":635},[88,5211,5212],{},"message() \u002F\u002F 「Hello Yuri」と出力される\n",[44,5214,575],{"id":575},[11,5216,5217,5219],{},[60,5218,4383],{}," の参照先は、関数を定義した場所だけではなく、主に関数の呼び出し方によって決まります。",[1323,5221,5222,5231,5241,5244],{},[583,5223,5224,5226,5227,4980,5229,5010],{},[60,5225,4976],{}," のようなメソッド呼び出しでは、",[60,5228,4383],{},[60,5230,4118],{},[583,5232,5233,5235,5236,5238,5239,5018],{},[60,5234,5157],{}," のような通常の関数呼び出しでは、非厳格モードのブラウザなら ",[60,5237,5009],{},"、厳格モードやES Modulesなら ",[60,5240,944],{},[583,5242,5243],{},"メソッドを変数へ代入すると、元のオブジェクトとの結び付きは失われる",[583,5245,5246,5247,587,5249,5251],{},"元のオブジェクトを参照させたい場合は、",[60,5248,5193],{},[60,5250,4383],{}," を固定できる",[11,5253,5254,5256],{},[60,5255,4383],{}," で迷ったときは「この関数はどのような形で呼び出されているか」を確認すると、参照先を判断しやすくなります。",[631,5258,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":5260},[5261,5262,5263,5264,5265,5266],{"id":4866,"depth":635,"text":4867},{"id":4884,"depth":635,"text":4884},{"id":4895,"depth":635,"text":4895},{"id":4898,"depth":635,"text":4898},{"id":5100,"depth":635,"text":5100},{"id":575,"depth":635,"text":575},"JavaScriptのthisが何を参照するのか、メソッド呼び出しと関数呼び出しの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this","2024-11-20",{"title":4853,"description":5267},"articles\u002F2024\u002Fdescribe-behavior-javascript-this",[1381],"\u002Fimages\u002Farticles\u002Fdescribe-behavior-javascript-this.png","2025-03-21","Kay_1TeIK8YsouKEwYLRPzbQMnabHxZ_GWvHciKSZBs",[5278],{"id":5279,"title":5280,"author":5281,"body":5282,"description":5920,"extension":646,"meta":5921,"navigation":648,"path":5922,"publishDate":5923,"published":648,"publisher":5924,"seo":5925,"stem":5926,"tags":5927,"__hash__":5928},"books\u002Fbooks\u002F2025\u002Forganize-learned-from-docker.md","Docker&仮想サーバー完全入門","リブロワークス",{"type":8,"value":5283,"toc":5907},[5284,5292,5295,5299,5302,5305,5311,5315,5318,5365,5380,5383,5404,5407,5411,5417,5441,5451,5458,5463,5469,5482,5488,5496,5502,5550,5556,5581,5585,5592,5627,5633,5636,5639,5692,5695,5702,5716,5719,5736,5746,5770,5773,5780,5794,5805,5825,5837,5841,5844,5851,5857,5860,5863,5865,5868,5871,5901,5904],[11,5285,5286,5287,5291],{},"『",[1395,5288,5280],{"href":5289,"rel":5290},"https:\u002F\u002Fbook.impress.co.jp\u002Fbooks\u002F1121101138",[1399],"』を読了したため、本書を通して学んだことをまとめます。",[11,5293,5294],{},"まだ1周目で理解が浅い部分もあるため、Dockerを実際に使いながら必要に応じて追記していきます。",[44,5296,5298],{"id":5297},"dockerでホスト環境への影響を抑える","Dockerでホスト環境への影響を抑える",[11,5300,5301],{},"Dockerを利用すると、アプリケーションに必要なランタイムやライブラリをコンテナ内にまとめられます。",[11,5303,5304],{},"ホストOSへ依存関係を直接インストールする場面を減らせるため、開発環境を整理しやすくなります。また、DockerfileやComposeファイルを共有することで、チーム内で環境を再現しやすくなります。",[36,5306,5308],{"title":5307,"type":848},"ホストOSから完全に独立するわけではない",[11,5309,5310],{},"コンテナはホストのカーネルやDocker Engineを利用します。ボリューム、ポート、CPUアーキテクチャなど、ホスト環境との接点がなくなるわけではありません。",[44,5312,5314],{"id":5313},"dockerコマンドで操作対象を明示する","Dockerコマンドで操作対象を明示する",[11,5316,5317],{},"Docker CLIには、操作対象を含めて記述するコマンドがあります。",[52,5319,5321],{"className":82,"code":5320,"language":84,"meta":58,"style":58},"docker container run nginx\ndocker image pull nginx\ndocker volume ls\ndocker network ls\n",[60,5322,5323,5336,5347,5356],{"__ignoreMap":58},[88,5324,5325,5327,5330,5333],{"class":90,"line":91},[88,5326,260],{"class":94},[88,5328,5329],{"class":98}," container",[88,5331,5332],{"class":98}," run",[88,5334,5335],{"class":98}," nginx\n",[88,5337,5338,5340,5342,5345],{"class":90,"line":635},[88,5339,260],{"class":94},[88,5341,406],{"class":98},[88,5343,5344],{"class":98}," pull",[88,5346,5335],{"class":98},[88,5348,5349,5351,5353],{"class":90,"line":693},[88,5350,260],{"class":94},[88,5352,508],{"class":98},[88,5354,5355],{"class":98}," ls\n",[88,5357,5358,5360,5363],{"class":90,"line":699},[88,5359,260],{"class":94},[88,5361,5362],{"class":98}," network",[88,5364,5355],{"class":98},[11,5366,5367,1930,5370,1930,5373,1930,5376,5379],{},[60,5368,5369],{},"container",[60,5371,5372],{},"image",[60,5374,5375],{},"volume",[60,5377,5378],{},"network","のように対象が明示されるため、何を操作するコマンドなのか把握しやすくなります。",[11,5381,5382],{},"一方で、次の短い形式も現在利用できます。",[52,5384,5386],{"className":82,"code":5385,"language":84,"meta":58,"style":58},"docker run nginx\ndocker pull nginx\n",[60,5387,5388,5396],{"__ignoreMap":58},[88,5389,5390,5392,5394],{"class":90,"line":91},[88,5391,260],{"class":94},[88,5393,5332],{"class":98},[88,5395,5335],{"class":98},[88,5397,5398,5400,5402],{"class":90,"line":635},[88,5399,260],{"class":94},[88,5401,5344],{"class":98},[88,5403,5335],{"class":98},[11,5405,5406],{},"短い形式を古いという理由だけで避ける必要はありません。学習時には対象を含む形式も知っておくと、CLIの構造を理解しやすいと感じました。",[44,5408,5410],{"id":5409},"docker-compose-v2を利用する","Docker Compose V2を利用する",[11,5412,5413,5414,1085],{},"現在のCompose CLIでは、ハイフンのない",[60,5415,5416],{},"docker compose",[52,5418,5420],{"className":82,"code":5419,"language":84,"meta":58,"style":58},"docker compose up\ndocker compose down\n",[60,5421,5422,5432],{"__ignoreMap":58},[88,5423,5424,5426,5429],{"class":90,"line":91},[88,5425,260],{"class":94},[88,5427,5428],{"class":98}," compose",[88,5430,5431],{"class":98}," up\n",[88,5433,5434,5436,5438],{"class":90,"line":635},[88,5435,260],{"class":94},[88,5437,5428],{"class":98},[88,5439,5440],{"class":98}," down\n",[11,5442,5443,5444,5447,5448,5450],{},"旧Compose V1で使われていた",[60,5445,5446],{},"docker-compose","とはコマンド形式が異なります。Docker DesktopにはCompose CLIが含まれているため、基本的には",[60,5449,5416],{},"を利用します。",[44,5452,5454,5455,1330],{"id":5453},"composeファイルはcomposeyamlを使う","Composeファイルは",[60,5456,5457],{},"compose.yaml",[11,5459,5460,5461,822],{},"Composeファイルの推奨ファイル名は",[60,5462,5457],{},[52,5464,5467],{"className":5465,"code":5466,"language":57,"meta":58},[55],"compose.yaml\n",[60,5468,5466],{"__ignoreMap":58},[11,5470,5471,5474,5475,818,5478,5481],{},[60,5472,5473],{},"compose.yml","も利用できます。また、",[60,5476,5477],{},"docker-compose.yaml",[60,5479,5480],{},"docker-compose.yml","も後方互換性のためサポートされています。",[11,5483,5484,5485,5487],{},"複数の候補が同じ場所にある場合は",[60,5486,5457],{},"が優先されるため、新しく作る場合はこの名前へ揃えると分かりやすくなります。",[44,5489,5491,5492,5495],{"id":5490},"トップレベルのversionは不要","トップレベルの",[60,5493,5494],{},"version","は不要",[11,5497,5498,5499,5501],{},"以前のComposeファイルでは、先頭に次のような",[60,5500,5494],{},"を書く例がありました。",[52,5503,5507],{"className":5504,"code":5505,"language":5506,"meta":58,"style":58},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","version: '3'\n\nservices:\n  web:\n    image: nginx\n","yaml",[60,5508,5509,5522,5526,5534,5541],{"__ignoreMap":58},[88,5510,5511,5513,5515,5517,5520],{"class":90,"line":91},[88,5512,5494],{"class":1447},[88,5514,1867],{"class":112},[88,5516,1596],{"class":112},[88,5518,5519],{"class":98},"3",[88,5521,1601],{"class":112},[88,5523,5524],{"class":90,"line":635},[88,5525,708],{"emptyLinePlaceholder":648},[88,5527,5528,5531],{"class":90,"line":693},[88,5529,5530],{"class":1447},"services",[88,5532,5533],{"class":112},":\n",[88,5535,5536,5539],{"class":90,"line":699},[88,5537,5538],{"class":1447},"  web",[88,5540,5533],{"class":112},[88,5542,5543,5546,5548],{"class":90,"line":705},[88,5544,5545],{"class":1447},"    image",[88,5547,1867],{"class":112},[88,5549,5335],{"class":98},[11,5551,5552,5553,5555],{},"現在、トップレベルの",[60,5554,5494],{},"は後方互換性のために残されたobsoleteな項目です。指定してもComposeは最新のスキーマでファイルを検証するため、新しいComposeファイルでは省略します。",[52,5557,5559],{"className":5504,"code":5558,"language":5506,"meta":58,"style":58},"services:\n  web:\n    image: nginx\n",[60,5560,5561,5567,5573],{"__ignoreMap":58},[88,5562,5563,5565],{"class":90,"line":91},[88,5564,5530],{"class":1447},[88,5566,5533],{"class":112},[88,5568,5569,5571],{"class":90,"line":635},[88,5570,5538],{"class":1447},[88,5572,5533],{"class":112},[88,5574,5575,5577,5579],{"class":90,"line":693},[88,5576,5545],{"class":1447},[88,5578,1867],{"class":112},[88,5580,5335],{"class":98},[44,5582,5584],{"id":5583},"restart-policyは用途に合わせて設定する","restart policyは用途に合わせて設定する",[11,5586,5587,5588,5591],{},"Composeのサービスには、コンテナを再起動する条件を",[60,5589,5590],{},"restart","で設定できます。",[52,5593,5595],{"className":5504,"code":5594,"language":5506,"meta":58,"style":58},"services:\n  web:\n    image: nginx\n    restart: always\n",[60,5596,5597,5603,5609,5617],{"__ignoreMap":58},[88,5598,5599,5601],{"class":90,"line":91},[88,5600,5530],{"class":1447},[88,5602,5533],{"class":112},[88,5604,5605,5607],{"class":90,"line":635},[88,5606,5538],{"class":1447},[88,5608,5533],{"class":112},[88,5610,5611,5613,5615],{"class":90,"line":693},[88,5612,5545],{"class":1447},[88,5614,1867],{"class":112},[88,5616,5335],{"class":98},[88,5618,5619,5622,5624],{"class":90,"line":699},[88,5620,5621],{"class":1447},"    restart",[88,5623,1867],{"class":112},[88,5625,5626],{"class":98}," always\n",[11,5628,5629,5632],{},[60,5630,5631],{},"always","を指定したコンテナは、停止した場合やDockerデーモンが再起動した場合に再起動されます。",[11,5634,5635],{},"常時稼働が必要なサービスでは便利ですが、学習用コンテナへ一律に指定すると、Docker起動時に意図しないコンテナまで立ち上がることがあります。必要性を考えて設定することが大切です。",[11,5637,5638],{},"主なrestart policyには次があります。",[280,5640,5641,5651],{},[283,5642,5643],{},[286,5644,5645,5648],{},[289,5646,5647],{},"値",[289,5649,5650],{},"動作",[297,5652,5653,5663,5673,5682],{},[286,5654,5655,5660],{},[302,5656,5657],{},[60,5658,5659],{},"no",[302,5661,5662],{},"自動的に再起動しない",[286,5664,5665,5670],{},[302,5666,5667],{},[60,5668,5669],{},"on-failure",[302,5671,5672],{},"エラー終了した場合に再起動する",[286,5674,5675,5679],{},[302,5676,5677],{},[60,5678,5631],{},[302,5680,5681],{},"停止した場合に常に再起動する",[286,5683,5684,5689],{},[302,5685,5686],{},[60,5687,5688],{},"unless-stopped",[302,5690,5691],{},"明示的に停止されていない限り再起動する",[44,5693,5694],{"id":5694},"コンテナのログを確認する",[11,5696,5697,5698,5701],{},"Composeで起動したサービスのログは",[60,5699,5700],{},"docker compose logs","で確認できます。",[52,5703,5705],{"className":82,"code":5704,"language":84,"meta":58,"style":58},"docker compose logs\n",[60,5706,5707],{"__ignoreMap":58},[88,5708,5709,5711,5713],{"class":90,"line":91},[88,5710,260],{"class":94},[88,5712,5428],{"class":98},[88,5714,5715],{"class":98}," logs\n",[11,5717,5718],{},"サービスを指定すると、対象のログだけを表示できます。",[52,5720,5722],{"className":82,"code":5721,"language":84,"meta":58,"style":58},"docker compose logs web\n",[60,5723,5724],{"__ignoreMap":58},[88,5725,5726,5728,5730,5733],{"class":90,"line":91},[88,5727,260],{"class":94},[88,5729,5428],{"class":98},[88,5731,5732],{"class":98}," logs",[88,5734,5735],{"class":98}," web\n",[11,5737,5738,5739,5742,5743,1085],{},"ログを継続して追いかける場合は",[60,5740,5741],{},"--follow","、末尾の行数を限定する場合は",[60,5744,5745],{},"--tail",[52,5747,5749],{"className":82,"code":5748,"language":84,"meta":58,"style":58},"docker compose logs --follow --tail 100 web\n",[60,5750,5751],{"__ignoreMap":58},[88,5752,5753,5755,5757,5759,5762,5765,5768],{"class":90,"line":91},[88,5754,260],{"class":94},[88,5756,5428],{"class":98},[88,5758,5732],{"class":98},[88,5760,5761],{"class":98}," --follow",[88,5763,5764],{"class":98}," --tail",[88,5766,5767],{"class":105}," 100",[88,5769,5735],{"class":98},[44,5771,5772],{"id":5772},"イメージを再ビルドする",[11,5774,5775,5776,5779],{},"Composeでイメージをビルドするには",[60,5777,5778],{},"docker compose build","を使います。",[52,5781,5783],{"className":82,"code":5782,"language":84,"meta":58,"style":58},"docker compose build\n",[60,5784,5785],{"__ignoreMap":58},[88,5786,5787,5789,5791],{"class":90,"line":91},[88,5788,260],{"class":94},[88,5790,5428],{"class":98},[88,5792,5793],{"class":98}," build\n",[11,5795,5796,5797,5800,5801,5804],{},"コンテナの起動前にビルドも実行したい場合は、",[60,5798,5799],{},"docker compose up","へ",[60,5802,5803],{},"--build","を付けられます。",[52,5806,5808],{"className":82,"code":5807,"language":84,"meta":58,"style":58},"docker compose up --detach --build\n",[60,5809,5810],{"__ignoreMap":58},[88,5811,5812,5814,5816,5819,5822],{"class":90,"line":91},[88,5813,260],{"class":94},[88,5815,5428],{"class":98},[88,5817,5818],{"class":98}," up",[88,5820,5821],{"class":98}," --detach",[88,5823,5824],{"class":98}," --build\n",[11,5826,5827,5829,5830,941,5833,5836],{},[60,5828,5799],{},"は、サービスの設定やイメージが変更されている場合にコンテナを再作成します。ただし、Dockerfileやビルド対象を確実に再ビルドしてから起動したい場合は、",[60,5831,5832],{},"build",[60,5834,5835],{},"up --build","を明示すると意図が分かりやすくなります。",[44,5838,5840],{"id":5839},"dev-containerで開発環境をコンテナ化する","Dev Containerで開発環境をコンテナ化する",[11,5842,5843],{},"VS CodeのDev Containers拡張機能を使うと、コンテナを開発環境として利用できます。",[11,5845,5846,5847,5850],{},"プロジェクト内の",[60,5848,5849],{},".devcontainer\u002Fdevcontainer.json","へ設定を記述し、コンテナ内のランタイム、ツール、VS Code拡張機能などを揃えられます。",[52,5852,5855],{"className":5853,"code":5854,"language":57,"meta":58},[55],".devcontainer\u002F\n  devcontainer.json\n",[60,5856,5854],{"__ignoreMap":58},[11,5858,5859],{},"ソースコードをコンテナへマウントし、ターミナル、補完、コードナビゲーション、デバッグなどを普段のVS Codeと近い操作感で利用できます。",[11,5861,5862],{},"環境構築手順を文章だけで共有するよりも、実行環境そのものを設定として共有できる点が便利だと感じました。",[44,5864,575],{"id":575},[11,5866,5867],{},"本書を通して、Dockerの基本操作だけでなく、Composeによる複数コンテナの管理や、開発環境をコンテナ化する考え方を学べました。",[11,5869,5870],{},"特に、次の点を今後の開発でも意識したいです。",[1323,5872,5873,5876,5881,5886,5892,5895,5898],{},[583,5874,5875],{},"Docker CLIで何を操作しているか理解する",[583,5877,5878,5879,1330],{},"Compose V2の",[60,5880,5416],{},[583,5882,5454,5883,5885],{},[60,5884,5457],{},"へ揃える",[583,5887,5888,5889,5891],{},"不要な",[60,5890,5494],{},"を記述しない",[583,5893,5894],{},"restart policyを用途に合わせて設定する",[583,5896,5897],{},"ログ確認と再ビルドのコマンドを使い分ける",[583,5899,5900],{},"Dev Containerで再現可能な開発環境を試す",[11,5902,5903],{},"Dockerはコマンドを覚えるだけでなく、イメージ、コンテナ、ボリューム、ネットワークの関係を実際に操作しながら理解していきたいです。",[631,5905,5906],{},"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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":58,"searchDepth":635,"depth":635,"links":5908},[5909,5910,5911,5912,5914,5915,5916,5917,5918,5919],{"id":5297,"depth":635,"text":5298},{"id":5313,"depth":635,"text":5314},{"id":5409,"depth":635,"text":5410},{"id":5453,"depth":635,"text":5913},"Composeファイルはcompose.yamlを使う",{"id":5490,"depth":635,"text":5490},{"id":5583,"depth":635,"text":5584},{"id":5694,"depth":635,"text":5694},{"id":5772,"depth":635,"text":5772},{"id":5839,"depth":635,"text":5840},{"id":575,"depth":635,"text":575},"『Docker&仮想サーバー完全入門』を読了したため、本書を通して学んだことをまとめます。",{},"\u002Fbooks\u002F2025\u002Forganize-learned-from-docker","2025-02-22","インプレス",{"title":5280,"description":5920},"books\u002F2025\u002Forganize-learned-from-docker",[655],"4hv6HyIEs4h6TVsIp3e5GZVdKj-xdL2YemAEAK3SW10",[5930,6394,6939,8286,8664,9035,9361,9660],{"id":5,"title":6,"body":5931,"description":645,"extension":646,"meta":6391,"navigation":648,"path":649,"publishDate":650,"published":648,"seo":6392,"stem":652,"tags":6393,"thumbnail":656,"updated":650,"__hash__":657},{"type":8,"value":5932,"toc":6381},[5933,5935,5939,5941,5945,5947,5951,5953,5955,5960,5962,5967,5969,5971,5973,5999,6005,6009,6014,6018,6044,6048,6053,6057,6083,6085,6090,6092,6094,6096,6098,6110,6112,6117,6119,6149,6153,6155,6157,6171,6175,6177,6182,6184,6186,6188,6198,6200,6212,6214,6219,6223,6225,6227,6241,6243,6248,6250,6252,6260,6266,6268,6273,6275,6287,6289,6291,6293,6331,6333,6337,6339,6341,6361,6363,6365,6377,6379],[11,5934,13],{},[11,5936,16,5937,21],{},[18,5938,20],{},[11,5940,24],{},[11,5942,27,5943,31],{},[18,5944,30],{},[11,5946,34],{},[36,5948,5949],{"title":38,"type":39},[11,5950,42],{},[44,5952,47],{"id":46},[11,5954,50],{},[52,5956,5958],{"className":5957,"code":56,"language":57,"meta":58},[55],[60,5959,56],{"__ignoreMap":58},[11,5961,64],{},[52,5963,5965],{"className":5964,"code":68,"language":57,"meta":58},[55],[60,5966,68],{"__ignoreMap":58},[11,5968,73],{},[44,5970,76],{"id":76},[11,5972,79],{},[52,5974,5975],{"className":82,"code":83,"language":84,"meta":58,"style":58},[60,5976,5977],{"__ignoreMap":58},[88,5978,5979,5981,5983,5985,5987,5989,5991,5993,5995,5997],{"class":90,"line":91},[88,5980,95],{"class":94},[88,5982,99],{"class":98},[88,5984,102],{"class":98},[88,5986,106],{"class":105},[88,5988,109],{"class":98},[88,5990,113],{"class":112},[88,5992,116],{"class":98},[88,5994,119],{"class":112},[88,5996,122],{"class":94},[88,5998,125],{"class":98},[11,6000,6001,130,6003,134],{},[60,6002,95],{},[60,6004,133],{},[11,6006,137,6007,141],{},[60,6008,140],{},[52,6010,6012],{"className":6011,"code":145,"language":57,"meta":58},[55],[60,6013,145],{"__ignoreMap":58},[11,6015,150,6016,153],{},[60,6017,140],{},[52,6019,6020],{"className":82,"code":156,"language":84,"meta":58,"style":58},[60,6021,6022],{"__ignoreMap":58},[88,6023,6024,6026,6028,6030,6032,6034,6036,6038,6040,6042],{"class":90,"line":91},[88,6025,95],{"class":94},[88,6027,99],{"class":98},[88,6029,102],{"class":98},[88,6031,106],{"class":105},[88,6033,171],{"class":98},[88,6035,113],{"class":112},[88,6037,116],{"class":98},[88,6039,119],{"class":112},[88,6041,122],{"class":94},[88,6043,125],{"class":98},[11,6045,184,6046,188],{},[60,6047,187],{},[52,6049,6051],{"className":6050,"code":192,"language":57,"meta":58},[55],[60,6052,192],{"__ignoreMap":58},[11,6054,197,6055,200],{},[60,6056,187],{},[52,6058,6059],{"className":82,"code":203,"language":84,"meta":58,"style":58},[60,6060,6061],{"__ignoreMap":58},[88,6062,6063,6065,6067,6069,6071,6073,6075,6077,6079,6081],{"class":90,"line":91},[88,6064,95],{"class":94},[88,6066,99],{"class":98},[88,6068,102],{"class":98},[88,6070,106],{"class":105},[88,6072,218],{"class":98},[88,6074,113],{"class":112},[88,6076,116],{"class":98},[88,6078,119],{"class":112},[88,6080,122],{"class":94},[88,6082,125],{"class":98},[11,6084,231],{},[52,6086,6088],{"className":6087,"code":235,"language":57,"meta":58},[55],[60,6089,235],{"__ignoreMap":58},[11,6091,240],{},[11,6093,243],{},[44,6095,247],{"id":246},[11,6097,250],{},[52,6099,6100],{"className":82,"code":253,"language":84,"meta":58,"style":58},[60,6101,6102],{"__ignoreMap":58},[88,6103,6104,6106,6108],{"class":90,"line":91},[88,6105,260],{"class":94},[88,6107,263],{"class":98},[88,6109,266],{"class":98},[11,6111,269],{},[52,6113,6115],{"className":6114,"code":273,"language":57,"meta":58},[55],[60,6116,273],{"__ignoreMap":58},[11,6118,278],{},[280,6120,6121,6129],{},[283,6122,6123],{},[286,6124,6125,6127],{},[289,6126,291],{},[289,6128,295],{"align":294},[297,6130,6131,6137,6143],{},[286,6132,6133,6135],{},[302,6134,304],{},[302,6136,307],{"align":294},[286,6138,6139,6141],{},[302,6140,312],{},[302,6142,315],{"align":294},[286,6144,6145,6147],{},[302,6146,320],{},[302,6148,323],{"align":294},[11,6150,6151,329],{},[60,6152,328],{},[44,6154,333],{"id":332},[11,6156,336],{},[52,6158,6159],{"className":82,"code":339,"language":84,"meta":58,"style":58},[60,6160,6161],{"__ignoreMap":58},[88,6162,6163,6165,6167,6169],{"class":90,"line":91},[88,6164,260],{"class":94},[88,6166,348],{"class":98},[88,6168,351],{"class":98},[88,6170,354],{"class":98},[11,6172,6173,360],{},[60,6174,359],{},[11,6176,363],{},[52,6178,6180],{"className":6179,"code":367,"language":57,"meta":58},[55],[60,6181,367],{"__ignoreMap":58},[11,6183,372],{},[44,6185,376],{"id":375},[11,6187,379],{},[52,6189,6190],{"className":82,"code":382,"language":84,"meta":58,"style":58},[60,6191,6192],{"__ignoreMap":58},[88,6193,6194,6196],{"class":90,"line":91},[88,6195,260],{"class":94},[88,6197,391],{"class":98},[11,6199,394],{},[52,6201,6202],{"className":82,"code":397,"language":84,"meta":58,"style":58},[60,6203,6204],{"__ignoreMap":58},[88,6205,6206,6208,6210],{"class":90,"line":91},[88,6207,260],{"class":94},[88,6209,406],{"class":98},[88,6211,409],{"class":98},[11,6213,412],{},[52,6215,6217],{"className":6216,"code":416,"language":57,"meta":58},[55],[60,6218,416],{"__ignoreMap":58},[11,6220,421,6221,425],{},[60,6222,424],{},[44,6224,429],{"id":428},[11,6226,432],{},[52,6228,6229],{"className":82,"code":435,"language":84,"meta":58,"style":58},[60,6230,6231],{"__ignoreMap":58},[88,6232,6233,6235,6237,6239],{"class":90,"line":91},[88,6234,260],{"class":94},[88,6236,263],{"class":98},[88,6238,446],{"class":98},[88,6240,449],{"class":98},[11,6242,452],{},[52,6244,6246],{"className":6245,"code":456,"language":57,"meta":58},[55],[60,6247,456],{"__ignoreMap":58},[11,6249,461],{},[11,6251,464],{},[52,6253,6254],{"className":467,"code":468,"language":469,"meta":58,"style":58},[60,6255,6256],{"__ignoreMap":58},[88,6257,6258],{"class":90,"line":91},[88,6259,468],{},[36,6261,6262],{"title":478,"type":39},[11,6263,6264,484],{},[60,6265,483],{},[11,6267,487],{},[52,6269,6271],{"className":6270,"code":491,"language":57,"meta":58},[55],[60,6272,491],{"__ignoreMap":58},[11,6274,496],{},[52,6276,6277],{"className":82,"code":499,"language":84,"meta":58,"style":58},[60,6278,6279],{"__ignoreMap":58},[88,6280,6281,6283,6285],{"class":90,"line":91},[88,6282,260],{"class":94},[88,6284,508],{"class":98},[88,6286,409],{"class":98},[11,6288,513],{},[44,6290,516],{"id":516},[11,6292,519],{},[280,6294,6295,6305],{},[283,6296,6297],{},[286,6298,6299,6301,6303],{},[289,6300,291],{},[289,6302,530],{"align":294},[289,6304,533],{"align":294},[297,6306,6307,6315,6323],{},[286,6308,6309,6311,6313],{},[302,6310,304],{},[302,6312,307],{"align":294},[302,6314,544],{"align":294},[286,6316,6317,6319,6321],{},[302,6318,312],{},[302,6320,315],{"align":294},[302,6322,553],{"align":294},[286,6324,6325,6327,6329],{},[302,6326,320],{},[302,6328,323],{"align":294},[302,6330,562],{"align":294},[11,6332,565],{},[11,6334,568,6335,572],{},[60,6336,571],{},[44,6338,575],{"id":575},[11,6340,578],{},[580,6342,6343,6349,6353,6357,6359],{},[583,6344,6345,587,6347,590],{},[60,6346,95],{},[60,6348,140],{},[583,6350,6351,596],{},[60,6352,595],{},[583,6354,599,6355,602],{},[60,6356,328],{},[583,6358,605],{},[583,6360,608],{},[11,6362,611],{},[11,6364,614],{},[52,6366,6367],{"className":82,"code":253,"language":84,"meta":58,"style":58},[60,6368,6369],{"__ignoreMap":58},[88,6370,6371,6373,6375],{"class":90,"line":91},[88,6372,260],{"class":94},[88,6374,263],{"class":98},[88,6376,266],{"class":98},[11,6378,629],{},[631,6380,633],{},{"title":58,"searchDepth":635,"depth":635,"links":6382},[6383,6384,6385,6386,6387,6388,6389,6390],{"id":46,"depth":635,"text":47},{"id":76,"depth":635,"text":76},{"id":246,"depth":635,"text":247},{"id":332,"depth":635,"text":333},{"id":375,"depth":635,"text":376},{"id":428,"depth":635,"text":429},{"id":516,"depth":635,"text":516},{"id":575,"depth":635,"text":575},{},{"title":6,"description":645},[654,655],{"id":659,"title":660,"body":6395,"description":1374,"extension":646,"meta":6936,"navigation":648,"path":1376,"publishDate":1377,"published":648,"seo":6937,"stem":1379,"tags":6938,"thumbnail":1382,"updated":1377,"__hash__":1383},{"type":8,"value":6396,"toc":6921},[6397,6399,6401,6403,6405,6445,6447,6449,6509,6519,6531,6541,6553,6555,6557,6589,6595,6599,6607,6631,6641,6643,6655,6657,6661,6709,6711,6715,6743,6749,6751,6757,6773,6775,6781,6813,6815,6835,6839,6843,6851,6875,6889,6891,6895,6897,6909,6911,6913,6919],[11,6398,13],{},[11,6400,667],{},[44,6402,670],{"id":670},[11,6404,673],{},[52,6406,6407],{"className":676,"code":677,"language":678,"meta":58,"style":58},[60,6408,6409,6413,6417,6421,6425,6429,6433,6437,6441],{"__ignoreMap":58},[88,6410,6411],{"class":90,"line":91},[88,6412,685],{},[88,6414,6415],{"class":90,"line":635},[88,6416,690],{},[88,6418,6419],{"class":90,"line":693},[88,6420,696],{},[88,6422,6423],{"class":90,"line":699},[88,6424,702],{},[88,6426,6427],{"class":90,"line":705},[88,6428,708],{"emptyLinePlaceholder":648},[88,6430,6431],{"class":90,"line":711},[88,6432,714],{},[88,6434,6435],{"class":90,"line":717},[88,6436,708],{"emptyLinePlaceholder":648},[88,6438,6439],{"class":90,"line":722},[88,6440,725],{},[88,6442,6443],{"class":90,"line":728},[88,6444,731],{},[733,6446,735],{"id":735},[11,6448,738],{},[52,6450,6451],{"className":676,"code":741,"language":678,"meta":58,"style":58},[60,6452,6453,6457,6461,6465,6469,6473,6477,6481,6485,6489,6493,6497,6501,6505],{"__ignoreMap":58},[88,6454,6455],{"class":90,"line":91},[88,6456,685],{},[88,6458,6459],{"class":90,"line":635},[88,6460,690],{},[88,6462,6463],{"class":90,"line":693},[88,6464,756],{},[88,6466,6467],{"class":90,"line":699},[88,6468,761],{},[88,6470,6471],{"class":90,"line":705},[88,6472,766],{},[88,6474,6475],{"class":90,"line":711},[88,6476,702],{},[88,6478,6479],{"class":90,"line":717},[88,6480,708],{"emptyLinePlaceholder":648},[88,6482,6483],{"class":90,"line":722},[88,6484,779],{},[88,6486,6487],{"class":90,"line":728},[88,6488,784],{},[88,6490,6491],{"class":90,"line":787},[88,6492,790],{},[88,6494,6495],{"class":90,"line":793},[88,6496,796],{},[88,6498,6499],{"class":90,"line":799},[88,6500,708],{"emptyLinePlaceholder":648},[88,6502,6503],{"class":90,"line":804},[88,6504,725],{},[88,6506,6507],{"class":90,"line":809},[88,6508,731],{},[11,6510,814,6511,818,6513,822,6515,826,6517,829],{},[60,6512,817],{},[60,6514,821],{},[60,6516,825],{},[60,6518,821],{},[52,6520,6521],{"className":676,"code":832,"language":678,"meta":58,"style":58},[60,6522,6523,6527],{"__ignoreMap":58},[88,6524,6525],{"class":90,"line":91},[88,6526,839],{},[88,6528,6529],{"class":90,"line":635},[88,6530,844],{},[36,6532,6533],{"title":847,"type":848},[11,6534,6535,853,6537,856,6539,859],{},[60,6536,825],{},[60,6538,821],{},[60,6540,825],{},[52,6542,6543],{"className":676,"code":862,"language":678,"meta":58,"style":58},[60,6544,6545,6549],{"__ignoreMap":58},[88,6546,6547],{"class":90,"line":91},[88,6548,869],{},[88,6550,6551],{"class":90,"line":635},[88,6552,874],{},[733,6554,877],{"id":877},[11,6556,880],{},[52,6558,6559],{"className":676,"code":883,"language":678,"meta":58,"style":58},[60,6560,6561,6565,6569,6573,6577,6581,6585],{"__ignoreMap":58},[88,6562,6563],{"class":90,"line":91},[88,6564,685],{},[88,6566,6567],{"class":90,"line":635},[88,6568,894],{},[88,6570,6571],{"class":90,"line":693},[88,6572,702],{},[88,6574,6575],{"class":90,"line":699},[88,6576,708],{"emptyLinePlaceholder":648},[88,6578,6579],{"class":90,"line":705},[88,6580,907],{},[88,6582,6583],{"class":90,"line":711},[88,6584,708],{"emptyLinePlaceholder":648},[88,6586,6587],{"class":90,"line":717},[88,6588,916],{},[11,6590,919,6591,923,6593,822],{},[60,6592,922],{},[60,6594,926],{},[44,6596,930,6597,934],{"id":929},[60,6598,933],{},[11,6600,937,6601,941,6603,945,6605,948],{},[60,6602,940],{},[60,6604,944],{},[60,6606,944],{},[52,6608,6609],{"className":676,"code":951,"language":678,"meta":58,"style":58},[60,6610,6611,6615,6619,6623,6627],{"__ignoreMap":58},[88,6612,6613],{"class":90,"line":91},[88,6614,685],{},[88,6616,6617],{"class":90,"line":635},[88,6618,894],{},[88,6620,6621],{"class":90,"line":693},[88,6622,702],{},[88,6624,6625],{"class":90,"line":699},[88,6626,708],{"emptyLinePlaceholder":648},[88,6628,6629],{"class":90,"line":705},[88,6630,974],{},[11,6632,6633,980,6635,983,6637,986,6639,990],{},[60,6634,979],{},[60,6636,944],{},[60,6638,933],{},[60,6640,989],{},[11,6642,993],{},[52,6644,6645],{"className":676,"code":996,"language":678,"meta":58,"style":58},[60,6646,6647,6651],{"__ignoreMap":58},[88,6648,6649],{"class":90,"line":91},[88,6650,1003],{},[88,6652,6653],{"class":90,"line":635},[88,6654,1008],{},[733,6656,1011],{"id":1011},[11,6658,1014,6659,1018],{},[60,6660,1017],{},[52,6662,6663],{"className":676,"code":1021,"language":678,"meta":58,"style":58},[60,6664,6665,6669,6673,6677,6681,6685,6689,6693,6697,6701,6705],{"__ignoreMap":58},[88,6666,6667],{"class":90,"line":91},[88,6668,1028],{},[88,6670,6671],{"class":90,"line":635},[88,6672,1033],{},[88,6674,6675],{"class":90,"line":693},[88,6676,1038],{},[88,6678,6679],{"class":90,"line":699},[88,6680,1043],{},[88,6682,6683],{"class":90,"line":705},[88,6684,708],{"emptyLinePlaceholder":648},[88,6686,6687],{"class":90,"line":711},[88,6688,1052],{},[88,6690,6691],{"class":90,"line":717},[88,6692,1057],{},[88,6694,6695],{"class":90,"line":722},[88,6696,708],{"emptyLinePlaceholder":648},[88,6698,6699],{"class":90,"line":728},[88,6700,1066],{},[88,6702,6703],{"class":90,"line":787},[88,6704,708],{"emptyLinePlaceholder":648},[88,6706,6707],{"class":90,"line":793},[88,6708,1075],{},[733,6710,1078],{"id":1078},[11,6712,1081,6713,1085],{},[60,6714,1084],{},[52,6716,6717],{"className":676,"code":1088,"language":678,"meta":58,"style":58},[60,6718,6719,6723,6727,6731,6735,6739],{"__ignoreMap":58},[88,6720,6721],{"class":90,"line":91},[88,6722,1095],{},[88,6724,6725],{"class":90,"line":635},[88,6726,1100],{},[88,6728,6729],{"class":90,"line":693},[88,6730,702],{},[88,6732,6733],{"class":90,"line":699},[88,6734,708],{"emptyLinePlaceholder":648},[88,6736,6737],{"class":90,"line":705},[88,6738,1113],{},[88,6740,6741],{"class":90,"line":711},[88,6742,1118],{},[11,6744,1121,6745,1125,6747,1128],{},[60,6746,1124],{},[60,6748,1084],{},[733,6750,1132],{"id":1131},[11,6752,6753,1138,6755,1141],{},[60,6754,1137],{},[60,6756,940],{},[52,6758,6759],{"className":676,"code":1144,"language":678,"meta":58,"style":58},[60,6760,6761,6765,6769],{"__ignoreMap":58},[88,6762,6763],{"class":90,"line":91},[88,6764,1151],{},[88,6766,6767],{"class":90,"line":635},[88,6768,708],{"emptyLinePlaceholder":648},[88,6770,6771],{"class":90,"line":693},[88,6772,1160],{},[733,6774,1163],{"id":1163},[11,6776,1166,6777,941,6779,1171],{},[60,6778,940],{},[60,6780,944],{},[52,6782,6783],{"className":676,"code":1174,"language":678,"meta":58,"style":58},[60,6784,6785,6789,6793,6797,6801,6805,6809],{"__ignoreMap":58},[88,6786,6787],{"class":90,"line":91},[88,6788,1181],{},[88,6790,6791],{"class":90,"line":635},[88,6792,1186],{},[88,6794,6795],{"class":90,"line":693},[88,6796,708],{"emptyLinePlaceholder":648},[88,6798,6799],{"class":90,"line":699},[88,6800,1195],{},[88,6802,6803],{"class":90,"line":705},[88,6804,708],{"emptyLinePlaceholder":648},[88,6806,6807],{"class":90,"line":711},[88,6808,1204],{},[88,6810,6811],{"class":90,"line":717},[88,6812,1209],{},[11,6814,1212],{},[52,6816,6817],{"className":676,"code":1215,"language":678,"meta":58,"style":58},[60,6818,6819,6823,6827,6831],{"__ignoreMap":58},[88,6820,6821],{"class":90,"line":91},[88,6822,1222],{},[88,6824,6825],{"class":90,"line":635},[88,6826,708],{"emptyLinePlaceholder":648},[88,6828,6829],{"class":90,"line":693},[88,6830,1231],{},[88,6832,6833],{"class":90,"line":699},[88,6834,1236],{},[11,6836,1239,6837,1243],{},[60,6838,1242],{},[44,6840,6841,1246],{"id":1246},[60,6842,1249],{},[11,6844,1252,6845,941,6847,1257,6849,1260],{},[60,6846,940],{},[60,6848,944],{},[60,6850,1249],{},[52,6852,6853],{"className":676,"code":1263,"language":678,"meta":58,"style":58},[60,6854,6855,6859,6863,6867,6871],{"__ignoreMap":58},[88,6856,6857],{"class":90,"line":91},[88,6858,1270],{},[88,6860,6861],{"class":90,"line":635},[88,6862,708],{"emptyLinePlaceholder":648},[88,6864,6865],{"class":90,"line":693},[88,6866,1279],{},[88,6868,6869],{"class":90,"line":699},[88,6870,708],{"emptyLinePlaceholder":648},[88,6872,6873],{"class":90,"line":705},[88,6874,1288],{},[11,6876,6877,980,6879,1297,6881,1301,6883,1304,6885,941,6887,1309],{},[60,6878,1293],{},[60,6880,1296],{},[60,6882,1300],{},[60,6884,1249],{},[60,6886,940],{},[60,6888,944],{},[44,6890,1312],{"id":1312},[11,6892,1315,6893,1318],{},[60,6894,944],{},[11,6896,1321],{},[1323,6898,6899,6903,6905],{},[583,6900,1327,6901,1330],{},[60,6902,933],{},[583,6904,1333],{},[583,6906,1336,6907,1339],{},[60,6908,1249],{},[44,6910,575],{"id":575},[11,6912,1344],{},[11,6914,1347,6915,1350,6917,1353],{},[60,6916,940],{},[60,6918,944],{},[631,6920,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":6922},[6923,6927,6933,6934,6935],{"id":670,"depth":635,"text":670,"children":6924},[6925,6926],{"id":735,"depth":693,"text":735},{"id":877,"depth":693,"text":877},{"id":929,"depth":635,"text":1364,"children":6928},[6929,6930,6931,6932],{"id":1011,"depth":693,"text":1011},{"id":1078,"depth":693,"text":1078},{"id":1131,"depth":693,"text":1132},{"id":1163,"depth":693,"text":1163},{"id":1246,"depth":635,"text":1371},{"id":1312,"depth":635,"text":1312},{"id":575,"depth":635,"text":575},{},{"title":660,"description":1374},[1381],{"id":1385,"title":1386,"body":6940,"description":3045,"extension":646,"meta":8283,"navigation":648,"path":3047,"publishDate":3048,"published":648,"seo":8284,"stem":3050,"tags":8285,"thumbnail":3052,"updated":3048,"__hash__":3053},{"type":8,"value":6941,"toc":8255},[6942,6944,6949,6959,6961,6965,6971,6995,6997,7001,7003,7005,7007,7043,7045,7047,7049,7055,7057,7059,7063,7069,7233,7241,7243,7245,7323,7325,7327,7395,7397,7399,7421,7423,7425,7431,7553,7555,7557,7559,7561,7563,7569,7577,7643,7647,7651,7655,7691,7695,7697,7699,7755,7759,7761,7765,7863,7869,7873,7877,7931,7933,7935,7937,8025,8027,8031,8047,8053,8055,8057,8129,8133,8135,8137,8245,8247,8249,8251,8253],[11,6943,13],{},[11,6945,1393,6946,1401],{},[1395,6947,1400],{"href":1397,"rel":6948},[1399],[1323,6950,6951,6953,6955,6957],{},[583,6952,1406],{},[583,6954,1381],{},[583,6956,1411],{},[583,6958,1414],{},[44,6960,1406],{"id":1417},[733,6962,6963,1424],{"id":1420},[60,6964,1423],{},[11,6966,6967,1429,6969,1433],{},[60,6968,1423],{},[60,6970,1432],{},[52,6972,6973],{"className":1436,"code":1437,"language":1417,"meta":58,"style":58},[60,6974,6975],{"__ignoreMap":58},[88,6976,6977,6979,6981,6983,6985,6987,6989,6991,6993],{"class":90,"line":91},[88,6978,1444],{"class":112},[88,6980,1448],{"class":1447},[88,6982,1452],{"class":1451},[88,6984,1455],{"class":112},[88,6986,1458],{"class":112},[88,6988,57],{"class":98},[88,6990,1458],{"class":112},[88,6992,1465],{"class":1451},[88,6994,1468],{"class":112},[11,6996,1471],{},[36,6998,6999],{"title":1474,"type":39},[11,7000,1477],{},[44,7002,1381],{"id":678},[733,7004,1482],{"id":1482},[11,7006,1485],{},[52,7008,7009],{"className":676,"code":1488,"language":678,"meta":58,"style":58},[60,7010,7011,7015,7019,7023,7027,7031,7035,7039],{"__ignoreMap":58},[88,7012,7013],{"class":90,"line":91},[88,7014,1495],{},[88,7016,7017],{"class":90,"line":635},[88,7018,708],{"emptyLinePlaceholder":648},[88,7020,7021],{"class":90,"line":693},[88,7022,1504],{},[88,7024,7025],{"class":90,"line":699},[88,7026,1509],{},[88,7028,7029],{"class":90,"line":705},[88,7030,702],{},[88,7032,7033],{"class":90,"line":711},[88,7034,708],{"emptyLinePlaceholder":648},[88,7036,7037],{"class":90,"line":717},[88,7038,1522],{},[88,7040,7041],{"class":90,"line":722},[88,7042,1527],{},[11,7044,1530],{},[733,7046,1534],{"id":1533},[11,7048,1537],{},[11,7050,1540,7051,818,7053,1547],{},[60,7052,1543],{},[60,7054,1546],{},[11,7056,1550],{},[44,7058,1411],{"id":1553},[733,7060,7061],{"id":1556},[60,7062,1559],{},[11,7064,7065,1564,7067,1568],{},[60,7066,1559],{},[60,7068,1567],{},[52,7070,7071],{"className":1571,"code":1572,"language":1573,"meta":58,"style":58},[60,7072,7073,7091,7109,7123,7127,7151,7155,7167,7185,7189,7193,7205,7213,7221,7229],{"__ignoreMap":58},[88,7074,7075,7077,7079,7081,7083,7085,7087,7089],{"class":90,"line":91},[88,7076,1543],{"class":1580},[88,7078,1583],{"class":112},[88,7080,1587],{"class":1586},[88,7082,1590],{"class":112},[88,7084,1593],{"class":1580},[88,7086,1596],{"class":112},[88,7088,1553],{"class":98},[88,7090,1601],{"class":112},[88,7092,7093,7095,7097,7099,7101,7103,7105,7107],{"class":90,"line":635},[88,7094,1543],{"class":1580},[88,7096,1583],{"class":112},[88,7098,1610],{"class":1586},[88,7100,1590],{"class":112},[88,7102,1593],{"class":1580},[88,7104,1596],{"class":112},[88,7106,1619],{"class":98},[88,7108,1601],{"class":112},[88,7110,7111,7113,7115,7117,7119,7121],{"class":90,"line":693},[88,7112,1543],{"class":1580},[88,7114,1628],{"class":1586},[88,7116,1631],{"class":1580},[88,7118,1596],{"class":112},[88,7120,1636],{"class":98},[88,7122,1601],{"class":112},[88,7124,7125],{"class":90,"line":699},[88,7126,708],{"emptyLinePlaceholder":648},[88,7128,7129,7131,7133,7135,7137,7139,7141,7143,7145,7147,7149],{"class":90,"line":705},[88,7130,1647],{"class":1451},[88,7132,1650],{"class":1586},[88,7134,1455],{"class":112},[88,7136,1655],{"class":1586},[88,7138,1658],{"class":112},[88,7140,1662],{"class":1661},[88,7142,1665],{"class":1586},[88,7144,1668],{"class":112},[88,7146,1671],{"class":98},[88,7148,1668],{"class":112},[88,7150,1676],{"class":1586},[88,7152,7153],{"class":90,"line":711},[88,7154,708],{"emptyLinePlaceholder":648},[88,7156,7157,7159,7161,7163,7165],{"class":90,"line":717},[88,7158,1685],{"class":1580},[88,7160,1688],{"class":1586},[88,7162,1691],{"class":112},[88,7164,1694],{"class":1586},[88,7166,1697],{"class":112},[88,7168,7169,7171,7173,7175,7177,7179,7181,7183],{"class":90,"line":722},[88,7170,1702],{"class":1580},[88,7172,1705],{"class":112},[88,7174,1708],{"class":1661},[88,7176,1665],{"class":1447},[88,7178,1668],{"class":112},[88,7180,1715],{"class":98},[88,7182,1668],{"class":112},[88,7184,1676],{"class":1447},[88,7186,7187],{"class":90,"line":728},[88,7188,702],{"class":112},[88,7190,7191],{"class":90,"line":787},[88,7192,708],{"emptyLinePlaceholder":648},[88,7194,7195,7197,7199,7201,7203],{"class":90,"line":793},[88,7196,1559],{"class":1661},[88,7198,1734],{"class":1586},[88,7200,1658],{"class":112},[88,7202,1567],{"class":1661},[88,7204,1741],{"class":1586},[88,7206,7207,7209,7211],{"class":90,"line":799},[88,7208,1746],{"class":112},[88,7210,1749],{"class":94},[88,7212,1468],{"class":112},[88,7214,7215,7217,7219],{"class":90,"line":804},[88,7216,1756],{"class":112},[88,7218,1759],{"class":94},[88,7220,1762],{"class":112},[88,7222,7223,7225,7227],{"class":90,"line":809},[88,7224,1767],{"class":112},[88,7226,1749],{"class":94},[88,7228,1772],{"class":112},[88,7230,7231],{"class":90,"line":1775},[88,7232,1676],{"class":1586},[11,7234,7235,1782,7237,1785,7239,1085],{},[60,7236,1559],{},[60,7238,1559],{},[60,7240,1788],{},[733,7242,1791],{"id":1791},[11,7244,1794],{},[52,7246,7247],{"className":1571,"code":1797,"language":1573,"meta":58,"style":58},[60,7248,7249,7259,7273,7285,7305,7313,7319],{"__ignoreMap":58},[88,7250,7251,7253,7255,7257],{"class":90,"line":91},[88,7252,1804],{"class":1661},[88,7254,1665],{"class":1586},[88,7256,1810],{"class":1809},[88,7258,1813],{"class":1451},[88,7260,7261,7263,7265,7267,7269,7271],{"class":90,"line":635},[88,7262,1818],{"class":1586},[88,7264,1658],{"class":112},[88,7266,1823],{"class":1661},[88,7268,1665],{"class":1586},[88,7270,1828],{"class":1809},[88,7272,1813],{"class":1451},[88,7274,7275,7277,7279,7281,7283],{"class":90,"line":693},[88,7276,1835],{"class":1586},[88,7278,1658],{"class":112},[88,7280,1840],{"class":1586},[88,7282,1843],{"class":112},[88,7284,1846],{"class":1586},[88,7286,7287,7289,7291,7293,7295,7297,7299,7301,7303],{"class":90,"line":699},[88,7288,1851],{"class":112},[88,7290,1583],{"class":112},[88,7292,1856],{"class":112},[88,7294,1828],{"class":1586},[88,7296,1861],{"class":112},[88,7298,1864],{"class":1447},[88,7300,1867],{"class":112},[88,7302,1871],{"class":1870},[88,7304,1874],{"class":112},[88,7306,7307,7309,7311],{"class":90,"line":705},[88,7308,1879],{"class":112},[88,7310,1882],{"class":1586},[88,7312,1885],{"class":112},[88,7314,7315,7317],{"class":90,"line":711},[88,7316,1890],{"class":1586},[88,7318,1885],{"class":112},[88,7320,7321],{"class":90,"line":717},[88,7322,1676],{"class":1586},[11,7324,1899],{},[11,7326,1902],{},[280,7328,7329,7339],{},[283,7330,7331],{},[286,7332,7333,7335,7337],{},[289,7334,1911],{},[289,7336,1914],{},[289,7338,1917],{},[297,7340,7341,7355,7371,7383],{},[286,7342,7343,7345,7351],{},[302,7344,1924],{},[302,7346,7347,1930,7349],{},[60,7348,1929],{},[60,7350,1933],{},[302,7352,1936,7353],{},[60,7354,1939],{},[286,7356,7357,7359,7365],{},[302,7358,1944],{},[302,7360,7361,1930,7363],{},[60,7362,1949],{},[60,7364,1952],{},[302,7366,7367,1930,7369],{},[60,7368,1957],{},[60,7370,1960],{},[286,7372,7373,7375,7379],{},[302,7374,1965],{},[302,7376,1968,7377],{},[60,7378,1952],{},[302,7380,7381],{},[60,7382,1823],{},[286,7384,7385,7387,7391],{},[302,7386,1979],{},[302,7388,1982,7389],{},[60,7390,1985],{},[302,7392,1988,7393],{},[60,7394,1985],{},[733,7396,1993],{"id":1993},[11,7398,1996],{},[52,7400,7401],{"className":1571,"code":1999,"language":1573,"meta":58,"style":58},[60,7402,7403],{"__ignoreMap":58},[88,7404,7405,7407,7409,7411,7413,7415,7417,7419],{"class":90,"line":91},[88,7406,2006],{"class":1661},[88,7408,1665],{"class":1586},[88,7410,2011],{"class":1809},[88,7412,2014],{"class":1451},[88,7414,2017],{"class":1586},[88,7416,2020],{"class":112},[88,7418,106],{"class":105},[88,7420,1676],{"class":1586},[11,7422,2027],{},[733,7424,2030],{"id":2030},[11,7426,2033,7427,2037,7429,2041],{},[60,7428,2036],{},[60,7430,2040],{},[52,7432,7433],{"className":1571,"code":2044,"language":1573,"meta":58,"style":58},[60,7434,7435,7445,7465,7469,7473,7491,7505,7515,7519,7523,7549],{"__ignoreMap":58},[88,7436,7437,7439,7441,7443],{"class":90,"line":91},[88,7438,2051],{"class":1451},[88,7440,2054],{"class":94},[88,7442,2057],{"class":112},[88,7444,2060],{"class":112},[88,7446,7447,7449,7451,7453,7455,7457,7459,7461,7463],{"class":90,"line":635},[88,7448,2065],{"class":1447},[88,7450,1867],{"class":112},[88,7452,1688],{"class":112},[88,7454,2072],{"class":1809},[88,7456,1867],{"class":112},[88,7458,2077],{"class":94},[88,7460,2080],{"class":112},[88,7462,2014],{"class":1451},[88,7464,2085],{"class":94},[88,7466,7467],{"class":90,"line":693},[88,7468,702],{"class":112},[88,7470,7471],{"class":90,"line":699},[88,7472,708],{"emptyLinePlaceholder":648},[88,7474,7475,7477,7479,7481,7483,7485,7487,7489],{"class":90,"line":705},[88,7476,2098],{"class":1451},[88,7478,2101],{"class":1661},[88,7480,2104],{"class":112},[88,7482,2107],{"class":1809},[88,7484,2110],{"class":112},[88,7486,2054],{"class":94},[88,7488,2080],{"class":112},[88,7490,2060],{"class":112},[88,7492,7493,7495,7497,7499,7501,7503],{"class":90,"line":711},[88,7494,2121],{"class":1451},[88,7496,2124],{"class":1586},[88,7498,2057],{"class":112},[88,7500,2129],{"class":112},[88,7502,2014],{"class":1451},[88,7504,2060],{"class":112},[88,7506,7507,7509,7511,7513],{"class":90,"line":717},[88,7508,2138],{"class":1661},[88,7510,1665],{"class":1447},[88,7512,2143],{"class":105},[88,7514,1676],{"class":1447},[88,7516,7517],{"class":90,"line":722},[88,7518,2150],{"class":112},[88,7520,7521],{"class":90,"line":728},[88,7522,708],{"emptyLinePlaceholder":648},[88,7524,7525,7527,7529,7531,7533,7535,7537,7539,7541,7543,7545,7547],{"class":90,"line":787},[88,7526,2159],{"class":1580},[88,7528,2162],{"class":112},[88,7530,1448],{"class":1447},[88,7532,1452],{"class":1451},[88,7534,1455],{"class":112},[88,7536,1458],{"class":112},[88,7538,2173],{"class":98},[88,7540,1458],{"class":112},[88,7542,2107],{"class":1451},[88,7544,2180],{"class":112},[88,7546,2183],{"class":1586},[88,7548,2186],{"class":112},[88,7550,7551],{"class":90,"line":793},[88,7552,702],{"class":112},[11,7554,2193],{},[733,7556,2196],{"id":2196},[11,7558,2199],{},[11,7560,2202],{},[44,7562,1414],{"id":2205},[733,7564,7565,818,7567],{"id":2208},[60,7566,2211],{},[60,7568,940],{},[11,7570,7571,2218,7573,2222,7575,2225],{},[60,7572,2211],{},[60,7574,2221],{},[60,7576,940],{},[52,7578,7579],{"className":2228,"code":2229,"language":2205,"meta":58,"style":58},[60,7580,7581,7605,7609,7621,7639],{"__ignoreMap":58},[88,7582,7583,7585,7587,7589,7591,7593,7595,7597,7599,7601,7603],{"class":90,"line":91},[88,7584,1647],{"class":1451},[88,7586,1650],{"class":1586},[88,7588,1455],{"class":112},[88,7590,1655],{"class":1586},[88,7592,1658],{"class":112},[88,7594,1662],{"class":1661},[88,7596,1665],{"class":1586},[88,7598,1668],{"class":112},[88,7600,1671],{"class":98},[88,7602,1668],{"class":112},[88,7604,1676],{"class":1586},[88,7606,7607],{"class":90,"line":635},[88,7608,708],{"emptyLinePlaceholder":648},[88,7610,7611,7613,7615,7617,7619],{"class":90,"line":693},[88,7612,1685],{"class":1580},[88,7614,1688],{"class":1586},[88,7616,1691],{"class":112},[88,7618,1694],{"class":1586},[88,7620,1697],{"class":112},[88,7622,7623,7625,7627,7629,7631,7633,7635,7637],{"class":90,"line":699},[88,7624,1702],{"class":1580},[88,7626,1705],{"class":112},[88,7628,1708],{"class":1661},[88,7630,1665],{"class":1447},[88,7632,1668],{"class":112},[88,7634,1715],{"class":98},[88,7636,1668],{"class":112},[88,7638,1676],{"class":1447},[88,7640,7641],{"class":90,"line":705},[88,7642,702],{"class":112},[11,7644,2296,7645,2299],{},[60,7646,1691],{},[733,7648,7649],{"id":2302},[60,7650,2302],{},[11,7652,2307,7653,2310],{},[60,7654,2302],{},[52,7656,7657],{"className":2228,"code":2313,"language":2205,"meta":58,"style":58},[60,7658,7659,7669,7679,7687],{"__ignoreMap":58},[88,7660,7661,7663,7665,7667],{"class":90,"line":91},[88,7662,2051],{"class":1451},[88,7664,2322],{"class":94},[88,7666,2057],{"class":112},[88,7668,2060],{"class":112},[88,7670,7671,7673,7675,7677],{"class":90,"line":635},[88,7672,2331],{"class":1451},[88,7674,2334],{"class":1447},[88,7676,1867],{"class":112},[88,7678,2339],{"class":94},[88,7680,7681,7683,7685],{"class":90,"line":693},[88,7682,2344],{"class":1447},[88,7684,1867],{"class":112},[88,7686,2349],{"class":94},[88,7688,7689],{"class":90,"line":699},[88,7690,702],{"class":112},[11,7692,7693,2358],{},[60,7694,2302],{},[733,7696,2361],{"id":2361},[11,7698,2364],{},[52,7700,7701],{"className":1571,"code":2367,"language":1573,"meta":58,"style":58},[60,7702,7703,7729,7751],{"__ignoreMap":58},[88,7704,7705,7707,7709,7711,7713,7715,7717,7719,7721,7723,7725,7727],{"class":90,"line":91},[88,7706,2098],{"class":1451},[88,7708,2124],{"class":1661},[88,7710,1665],{"class":112},[88,7712,2380],{"class":1809},[88,7714,1867],{"class":112},[88,7716,2385],{"class":94},[88,7718,1658],{"class":112},[88,7720,2390],{"class":94},[88,7722,1444],{"class":112},[88,7724,2395],{"class":94},[88,7726,2398],{"class":112},[88,7728,2060],{"class":112},[88,7730,7731,7733,7735,7737,7739,7741,7743,7745,7747,7749],{"class":90,"line":635},[88,7732,2405],{"class":1586},[88,7734,1658],{"class":112},[88,7736,2410],{"class":1661},[88,7738,1665],{"class":1447},[88,7740,2380],{"class":1586},[88,7742,1658],{"class":112},[88,7744,2419],{"class":1586},[88,7746,1658],{"class":112},[88,7748,2424],{"class":1586},[88,7750,1676],{"class":1447},[88,7752,7753],{"class":90,"line":693},[88,7754,702],{"class":112},[11,7756,2433,7757,2437],{},[60,7758,2436],{},[733,7760,2440],{"id":2440},[11,7762,2443,7763,2447],{},[60,7764,2446],{},[52,7766,7767],{"className":2228,"code":2450,"language":2205,"meta":58,"style":58},[60,7768,7769,7779,7787,7791,7795,7831,7859],{"__ignoreMap":58},[88,7770,7771,7773,7775,7777],{"class":90,"line":91},[88,7772,2051],{"class":1451},[88,7774,2459],{"class":94},[88,7776,2057],{"class":112},[88,7778,2060],{"class":112},[88,7780,7781,7783,7785],{"class":90,"line":635},[88,7782,2468],{"class":1447},[88,7784,1867],{"class":112},[88,7786,2339],{"class":94},[88,7788,7789],{"class":90,"line":693},[88,7790,702],{"class":112},[88,7792,7793],{"class":90,"line":699},[88,7794,708],{"emptyLinePlaceholder":648},[88,7796,7797,7799,7801,7803,7805,7807,7809,7811,7813,7815,7817,7819,7821,7823,7825,7827,7829],{"class":90,"line":705},[88,7798,2098],{"class":1451},[88,7800,2487],{"class":1661},[88,7802,1444],{"class":112},[88,7804,2492],{"class":94},[88,7806,2495],{"class":1451},[88,7808,2459],{"class":94},[88,7810,2500],{"class":112},[88,7812,2503],{"class":1809},[88,7814,1867],{"class":112},[88,7816,2508],{"class":94},[88,7818,2511],{"class":1586},[88,7820,1861],{"class":112},[88,7822,2334],{"class":1809},[88,7824,1867],{"class":112},[88,7826,2077],{"class":94},[88,7828,2080],{"class":112},[88,7830,2060],{"class":112},[88,7832,7833,7835,7837,7839,7841,7843,7845,7847,7849,7851,7853,7855,7857],{"class":90,"line":711},[88,7834,2159],{"class":1580},[88,7836,2530],{"class":1586},[88,7838,1658],{"class":112},[88,7840,2535],{"class":1661},[88,7842,1665],{"class":1447},[88,7844,2540],{"class":1809},[88,7846,2014],{"class":1451},[88,7848,2545],{"class":1586},[88,7850,1658],{"class":112},[88,7852,2072],{"class":1586},[88,7854,2552],{"class":112},[88,7856,2334],{"class":1586},[88,7858,1676],{"class":1447},[88,7860,7861],{"class":90,"line":717},[88,7862,702],{"class":112},[11,7864,2563,7865,2566,7867,2569],{},[60,7866,2492],{},[60,7868,2072],{},[733,7870,7871,2576],{"id":2572},[60,7872,2575],{},[11,7874,7875,2581],{},[60,7876,2575],{},[52,7878,7879],{"className":2228,"code":2584,"language":2205,"meta":58,"style":58},[60,7880,7881,7891,7899,7907,7911,7915,7927],{"__ignoreMap":58},[88,7882,7883,7885,7887,7889],{"class":90,"line":91},[88,7884,2051],{"class":1451},[88,7886,2322],{"class":94},[88,7888,2057],{"class":112},[88,7890,2060],{"class":112},[88,7892,7893,7895,7897],{"class":90,"line":635},[88,7894,2468],{"class":1447},[88,7896,1867],{"class":112},[88,7898,2339],{"class":94},[88,7900,7901,7903,7905],{"class":90,"line":693},[88,7902,2344],{"class":1447},[88,7904,1867],{"class":112},[88,7906,2349],{"class":94},[88,7908,7909],{"class":90,"line":699},[88,7910,702],{"class":112},[88,7912,7913],{"class":90,"line":705},[88,7914,708],{"emptyLinePlaceholder":648},[88,7916,7917,7919,7921,7923,7925],{"class":90,"line":711},[88,7918,2051],{"class":1451},[88,7920,2627],{"class":94},[88,7922,2057],{"class":112},[88,7924,2632],{"class":112},[88,7926,2635],{"class":94},[88,7928,7929],{"class":90,"line":717},[88,7930,2641],{"class":2640},[11,7932,2644],{},[733,7934,2647],{"id":2647},[11,7936,2650],{},[52,7938,7939],{"className":2228,"code":2653,"language":2205,"meta":58,"style":58},[60,7940,7941,7951,7959,7967,7971,7975,7995,7999,8003,8021],{"__ignoreMap":58},[88,7942,7943,7945,7947,7949],{"class":90,"line":91},[88,7944,2051],{"class":1451},[88,7946,2322],{"class":94},[88,7948,2057],{"class":112},[88,7950,2060],{"class":112},[88,7952,7953,7955,7957],{"class":90,"line":635},[88,7954,2468],{"class":1447},[88,7956,1867],{"class":112},[88,7958,2339],{"class":94},[88,7960,7961,7963,7965],{"class":90,"line":693},[88,7962,2344],{"class":1447},[88,7964,1867],{"class":112},[88,7966,2349],{"class":94},[88,7968,7969],{"class":90,"line":699},[88,7970,702],{"class":112},[88,7972,7973],{"class":90,"line":705},[88,7974,708],{"emptyLinePlaceholder":648},[88,7976,7977,7979,7981,7983,7985,7987,7989,7991,7993],{"class":90,"line":711},[88,7978,2051],{"class":1451},[88,7980,2696],{"class":94},[88,7982,2057],{"class":112},[88,7984,2322],{"class":94},[88,7986,2703],{"class":1586},[88,7988,1668],{"class":112},[88,7990,2072],{"class":98},[88,7992,1668],{"class":112},[88,7994,1043],{"class":1586},[88,7996,7997],{"class":90,"line":717},[88,7998,2716],{"class":2640},[88,8000,8001],{"class":90,"line":722},[88,8002,708],{"emptyLinePlaceholder":648},[88,8004,8005,8007,8009,8011,8013,8015,8017,8019],{"class":90,"line":728},[88,8006,2051],{"class":1451},[88,8008,2727],{"class":94},[88,8010,2057],{"class":112},[88,8012,2322],{"class":94},[88,8014,2703],{"class":1586},[88,8016,2575],{"class":112},[88,8018,2322],{"class":94},[88,8020,1043],{"class":1586},[88,8022,8023],{"class":90,"line":787},[88,8024,2744],{"class":2640},[733,8026,2747],{"id":2747},[11,8028,8029,2753],{},[60,8030,2752],{},[52,8032,8033],{"className":2228,"code":2756,"language":2205,"meta":58,"style":58},[60,8034,8035],{"__ignoreMap":58},[88,8036,8037,8039,8041,8043,8045],{"class":90,"line":91},[88,8038,2752],{"class":1451},[88,8040,2765],{"class":1451},[88,8042,2768],{"class":1586},[88,8044,1867],{"class":112},[88,8046,2349],{"class":94},[11,8048,2775,8049,2779,8051,2782],{},[60,8050,2778],{},[60,8052,2752],{},[733,8054,2785],{"id":2785},[11,8056,2788],{},[52,8058,8059],{"className":2228,"code":2791,"language":2205,"meta":58,"style":58},[60,8060,8061,8071,8087,8091,8095,8105,8125],{"__ignoreMap":58},[88,8062,8063,8065,8067,8069],{"class":90,"line":91},[88,8064,2051],{"class":1451},[88,8066,2800],{"class":94},[88,8068,2057],{"class":112},[88,8070,2060],{"class":112},[88,8072,8073,8075,8077,8079,8081,8083,8085],{"class":90,"line":635},[88,8074,2809],{"class":1447},[88,8076,1665],{"class":112},[88,8078,2814],{"class":1809},[88,8080,1867],{"class":112},[88,8082,2819],{"class":94},[88,8084,2822],{"class":112},[88,8086,2349],{"class":94},[88,8088,8089],{"class":90,"line":693},[88,8090,702],{"class":112},[88,8092,8093],{"class":90,"line":699},[88,8094,708],{"emptyLinePlaceholder":648},[88,8096,8097,8099,8101,8103],{"class":90,"line":705},[88,8098,2051],{"class":1451},[88,8100,2839],{"class":94},[88,8102,2057],{"class":112},[88,8104,2060],{"class":112},[88,8106,8107,8109,8111,8113,8115,8117,8119,8121,8123],{"class":90,"line":711},[88,8108,2809],{"class":1447},[88,8110,1867],{"class":112},[88,8112,1688],{"class":112},[88,8114,2814],{"class":1809},[88,8116,1867],{"class":112},[88,8118,2819],{"class":94},[88,8120,2080],{"class":112},[88,8122,2014],{"class":1451},[88,8124,2349],{"class":94},[88,8126,8127],{"class":90,"line":717},[88,8128,702],{"class":112},[11,8130,2870,8131,2874],{},[60,8132,2873],{},[733,8134,2877],{"id":2877},[11,8136,2880],{},[52,8138,8139],{"className":2228,"code":2883,"language":2205,"meta":58,"style":58},[60,8140,8141,8165,8181,8185,8189,8203,8207,8219,8241],{"__ignoreMap":58},[88,8142,8143,8145,8147,8149,8151,8153,8155,8157,8159,8161,8163],{"class":90,"line":91},[88,8144,2098],{"class":1451},[88,8146,2892],{"class":1661},[88,8148,1665],{"class":112},[88,8150,2814],{"class":1809},[88,8152,1867],{"class":112},[88,8154,2901],{"class":94},[88,8156,2822],{"class":112},[88,8158,2906],{"class":1809},[88,8160,2909],{"class":112},[88,8162,2077],{"class":94},[88,8164,2060],{"class":112},[88,8166,8167,8169,8171,8173,8175,8177,8179],{"class":90,"line":635},[88,8168,2159],{"class":1580},[88,8170,2920],{"class":112},[88,8172,2906],{"class":1586},[88,8174,2552],{"class":112},[88,8176,1596],{"class":112},[88,8178,2929],{"class":98},[88,8180,1601],{"class":112},[88,8182,8183],{"class":90,"line":693},[88,8184,702],{"class":112},[88,8186,8187],{"class":90,"line":699},[88,8188,708],{"emptyLinePlaceholder":648},[88,8190,8191,8193,8195,8197,8199,8201],{"class":90,"line":705},[88,8192,1647],{"class":1451},[88,8194,2906],{"class":1586},[88,8196,1867],{"class":112},[88,8198,2901],{"class":94},[88,8200,2057],{"class":112},[88,8202,2954],{"class":105},[88,8204,8205],{"class":90,"line":711},[88,8206,708],{"emptyLinePlaceholder":648},[88,8208,8209,8211,8213,8215,8217],{"class":90,"line":717},[88,8210,1685],{"class":1580},[88,8212,1688],{"class":1586},[88,8214,2967],{"class":1661},[88,8216,2970],{"class":1586},[88,8218,1697],{"class":112},[88,8220,8221,8223,8225,8227,8229,8231,8233,8235,8237,8239],{"class":90,"line":722},[88,8222,2405],{"class":1586},[88,8224,1658],{"class":112},[88,8226,2410],{"class":1661},[88,8228,1665],{"class":1447},[88,8230,2814],{"class":1586},[88,8232,1658],{"class":112},[88,8234,2989],{"class":1661},[88,8236,1665],{"class":1447},[88,8238,2994],{"class":105},[88,8240,2997],{"class":1447},[88,8242,8243],{"class":90,"line":728},[88,8244,702],{"class":112},[11,8246,3004],{},[44,8248,575],{"id":575},[11,8250,3009],{},[11,8252,3012],{},[631,8254,3015],{},{"title":58,"searchDepth":635,"depth":635,"links":8256},[8257,8260,8264,8271,8282],{"id":1417,"depth":635,"text":1406,"children":8258},[8259],{"id":1420,"depth":693,"text":1420},{"id":678,"depth":635,"text":1381,"children":8261},[8262,8263],{"id":1482,"depth":693,"text":1482},{"id":1533,"depth":693,"text":1534},{"id":1553,"depth":635,"text":1411,"children":8265},[8266,8267,8268,8269,8270],{"id":1556,"depth":693,"text":1559},{"id":1791,"depth":693,"text":1791},{"id":1993,"depth":693,"text":1993},{"id":2030,"depth":693,"text":2030},{"id":2196,"depth":693,"text":2196},{"id":2205,"depth":635,"text":1414,"children":8272},[8273,8274,8275,8276,8277,8278,8279,8280,8281],{"id":2208,"depth":693,"text":3035},{"id":2302,"depth":693,"text":2302},{"id":2361,"depth":693,"text":2361},{"id":2440,"depth":693,"text":2440},{"id":2572,"depth":693,"text":2572},{"id":2647,"depth":693,"text":2647},{"id":2747,"depth":693,"text":2747},{"id":2785,"depth":693,"text":2785},{"id":2877,"depth":693,"text":2877},{"id":575,"depth":635,"text":575},{},{"title":1386,"description":3045},[1411,1414],{"id":3055,"title":3056,"body":8287,"description":3533,"extension":646,"meta":8661,"navigation":648,"path":3535,"publishDate":3536,"published":648,"seo":8662,"stem":3538,"tags":8663,"thumbnail":3541,"updated":3536,"__hash__":3542},{"type":8,"value":8288,"toc":8651},[8289,8291,8293,8299,8301,8303,8305,8307,8373,8375,8379,8381,8405,8411,8455,8457,8459,8465,8481,8483,8485,8487,8489,8491,8575,8577,8587,8589,8591,8593,8613,8617,8619,8621,8625,8627,8629,8641,8643,8645,8647,8649],[11,8290,13],{},[11,8292,3063],{},[11,8294,3066,8295,1930,8297,3073],{},[60,8296,3069],{},[60,8298,3072],{},[44,8300,3076],{"id":3076},[11,8302,3079],{},[11,8304,3082],{},[11,8306,3085],{},[280,8308,8309,8321],{},[283,8310,8311],{},[286,8312,8313,8315,8317,8319],{},[289,8314,291],{},[289,8316,3069],{},[289,8318,3072],{},[289,8320,3100],{},[297,8322,8323,8333,8343,8353,8363],{},[286,8324,8325,8327,8329,8331],{},[302,8326,3107],{},[302,8328,3110],{},[302,8330,3110],{},[302,8332,3115],{},[286,8334,8335,8337,8339,8341],{},[302,8336,3120],{},[302,8338,3123],{},[302,8340,3123],{},[302,8342,3128],{},[286,8344,8345,8347,8349,8351],{},[302,8346,3133],{},[302,8348,3136],{},[302,8350,3139],{},[302,8352,3136],{},[286,8354,8355,8357,8359,8361],{},[302,8356,3146],{},[302,8358,3149],{},[302,8360,3152],{},[302,8362,3149],{},[286,8364,8365,8367,8369,8371],{},[302,8366,3159],{},[302,8368,3162],{},[302,8370,3165],{},[302,8372,3168],{},[44,8374,3069],{"id":3171},[11,8376,8377,3176],{},[60,8378,3069],{},[11,8380,3179],{},[52,8382,8383],{"className":676,"code":3182,"language":678,"meta":58,"style":58},[60,8384,8385,8389,8393,8397,8401],{"__ignoreMap":58},[88,8386,8387],{"class":90,"line":91},[88,8388,3189],{},[88,8390,8391],{"class":90,"line":635},[88,8392,708],{"emptyLinePlaceholder":648},[88,8394,8395],{"class":90,"line":693},[88,8396,3198],{},[88,8398,8399],{"class":90,"line":699},[88,8400,708],{"emptyLinePlaceholder":648},[88,8402,8403],{"class":90,"line":705},[88,8404,3207],{},[11,8406,3210,8407,3214,8409,3218],{},[60,8408,3213],{},[60,8410,3217],{},[52,8412,8413],{"className":676,"code":3221,"language":678,"meta":58,"style":58},[60,8414,8415,8419,8423,8427,8431,8435,8439,8443,8447,8451],{"__ignoreMap":58},[88,8416,8417],{"class":90,"line":91},[88,8418,3228],{},[88,8420,8421],{"class":90,"line":635},[88,8422,3233],{},[88,8424,8425],{"class":90,"line":693},[88,8426,3238],{},[88,8428,8429],{"class":90,"line":699},[88,8430,702],{},[88,8432,8433],{"class":90,"line":705},[88,8434,708],{"emptyLinePlaceholder":648},[88,8436,8437],{"class":90,"line":711},[88,8438,3251],{},[88,8440,8441],{"class":90,"line":717},[88,8442,708],{"emptyLinePlaceholder":648},[88,8444,8445],{"class":90,"line":722},[88,8446,3260],{},[88,8448,8449],{"class":90,"line":728},[88,8450,3265],{},[88,8452,8453],{"class":90,"line":787},[88,8454,1676],{},[11,8456,3272],{},[44,8458,3072],{"id":3275},[11,8460,8461,3280,8463,3283],{},[60,8462,3072],{},[60,8464,3069],{},[52,8466,8467],{"className":676,"code":3286,"language":678,"meta":58,"style":58},[60,8468,8469,8473,8477],{"__ignoreMap":58},[88,8470,8471],{"class":90,"line":91},[88,8472,3293],{},[88,8474,8475],{"class":90,"line":635},[88,8476,708],{"emptyLinePlaceholder":648},[88,8478,8479],{"class":90,"line":693},[88,8480,3302],{},[11,8482,3305],{},[11,8484,3308],{},[44,8486,3100],{"id":3311},[11,8488,3314],{},[11,8490,3317],{},[52,8492,8493],{"className":676,"code":3320,"language":678,"meta":58,"style":58},[60,8494,8495,8499,8503,8507,8511,8515,8519,8523,8527,8531,8535,8539,8543,8547,8551,8555,8559,8563,8567,8571],{"__ignoreMap":58},[88,8496,8497],{"class":90,"line":91},[88,8498,3327],{},[88,8500,8501],{"class":90,"line":635},[88,8502,708],{"emptyLinePlaceholder":648},[88,8504,8505],{"class":90,"line":693},[88,8506,3336],{},[88,8508,8509],{"class":90,"line":699},[88,8510,3341],{},[88,8512,8513],{"class":90,"line":705},[88,8514,708],{"emptyLinePlaceholder":648},[88,8516,8517],{"class":90,"line":711},[88,8518,3350],{},[88,8520,8521],{"class":90,"line":717},[88,8522,3355],{},[88,8524,8525],{"class":90,"line":722},[88,8526,3360],{},[88,8528,8529],{"class":90,"line":728},[88,8530,3365],{},[88,8532,8533],{"class":90,"line":787},[88,8534,3370],{},[88,8536,8537],{"class":90,"line":793},[88,8538,2150],{},[88,8540,8541],{"class":90,"line":799},[88,8542,702],{},[88,8544,8545],{"class":90,"line":804},[88,8546,708],{"emptyLinePlaceholder":648},[88,8548,8549],{"class":90,"line":809},[88,8550,3387],{},[88,8552,8553],{"class":90,"line":1775},[88,8554,3341],{},[88,8556,8557],{"class":90,"line":3394},[88,8558,3397],{},[88,8560,8561],{"class":90,"line":3400},[88,8562,3403],{},[88,8564,8565],{"class":90,"line":3406},[88,8566,708],{"emptyLinePlaceholder":648},[88,8568,8569],{"class":90,"line":3411},[88,8570,3414],{},[88,8572,8573],{"class":90,"line":3417},[88,8574,702],{},[11,8576,3422],{},[1323,8578,8579,8581,8583,8585],{},[583,8580,3427],{},[583,8582,3430],{},[583,8584,3433],{},[583,8586,3436],{},[44,8588,3439],{"id":3439},[11,8590,3442],{},[11,8592,3445],{},[52,8594,8595],{"className":676,"code":3448,"language":678,"meta":58,"style":58},[60,8596,8597,8601,8605,8609],{"__ignoreMap":58},[88,8598,8599],{"class":90,"line":91},[88,8600,3455],{},[88,8602,8603],{"class":90,"line":635},[88,8604,708],{"emptyLinePlaceholder":648},[88,8606,8607],{"class":90,"line":693},[88,8608,3464],{},[88,8610,8611],{"class":90,"line":699},[88,8612,3469],{},[36,8614,8615],{"title":3472,"type":39},[11,8616,3475],{},[44,8618,3478],{"id":3478},[11,8620,3481],{},[36,8622,8623],{"title":3484,"type":3485},[11,8624,3488],{},[44,8626,3491],{"id":3491},[11,8628,3494],{},[1323,8630,8631,8635,8639],{},[583,8632,3499,8633],{},[60,8634,3069],{},[583,8636,3504,8637],{},[60,8638,3072],{},[583,8640,3509],{},[11,8642,3512],{},[44,8644,575],{"id":575},[11,8646,3517],{},[11,8648,3520],{},[631,8650,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":8652},[8653,8654,8655,8656,8657,8658,8659,8660],{"id":3076,"depth":635,"text":3076},{"id":3171,"depth":635,"text":3069},{"id":3275,"depth":635,"text":3072},{"id":3311,"depth":635,"text":3100},{"id":3439,"depth":635,"text":3439},{"id":3478,"depth":635,"text":3478},{"id":3491,"depth":635,"text":3491},{"id":575,"depth":635,"text":575},{},{"title":3056,"description":3533},[3540,3100],{"id":3544,"title":3545,"body":8665,"description":4022,"extension":646,"meta":9032,"navigation":648,"path":4024,"publishDate":4025,"published":648,"seo":9033,"stem":4027,"tags":9034,"thumbnail":4029,"updated":4025,"__hash__":4030},{"type":8,"value":8666,"toc":9022},[8667,8669,8674,8676,8678,8680,8682,8684,8696,8698,8700,8702,8758,8760,8786,8788,8790,8792,8794,8804,8806,8842,8844,8846,8848,8850,8860,8864,8866,8868,8870,8888,8890,8892,8894,8896,8898,8910,8912,8914,8978,8980,8985,8991,8997,8999,9013,9015,9020],[11,8668,13],{},[11,8670,3552,8671,3558],{},[1395,8672,3557],{"href":3555,"rel":8673},[1399],[11,8675,3561],{},[44,8677,3565],{"id":3564},[11,8679,3568],{},[11,8681,3571],{},[11,8683,3574],{},[1323,8685,8686,8688,8690,8692,8694],{},[583,8687,3579],{},[583,8689,3582],{},[583,8691,3585],{},[583,8693,3588],{},[583,8695,3591],{},[44,8697,3579],{"id":3579},[11,8699,3596],{},[11,8701,3599],{},[52,8703,8704],{"className":676,"code":3602,"language":678,"meta":58,"style":58},[60,8705,8706,8710,8714,8718,8722,8726,8730,8734,8738,8742,8746,8750,8754],{"__ignoreMap":58},[88,8707,8708],{"class":90,"line":91},[88,8709,3609],{},[88,8711,8712],{"class":90,"line":635},[88,8713,3614],{},[88,8715,8716],{"class":90,"line":693},[88,8717,702],{},[88,8719,8720],{"class":90,"line":699},[88,8721,708],{"emptyLinePlaceholder":648},[88,8723,8724],{"class":90,"line":705},[88,8725,3627],{},[88,8727,8728],{"class":90,"line":711},[88,8729,3632],{},[88,8731,8732],{"class":90,"line":717},[88,8733,702],{},[88,8735,8736],{"class":90,"line":722},[88,8737,708],{"emptyLinePlaceholder":648},[88,8739,8740],{"class":90,"line":728},[88,8741,3645],{},[88,8743,8744],{"class":90,"line":787},[88,8745,3650],{},[88,8747,8748],{"class":90,"line":793},[88,8749,702],{},[88,8751,8752],{"class":90,"line":799},[88,8753,708],{"emptyLinePlaceholder":648},[88,8755,8756],{"class":90,"line":804},[88,8757,3663],{},[11,8759,3666],{},[580,8761,8762,8766,8772,8778],{},[583,8763,8764,3674],{},[60,8765,3673],{},[583,8767,8768,3679,8770,3683],{},[60,8769,3673],{},[60,8771,3682],{},[583,8773,8774,3679,8776,3683],{},[60,8775,3682],{},[60,8777,3690],{},[583,8779,8780,1930,8782,1930,8784,3699],{},[60,8781,3690],{},[60,8783,3682],{},[60,8785,3673],{},[11,8787,3702],{},[44,8789,3582],{"id":3705},[11,8791,3708],{},[11,8793,3711],{},[1323,8795,8796,8798,8800,8802],{},[583,8797,3716],{},[583,8799,3719],{},[583,8801,3722],{},[583,8803,3725],{},[11,8805,3728],{},[52,8807,8808],{"className":676,"code":3731,"language":678,"meta":58,"style":58},[60,8809,8810,8814,8818,8822,8826,8830,8834,8838],{"__ignoreMap":58},[88,8811,8812],{"class":90,"line":91},[88,8813,3738],{},[88,8815,8816],{"class":90,"line":635},[88,8817,3743],{},[88,8819,8820],{"class":90,"line":693},[88,8821,3748],{},[88,8823,8824],{"class":90,"line":699},[88,8825,1676],{},[88,8827,8828],{"class":90,"line":705},[88,8829,708],{"emptyLinePlaceholder":648},[88,8831,8832],{"class":90,"line":711},[88,8833,3761],{},[88,8835,8836],{"class":90,"line":717},[88,8837,3766],{},[88,8839,8840],{"class":90,"line":722},[88,8841,3771],{},[11,8843,3774],{},[44,8845,3585],{"id":3585},[11,8847,3779],{},[11,8849,3782],{},[1323,8851,8852,8856,8858],{},[583,8853,8854,3790],{},[60,8855,3789],{},[583,8857,3793],{},[583,8859,3796],{},[11,8861,8862,3801],{},[60,8863,3789],{},[11,8865,3804],{},[44,8867,3588],{"id":3588},[11,8869,3809],{},[1323,8871,8872,8880,8884],{},[583,8873,3814,8874,1930,8876,1930,8878],{},[60,8875,3817],{},[60,8877,3820],{},[60,8879,3823],{},[583,8881,8882,3829],{},[60,8883,3828],{},[583,8885,8886,3790],{},[60,8887,3834],{},[11,8889,3837],{},[11,8891,3840],{},[44,8893,3591],{"id":3591},[11,8895,3845],{},[11,8897,3848],{},[580,8899,8900,8902,8904,8906,8908],{},[583,8901,3853],{},[583,8903,3856],{},[583,8905,3859],{},[583,8907,3862],{},[583,8909,3865],{},[44,8911,3868],{"id":3868},[11,8913,3871],{},[52,8915,8916],{"className":676,"code":3874,"language":678,"meta":58,"style":58},[60,8917,8918,8922,8926,8930,8934,8938,8942,8946,8950,8954,8958,8962,8966,8970,8974],{"__ignoreMap":58},[88,8919,8920],{"class":90,"line":91},[88,8921,3881],{},[88,8923,8924],{"class":90,"line":635},[88,8925,708],{"emptyLinePlaceholder":648},[88,8927,8928],{"class":90,"line":693},[88,8929,3890],{},[88,8931,8932],{"class":90,"line":699},[88,8933,3895],{},[88,8935,8936],{"class":90,"line":705},[88,8937,3900],{},[88,8939,8940],{"class":90,"line":711},[88,8941,708],{"emptyLinePlaceholder":648},[88,8943,8944],{"class":90,"line":717},[88,8945,3909],{},[88,8947,8948],{"class":90,"line":722},[88,8949,3914],{},[88,8951,8952],{"class":90,"line":728},[88,8953,3919],{},[88,8955,8956],{"class":90,"line":787},[88,8957,708],{"emptyLinePlaceholder":648},[88,8959,8960],{"class":90,"line":793},[88,8961,3928],{},[88,8963,8964],{"class":90,"line":799},[88,8965,3933],{},[88,8967,8968],{"class":90,"line":804},[88,8969,3919],{},[88,8971,8972],{"class":90,"line":809},[88,8973,708],{"emptyLinePlaceholder":648},[88,8975,8976],{"class":90,"line":1775},[88,8977,3946],{},[11,8979,3949],{},[52,8981,8983],{"className":8982,"code":3953,"language":57,"meta":58},[55],[60,8984,3953],{"__ignoreMap":58},[11,8986,3958,8987,3962,8989,3966],{},[60,8988,3961],{},[60,8990,3965],{},[11,8992,3969,8993,3972,8995,3975],{},[60,8994,3828],{},[60,8996,3789],{},[44,8998,575],{"id":575},[1323,9000,9001,9003,9005,9007,9009,9011],{},[583,9002,3982],{},[583,9004,3985],{},[583,9006,3988],{},[583,9008,3991],{},[583,9010,3994],{},[583,9012,3997],{},[11,9014,4000],{},[11,9016,4003,9017,4009],{},[1395,9018,4008],{"href":4006,"rel":9019},[1399],[631,9021,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":9023},[9024,9025,9026,9027,9028,9029,9030,9031],{"id":3564,"depth":635,"text":3565},{"id":3579,"depth":635,"text":3579},{"id":3705,"depth":635,"text":3582},{"id":3585,"depth":635,"text":3585},{"id":3588,"depth":635,"text":3588},{"id":3591,"depth":635,"text":3591},{"id":3868,"depth":635,"text":3868},{"id":575,"depth":635,"text":575},{},{"title":3545,"description":4022},[1381],{"id":4032,"title":4033,"body":9036,"description":4450,"extension":646,"meta":9358,"navigation":648,"path":4452,"publishDate":4453,"published":648,"seo":9359,"stem":4455,"tags":9360,"thumbnail":4457,"updated":4453,"__hash__":4458},{"type":8,"value":9037,"toc":9350},[9038,9040,9042,9044,9046,9048,9056,9061,9063,9069,9093,9103,9108,9110,9114,9150,9156,9162,9170,9190,9192,9196,9232,9236,9240,9260,9262,9268,9304,9310,9322,9324,9346,9348],[11,9039,13],{},[11,9041,4040],{},[11,9043,4043],{},[44,9045,4047],{"id":4046},[11,9047,4050],{},[11,9049,9050,1930,9052,1930,9054,4062],{},[60,9051,4055],{},[60,9053,4058],{},[60,9055,4061],{},[11,9057,4065,9058,4071],{},[1395,9059,4070],{"href":4068,"rel":9060},[1399],[44,9062,4075],{"id":4074},[11,9064,4078,9065,4081,9067,4085],{},[60,9066,922],{},[60,9068,4084],{},[52,9070,9071],{"className":676,"code":4088,"language":678,"meta":58,"style":58},[60,9072,9073,9077,9081,9085,9089],{"__ignoreMap":58},[88,9074,9075],{"class":90,"line":91},[88,9076,4095],{},[88,9078,9079],{"class":90,"line":635},[88,9080,894],{},[88,9082,9083],{"class":90,"line":693},[88,9084,702],{},[88,9086,9087],{"class":90,"line":699},[88,9088,708],{"emptyLinePlaceholder":648},[88,9090,9091],{"class":90,"line":705},[88,9092,4112],{},[11,9094,4115,9095,4119,9097,4123,9099,4126,9101,4129],{},[60,9096,4118],{},[60,9098,4122],{},[60,9100,4122],{},[60,9102,4084],{},[11,9104,4132,9105,4009],{},[1395,9106,4137],{"href":4135,"rel":9107},[1399],[44,9109,4140],{"id":4140},[11,9111,4143,9112,4147],{},[60,9113,4146],{},[52,9115,9116],{"className":676,"code":4150,"language":678,"meta":58,"style":58},[60,9117,9118,9122,9126,9130,9134,9138,9142,9146],{"__ignoreMap":58},[88,9119,9120],{"class":90,"line":91},[88,9121,4095],{},[88,9123,9124],{"class":90,"line":635},[88,9125,894],{},[88,9127,9128],{"class":90,"line":693},[88,9129,4165],{},[88,9131,9132],{"class":90,"line":699},[88,9133,4170],{},[88,9135,9136],{"class":90,"line":705},[88,9137,766],{},[88,9139,9140],{"class":90,"line":711},[88,9141,702],{},[88,9143,9144],{"class":90,"line":717},[88,9145,708],{"emptyLinePlaceholder":648},[88,9147,9148],{"class":90,"line":722},[88,9149,4187],{},[11,9151,4190,9152,4194,9154,4198],{},[60,9153,4193],{},[60,9155,4197],{},[11,9157,9158,4203,9160,4206],{},[60,9159,4118],{},[60,9161,4146],{},[11,9163,4209,9164,4213,9166,4216,9168,4219],{},[60,9165,4212],{},[60,9167,4122],{},[60,9169,4084],{},[52,9171,9172],{"className":676,"code":4222,"language":678,"meta":58,"style":58},[60,9173,9174,9178,9182,9186],{"__ignoreMap":58},[88,9175,9176],{"class":90,"line":91},[88,9177,4229],{},[88,9179,9180],{"class":90,"line":635},[88,9181,4234],{},[88,9183,9184],{"class":90,"line":693},[88,9185,708],{"emptyLinePlaceholder":648},[88,9187,9188],{"class":90,"line":699},[88,9189,4243],{},[44,9191,4247],{"id":4246},[11,9193,4250,9194,4254],{},[60,9195,4253],{},[52,9197,9198],{"className":676,"code":4257,"language":678,"meta":58,"style":58},[60,9199,9200,9204,9208,9212,9216,9220,9224,9228],{"__ignoreMap":58},[88,9201,9202],{"class":90,"line":91},[88,9203,4095],{},[88,9205,9206],{"class":90,"line":635},[88,9207,894],{},[88,9209,9210],{"class":90,"line":693},[88,9211,4165],{},[88,9213,9214],{"class":90,"line":699},[88,9215,4170],{},[88,9217,9218],{"class":90,"line":705},[88,9219,766],{},[88,9221,9222],{"class":90,"line":711},[88,9223,702],{},[88,9225,9226],{"class":90,"line":717},[88,9227,708],{"emptyLinePlaceholder":648},[88,9229,9230],{"class":90,"line":722},[88,9231,4292],{},[11,9233,4295,9234,4298],{},[60,9235,4146],{},[11,9237,9238,4303],{},[60,9239,4212],{},[52,9241,9242],{"className":676,"code":4306,"language":678,"meta":58,"style":58},[60,9243,9244,9248,9252,9256],{"__ignoreMap":58},[88,9245,9246],{"class":90,"line":91},[88,9247,4229],{},[88,9249,9250],{"class":90,"line":635},[88,9251,4234],{},[88,9253,9254],{"class":90,"line":693},[88,9255,708],{"emptyLinePlaceholder":648},[88,9257,9258],{"class":90,"line":699},[88,9259,4292],{},[44,9261,4327],{"id":4327},[11,9263,9264,4332,9266,4336],{},[60,9265,4253],{},[60,9267,4335],{},[52,9269,9270],{"className":676,"code":4339,"language":678,"meta":58,"style":58},[60,9271,9272,9276,9280,9284,9288,9292,9296,9300],{"__ignoreMap":58},[88,9273,9274],{"class":90,"line":91},[88,9275,4095],{},[88,9277,9278],{"class":90,"line":635},[88,9279,894],{},[88,9281,9282],{"class":90,"line":693},[88,9283,4165],{},[88,9285,9286],{"class":90,"line":699},[88,9287,4170],{},[88,9289,9290],{"class":90,"line":705},[88,9291,766],{},[88,9293,9294],{"class":90,"line":711},[88,9295,702],{},[88,9297,9298],{"class":90,"line":717},[88,9299,708],{"emptyLinePlaceholder":648},[88,9301,9302],{"class":90,"line":722},[88,9303,4374],{},[11,9305,9306,4380,9308,4384],{},[60,9307,4379],{},[60,9309,4383],{},[11,9311,4387,9312,4390,9314,4393,9316,4396,9318,4399,9320,4402],{},[60,9313,4122],{},[60,9315,4084],{},[60,9317,4118],{},[60,9319,4383],{},[60,9321,4118],{},[44,9323,575],{"id":575},[1323,9325,9326,9330,9332,9338,9342],{},[583,9327,4409,9328,4412],{},[60,9329,4122],{},[583,9331,4415],{},[583,9333,9334,4213,9336,4422],{},[60,9335,4212],{},[60,9337,4084],{},[583,9339,4425,9340,4429],{},[60,9341,4428],{},[583,9343,4432,9344,4436],{},[60,9345,4435],{},[11,9347,4439],{},[631,9349,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":9351},[9352,9353,9354,9355,9356,9357],{"id":4046,"depth":635,"text":4047},{"id":4074,"depth":635,"text":4075},{"id":4140,"depth":635,"text":4140},{"id":4246,"depth":635,"text":4247},{"id":4327,"depth":635,"text":4327},{"id":575,"depth":635,"text":575},{},{"title":4033,"description":4450},[1381],{"id":4460,"title":4461,"body":9362,"description":4842,"extension":646,"meta":9657,"navigation":648,"path":4844,"publishDate":4845,"published":648,"seo":9658,"stem":4847,"tags":9659,"thumbnail":4849,"updated":4845,"__hash__":4850},{"type":8,"value":9363,"toc":9650},[9364,9366,9368,9370,9372,9374,9376,9381,9383,9387,9431,9439,9451,9453,9473,9475,9483,9485,9489,9533,9537,9549,9551,9571,9581,9585,9590,9592,9594,9602,9604,9622,9626,9628,9646,9648],[11,9365,13],{},[11,9367,4468],{},[11,9369,4471],{},[44,9371,4475],{"id":4474},[11,9373,4478],{},[11,9375,4481],{},[11,9377,4484,9378,4490],{},[1395,9379,4489],{"href":4487,"rel":9380},[1399],[44,9382,4493],{"id":4493},[11,9384,4496,9385,4500],{},[60,9386,4499],{},[52,9388,9389],{"className":676,"code":4503,"language":678,"meta":58,"style":58},[60,9390,9391,9395,9399,9403,9407,9411,9415,9419,9423,9427],{"__ignoreMap":58},[88,9392,9393],{"class":90,"line":91},[88,9394,4510],{},[88,9396,9397],{"class":90,"line":635},[88,9398,4515],{},[88,9400,9401],{"class":90,"line":693},[88,9402,4520],{},[88,9404,9405],{"class":90,"line":699},[88,9406,766],{},[88,9408,9409],{"class":90,"line":705},[88,9410,4529],{},[88,9412,9413],{"class":90,"line":711},[88,9414,4534],{},[88,9416,9417],{"class":90,"line":717},[88,9418,766],{},[88,9420,9421],{"class":90,"line":722},[88,9422,702],{},[88,9424,9425],{"class":90,"line":728},[88,9426,708],{"emptyLinePlaceholder":648},[88,9428,9429],{"class":90,"line":787},[88,9430,4551],{},[11,9432,9433,4557,9435,4561,9437,4565],{},[60,9434,4556],{},[60,9436,4560],{},[60,9438,4564],{},[52,9440,9441],{"className":676,"code":4568,"language":678,"meta":58,"style":58},[60,9442,9443,9447],{"__ignoreMap":58},[88,9444,9445],{"class":90,"line":91},[88,9446,4575],{},[88,9448,9449],{"class":90,"line":635},[88,9450,4580],{},[11,9452,4583],{},[52,9454,9455],{"className":676,"code":4586,"language":678,"meta":58,"style":58},[60,9456,9457,9461,9465,9469],{"__ignoreMap":58},[88,9458,9459],{"class":90,"line":91},[88,9460,4593],{},[88,9462,9463],{"class":90,"line":635},[88,9464,708],{"emptyLinePlaceholder":648},[88,9466,9467],{"class":90,"line":693},[88,9468,4602],{},[88,9470,9471],{"class":90,"line":699},[88,9472,4607],{},[11,9474,4610],{},[52,9476,9477],{"className":676,"code":4613,"language":678,"meta":58,"style":58},[60,9478,9479],{"__ignoreMap":58},[88,9480,9481],{"class":90,"line":91},[88,9482,4613],{},[44,9484,4623],{"id":4622},[11,9486,4626,9487,4630],{},[60,9488,4629],{},[52,9490,9491],{"className":676,"code":4633,"language":678,"meta":58,"style":58},[60,9492,9493,9497,9501,9505,9509,9513,9517,9521,9525,9529],{"__ignoreMap":58},[88,9494,9495],{"class":90,"line":91},[88,9496,4510],{},[88,9498,9499],{"class":90,"line":635},[88,9500,4515],{},[88,9502,9503],{"class":90,"line":693},[88,9504,4520],{},[88,9506,9507],{"class":90,"line":699},[88,9508,766],{},[88,9510,9511],{"class":90,"line":705},[88,9512,4529],{},[88,9514,9515],{"class":90,"line":711},[88,9516,4534],{},[88,9518,9519],{"class":90,"line":717},[88,9520,766],{},[88,9522,9523],{"class":90,"line":722},[88,9524,702],{},[88,9526,9527],{"class":90,"line":728},[88,9528,708],{"emptyLinePlaceholder":648},[88,9530,9531],{"class":90,"line":787},[88,9532,4676],{},[11,9534,9535,4681],{},[60,9536,4629],{},[52,9538,9539],{"className":676,"code":4684,"language":678,"meta":58,"style":58},[60,9540,9541,9545],{"__ignoreMap":58},[88,9542,9543],{"class":90,"line":91},[88,9544,4691],{},[88,9546,9547],{"class":90,"line":635},[88,9548,4696],{},[11,9550,4699],{},[52,9552,9553],{"className":676,"code":4702,"language":678,"meta":58,"style":58},[60,9554,9555,9559,9563,9567],{"__ignoreMap":58},[88,9556,9557],{"class":90,"line":91},[88,9558,4709],{},[88,9560,9561],{"class":90,"line":635},[88,9562,708],{"emptyLinePlaceholder":648},[88,9564,9565],{"class":90,"line":693},[88,9566,4718],{},[88,9568,9569],{"class":90,"line":699},[88,9570,4723],{},[11,9572,9573,4728,9575,1930,9577,1930,9579,4738],{},[60,9574,4629],{},[60,9576,4731],{},[60,9578,4734],{},[60,9580,4737],{},[11,9582,4741,9583,4745],{},[60,9584,4744],{},[11,9586,4748,9587,4754],{},[1395,9588,4753],{"href":4751,"rel":9589},[1399],[44,9591,4758],{"id":4757},[11,9593,4761],{},[52,9595,9596],{"className":676,"code":4764,"language":678,"meta":58,"style":58},[60,9597,9598],{"__ignoreMap":58},[88,9599,9600],{"class":90,"line":91},[88,9601,4764],{},[11,9603,4773],{},[1323,9605,9606,9610,9616,9620],{},[583,9607,9608,4780],{},[60,9609,4731],{},[583,9611,9612,4785,9614,4789],{},[60,9613,944],{},[60,9615,4788],{},[583,9617,9618,4795],{},[60,9619,4794],{},[583,9621,4798],{},[11,9623,4801,9624,4804],{},[60,9625,4629],{},[44,9627,575],{"id":575},[1323,9629,9630,9634,9636,9640,9644],{},[583,9631,9632,4813],{},[60,9633,4499],{},[583,9635,4816],{},[583,9637,9638,4821],{},[60,9639,4629],{},[583,9641,9642,4826],{},[60,9643,4629],{},[583,9645,4829],{},[11,9647,4832],{},[631,9649,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":9651},[9652,9653,9654,9655,9656],{"id":4474,"depth":635,"text":4475},{"id":4493,"depth":635,"text":4493},{"id":4622,"depth":635,"text":4623},{"id":4757,"depth":635,"text":4758},{"id":575,"depth":635,"text":575},{},{"title":4461,"description":4842},[1381],{"id":4852,"title":4853,"body":9661,"description":5267,"extension":646,"meta":9983,"navigation":648,"path":5269,"publishDate":5270,"published":648,"seo":9984,"stem":5272,"tags":9985,"thumbnail":5274,"updated":5275,"__hash__":5276},{"type":8,"value":9662,"toc":9975},[9663,9665,9669,9671,9675,9679,9681,9683,9687,9693,9695,9699,9703,9711,9713,9749,9753,9765,9767,9771,9785,9787,9819,9827,9841,9845,9847,9849,9889,9901,9909,9919,9925,9937,9939,9943,9969,9973],[11,9664,13],{},[11,9666,4860,9667,4863],{},[60,9668,4383],{},[44,9670,4867],{"id":4866},[11,9672,9673,4872],{},[60,9674,4383],{},[11,9676,4875,9677,4878],{},[60,9678,4383],{},[11,9680,4881],{},[44,9682,4884],{"id":4884},[11,9684,4887,9685,4890],{},[60,9686,4383],{},[1323,9688,9689,9691],{},[583,9690,4895],{},[583,9692,4898],{},[44,9694,4895],{"id":4895},[11,9696,4903,9697,4906],{},[60,9698,4383],{},[11,9700,4909,9701,4912],{},[60,9702,4118],{},[52,9704,9705],{"className":676,"code":4915,"language":678,"meta":58,"style":58},[60,9706,9707],{"__ignoreMap":58},[88,9708,9709],{"class":90,"line":91},[88,9710,4915],{},[11,9712,4924],{},[52,9714,9715],{"className":676,"code":4927,"language":678,"meta":58,"style":58},[60,9716,9717,9721,9725,9729,9733,9737,9741,9745],{"__ignoreMap":58},[88,9718,9719],{"class":90,"line":91},[88,9720,4095],{},[88,9722,9723],{"class":90,"line":635},[88,9724,894],{},[88,9726,9727],{"class":90,"line":693},[88,9728,4942],{},[88,9730,9731],{"class":90,"line":699},[88,9732,4947],{},[88,9734,9735],{"class":90,"line":705},[88,9736,766],{},[88,9738,9739],{"class":90,"line":711},[88,9740,702],{},[88,9742,9743],{"class":90,"line":717},[88,9744,708],{"emptyLinePlaceholder":648},[88,9746,9747],{"class":90,"line":722},[88,9748,4964],{},[11,9750,4967,9751,4971],{},[60,9752,4970],{},[11,9754,9755,4977,9757,4980,9759,4983,9761,4980,9763,4990],{},[60,9756,4976],{},[60,9758,4383],{},[60,9760,4118],{},[60,9762,4986],{},[60,9764,4989],{},[44,9766,4898],{"id":4898},[11,9768,4995,9769,4998],{},[60,9770,4383],{},[1323,9772,9773,9779],{},[583,9774,5003,9775,5006,9777,5010],{},[60,9776,4383],{},[60,9778,5009],{},[583,9780,5013,9781,4980,9783,5018],{},[60,9782,4383],{},[60,9784,944],{},[11,9786,5021],{},[52,9788,9789],{"className":676,"code":5024,"language":678,"meta":58,"style":58},[60,9790,9791,9795,9799,9803,9807,9811,9815],{"__ignoreMap":58},[88,9792,9793],{"class":90,"line":91},[88,9794,5031],{},[88,9796,9797],{"class":90,"line":635},[88,9798,708],{"emptyLinePlaceholder":648},[88,9800,9801],{"class":90,"line":693},[88,9802,5040],{},[88,9804,9805],{"class":90,"line":699},[88,9806,5045],{},[88,9808,9809],{"class":90,"line":705},[88,9810,702],{},[88,9812,9813],{"class":90,"line":711},[88,9814,708],{"emptyLinePlaceholder":648},[88,9816,9817],{"class":90,"line":717},[88,9818,5058],{},[11,9820,5061,9821,5064,9823,5068,9825,4971],{},[60,9822,4986],{},[60,9824,5067],{},[60,9826,4970],{},[5072,9828,9829],{},[11,9830,9831,4561,9833,5081,9835,5084,9837,5088,9839,5091],{},[60,9832,5078],{},[60,9834,1647],{},[60,9836,5009],{},[60,9838,5087],{},[60,9840,5009],{},[11,9842,5094,9843,5097],{},[60,9844,4383],{},[44,9846,5100],{"id":5100},[11,9848,5103],{},[52,9850,9851],{"className":676,"code":5106,"language":678,"meta":58,"style":58},[60,9852,9853,9857,9861,9865,9869,9873,9877,9881,9885],{"__ignoreMap":58},[88,9854,9855],{"class":90,"line":91},[88,9856,4095],{},[88,9858,9859],{"class":90,"line":635},[88,9860,894],{},[88,9862,9863],{"class":90,"line":693},[88,9864,4942],{},[88,9866,9867],{"class":90,"line":699},[88,9868,4947],{},[88,9870,9871],{"class":90,"line":705},[88,9872,766],{},[88,9874,9875],{"class":90,"line":711},[88,9876,702],{},[88,9878,9879],{"class":90,"line":717},[88,9880,708],{"emptyLinePlaceholder":648},[88,9882,9883],{"class":90,"line":722},[88,9884,5141],{},[88,9886,9887],{"class":90,"line":728},[88,9888,5058],{},[11,9890,9891,5151,9893,5154,9895,5158,9897,3962,9899,5163],{},[60,9892,5150],{},[60,9894,4976],{},[60,9896,5157],{},[60,9898,4383],{},[60,9900,4118],{},[11,9902,5061,9903,5064,9905,5170,9907,5173],{},[60,9904,4383],{},[60,9906,5009],{},[60,9908,5067],{},[11,9910,5176,9911,5064,9913,5181,9915,5184,9917,5187],{},[60,9912,4383],{},[60,9914,944],{},[60,9916,4986],{},[60,9918,1124],{},[11,9920,5190,9921,5194,9923,5197],{},[60,9922,5193],{},[60,9924,4383],{},[52,9926,9927],{"className":676,"code":5200,"language":678,"meta":58,"style":58},[60,9928,9929,9933],{"__ignoreMap":58},[88,9930,9931],{"class":90,"line":91},[88,9932,5207],{},[88,9934,9935],{"class":90,"line":635},[88,9936,5212],{},[44,9938,575],{"id":575},[11,9940,9941,5219],{},[60,9942,4383],{},[1323,9944,9945,9953,9961,9963],{},[583,9946,9947,5226,9949,4980,9951,5010],{},[60,9948,4976],{},[60,9950,4383],{},[60,9952,4118],{},[583,9954,9955,5235,9957,5238,9959,5018],{},[60,9956,5157],{},[60,9958,5009],{},[60,9960,944],{},[583,9962,5243],{},[583,9964,5246,9965,587,9967,5251],{},[60,9966,5193],{},[60,9968,4383],{},[11,9970,9971,5256],{},[60,9972,4383],{},[631,9974,1356],{},{"title":58,"searchDepth":635,"depth":635,"links":9976},[9977,9978,9979,9980,9981,9982],{"id":4866,"depth":635,"text":4867},{"id":4884,"depth":635,"text":4884},{"id":4895,"depth":635,"text":4895},{"id":4898,"depth":635,"text":4898},{"id":5100,"depth":635,"text":5100},{"id":575,"depth":635,"text":575},{},{"title":4853,"description":5267},[1381],[9987],{"id":5279,"title":5280,"author":5281,"body":9988,"description":5920,"extension":646,"meta":10477,"navigation":648,"path":5922,"publishDate":5923,"published":648,"publisher":5924,"seo":10478,"stem":5926,"tags":10479,"__hash__":5928},{"type":8,"value":9989,"toc":10465},[9990,9995,9997,9999,10001,10003,10007,10009,10011,10051,10061,10063,10083,10085,10087,10091,10111,10117,10121,10125,10130,10138,10142,10146,10150,10190,10194,10218,10220,10224,10256,10260,10262,10264,10308,10310,10314,10326,10328,10342,10348,10368,10370,10374,10386,10392,10408,10416,10418,10420,10424,10429,10431,10433,10435,10437,10439,10461,10463],[11,9991,5286,9992,5291],{},[1395,9993,5280],{"href":5289,"rel":9994},[1399],[11,9996,5294],{},[44,9998,5298],{"id":5297},[11,10000,5301],{},[11,10002,5304],{},[36,10004,10005],{"title":5307,"type":848},[11,10006,5310],{},[44,10008,5314],{"id":5313},[11,10010,5317],{},[52,10012,10013],{"className":82,"code":5320,"language":84,"meta":58,"style":58},[60,10014,10015,10025,10035,10043],{"__ignoreMap":58},[88,10016,10017,10019,10021,10023],{"class":90,"line":91},[88,10018,260],{"class":94},[88,10020,5329],{"class":98},[88,10022,5332],{"class":98},[88,10024,5335],{"class":98},[88,10026,10027,10029,10031,10033],{"class":90,"line":635},[88,10028,260],{"class":94},[88,10030,406],{"class":98},[88,10032,5344],{"class":98},[88,10034,5335],{"class":98},[88,10036,10037,10039,10041],{"class":90,"line":693},[88,10038,260],{"class":94},[88,10040,508],{"class":98},[88,10042,5355],{"class":98},[88,10044,10045,10047,10049],{"class":90,"line":699},[88,10046,260],{"class":94},[88,10048,5362],{"class":98},[88,10050,5355],{"class":98},[11,10052,10053,1930,10055,1930,10057,1930,10059,5379],{},[60,10054,5369],{},[60,10056,5372],{},[60,10058,5375],{},[60,10060,5378],{},[11,10062,5382],{},[52,10064,10065],{"className":82,"code":5385,"language":84,"meta":58,"style":58},[60,10066,10067,10075],{"__ignoreMap":58},[88,10068,10069,10071,10073],{"class":90,"line":91},[88,10070,260],{"class":94},[88,10072,5332],{"class":98},[88,10074,5335],{"class":98},[88,10076,10077,10079,10081],{"class":90,"line":635},[88,10078,260],{"class":94},[88,10080,5344],{"class":98},[88,10082,5335],{"class":98},[11,10084,5406],{},[44,10086,5410],{"id":5409},[11,10088,5413,10089,1085],{},[60,10090,5416],{},[52,10092,10093],{"className":82,"code":5419,"language":84,"meta":58,"style":58},[60,10094,10095,10103],{"__ignoreMap":58},[88,10096,10097,10099,10101],{"class":90,"line":91},[88,10098,260],{"class":94},[88,10100,5428],{"class":98},[88,10102,5431],{"class":98},[88,10104,10105,10107,10109],{"class":90,"line":635},[88,10106,260],{"class":94},[88,10108,5428],{"class":98},[88,10110,5440],{"class":98},[11,10112,5443,10113,5447,10115,5450],{},[60,10114,5446],{},[60,10116,5416],{},[44,10118,5454,10119,1330],{"id":5453},[60,10120,5457],{},[11,10122,5460,10123,822],{},[60,10124,5457],{},[52,10126,10128],{"className":10127,"code":5466,"language":57,"meta":58},[55],[60,10129,5466],{"__ignoreMap":58},[11,10131,10132,5474,10134,818,10136,5481],{},[60,10133,5473],{},[60,10135,5477],{},[60,10137,5480],{},[11,10139,5484,10140,5487],{},[60,10141,5457],{},[44,10143,5491,10144,5495],{"id":5490},[60,10145,5494],{},[11,10147,5498,10148,5501],{},[60,10149,5494],{},[52,10151,10152],{"className":5504,"code":5505,"language":5506,"meta":58,"style":58},[60,10153,10154,10166,10170,10176,10182],{"__ignoreMap":58},[88,10155,10156,10158,10160,10162,10164],{"class":90,"line":91},[88,10157,5494],{"class":1447},[88,10159,1867],{"class":112},[88,10161,1596],{"class":112},[88,10163,5519],{"class":98},[88,10165,1601],{"class":112},[88,10167,10168],{"class":90,"line":635},[88,10169,708],{"emptyLinePlaceholder":648},[88,10171,10172,10174],{"class":90,"line":693},[88,10173,5530],{"class":1447},[88,10175,5533],{"class":112},[88,10177,10178,10180],{"class":90,"line":699},[88,10179,5538],{"class":1447},[88,10181,5533],{"class":112},[88,10183,10184,10186,10188],{"class":90,"line":705},[88,10185,5545],{"class":1447},[88,10187,1867],{"class":112},[88,10189,5335],{"class":98},[11,10191,5552,10192,5555],{},[60,10193,5494],{},[52,10195,10196],{"className":5504,"code":5558,"language":5506,"meta":58,"style":58},[60,10197,10198,10204,10210],{"__ignoreMap":58},[88,10199,10200,10202],{"class":90,"line":91},[88,10201,5530],{"class":1447},[88,10203,5533],{"class":112},[88,10205,10206,10208],{"class":90,"line":635},[88,10207,5538],{"class":1447},[88,10209,5533],{"class":112},[88,10211,10212,10214,10216],{"class":90,"line":693},[88,10213,5545],{"class":1447},[88,10215,1867],{"class":112},[88,10217,5335],{"class":98},[44,10219,5584],{"id":5583},[11,10221,5587,10222,5591],{},[60,10223,5590],{},[52,10225,10226],{"className":5504,"code":5594,"language":5506,"meta":58,"style":58},[60,10227,10228,10234,10240,10248],{"__ignoreMap":58},[88,10229,10230,10232],{"class":90,"line":91},[88,10231,5530],{"class":1447},[88,10233,5533],{"class":112},[88,10235,10236,10238],{"class":90,"line":635},[88,10237,5538],{"class":1447},[88,10239,5533],{"class":112},[88,10241,10242,10244,10246],{"class":90,"line":693},[88,10243,5545],{"class":1447},[88,10245,1867],{"class":112},[88,10247,5335],{"class":98},[88,10249,10250,10252,10254],{"class":90,"line":699},[88,10251,5621],{"class":1447},[88,10253,1867],{"class":112},[88,10255,5626],{"class":98},[11,10257,10258,5632],{},[60,10259,5631],{},[11,10261,5635],{},[11,10263,5638],{},[280,10265,10266,10274],{},[283,10267,10268],{},[286,10269,10270,10272],{},[289,10271,5647],{},[289,10273,5650],{},[297,10275,10276,10284,10292,10300],{},[286,10277,10278,10282],{},[302,10279,10280],{},[60,10281,5659],{},[302,10283,5662],{},[286,10285,10286,10290],{},[302,10287,10288],{},[60,10289,5669],{},[302,10291,5672],{},[286,10293,10294,10298],{},[302,10295,10296],{},[60,10297,5631],{},[302,10299,5681],{},[286,10301,10302,10306],{},[302,10303,10304],{},[60,10305,5688],{},[302,10307,5691],{},[44,10309,5694],{"id":5694},[11,10311,5697,10312,5701],{},[60,10313,5700],{},[52,10315,10316],{"className":82,"code":5704,"language":84,"meta":58,"style":58},[60,10317,10318],{"__ignoreMap":58},[88,10319,10320,10322,10324],{"class":90,"line":91},[88,10321,260],{"class":94},[88,10323,5428],{"class":98},[88,10325,5715],{"class":98},[11,10327,5718],{},[52,10329,10330],{"className":82,"code":5721,"language":84,"meta":58,"style":58},[60,10331,10332],{"__ignoreMap":58},[88,10333,10334,10336,10338,10340],{"class":90,"line":91},[88,10335,260],{"class":94},[88,10337,5428],{"class":98},[88,10339,5732],{"class":98},[88,10341,5735],{"class":98},[11,10343,5738,10344,5742,10346,1085],{},[60,10345,5741],{},[60,10347,5745],{},[52,10349,10350],{"className":82,"code":5748,"language":84,"meta":58,"style":58},[60,10351,10352],{"__ignoreMap":58},[88,10353,10354,10356,10358,10360,10362,10364,10366],{"class":90,"line":91},[88,10355,260],{"class":94},[88,10357,5428],{"class":98},[88,10359,5732],{"class":98},[88,10361,5761],{"class":98},[88,10363,5764],{"class":98},[88,10365,5767],{"class":105},[88,10367,5735],{"class":98},[44,10369,5772],{"id":5772},[11,10371,5775,10372,5779],{},[60,10373,5778],{},[52,10375,10376],{"className":82,"code":5782,"language":84,"meta":58,"style":58},[60,10377,10378],{"__ignoreMap":58},[88,10379,10380,10382,10384],{"class":90,"line":91},[88,10381,260],{"class":94},[88,10383,5428],{"class":98},[88,10385,5793],{"class":98},[11,10387,5796,10388,5800,10390,5804],{},[60,10389,5799],{},[60,10391,5803],{},[52,10393,10394],{"className":82,"code":5807,"language":84,"meta":58,"style":58},[60,10395,10396],{"__ignoreMap":58},[88,10397,10398,10400,10402,10404,10406],{"class":90,"line":91},[88,10399,260],{"class":94},[88,10401,5428],{"class":98},[88,10403,5818],{"class":98},[88,10405,5821],{"class":98},[88,10407,5824],{"class":98},[11,10409,10410,5829,10412,941,10414,5836],{},[60,10411,5799],{},[60,10413,5832],{},[60,10415,5835],{},[44,10417,5840],{"id":5839},[11,10419,5843],{},[11,10421,5846,10422,5850],{},[60,10423,5849],{},[52,10425,10427],{"className":10426,"code":5854,"language":57,"meta":58},[55],[60,10428,5854],{"__ignoreMap":58},[11,10430,5859],{},[11,10432,5862],{},[44,10434,575],{"id":575},[11,10436,5867],{},[11,10438,5870],{},[1323,10440,10441,10443,10447,10451,10455,10457,10459],{},[583,10442,5875],{},[583,10444,5878,10445,1330],{},[60,10446,5416],{},[583,10448,5454,10449,5885],{},[60,10450,5457],{},[583,10452,5888,10453,5891],{},[60,10454,5494],{},[583,10456,5894],{},[583,10458,5897],{},[583,10460,5900],{},[11,10462,5903],{},[631,10464,5906],{},{"title":58,"searchDepth":635,"depth":635,"links":10466},[10467,10468,10469,10470,10471,10472,10473,10474,10475,10476],{"id":5297,"depth":635,"text":5298},{"id":5313,"depth":635,"text":5314},{"id":5409,"depth":635,"text":5410},{"id":5453,"depth":635,"text":5913},{"id":5490,"depth":635,"text":5490},{"id":5583,"depth":635,"text":5584},{"id":5694,"depth":635,"text":5694},{"id":5772,"depth":635,"text":5772},{"id":5839,"depth":635,"text":5840},{"id":575,"depth":635,"text":575},{},{"title":5280,"description":5920},[655],1786290122425]