[{"data":1,"prerenderedAt":14842},["ShallowReactive",2],{"archives:2026":3,"search:articles":7997,"search:books":14102},[4,744,1238,2132,2812,3426,4132,5780,6268,6755,7182,7573],{"id":5,"title":6,"body":7,"description":729,"extension":730,"meta":731,"navigation":732,"path":733,"publishDate":734,"published":732,"seo":735,"stem":736,"tags":737,"thumbnail":741,"updated":742,"__hash__":743},"articles\u002Farticles\u002F2026\u002Frethinking-ai-development-workspace.md","AIと開発するために、改めて作業環境を見直してみた",{"type":8,"value":9,"toc":714},"minimark",[10,14,17,20,23,31,34,39,42,94,97,100,103,106,110,113,120,123,148,151,162,165,168,172,181,184,187,190,194,197,200,203,224,231,234,237,241,244,247,250,257,260,263,266,312,315,318,321,407,410,429,436,439,443,446,449,452,471,478,481,484,508,511,514,517,521,524,537,540,546,553,564,627,634,637,651,654,660,683,686,689,692,695,698,701,704,707,710],[11,12,13],"p",{},"こんにちは、Yuriです。",[11,15,16],{},"最近、普段使うエディターをZedへ乗り換えたり、AIエージェントとの開発の進め方を考えたりする中で、改めて自分の作業環境を見直してみました。",[11,18,19],{},"今回整理したかったのは、AIに何を任せ、自分はどこでコードを読み、どのタイミングで判断するのかということです。",[11,21,22],{},"Claude CodeとCodexを使うなら、それぞれの担当を決めたい。実装されたコードは、自分が読みやすいエディターで確認したい。ターミナルでも、今どのディレクトリとブランチにいるのかをすぐに把握したい。",[11,24,25,26,30],{},"こうした希望を整理して、",[27,28,29],"strong",{},"AGI CockpitでAIの作業を管理し、Zedを自分がコードを読む・確認する場所として使う","方針にしました。",[11,32,33],{},"この記事では、これから試していく開発の運用方針と、実際に設定したZedのターミナルについてまとめます。運用全体の効果はこれから確かめる段階ですが、まずは役割と作業場所を明確にするところから始めます。",[35,36,38],"h2",{"id":37},"aiと自分の担当を決める","AIと自分の担当を決める",[11,40,41],{},"今回の構成は、次の4つです。",[43,44,45,58],"table",{},[46,47,48],"thead",{},[49,50,51,55],"tr",{},[52,53,54],"th",{},"ツール",[52,56,57],{},"今回の担当",[59,60,61,70,78,86],"tbody",{},[49,62,63,67],{},[64,65,66],"td",{},"AGI Cockpit",[64,68,69],{},"AIエージェントへの依頼、タスクの切り替え、進捗確認",[49,71,72,75],{},[64,73,74],{},"Zed",[64,76,77],{},"自分がコードや差分を読み、軽微な修正や動作確認をする場所",[49,79,80,83],{},[64,81,82],{},"Claude Code",[64,84,85],{},"要件の整理、設計、実装後のレビュー",[49,87,88,91],{},[64,89,90],{},"Codex",[64,92,93],{},"設計に沿った実装、テスト、レビュー指摘の修正",[11,95,96],{},"この担当分けは、今回の自分の運用として決めたものです。それぞれのAIでできることを限定する意図はありません。",[11,98,99],{},"自分はTech Leadのような立場で、要件や設計の採否、変更範囲、最終的な品質を判断します。",[11,101,102],{},"たとえば設計の段階では、「今回の機能に対して複雑すぎないか」「既存の構成と合っているか」を確認する。実装後には、差分と動作を見て「依頼した内容になっているか」を確認する。AIのレビュー指摘についても、採用するかを自分で判断します。",[11,104,105],{},"AIへの依頼や進行管理はCockpitに集め、成果物を読む作業はZedに寄せる。この役割分担を、まずは試してみたいと考えています。",[35,107,109],{"id":108},"_1つの機能を同じ場所で順番に進める","1つの機能を、同じ場所で順番に進める",[11,111,112],{},"複数のAIを使うときに、先に決めておきたかったのが作業場所です。",[11,114,115,116,119],{},"今回の基本ルールは、",[27,117,118],{},"1機能につき1つのブランチ・1つの作業ディレクトリを使い、担当を順番に交代する","ことにしました。",[11,121,122],{},"たとえば一覧画面に絞り込み機能を追加するなら、次の流れを想定しています。",[124,125,126,130,133,136,139,142,145],"ol",{},[127,128,129],"li",{},"Claude Codeが既存コードを調べ、設計と受け入れ条件を整理する",[127,131,132],{},"自分が設計を読み、変更方針を確認する",[127,134,135],{},"Codexが実装し、テストや必要な検証を行う",[127,137,138],{},"自分がZedで差分と動作を確認する",[127,140,141],{},"Claude Codeが設計と実装を照合してレビューする",[127,143,144],{},"Codexが採用した指摘を修正し、再度検証する",[127,146,147],{},"自分が最終確認し、コミットやPR、マージへ進める",[11,149,150],{},"この間、Claude CodeとCodexとZedは、同じ絶対パスのディレクトリを参照します。",[152,153,159],"pre",{"className":154,"code":156,"language":157,"meta":158},[155],"language-text","機能: 一覧の絞り込み\nブランチ: feature\u002Ffilter\n作業場所: ~\u002Fwork\u002Fproject\n\nClaude Code: 設計\n    ↓ 自分が確認\nCodex: 実装・テスト\n    ↓ 自分が確認\nClaude Code: レビュー\n    ↓\nCodex: 修正・再テスト\n    ↓ 自分が最終確認\n","text","",[160,161,156],"code",{"__ignoreMap":158},[11,163,164],{},"書き込みを行う担当は、常に1人または1エージェントにします。自分が少しだけ修正したい場合も、AIの編集が止まっている間に行う方針です。",[11,166,167],{},"レビュー工程では原則としてコードを変更せず、指摘を残して次の担当へ渡します。担当を交代するときは、前の処理が終わっていることと、現在のブランチ・未コミット差分を確認します。",[169,170,171],"h3",{"id":171},"worktreeは機能を分けたいときに使う",[11,173,174,175,180],{},"以前、",[176,177,179],"a",{"href":178},"\u002Farticles\u002F2026\u002Fgit-worktree-with-docker-development","Git worktreeでDocker開発しようとしてハマった話","を書きました。そのときも、どのディレクトリのファイルを参照しているかが大事でした。",[11,182,183],{},"今回も、同じ機能を引き継ぐたびにAIごとのworktreeを作ると、作業場所の対応を管理する必要が増えます。まずは通常のcheckoutを使い、mainの作業場所と分けたい場合だけ、その機能用のworktreeを1つ用意する方針です。",[11,185,186],{},"同じ作業ディレクトリであれば、未コミットの変更も次の担当が読めます。節目のコミットは追跡のために残しつつ、AIへ担当を渡すたびにmergeやcherry-pickを挟む運用にはしません。",[11,188,189],{},"別の機能も同時に進めたくなったら、機能単位でworktreeを分ける。その場合も、1つの機能の中では同じ作業場所を共有します。",[35,191,193],{"id":192},"ファイルと一緒に判断の経緯も引き継ぐ","ファイルと一緒に、判断の経緯も引き継ぐ",[11,195,196],{},"同じファイルを読めても、前のAIとの会話まで自動的に伝わるわけではありません。",[11,198,199],{},"「どうしてこの設計にしたのか」「何を確認済みなのか」「どこがまだ終わっていないのか」は、別途伝える必要があります。",[11,201,202],{},"引き継ぎには、次の情報を残すことにしました。",[204,205,206,209,212,215,218,221],"ul",{},[127,207,208],{},"目的と受け入れ条件",[127,210,211],{},"作業ディレクトリとブランチ",[127,213,214],{},"設計判断と変更対象",[127,216,217],{},"現在の差分や基準となるコミット",[127,219,220],{},"実行したテストと結果",[127,222,223],{},"未解決事項と次の担当への依頼",[11,225,226,227,230],{},"必要に応じて ",[160,228,229],{},"docs\u002Ffeature-filter-handoff.md"," のようなメモにまとめ、次の担当に読むよう依頼します。",[11,232,233],{},"たとえば「実装できました」だけでは、次のレビューで何を基準にすればよいか分かりません。「空の検索結果を表示できること」「条件を解除すると全件に戻ること」といった受け入れ条件があれば、レビューの観点もそろえやすくなります。",[11,235,236],{},"最初は自分で工程を切り替え、引き継ぐ内容が安定してから自動化を検討したいと思っています。",[35,238,240],{"id":239},"zedは自分が読み続けられる環境にする","Zedは、自分が読み続けられる環境にする",[11,242,243],{},"Zedで重視したいのは、コードを読む・追う・確かめる作業のしやすさです。",[11,245,246],{},"落ち着いたOne Dark系の配色を基準に、文字サイズやファイルツリー、検索、定義ジャンプ、Gitの差分表示を整える方針にしました。言語支援についても、普段触るVueなどのファイルで使い勝手を確認していきます。",[11,248,249],{},"ターミナルもZed内を起点にし、動作確認やGit操作を行います。そこで気になったのが、現在のパスやブランチをもっと見やすくしたいということでした。",[11,251,252,253,256],{},"最初の構成案ではプロンプトの候補にStarshipを挙げていましたが、実際に設定したのは ",[27,254,255],{},"zsh + Powerlevel10k + Nerd Font"," です。",[11,258,259],{},"ここからは、その設定で確認できた内容を残します。",[35,261,262],{"id":262},"ターミナルの状態表示と入力を2行に分ける",[11,264,265],{},"今回のターミナルは、次の構成です。",[43,267,268,278],{},[46,269,270],{},[49,271,272,275],{},[52,273,274],{},"要素",[52,276,277],{},"役割",[59,279,280,288,296,304],{},[49,281,282,285],{},[64,283,284],{},"Zed Terminal",[64,286,287],{},"文字を表示し、入力を受け取る",[49,289,290,293],{},[64,291,292],{},"zsh",[64,294,295],{},"コマンドを解釈・実行する",[49,297,298,301],{},[64,299,300],{},"Powerlevel10k",[64,302,303],{},"パスやGit情報などのプロンプトを組み立てる",[49,305,306,309],{},[64,307,308],{},"MesloLGS Nerd Font Mono",[64,310,311],{},"文字とアイコンを描画する",[11,313,314],{},"Powerlevel10kのウィザードでは、色付きのブロックで情報を分けるRainbowスタイルを選びました。",[11,316,317],{},"特に取り入れたかったのは、上段にパスやGit情報などの状態を表示し、下段にコマンドを入力する2行構成です。状態表示が横に長くなっても、入力を始める位置が分かりやすくなります。",[11,319,320],{},"主な選択は、次のとおりです。",[43,322,323,333],{},[46,324,325],{},[49,326,327,330],{},[52,328,329],{},"項目",[52,331,332],{},"選択",[59,334,335,343,351,359,367,375,383,391,399],{},[49,336,337,340],{},[64,338,339],{},"スタイル",[64,341,342],{},"Rainbow",[49,344,345,348],{},[64,346,347],{},"文字セット",[64,349,350],{},"Unicode",[49,352,353,356],{},[64,354,355],{},"時刻",[64,357,358],{},"24時間表記",[49,360,361,364],{},[64,362,363],{},"区切り \u002F 終端",[64,365,366],{},"Angled \u002F Sharp",[49,368,369,372],{},[64,370,371],{},"高さ",[64,373,374],{},"Two lines",[49,376,377,380],{},[64,378,379],{},"接続線",[64,381,382],{},"Dotted、色はDark",[49,384,385,388],{},[64,386,387],{},"枠",[64,389,390],{},"No frame",[49,392,393,396],{},[64,394,395],{},"アイコン",[64,397,398],{},"Many icons",[49,400,401,404],{},[64,402,403],{},"補助語",[64,405,406],{},"Concise",[11,408,409],{},"ウィザードを開くコマンドは次のものです。",[152,411,414],{"className":412,"code":413,"language":292,"meta":158,"style":158},"language-zsh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","p10k configure\n",[160,415,416],{"__ignoreMap":158},[417,418,421,425],"span",{"class":419,"line":420},"line",1,[417,422,424],{"class":423},"sBMFI","p10k",[417,426,428],{"class":427},"sfazB"," configure\n",[11,430,431,432,435],{},"再設定する場合は、手動で調整した ",[160,433,434],{},"~\u002F.p10k.zsh"," の控えを残してから行います。",[11,437,438],{},"実行済みのプロンプトを短くするTransient Promptについては、過去の出力にもパスやブランチを残す方向で考えています。ただし、手元の記録では最終的な選択まで確認できないため、ここでは好みとして書いておきます。",[35,440,442],{"id":441},"アイコンがになってしまった","アイコンが「?」になってしまった",[11,444,445],{},"設定でつまずいたのが、アイコンの表示でした。",[11,447,448],{},"Powerlineのdiamondは表示されるのに、Appleやフォルダ、ブランチ、時計のアイコンが「?」になってしまいました。",[11,450,451],{},"Nerd FontはHomebrewで追加していました。",[152,453,455],{"className":412,"code":454,"language":292,"meta":158,"style":158},"brew install --cask font-meslo-lg-nerd-font\n",[160,456,457],{"__ignoreMap":158},[417,458,459,462,465,468],{"class":419,"line":420},[417,460,461],{"class":423},"brew",[417,463,464],{"class":427}," install",[417,466,467],{"class":427}," --cask",[417,469,470],{"class":427}," font-meslo-lg-nerd-font\n",[11,472,473,474,477],{},"それでも表示されなかった原因は、",[27,475,476],{},"Zedに指定していたフォント名と、macOSに登録されていたFamily名が一致していなかったこと","でした。",[169,479,480],{"id":480},"プロンプトを通さずにアイコンを表示する",[11,482,483],{},"切り分けでは、問題が起きているZedのターミナルで、次のコマンドを実行しました。",[152,485,487],{"className":412,"code":486,"language":292,"meta":158,"style":158},"print -P '\\uf179  \\uf07c  \\uf126  \\uf017'\n",[160,488,489],{"__ignoreMap":158},[417,490,491,495,498,502,505],{"class":419,"line":420},[417,492,494],{"class":493},"s2Zo4","print",[417,496,497],{"class":427}," -P",[417,499,501],{"class":500},"sMK4o"," '",[417,503,504],{"class":427},"\\uf179  \\uf07c  \\uf126  \\uf017",[417,506,507],{"class":500},"'\n",[11,509,510],{},"Apple・フォルダ・ブランチ・時計の4つのアイコンを直接表示するテストです。",[11,512,513],{},"プロンプトの配置を介さずに文字を表示すると、プロンプト側の設定を調べる前に、そもそもその文字を描画できているか確認できます。",[11,515,516],{},"ここで学んだのが、diamondが表示されるだけでは、使いたいアイコンまで表示できるとは判断できないということでした。実際に表示できていない文字で確認する必要があります。",[169,518,520],{"id":519},"macosに登録されている名前を調べる","macOSに登録されている名前を調べる",[11,522,523],{},"フォント情報は、次のコマンドで確認しました。",[152,525,527],{"className":412,"code":526,"language":292,"meta":158,"style":158},"system_profiler SPFontsDataType\n",[160,528,529],{"__ignoreMap":158},[417,530,531,534],{"class":419,"line":420},[417,532,533],{"class":423},"system_profiler",[417,535,536],{"class":427}," SPFontsDataType\n",[11,538,539],{},"今回の出力には、次の情報がありました。",[152,541,544],{"className":542,"code":543,"language":157,"meta":158},[155],"Full Name: MesloLGS Nerd Font Mono Regular\nFamily: MesloLGS Nerd Font Mono\nValid: Yes\nEnabled: Yes\n",[160,545,543],{"__ignoreMap":158},[11,547,548,549,552],{},"フォントは存在し、有効になっていました。一方、Zed側では ",[160,550,551],{},"MesloLGS NF"," を指定していました。",[11,554,555,556,559,560,563],{},"そこで、Zedの ",[160,557,558],{},"settings.json"," にある既存の ",[160,561,562],{},"terminal"," 設定を、登録されたFamily名に合わせて更新しました。ベルの設定も含めると、次の形です。",[152,565,569],{"className":566,"code":567,"language":568,"meta":158,"style":158},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"terminal\": {\n    \"font_family\": \"MesloLGS Nerd Font Mono\"\n  }\n}\n","json",[160,570,571,576,594,615,621],{"__ignoreMap":158},[417,572,573],{"class":419,"line":420},[417,574,575],{"class":500},"{\n",[417,577,579,582,585,588,591],{"class":419,"line":578},2,[417,580,581],{"class":500},"  \"",[417,583,562],{"class":584},"spNyl",[417,586,587],{"class":500},"\"",[417,589,590],{"class":500},":",[417,592,593],{"class":500}," {\n",[417,595,597,600,603,605,607,610,612],{"class":419,"line":596},3,[417,598,599],{"class":500},"    \"",[417,601,602],{"class":423},"font_family",[417,604,587],{"class":500},[417,606,590],{"class":500},[417,608,609],{"class":500}," \"",[417,611,308],{"class":427},[417,613,614],{"class":500},"\"\n",[417,616,618],{"class":419,"line":617},4,[417,619,620],{"class":500},"  }\n",[417,622,624],{"class":419,"line":623},5,[417,625,626],{"class":500},"}\n",[11,628,629,630,633],{},"保存後にZedを ",[160,631,632],{},"⌘Q"," で完全終了し、再起動して新しいターミナルを開くと、アイコンが正常に表示されました。",[11,635,636],{},"このフォント名は今回の環境で確認できたものです。別の環境で設定する場合も、インストールしたフォントの登録情報を確認すると切り分けやすいと思います。",[11,638,639,640,643,644,647,648,650],{},"なお、途中で試した ",[160,641,642],{},"fc-list"," は、このMacでは ",[160,645,646],{},"command not found"," になりました。今回は追加でツールを導入せず、",[160,649,533],{}," で必要な情報を確認できました。",[169,652,653],{"id":653},"表示とプロンプトの設定を分けて考える",[11,655,656,657,659],{},"今回確認した ",[160,658,434],{}," のアイコンモードは、次の値でした。",[152,661,663],{"className":412,"code":662,"language":292,"meta":158,"style":158},"typeset -g POWERLEVEL9K_MODE=nerdfont-complete\n",[160,664,665],{"__ignoreMap":158},[417,666,667,670,673,677,680],{"class":419,"line":420},[417,668,669],{"class":584},"typeset",[417,671,672],{"class":427}," -g",[417,674,676],{"class":675},"sTEyZ"," POWERLEVEL9K_MODE",[417,678,679],{"class":500},"=",[417,681,682],{"class":675},"nerdfont-complete\n",[11,684,685],{},"これはPowerlevel10k側の設定で、Zedが使用するフォントの指定とは別です。",[11,687,688],{},"プロンプトの並びや装飾はPowerlevel10k、実際に描画するフォントはZed。この担当を分けて考えると、次に表示が崩れたときも確認する場所を絞れそうです。",[35,690,691],{"id":691},"必要になったものから追加していく",[11,693,694],{},"構成を考える中では、HermesやOrcaなども候補に挙がりました。ただ、今は自分で設計や差分を確認し、次の担当へ渡す運用から始めたいと考えています。",[11,696,697],{},"まずはCockpitとZedを使う方針に絞り、自動化をどこまで進めるかは、実際に引き継ぎを繰り返してから判断します。",[11,699,700],{},"ターミナルの補助ツールも同様です。Git操作を補いたくなったらlazygit、検索や移動に手間を感じたらfzfやzoxideなどを検討します。初期構成にすべてを入れる予定はありません。",[11,702,703],{},"今回、開発の進め方とターミナルの設定を一緒に見直してみて、どちらにも「今どこで、何をしているのか分かるようにしたい」という共通点があると感じました。",[11,705,706],{},"AIの作業では、担当・作業場所・引き継ぐ内容を明確にする。自分のターミナルでは、パスとブランチを見やすくする。",[11,708,709],{},"次は小さな1機能で、設計から実装、レビュー、修正までを一度通してみるつもりです。自分が判断しやすいか、引き継ぎに情報が足りているかを確かめながら、この環境を調整していきたいと思います。",[711,712,713],"style",{},"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":158,"searchDepth":578,"depth":578,"links":715},[716,717,720,721,722,723,728],{"id":37,"depth":578,"text":38},{"id":108,"depth":578,"text":109,"children":718},[719],{"id":171,"depth":596,"text":171},{"id":192,"depth":578,"text":193},{"id":239,"depth":578,"text":240},{"id":262,"depth":578,"text":262},{"id":441,"depth":578,"text":442,"children":724},[725,726,727],{"id":480,"depth":596,"text":480},{"id":519,"depth":596,"text":520},{"id":653,"depth":596,"text":653},{"id":691,"depth":578,"text":691},"AGI Cockpit・Zed・Claude Code・Codexの役割分担と、同じ作業場所で順番に開発する運用を整理しました。ZedのターミナルをPowerlevel10kとNerd Fontで整えた際のつまずきも紹介します。","md",{},true,"\u002Farticles\u002F2026\u002Frethinking-ai-development-workspace","2026-09-21",{"title":6,"description":729},"articles\u002F2026\u002Frethinking-ai-development-workspace",[738,739,74,740],"開発環境","AI","ターミナル","\u002Fimages\u002Farticles\u002Frethinking-ai-development-workspace.png",null,"x8IB3rPjh68WyjuVVyJx-T0ZP2fsQQM8f0Lu_dMAlds",{"id":745,"title":746,"body":747,"description":1228,"extension":730,"meta":1229,"navigation":732,"path":1230,"publishDate":1231,"published":732,"seo":1232,"stem":1233,"tags":1234,"thumbnail":1236,"updated":742,"__hash__":1237},"articles\u002Farticles\u002F2026\u002Facquire-multiple-resource-locks-in-consistent-order.md","複数リソースをロックするときは、取得順序までそろえる",{"type":8,"value":748,"toc":1214},[749,751,758,761,764,767,770,773,810,813,868,875,878,886,889,892,898,901,904,907,912,918,922,925,931,934,937,943,946,952,955,958,962,965,1054,1061,1068,1071,1078,1081,1085,1088,1094,1101,1104,1110,1113,1116,1119,1122,1125,1128,1133,1136,1139,1146,1153,1156,1159,1162,1165,1169,1172,1175,1178,1181,1184,1201,1208,1211],[11,750,13],{},[11,752,753,754,757],{},"最近、複数のリソースをロックする処理では、「どのデータをロックするか」だけでなく、",[27,755,756],{},"「どの順番でロックするか」も重要","だと知りました。",[11,759,760],{},"たとえば、API・バッチ・Webhookが同じデータを更新する場合です。それぞれの処理でロックを取っていても、取得する順番が異なると、互いに相手のロックが解放されるのを待つ状況が起こりえます。",[11,762,763],{},"この記事では、その仕組みと、「リソースの種類ごとの順序」「同じ種類の中でのID順」をそろえる考え方を整理します。具体例にはPostgreSQLの行ロックを使います。",[35,765,766],{"id":766},"ロックしていても処理が進まなくなる理由",[11,768,769],{},"ここでは、注文と在庫を更新する架空のシステムを考えます。",[11,771,772],{},"APIでは注文を確認してから在庫を更新し、バッチでは在庫を確認してから注文を更新するとします。業務の流れに合わせて、そのままロックを取得すると次の順番になります。",[43,774,775,788],{},[46,776,777],{},[49,778,779,782,785],{},[52,780,781],{},"処理",[52,783,784],{},"最初にロックする行",[52,786,787],{},"次にロックする行",[59,789,790,801],{},[49,791,792,795,798],{},[64,793,794],{},"API",[64,796,797],{},"注文ID=10",[64,799,800],{},"在庫ID=20",[49,802,803,806,808],{},[64,804,805],{},"バッチ",[64,807,800],{},[64,809,797],{},[11,811,812],{},"それぞれ単独で実行すれば問題なく終わっても、同時に実行すると次の状況が起こりえます。",[43,814,815,826],{},[46,816,817],{},[49,818,819,822,824],{},[52,820,821],{},"順番",[52,823,794],{},[52,825,805],{},[59,827,828,838,848,858],{},[49,829,830,833,836],{},[64,831,832],{},"1",[64,834,835],{},"注文ID=10のロックを取得",[64,837],{},[49,839,840,843,845],{},[64,841,842],{},"2",[64,844],{},[64,846,847],{},"在庫ID=20のロックを取得",[49,849,850,853,856],{},[64,851,852],{},"3",[64,854,855],{},"在庫ID=20をロックしようとして待機",[64,857],{},[49,859,860,863,865],{},[64,861,862],{},"4",[64,864],{},[64,866,867],{},"注文ID=10をロックしようとして待機",[11,869,870,871,874],{},"APIが待っている在庫をバッチが持ち、バッチが待っている注文をAPIが持っています。このように待ち関係が循環する状態が",[27,872,873],{},"デッドロック","です。",[11,876,877],{},"PostgreSQLではデッドロックを検出すると、関係するトランザクションのうち1つを中止します。つまり、DBが検出してくれても、アプリケーションの処理がすべて成功するわけではありません。",[11,879,880],{},[176,881,885],{"href":882,"rel":883},"https:\u002F\u002Fwww.postgresql.org\u002Fdocs\u002F18\u002Fexplicit-locking.html#LOCKING-DEADLOCKS",[884],"nofollow","PostgreSQL公式ドキュメント：デッドロック",[35,887,888],{"id":888},"すべての処理で同じ取得順序を使う",[11,890,891],{},"この例では、APIもバッチもWebhookも、次の順序でロックするルールにします。",[152,893,896],{"className":894,"code":895,"language":157,"meta":158},[155],"注文 → 在庫\n",[160,897,895],{"__ignoreMap":158},[11,899,900],{},"先ほどと同じ行に対してAPIが注文のロックを先に取得した場合、バッチは最初の注文のロックで待ちます。バッチはまだ在庫をロックしていないため、APIは在庫のロックを取得して処理を進められます。",[11,902,903],{},"APIがコミットしてロックを解放したあと、バッチが続けて処理します。待機そのものは発生しますが、先ほどのような待ち関係の循環は作られません。",[11,905,906],{},"PostgreSQLの公式ドキュメントでも、複数の対象をロックする際は、すべてのアプリケーションで一貫した順序を使うことがデッドロック対策として挙げられています。",[11,908,909],{},[176,910,885],{"href":882,"rel":911},[884],[11,913,914,915,874],{},"「注文から取得する」こと自体に特別な意味があるわけではありません。大切なのは、",[27,916,917],{},"同じリソースを扱うすべての処理が、同じルールを守ること",[35,919,921],{"id":920},"同じ種類のリソースではid順もそろえる","同じ種類のリソースではID順もそろえる",[11,923,924],{},"種類ごとの順序だけでは、まだ足りません。1つの処理で複数の在庫をロックする場合を考えます。",[152,926,929],{"className":927,"code":928,"language":157,"meta":158},[155],"API:     在庫ID=20 → 在庫ID=30\nWebhook: 在庫ID=30 → 在庫ID=20\n",[160,930,928],{"__ignoreMap":158},[11,932,933],{},"この場合も、互いに最初のロックを取得するとデッドロックになりえます。",[11,935,936],{},"そこで、同じ種類のリソースではIDの昇順でロックするルールを追加します。",[152,938,941],{"className":939,"code":940,"language":157,"meta":158},[155],"1. 注文をID昇順でロックする\n2. 在庫をID昇順でロックする\n\n例:\n注文ID=10 → 注文ID=11 → 在庫ID=20 → 在庫ID=30\n",[160,942,940],{"__ignoreMap":158},[11,944,945],{},"考え方としては、各リソースに次の比較キーを持たせるイメージです。",[152,947,950],{"className":948,"code":949,"language":157,"meta":158},[155],"（リソースの種類に付けた順位, ID）\n\n注文ID=10: (1, 10)\n注文ID=11: (1, 11)\n在庫ID=20: (2, 20)\n在庫ID=30: (2, 30)\n",[160,951,949],{"__ignoreMap":158},[11,953,954],{},"このキーで全体の順序を決め、必要な対象を前から取得します。同じIDでも、注文と在庫は別のリソースとして扱います。",[11,956,957],{},"ID昇順は、共通の順序を作るための方法の1つです。UUIDや複合キーを使う場合も、処理ごとに比較結果が変わらないルールを決めます。",[35,959,961],{"id":960},"postgresqlで取得順序を明示する例","PostgreSQLで取得順序を明示する例",[11,963,964],{},"以下は、必要な注文IDと在庫IDが事前に分かっている場合の、ロック取得部分の例です。各IDは主キーで、対象の行は存在するものとします。",[152,966,970],{"className":967,"code":968,"language":969,"meta":158,"style":158},"language-sql shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","BEGIN;\n\n-- まず注文をID昇順でロックする\nSELECT * FROM orders WHERE id = 10 FOR UPDATE;\nSELECT * FROM orders WHERE id = 11 FOR UPDATE;\n\n-- 次に在庫をID昇順でロックする\nSELECT * FROM inventories WHERE id = 20 FOR UPDATE;\nSELECT * FROM inventories WHERE id = 30 FOR UPDATE;\n\n-- ロック取得後の値で、注文状態や在庫数を確認する\n-- 条件を満たす場合に、必要なUPDATEを実行する\n-- 条件を満たさない場合はROLLBACKする\n\nCOMMIT;\n","sql",[160,971,972,977,982,987,992,997,1002,1008,1014,1020,1025,1031,1037,1043,1048],{"__ignoreMap":158},[417,973,974],{"class":419,"line":420},[417,975,976],{},"BEGIN;\n",[417,978,979],{"class":419,"line":578},[417,980,981],{"emptyLinePlaceholder":732},"\n",[417,983,984],{"class":419,"line":596},[417,985,986],{},"-- まず注文をID昇順でロックする\n",[417,988,989],{"class":419,"line":617},[417,990,991],{},"SELECT * FROM orders WHERE id = 10 FOR UPDATE;\n",[417,993,994],{"class":419,"line":623},[417,995,996],{},"SELECT * FROM orders WHERE id = 11 FOR UPDATE;\n",[417,998,1000],{"class":419,"line":999},6,[417,1001,981],{"emptyLinePlaceholder":732},[417,1003,1005],{"class":419,"line":1004},7,[417,1006,1007],{},"-- 次に在庫をID昇順でロックする\n",[417,1009,1011],{"class":419,"line":1010},8,[417,1012,1013],{},"SELECT * FROM inventories WHERE id = 20 FOR UPDATE;\n",[417,1015,1017],{"class":419,"line":1016},9,[417,1018,1019],{},"SELECT * FROM inventories WHERE id = 30 FOR UPDATE;\n",[417,1021,1023],{"class":419,"line":1022},10,[417,1024,981],{"emptyLinePlaceholder":732},[417,1026,1028],{"class":419,"line":1027},11,[417,1029,1030],{},"-- ロック取得後の値で、注文状態や在庫数を確認する\n",[417,1032,1034],{"class":419,"line":1033},12,[417,1035,1036],{},"-- 条件を満たす場合に、必要なUPDATEを実行する\n",[417,1038,1040],{"class":419,"line":1039},13,[417,1041,1042],{},"-- 条件を満たさない場合はROLLBACKする\n",[417,1044,1046],{"class":419,"line":1045},14,[417,1047,981],{"emptyLinePlaceholder":732},[417,1049,1051],{"class":419,"line":1050},15,[417,1052,1053],{},"COMMIT;\n",[11,1055,1056,1057,1060],{},"説明のため、1行ずつ順番に取得しています。",[160,1058,1059],{},"FOR UPDATE"," の行ロックは通常トランザクション終了まで保持されるため、取得と更新を同じトランザクション内で行います。",[11,1062,1063],{},[176,1064,1067],{"href":1065,"rel":1066},"https:\u002F\u002Fwww.postgresql.org\u002Fdocs\u002F18\u002Fexplicit-locking.html#LOCKING-ROWS",[884],"PostgreSQL公式ドキュメント：行レベルロック",[11,1069,1070],{},"実装では、対象IDの重複を取り除き、決めた順番に並べてから、逐次ロックを取得する流れにします。入力の配列順やWebhookのペイロード内の順序を、そのまま取得順序にしないことがポイントです。",[11,1072,1073,1074,1077],{},"また、",[160,1075,1076],{},"WHERE id IN (20, 30)"," のようにIDを並べるだけでは、ロックの取得順序を指定したことにはなりません。複数行をまとめて取得する実装では、使用するDBの仕様と、ORMが発行するSQLを確認する必要があります。",[11,1079,1080],{},"この例は既存行を対象にしています。検索結果が0件の場合、存在しない行をロックできたことにはならないため、存在確認や新規作成の競合対策は別途必要です。",[35,1082,1084],{"id":1083},"ルールは関数単位ではなくトランザクション全体で守る","ルールは関数単位ではなく、トランザクション全体で守る",[11,1086,1087],{},"共通のロック取得関数を作っても、呼び出す前に別のロックを取得していると順序が崩れます。",[152,1089,1092],{"className":1090,"code":1091,"language":157,"meta":158},[155],"Webhookの処理:\n  在庫ID=30を更新する\n  → 共通関数を呼ぶ\n  → 注文ID=10をロックする\n  → 在庫ID=20をロックする\n",[160,1093,1091],{"__ignoreMap":158},[11,1095,1096,1097,1100],{},"共通関数の中が「注文 → 在庫」でも、トランザクション全体では「在庫 → 注文」になっています。明示的なロックだけでなく、",[160,1098,1099],{},"UPDATE"," によって取得する行ロックも含めて考えます。",[11,1102,1103],{},"バッチでも、1件ずつの処理が正しい順番だからといって安心はできません。",[152,1105,1108],{"className":1106,"code":1107,"language":157,"meta":158},[155],"1つのトランザクションで複数件を処理:\n  注文ID=10 → 在庫ID=20 → 注文ID=11 → 在庫ID=30\n",[160,1109,1107],{"__ignoreMap":158},[11,1111,1112],{},"この順番では、在庫のあとに再び注文を取得しています。全件を同じトランザクションで扱う必要があるなら、必要な注文を先に、次に必要な在庫をそれぞれID順で取得する設計にします。1件ごとにトランザクションを分けられるかは、業務上必要な原子性に合わせて判断します。",[11,1114,1115],{},"途中で追加のロック対象が判明する場合も同様です。すでに取得した対象より前の順番になるなら、そのまま取り足すとルールが崩れます。対象の決め方を見直すか、ロールバックして対象を再確認し、正しい順序で取得し直す設計が必要です。",[35,1117,1118],{"id":1118},"取得順序以外にも考えること",[169,1120,1121],{"id":1121},"ロックの強さを途中で変更する場合",[11,1123,1124],{},"取得するリソースが同じでも、複数の処理が共有ロックを持ってから、互いに競合する強いロックへ変更しようとすると、デッドロックになりえます。",[11,1126,1127],{},"更新が必要な対象には、最初からその処理で必要な強さのロックを取得することも考えます。リソースの順序だけでは、ロックの強さを変更する際の競合までは解決できません。",[11,1129,1130],{},[176,1131,885],{"href":882,"rel":1132},[884],[169,1134,1135],{"id":1135},"失敗時はトランザクション全体を再実行する",[11,1137,1138],{},"取得順序を統一しても、ほかの更新経路や暗黙に取得されるロックまで含めて、デッドロックが絶対に起きないと言い切ることはできません。",[11,1140,1141,1142,1145],{},"PostgreSQLのデッドロックエラーはSQLSTATE ",[160,1143,1144],{},"40P01"," です。再試行する場合は、失敗したSQLだけでなく、読み取りや更新内容の判断を含めたトランザクション全体をやり直します。",[11,1147,1148],{},[176,1149,1152],{"href":1150,"rel":1151},"https:\u002F\u002Fwww.postgresql.org\u002Fdocs\u002F18\u002Fmvcc-serialization-failure-handling.html",[884],"PostgreSQL公式ドキュメント：失敗時の再試行",[11,1154,1155],{},"アプリケーション側では、再試行の回数に上限を設け、待ち時間を入れるなど、競合が続いたときの扱いも決めておきます。",[169,1157,1158],{"id":1158},"ロックを持つ時間を短くする",[11,1160,1161],{},"ロックの順序をそろえても、競合する処理の待ち時間は残ります。",[11,1163,1164],{},"外部APIの応答待ちなどをロック取得後に挟むと、ほかの処理も長く待つことになります。ロック中に必要な確認・更新を整理し、トランザクションを長時間開いたままにしない設計にします。",[169,1166,1168],{"id":1167},"webhookの重複処理は別に対策する","Webhookの重複処理は別に対策する",[11,1170,1171],{},"ロックを取得できるのは一度に1つの処理でも、同じイベントが順番に2回処理されることはあります。",[11,1173,1174],{},"そのため、ロックだけではWebhookの重複処理を防げません。イベントIDの一意制約や処理済み記録などを使い、重複の判定と業務データの更新を原子的に行う設計が必要です。",[11,1176,1177],{},"また、DBのロールバックでは外部APIへの送信は取り消せません。トランザクションを再試行するなら、外部への副作用が重複しないようにすることも別途考えます。",[35,1179,1180],{"id":1180},"まとめ",[11,1182,1183],{},"複数リソースをロックするときは、ロックする対象に加えて、取得する順番を設計する必要があります。",[204,1185,1186,1189,1192,1195,1198],{},[127,1187,1188],{},"リソースの種類ごとに取得順序を決める",[127,1190,1191],{},"同じ種類のリソースはID昇順など、共通のルールで並べる",[127,1193,1194],{},"API・バッチ・Webhookのすべてで同じルールを守る",[127,1196,1197],{},"関数の中だけでなく、トランザクション全体の取得順序を見る",[127,1199,1200],{},"リトライや重複処理への対策も用意する",[11,1202,1203,1204,1207],{},"今回学んだのは、",[27,1205,1206],{},"ロックの取得順序は、個別の処理ではなく、同じリソースを扱う処理全体で共有するルールになる","ということです。",[11,1209,1210],{},"新しいAPIやバッチを追加するときも、「この処理だけで正しく動くか」に加えて、「既存の処理と同時に動いても、ロックの順序がそろっているか」を確認していきたいと思います。",[711,1212,1213],{},"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":158,"searchDepth":578,"depth":578,"links":1215},[1216,1217,1218,1219,1220,1221,1227],{"id":766,"depth":578,"text":766},{"id":888,"depth":578,"text":888},{"id":920,"depth":578,"text":921},{"id":960,"depth":578,"text":961},{"id":1083,"depth":578,"text":1084},{"id":1118,"depth":578,"text":1118,"children":1222},[1223,1224,1225,1226],{"id":1121,"depth":596,"text":1121},{"id":1135,"depth":596,"text":1135},{"id":1158,"depth":596,"text":1158},{"id":1167,"depth":596,"text":1168},{"id":1180,"depth":578,"text":1180},"API・バッチ・Webhookが同じデータを更新するとき、リソースの種類とIDでロックの取得順序を統一し、デッドロックを防ぐ考え方を整理します。",{},"\u002Farticles\u002F2026\u002Facquire-multiple-resource-locks-in-consistent-order","2026-09-18",{"title":746,"description":1228},"articles\u002F2026\u002Facquire-multiple-resource-locks-in-consistent-order",[1235],"PostgreSQL","\u002Fimages\u002Farticles\u002Facquire-multiple-resource-locks-in-consistent-order.png","csz0VtK4hyp8-jB9XPeLrHNen-iE8sjaWXdCfCPl10k",{"id":1239,"title":179,"body":1240,"description":2122,"extension":730,"meta":2123,"navigation":732,"path":178,"publishDate":2124,"published":732,"seo":2125,"stem":2126,"tags":2127,"thumbnail":2130,"updated":2124,"__hash__":2131},"articles\u002Farticles\u002F2026\u002Fgit-worktree-with-docker-development.md",{"type":8,"value":1241,"toc":2108},[1242,1244,1247,1250,1253,1256,1259,1262,1265,1269,1272,1275,1278,1285,1288,1299,1302,1306,1309,1316,1348,1351,1357,1360,1366,1373,1377,1384,1387,1454,1460,1485,1499,1505,1511,1518,1524,1535,1541,1544,1547,1553,1556,1560,1563,1590,1617,1623,1629,1635,1638,1692,1695,1729,1760,1763,1778,1782,1785,1791,1794,1816,1819,1844,1866,1869,1872,1876,1879,1882,1888,1891,1895,1898,1947,1954,1981,1984,1988,1991,1994,1997,2008,2011,2018,2021,2024,2074,2077,2080,2082,2085,2088,2091,2095,2098,2105],[11,1243,13],{},[11,1245,1246],{},"最近、普段使うエディターをZed Editorへ乗り換えました。",[11,1248,1249],{},"Zed Editorで新しいスレッドを作る際にWorktreeを作成する選択肢があり、複数のブランチを並行して開発するのに便利そうだったため試してみました。",[11,1251,1252],{},"ブランチを切り替えるたびに作業中の変更をstashする必要がなく、AIエージェントへ別の作業を任せる場合にも相性が良さそうだと考えたためです。",[11,1254,1255],{},"ところが、worktree側でコードを変更しても、すでに起動していたDockerコンテナーへ変更が反映されませんでした。",[11,1257,1258],{},"最初は「同じGitリポジトリなのだから、worktree側の変更もコンテナーから見えるだろう」と、なんとなく考えていました。",[11,1260,1261],{},"しかし、Gitから見たリポジトリの関係と、Dockerが見ているホスト上のディレクトリは別の話です。",[11,1263,1264],{},"今回は、Git worktreeとDocker Composeを組み合わせてハマった原因と、複数のworktreeで開発環境を動かす方法を整理します。",[35,1266,1268],{"id":1267},"git-worktreeを使おうと思った理由","Git worktreeを使おうと思った理由",[11,1270,1271],{},"きっかけは、Zed EditorでAIエージェントのスレッドを作るときに、Worktreeを利用できることを知ったことでした。",[11,1273,1274],{},"スレッドごとに別のworktreeで作業できれば、普段の作業を続けながら、AIエージェントには別ブランチの実装を任せられます。",[11,1276,1277],{},"通常、1つの作業ディレクトリで同時にcheckoutできるブランチは1つです。",[11,1279,1280,1281,1284],{},"別のブランチへ移るには ",[160,1282,1283],{},"git switch"," などで切り替えますが、未コミットの変更があると、そのままでは切り替えられない場合があります。",[11,1286,1287],{},"一方、開発中には次のように複数の作業を並行して進めたいことがあります。",[204,1289,1290,1293,1296],{},[127,1291,1292],{},"機能を実装しながら、別ブランチのレビュー指摘を修正する",[127,1294,1295],{},"長時間動く処理を待ちながら、別のタスクを進める",[127,1297,1298],{},"複数のAIエージェントに、それぞれ異なるブランチの作業を任せる",[11,1300,1301],{},"このような場面で、ブランチごとに独立した作業ディレクトリを用意できるGit worktreeが便利そうでした。",[35,1303,1305],{"id":1304},"git-worktreeとは","Git worktreeとは",[11,1307,1308],{},"Git worktreeは、1つのGitリポジトリに複数の作業ツリーを追加できる仕組みです。",[11,1310,1311,1312,1315],{},"たとえば、メインの作業ディレクトリと同じ階層に、",[160,1313,1314],{},"feature\u002Fsample"," ブランチ用のworktreeを作成します。",[152,1317,1321],{"className":1318,"code":1319,"language":1320,"meta":158,"style":158},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","cd sample-app\ngit worktree add ..\u002Fsample-app-feature feature\u002Fsample\n","bash",[160,1322,1323,1331],{"__ignoreMap":158},[417,1324,1325,1328],{"class":419,"line":420},[417,1326,1327],{"class":493},"cd",[417,1329,1330],{"class":427}," sample-app\n",[417,1332,1333,1336,1339,1342,1345],{"class":419,"line":578},[417,1334,1335],{"class":423},"git",[417,1337,1338],{"class":427}," worktree",[417,1340,1341],{"class":427}," add",[417,1343,1344],{"class":427}," ..\u002Fsample-app-feature",[417,1346,1347],{"class":427}," feature\u002Fsample\n",[11,1349,1350],{},"ホスト上には、次の2つの作業ディレクトリが存在する状態になります。",[152,1352,1355],{"className":1353,"code":1354,"language":157,"meta":158},[155],"projects\u002F\n├── sample-app\u002F          mainブランチの作業ディレクトリ\n└── sample-app-feature\u002F  feature\u002Fsampleブランチの作業ディレクトリ\n",[160,1356,1354],{"__ignoreMap":158},[11,1358,1359],{},"それぞれのディレクトリでは、異なるブランチのファイルを同時に開いて編集できます。Gitのオブジェクトや一部の管理情報は共有しますが、作業ツリー上のファイルはディレクトリごとに別々です。",[152,1361,1364],{"className":1362,"code":1363,"language":157,"meta":158},[155],"1つのGitリポジトリ\n├── worktree: sample-app\u002F          → main\n└── worktree: sample-app-feature\u002F  → feature\u002Fsample\n",[160,1365,1363],{"__ignoreMap":158},[11,1367,1368,1369,1372],{},"ここで重要なのは、",[27,1370,1371],{},"Git上では同じリポジトリに属していても、ホスト上では別のディレクトリである"," という点です。",[35,1374,1376],{"id":1375},"worktree側の変更がdockerへ反映されなかった","worktree側の変更がDockerへ反映されなかった",[11,1378,1379,1380,1383],{},"もともと ",[160,1381,1382],{},"sample-app\u002F"," では、Docker Composeを使ってアプリケーションを起動していました。",[11,1385,1386],{},"Composeファイルには、次のようなbind mountが設定されているものとします。",[152,1388,1392],{"className":1389,"code":1390,"language":1391,"meta":158,"style":158},"language-yaml shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","services:\n  app:\n    build: .\n    volumes:\n      - .:\u002Fapp\n    ports:\n      - \"3000:3000\"\n","yaml",[160,1393,1394,1403,1410,1421,1428,1436,1443],{"__ignoreMap":158},[417,1395,1396,1400],{"class":419,"line":420},[417,1397,1399],{"class":1398},"swJcz","services",[417,1401,1402],{"class":500},":\n",[417,1404,1405,1408],{"class":419,"line":578},[417,1406,1407],{"class":1398},"  app",[417,1409,1402],{"class":500},[417,1411,1412,1415,1417],{"class":419,"line":596},[417,1413,1414],{"class":1398},"    build",[417,1416,590],{"class":500},[417,1418,1420],{"class":1419},"sbssI"," .\n",[417,1422,1423,1426],{"class":419,"line":617},[417,1424,1425],{"class":1398},"    volumes",[417,1427,1402],{"class":500},[417,1429,1430,1433],{"class":419,"line":623},[417,1431,1432],{"class":500},"      -",[417,1434,1435],{"class":427}," .:\u002Fapp\n",[417,1437,1438,1441],{"class":419,"line":999},[417,1439,1440],{"class":1398},"    ports",[417,1442,1402],{"class":500},[417,1444,1445,1447,1449,1452],{"class":419,"line":1004},[417,1446,1432],{"class":500},[417,1448,609],{"class":500},[417,1450,1451],{"class":427},"3000:3000",[417,1453,614],{"class":500},[11,1455,1456,1457,1459],{},"この状態で ",[160,1458,1382],{}," からコンテナーを起動します。",[152,1461,1463],{"className":1318,"code":1462,"language":1320,"meta":158,"style":158},"cd sample-app\ndocker compose up -d\n",[160,1464,1465,1471],{"__ignoreMap":158},[417,1466,1467,1469],{"class":419,"line":420},[417,1468,1327],{"class":493},[417,1470,1330],{"class":427},[417,1472,1473,1476,1479,1482],{"class":419,"line":578},[417,1474,1475],{"class":423},"docker",[417,1477,1478],{"class":427}," compose",[417,1480,1481],{"class":427}," up",[417,1483,1484],{"class":427}," -d\n",[11,1486,1487,1490,1491,1494,1495,1498],{},[160,1488,1489],{},".:\u002Fapp"," は、ホスト側の相対パス ",[160,1492,1493],{},"."," を、コンテナー側の ",[160,1496,1497],{},"\u002Fapp"," へbind mountする指定です。Composeファイル内の相対的なホストパスは、基本的にComposeファイルのあるディレクトリを基準に解決されます。",[11,1500,1501,1502,1504],{},"今回のコンテナーが見ていたのは、",[160,1503,1382],{}," のファイルでした。",[152,1506,1509],{"className":1507,"code":1508,"language":157,"meta":158},[155],"ホスト\nprojects\u002F\n├── sample-app\u002F ───────────────────┐\n│   └── src\u002F                       │ bind mount\n└── sample-app-feature\u002F            │\n    └── src\u002F                       ▼\n                              コンテナー\n                              \u002Fapp\u002F\n",[160,1510,1508],{"__ignoreMap":158},[11,1512,1513,1514,1517],{},"その後、",[160,1515,1516],{},"sample-app-feature\u002F"," でコードを変更しました。",[152,1519,1522],{"className":1520,"code":1521,"language":157,"meta":158},[155],"projects\u002Fsample-app-feature\u002Fsrc\u002F\n",[160,1523,1521],{"__ignoreMap":158},[11,1525,1526,1527,1529,1530,256,1532,1534],{},"しかし、既存コンテナーの ",[160,1528,1497],{}," が参照しているのは、引き続き ",[160,1531,1382],{},[160,1533,1516],{}," はmountされていないため、そこで行った変更はコンテナーへ反映されません。",[152,1536,1539],{"className":1537,"code":1538,"language":157,"meta":158},[155],"sample-app\u002Fsrc\u002F          → コンテナーの \u002Fapp から見える\nsample-app-feature\u002Fsrc\u002F  → コンテナーの \u002Fapp からは見えない\n",[160,1540,1538],{"__ignoreMap":158},[11,1542,1543],{},"Dockerは、その2つが同じGitリポジトリのworktreeかどうかを考慮しません。bind mountで指定されたホスト上のパスだけを参照します。",[11,1545,1546],{},"つまり、今回の原因は次の認識が抜けていたことでした。",[1548,1549,1550],"blockquote",{},[11,1551,1552],{},"Gitから見れば同じリポジトリの別worktree。でもDockerから見れば単なる別ディレクトリ。",[11,1554,1555],{},"「同じGitリポジトリ」と「同じディレクトリ」は別の話です。",[35,1557,1559],{"id":1558},"解決方法1-worktreeごとにdocker-composeを起動する","解決方法1: worktreeごとにDocker Composeを起動する",[11,1561,1562],{},"アプリケーションもDBもブランチごとに分けたい場合は、worktreeごとにDocker Composeを起動します。",[152,1564,1566],{"className":1318,"code":1565,"language":1320,"meta":158,"style":158},"cd sample-app\ndocker compose -p sample-app-main up -d\n",[160,1567,1568,1574],{"__ignoreMap":158},[417,1569,1570,1572],{"class":419,"line":420},[417,1571,1327],{"class":493},[417,1573,1330],{"class":427},[417,1575,1576,1578,1580,1583,1586,1588],{"class":419,"line":578},[417,1577,1475],{"class":423},[417,1579,1478],{"class":427},[417,1581,1582],{"class":427}," -p",[417,1584,1585],{"class":427}," sample-app-main",[417,1587,1481],{"class":427},[417,1589,1484],{"class":427},[152,1591,1593],{"className":1318,"code":1592,"language":1320,"meta":158,"style":158},"cd sample-app-feature\ndocker compose -p sample-app-feature up -d\n",[160,1594,1595,1602],{"__ignoreMap":158},[417,1596,1597,1599],{"class":419,"line":420},[417,1598,1327],{"class":493},[417,1600,1601],{"class":427}," sample-app-feature\n",[417,1603,1604,1606,1608,1610,1613,1615],{"class":419,"line":578},[417,1605,1475],{"class":423},[417,1607,1478],{"class":427},[417,1609,1582],{"class":427},[417,1611,1612],{"class":427}," sample-app-feature",[417,1614,1481],{"class":427},[417,1616,1484],{"class":427},[11,1618,1619,1622],{},[160,1620,1621],{},"-p"," でComposeのproject名を分けると、コンテナーやネットワーク、Composeが管理する名前付きVolumeを別のリソースとして扱えます。",[11,1624,1625,1626,1628],{},"各worktreeにあるComposeファイルの ",[160,1627,1489],{}," は、それぞれのworktreeをmountします。",[152,1630,1633],{"className":1631,"code":1632,"language":157,"meta":158},[155],"sample-app\u002F          → sample-app-mainのappコンテナー:\u002Fapp\nsample-app-feature\u002F  → sample-app-featureのappコンテナー:\u002Fapp\n",[160,1634,1632],{"__ignoreMap":158},[11,1636,1637],{},"ただし、同じホストポートは同時に利用できません。ポート番号を環境変数にして、worktreeごとに変更できるようにします。",[152,1639,1641],{"className":1389,"code":1640,"language":1391,"meta":158,"style":158},"services:\n  app:\n    build: .\n    volumes:\n      - .:\u002Fapp\n    ports:\n      - \"${APP_PORT:-3000}:3000\"\n",[160,1642,1643,1649,1655,1663,1669,1675,1681],{"__ignoreMap":158},[417,1644,1645,1647],{"class":419,"line":420},[417,1646,1399],{"class":1398},[417,1648,1402],{"class":500},[417,1650,1651,1653],{"class":419,"line":578},[417,1652,1407],{"class":1398},[417,1654,1402],{"class":500},[417,1656,1657,1659,1661],{"class":419,"line":596},[417,1658,1414],{"class":1398},[417,1660,590],{"class":500},[417,1662,1420],{"class":1419},[417,1664,1665,1667],{"class":419,"line":617},[417,1666,1425],{"class":1398},[417,1668,1402],{"class":500},[417,1670,1671,1673],{"class":419,"line":623},[417,1672,1432],{"class":500},[417,1674,1435],{"class":427},[417,1676,1677,1679],{"class":419,"line":999},[417,1678,1440],{"class":1398},[417,1680,1402],{"class":500},[417,1682,1683,1685,1687,1690],{"class":419,"line":1004},[417,1684,1432],{"class":500},[417,1686,609],{"class":500},[417,1688,1689],{"class":427},"${APP_PORT:-3000}:3000",[417,1691,614],{"class":500},[11,1693,1694],{},"たとえば、メイン側では3000番、feature側では3001番を使用します。",[152,1696,1698],{"className":1318,"code":1697,"language":1320,"meta":158,"style":158},"# sample-app\u002F\nAPP_PORT=3000 docker compose -p sample-app-main up -d\n",[160,1699,1700,1706],{"__ignoreMap":158},[417,1701,1702],{"class":419,"line":420},[417,1703,1705],{"class":1704},"sHwdD","# sample-app\u002F\n",[417,1707,1708,1711,1713,1716,1719,1721,1723,1725,1727],{"class":419,"line":578},[417,1709,1710],{"class":675},"APP_PORT",[417,1712,679],{"class":500},[417,1714,1715],{"class":427},"3000",[417,1717,1718],{"class":423}," docker",[417,1720,1478],{"class":427},[417,1722,1582],{"class":427},[417,1724,1585],{"class":427},[417,1726,1481],{"class":427},[417,1728,1484],{"class":427},[152,1730,1732],{"className":1318,"code":1731,"language":1320,"meta":158,"style":158},"# sample-app-feature\u002F\nAPP_PORT=3001 docker compose -p sample-app-feature up -d\n",[160,1733,1734,1739],{"__ignoreMap":158},[417,1735,1736],{"class":419,"line":420},[417,1737,1738],{"class":1704},"# sample-app-feature\u002F\n",[417,1740,1741,1743,1745,1748,1750,1752,1754,1756,1758],{"class":419,"line":578},[417,1742,1710],{"class":675},[417,1744,679],{"class":500},[417,1746,1747],{"class":427},"3001",[417,1749,1718],{"class":423},[417,1751,1478],{"class":427},[417,1753,1582],{"class":427},[417,1755,1612],{"class":427},[417,1757,1481],{"class":427},[417,1759,1484],{"class":427},[11,1761,1762],{},"DBのポートもホストへ公開する場合は、同じように別の番号を割り当てる必要があります。アプリコンテナーからCompose内のDBへ接続するだけであれば、通常はDBのホスト側ポートを公開せず、サービス名とコンテナー側ポートで接続できます。",[1764,1765,1768],"article-callout",{"title":1766,"type":1767},"project名を省略した場合","note",[11,1769,1770,1771,1773,1774,1777],{},"Composeのproject名は、通常はComposeファイルのあるディレクトリ名などから決まります。worktreeのディレクトリ名が異なれば自動的に分かれる場合もありますが、",[160,1772,1621],{}," や ",[160,1775,1776],{},"COMPOSE_PROJECT_NAME"," で明示すると、どの環境のリソースなのか判断しやすくなります。",[35,1779,1781],{"id":1780},"解決方法2-共通サービスだけdockerで起動する","解決方法2: 共通サービスだけDockerで起動する",[11,1783,1784],{},"もう1つの方法は、DBやRedisなどの共通サービスだけをDockerで起動し、アプリケーションは各worktreeのホスト上で起動する構成です。",[152,1786,1789],{"className":1787,"code":1788,"language":157,"meta":158},[155],"sample-app\u002F          ── アプリをlocalhost:3000で起動 ─┐\n                                                       ├─ Docker上のDB、Redis\nsample-app-feature\u002F  ── アプリをlocalhost:3001で起動 ─┘\n",[160,1790,1788],{"__ignoreMap":158},[11,1792,1793],{},"たとえば、ComposeでDBとRedisだけを起動します。",[152,1795,1797],{"className":1318,"code":1796,"language":1320,"meta":158,"style":158},"docker compose up -d db redis\n",[160,1798,1799],{"__ignoreMap":158},[417,1800,1801,1803,1805,1807,1810,1813],{"class":419,"line":420},[417,1802,1475],{"class":423},[417,1804,1478],{"class":427},[417,1806,1481],{"class":427},[417,1808,1809],{"class":427}," -d",[417,1811,1812],{"class":427}," db",[417,1814,1815],{"class":427}," redis\n",[11,1817,1818],{},"その後、各worktreeでアプリケーションの開発サーバーを別のポートで起動します。",[152,1820,1822],{"className":1318,"code":1821,"language":1320,"meta":158,"style":158},"cd sample-app\npnpm dev --port 3000\n",[160,1823,1824,1830],{"__ignoreMap":158},[417,1825,1826,1828],{"class":419,"line":420},[417,1827,1327],{"class":493},[417,1829,1330],{"class":427},[417,1831,1832,1835,1838,1841],{"class":419,"line":578},[417,1833,1834],{"class":423},"pnpm",[417,1836,1837],{"class":427}," dev",[417,1839,1840],{"class":427}," --port",[417,1842,1843],{"class":1419}," 3000\n",[152,1845,1847],{"className":1318,"code":1846,"language":1320,"meta":158,"style":158},"cd sample-app-feature\npnpm dev --port 3001\n",[160,1848,1849,1855],{"__ignoreMap":158},[417,1850,1851,1853],{"class":419,"line":420},[417,1852,1327],{"class":493},[417,1854,1601],{"class":427},[417,1856,1857,1859,1861,1863],{"class":419,"line":578},[417,1858,1834],{"class":423},[417,1860,1837],{"class":427},[417,1862,1840],{"class":427},[417,1864,1865],{"class":1419}," 3001\n",[11,1867,1868],{},"アプリケーションの起動が軽く、言語やパッケージの実行環境をホスト側へ用意できる場合は、この構成のほうがシンプルです。",[11,1870,1871],{},"ただし、DBを共有すると、ブランチごとのmigrationが同じDBへ影響します。アプリケーションだけを分けても、データやschemaまで分離されるわけではありません。",[35,1873,1875],{"id":1874},"複数のworktreeでdockerを使うときの注意点","複数のworktreeでDockerを使うときの注意点",[169,1877,1878],{"id":1878},"ポートが競合する",[11,1880,1881],{},"複数のコンテナーや開発サーバーを同時に起動すると、同じホストポートを割り当てられません。",[152,1883,1886],{"className":1884,"code":1885,"language":157,"meta":158},[155],"Bind for 0.0.0.0:3000 failed: port is already allocated\n",[160,1887,1885],{"__ignoreMap":158},[11,1889,1890],{},"アプリ、DB、デバッガーなど、ホストへ公開しているポートをworktreeごとに整理する必要があります。",[169,1892,1894],{"id":1893},"docker-volumeが意図せず共有または分離される","Docker Volumeが意図せず共有または分離される",[11,1896,1897],{},"Composeが管理する名前付きVolumeは、基本的にproject名の影響を受けます。project名を分けると、DBのVolumeも別になるのが通常です。",[152,1899,1901],{"className":1389,"code":1900,"language":1391,"meta":158,"style":158},"services:\n  db:\n    volumes:\n      - db-data:\u002Fvar\u002Flib\u002Fmysql\n\nvolumes:\n  db-data:\n",[160,1902,1903,1909,1916,1922,1929,1933,1940],{"__ignoreMap":158},[417,1904,1905,1907],{"class":419,"line":420},[417,1906,1399],{"class":1398},[417,1908,1402],{"class":500},[417,1910,1911,1914],{"class":419,"line":578},[417,1912,1913],{"class":1398},"  db",[417,1915,1402],{"class":500},[417,1917,1918,1920],{"class":419,"line":596},[417,1919,1425],{"class":1398},[417,1921,1402],{"class":500},[417,1923,1924,1926],{"class":419,"line":617},[417,1925,1432],{"class":500},[417,1927,1928],{"class":427}," db-data:\u002Fvar\u002Flib\u002Fmysql\n",[417,1930,1931],{"class":419,"line":623},[417,1932,981],{"emptyLinePlaceholder":732},[417,1934,1935,1938],{"class":419,"line":999},[417,1936,1937],{"class":1398},"volumes",[417,1939,1402],{"class":500},[417,1941,1942,1945],{"class":419,"line":1004},[417,1943,1944],{"class":1398},"  db-data",[417,1946,1402],{"class":500},[11,1948,1949,1950,1953],{},"一方、Volumeに ",[160,1951,1952],{},"name"," を明示している場合やexternal Volumeを使っている場合は、project名を分けても同じVolumeを参照できます。",[152,1955,1957],{"className":1389,"code":1956,"language":1391,"meta":158,"style":158},"volumes:\n  db-data:\n    name: sample-app-db-data\n",[160,1958,1959,1965,1971],{"__ignoreMap":158},[417,1960,1961,1963],{"class":419,"line":420},[417,1962,1937],{"class":1398},[417,1964,1402],{"class":500},[417,1966,1967,1969],{"class":419,"line":578},[417,1968,1944],{"class":1398},[417,1970,1402],{"class":500},[417,1972,1973,1976,1978],{"class":419,"line":596},[417,1974,1975],{"class":1398},"    name",[417,1977,590],{"class":500},[417,1979,1980],{"class":427}," sample-app-db-data\n",[11,1982,1983],{},"共有するつもりだったDBが空になったり、分離したつもりのDBを複数ブランチから共有したりしないよう、実際のVolume名を確認することが大切です。",[169,1985,1987],{"id":1986},"dbを共有したままmigrationを実行するのは危険","DBを共有したままmigrationを実行するのは危険",[11,1989,1990],{},"ブランチごとにmigrationの内容が違う場合、同じDBへ交互にmigrationを実行するとschemaとコードの対応が崩れる可能性があります。",[11,1992,1993],{},"たとえば、featureブランチでカラムを追加したあとに、mainブランチのコードから同じDBへ接続すると、想定していないschemaを参照することになります。カラムの削除や型変更を含むmigrationでは、データを失う危険もあります。",[11,1995,1996],{},"次のような場合は、DBやschemaもworktreeごとに分けたほうが安全です。",[204,1998,1999,2002,2005],{},[127,2000,2001],{},"破壊的なmigrationを試す",[127,2003,2004],{},"複数ブランチで異なるmigrationを並行して作る",[127,2006,2007],{},"テストデータをブランチごとに独立させたい",[11,2009,2010],{},"DBを共有する場合は、同時に実行するブランチ間でschemaに互換性があるかを確認し、必要なデータを事前にバックアップします。",[1764,2012,2015],{"title":2013,"type":2014},"コンテナーを分けてもDBが分かれるとは限らない","caution",[11,2016,2017],{},"接続先が同じ外部DBだったり、同じ名前付きVolumeを明示的に共有していたりすると、アプリコンテナーを分けてもデータは共有されます。コンテナー名だけでなく、接続先とVolumeの設定まで確認してください。",[35,2019,2020],{"id":2020},"どう使い分けるのが良さそうか",[11,2022,2023],{},"今回整理した構成は、次のように使い分けるのが良さそうです。",[43,2025,2026,2039],{},[46,2027,2028],{},[49,2029,2030,2033,2036],{},[52,2031,2032],{},"構成",[52,2034,2035],{},"向いている場面",[52,2037,2038],{},"注意点",[59,2040,2041,2052,2063],{},[49,2042,2043,2046,2049],{},[64,2044,2045],{},"worktreeごとにCompose一式を起動",[64,2047,2048],{},"アプリ、DB、Redisなどをブランチ単位で独立させたい",[64,2050,2051],{},"使用メモリやディスク容量が増える",[49,2053,2054,2057,2060],{},[64,2055,2056],{},"共通サービスだけDockerで起動",[64,2058,2059],{},"アプリをホスト上で手軽に複数起動したい",[64,2061,2062],{},"共有DBのmigrationに注意する",[49,2064,2065,2068,2071],{},[64,2066,2067],{},"1つのCompose環境だけ使う",[64,2069,2070],{},"実行して確認するブランチを同時に1つへ絞れる",[64,2072,2073],{},"別worktreeの変更は自動では反映されない",[11,2075,2076],{},"環境を完全に分離したい場合は、worktreeごとにproject名、ポート、Volumeを分ける方法が分かりやすいです。",[11,2078,2079],{},"一方、DBやRedisの状態を共有しても問題がなく、アプリケーションをホスト上で起動できるなら、共通サービスだけをDockerへ任せる構成が扱いやすいと感じました。",[35,2081,1180],{"id":1180},[11,2083,2084],{},"Git worktreeを使うと、1つのGitリポジトリに複数の作業ディレクトリを用意し、異なるブランチを並行して編集できます。",[11,2086,2087],{},"しかし、Dockerのbind mountが参照するのは、設定で指定されたホスト上のディレクトリだけです。別のworktreeを作成しても、既存コンテナーのmount先が自動的に切り替わることはありません。",[11,2089,2090],{},"今回ハマった原因は、Gitが管理するリポジトリの単位と、Dockerが参照するディレクトリの単位を混同していたことでした。",[1548,2092,2093],{},[11,2094,1552],{},[11,2096,2097],{},"この違いを理解すると、worktreeごとにCompose環境を分けるべきか、DBなどだけを共有するべきかを判断しやすくなります。",[11,2099,2100,2101,2104],{},"Git worktreeとDockerを組み合わせるときは、ブランチだけでなく、",[27,2102,2103],{},"どのホストディレクトリを、どのコンテナーへmountしているのか"," を確認することが大切だと学びました。",[711,2106,2107],{},"html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":158,"searchDepth":578,"depth":578,"links":2109},[2110,2111,2112,2113,2114,2115,2120,2121],{"id":1267,"depth":578,"text":1268},{"id":1304,"depth":578,"text":1305},{"id":1375,"depth":578,"text":1376},{"id":1558,"depth":578,"text":1559},{"id":1780,"depth":578,"text":1781},{"id":1874,"depth":578,"text":1875,"children":2116},[2117,2118,2119],{"id":1878,"depth":596,"text":1878},{"id":1893,"depth":596,"text":1894},{"id":1986,"depth":596,"text":1987},{"id":2020,"depth":578,"text":2020},{"id":1180,"depth":578,"text":1180},"Git worktreeで複数ブランチを並行開発したとき、変更が既存のDockerコンテナーへ反映されなかった原因を、bind mountの仕組みから整理します。",{},"2026-09-03",{"title":179,"description":2122},"articles\u002F2026\u002Fgit-worktree-with-docker-development",[2128,2129],"Git","Docker","\u002Fimages\u002Farticles\u002Fgit-worktree-with-docker-development.png","2zopLntSY8Ya7BGOnXbiIDpvrvdM5aVjWBBDkgAL7Ek",{"id":2133,"title":2134,"body":2135,"description":2801,"extension":730,"meta":2802,"navigation":732,"path":2803,"publishDate":2804,"published":732,"seo":2805,"stem":2806,"tags":2807,"thumbnail":2809,"updated":2810,"__hash__":2811},"articles\u002Farticles\u002F2026\u002Fsync-local-branch-after-stack-pr-rebase.md","GitHub上でStack PRをrebaseしたあとにローカルブランチを同期する方法",{"type":8,"value":2136,"toc":2781},[2137,2139,2146,2152,2155,2158,2172,2175,2178,2181,2184,2190,2193,2199,2216,2232,2238,2241,2244,2247,2253,2256,2260,2272,2275,2281,2284,2312,2316,2331,2340,2344,2362,2365,2376,2382,2385,2388,2417,2420,2424,2431,2434,2452,2458,2461,2464,2474,2478,2481,2495,2498,2504,2507,2510,2513,2563,2570,2573,2576,2640,2643,2647,2650,2657,2729,2732,2734,2737,2740,2765,2771,2778],[11,2138,13],{},[11,2140,2141,2142,2145],{},"先日、GitHub上でStack PRをrebaseしたあと、ローカルブランチからpushしようとしたところ、",[160,2143,2144],{},"non-fast-forward"," エラーが発生しました。",[152,2147,2150],{"className":2148,"code":2149,"language":157,"meta":158},[155],"! [rejected] branch-name -> branch-name (non-fast-forward)\nerror: failed to push some refs\n",[160,2151,2149],{"__ignoreMap":158},[11,2153,2154],{},"rebaseによってコミット履歴がどう変わるかは理解していたものの、その結果をローカル環境へどう反映すればよいのか分かっていませんでした。",[11,2156,2157],{},"今回は、GitHub上でrebase済みのブランチを正として、ローカルブランチを安全に同期する方法を整理します。",[1764,2159,2161],{"title":2160,"type":2014},"resetする前にローカルの変更を確認する",[11,2162,2163,2164,2167,2168,2171],{},"この記事では ",[160,2165,2166],{},"git reset --hard"," を使用します。",[2169,2170],"br",{},"未コミットの変更やローカルにしかないコミットが不要であることを確認してから実行してください。",[35,2173,2174],{"id":2174},"rebase後にpushできなくなる理由",[11,2176,2177],{},"rebaseは、既存コミットの親を付け替えて履歴を並べ直す処理です。",[11,2179,2180],{},"コミットの変更内容が同じでも、親コミットが変わるとコミットIDも変わります。",[169,2182,2183],{"id":2183},"rebase前",[152,2185,2188],{"className":2186,"code":2187,"language":157,"meta":158},[155],"A---B---C       親ブランチ\n     \\\n      D---E     子ブランチ\n",[160,2189,2187],{"__ignoreMap":158},[169,2191,2192],{"id":2192},"rebase後",[152,2194,2197],{"className":2195,"code":2196,"language":157,"meta":158},[155],"A---B---C---D'---E'\n",[160,2198,2196],{"__ignoreMap":158},[11,2200,2201,2204,2205,2208,2209,2204,2212,2215],{},[160,2202,2203],{},"D"," と ",[160,2206,2207],{},"D'","、",[160,2210,2211],{},"E",[160,2213,2214],{},"E'"," は変更内容がほぼ同じでも、Git上では異なるコミットです。",[11,2217,2218,2219,2204,2221,2223,2224,2226,2227,2204,2229,2231],{},"GitHub上でrebaseした場合、リモートブランチは新しい ",[160,2220,2207],{},[160,2222,2214],{}," を参照します。",[2169,2225],{},"一方、ローカルブランチは古い ",[160,2228,2203],{},[160,2230,2211],{}," を参照したままです。",[152,2233,2236],{"className":2234,"code":2235,"language":157,"meta":158},[155],"              D---E       ローカル\n             \u002F\nA---B---C\n             \\\n              D'---E'     リモート\n",[160,2237,2235],{"__ignoreMap":158},[11,2239,2240],{},"ローカルの履歴がリモートの直接の続きではないため、通常のpushは拒否されます。コードの内容ではなく、コミット履歴が分岐していることが原因です。",[35,2242,2243],{"id":2243},"ローカルブランチを同期する",[11,2245,2246],{},"ここでは、次のブランチにいる状態で同期するものとします。",[152,2248,2251],{"className":2249,"code":2250,"language":157,"meta":158},[155],"feature\u002Fsample-docs\n",[160,2252,2250],{"__ignoreMap":158},[11,2254,2255],{},"実行時は、自分が同期したいブランチ名へ置き換えてください。",[169,2257,2259],{"id":2258},"_1-未コミットの変更を確認する","1. 未コミットの変更を確認する",[152,2261,2263],{"className":1318,"code":2262,"language":1320,"meta":158,"style":158},"git status\n",[160,2264,2265],{"__ignoreMap":158},[417,2266,2267,2269],{"class":419,"line":420},[417,2268,1335],{"class":423},[417,2270,2271],{"class":427}," status\n",[11,2273,2274],{},"次のように表示されれば、作業ツリーはクリーンです。",[152,2276,2279],{"className":2277,"code":2278,"language":157,"meta":158},[155],"nothing to commit, working tree clean\n",[160,2280,2278],{"__ignoreMap":158},[11,2282,2283],{},"変更を残したい場合は、先にコミットするか、未追跡ファイルも含めてstashします。",[152,2285,2287],{"className":1318,"code":2286,"language":1320,"meta":158,"style":158},"git stash push -u -m \"rebase後の同期前に一時退避\"\n",[160,2288,2289],{"__ignoreMap":158},[417,2290,2291,2293,2296,2299,2302,2305,2307,2310],{"class":419,"line":420},[417,2292,1335],{"class":423},[417,2294,2295],{"class":427}," stash",[417,2297,2298],{"class":427}," push",[417,2300,2301],{"class":427}," -u",[417,2303,2304],{"class":427}," -m",[417,2306,609],{"class":500},[417,2308,2309],{"class":427},"rebase後の同期前に一時退避",[417,2311,614],{"class":500},[169,2313,2315],{"id":2314},"_2-リモートの最新情報を取得する","2. リモートの最新情報を取得する",[152,2317,2319],{"className":1318,"code":2318,"language":1320,"meta":158,"style":158},"git fetch origin\n",[160,2320,2321],{"__ignoreMap":158},[417,2322,2323,2325,2328],{"class":419,"line":420},[417,2324,1335],{"class":423},[417,2326,2327],{"class":427}," fetch",[417,2329,2330],{"class":427}," origin\n",[11,2332,2333,2336,2337,2339],{},[160,2334,2335],{},"fetch"," は、リモートの最新コミットとブランチ情報を取得します。",[2169,2338],{},"この操作だけでは、現在のローカルブランチや作業中のファイルは変更されません。",[169,2341,2343],{"id":2342},"_3-ローカルをリモートと同じ状態にする","3. ローカルをリモートと同じ状態にする",[152,2345,2347],{"className":1318,"code":2346,"language":1320,"meta":158,"style":158},"git reset --hard origin\u002Ffeature\u002Fsample-docs\n",[160,2348,2349],{"__ignoreMap":158},[417,2350,2351,2353,2356,2359],{"class":419,"line":420},[417,2352,1335],{"class":423},[417,2354,2355],{"class":427}," reset",[417,2357,2358],{"class":427}," --hard",[417,2360,2361],{"class":427}," origin\u002Ffeature\u002Fsample-docs\n",[11,2363,2364],{},"このコマンドによって、次の状態がリモートブランチにそろいます。",[204,2366,2367,2370,2373],{},[127,2368,2369],{},"現在のローカルブランチが参照するコミット",[127,2371,2372],{},"ステージング領域",[127,2374,2375],{},"Gitが追跡している作業ツリー上のファイル",[11,2377,2378,2379,2381],{},"なお、",[160,2380,2166],{}," だけでは未追跡ファイルは削除されません。",[35,2383,2384],{"id":2384},"実行コマンドのまとめ",[11,2386,2387],{},"未コミットの変更や残したいローカルコミットがない場合は、次の流れで同期できます。",[152,2389,2391],{"className":1318,"code":2390,"language":1320,"meta":158,"style":158},"git status\ngit fetch origin\ngit reset --hard origin\u002Ffeature\u002Fsample-docs\n",[160,2392,2393,2399,2407],{"__ignoreMap":158},[417,2394,2395,2397],{"class":419,"line":420},[417,2396,1335],{"class":423},[417,2398,2271],{"class":427},[417,2400,2401,2403,2405],{"class":419,"line":578},[417,2402,1335],{"class":423},[417,2404,2327],{"class":427},[417,2406,2330],{"class":427},[417,2408,2409,2411,2413,2415],{"class":419,"line":596},[417,2410,1335],{"class":423},[417,2412,2355],{"class":427},[417,2414,2358],{"class":427},[417,2416,2361],{"class":427},[11,2418,2419],{},"ブランチ名は、実際に同期するブランチへ置き換えてください。",[35,2421,2423],{"id":2422},"git-pullを使わない理由","git pullを使わない理由",[11,2425,2426,2427,2430],{},"GitHub上のブランチはrebase後の履歴、ローカルブランチはrebase前の履歴を参照している状態で ",[160,2428,2429],{},"git pull"," を実行すると、Gitはそれぞれの履歴を統合しようとします。",[11,2432,2433],{},"実際にpullしたところ、ローカルとリモートの履歴が分岐しているため、統合方法を指定するよう求められました。",[152,2435,2437],{"className":1318,"code":2436,"language":1320,"meta":158,"style":158},"git pull origin feature\u002Fsample-docs\n",[160,2438,2439],{"__ignoreMap":158},[417,2440,2441,2443,2446,2449],{"class":419,"line":420},[417,2442,1335],{"class":423},[417,2444,2445],{"class":427}," pull",[417,2447,2448],{"class":427}," origin",[417,2450,2451],{"class":427}," feature\u002Fsample-docs\n",[152,2453,2456],{"className":2454,"code":2455,"language":157,"meta":158},[155],"hint: You have divergent branches and need to specify how to reconcile them.\nhint: You can do so by running one of the following commands sometime before\nhint: your next pull:\nhint:\nhint:   git config pull.rebase false  # merge\nhint:   git config pull.rebase true   # rebase\nhint:   git config pull.ff only       # fast-forward only\nfatal: Need to specify how to reconcile divergent branches.\n",[160,2457,2455],{"__ignoreMap":158},[11,2459,2460],{},"Gitは、分岐した履歴をmergeするのか、rebaseするのか、fast-forwardだけを許可するのかを自動では判断できません。",[11,2462,2463],{},"GitHub上で完了したrebase結果を正とするのであれば、古いローカル履歴を統合する必要はありません。",[11,2465,2466,2467,2469,2470,2473],{},"そのため、",[160,2468,2335],{}," でリモートの状態を取得し、内容を確認してから ",[160,2471,2472],{},"reset --hard"," でローカルを合わせる方法が明確です。",[35,2475,2477],{"id":2476},"force-pushを使わない理由","force pushを使わない理由",[11,2479,2480],{},"GitHub上でrebaseした直後に古いローカルブランチからforce pushすると、GitHubが作った新しい履歴を古い履歴で上書きする可能性があります。",[152,2482,2484],{"className":1318,"code":2483,"language":1320,"meta":158,"style":158},"git push --force\n",[160,2485,2486],{"__ignoreMap":158},[417,2487,2488,2490,2492],{"class":419,"line":420},[417,2489,1335],{"class":423},[417,2491,2298],{"class":427},[417,2493,2494],{"class":427}," --force\n",[11,2496,2497],{},"この場面で必要なのは、リモートをローカルへ合わせることではなく、ローカルをrebase済みのリモートへ合わせることです。",[152,2499,2502],{"className":2500,"code":2501,"language":157,"meta":158},[155],"避けたい操作:\n古いローカル履歴 → リモートへforce push\n\n行いたい操作:\nrebase済みリモート履歴 → ローカルへ反映\n",[160,2503,2501],{"__ignoreMap":158},[35,2505,2506],{"id":2506},"ローカルの変更を残したい場合",[169,2508,2509],{"id":2509},"未コミットの変更がある場合",[11,2511,2512],{},"未コミットの変更は、同期前にstashできます。",[152,2514,2516],{"className":1318,"code":2515,"language":1320,"meta":158,"style":158},"git stash push -u -m \"rebase後の同期前に一時退避\"\ngit fetch origin\ngit reset --hard origin\u002Ffeature\u002Fsample-docs\ngit stash pop\n",[160,2517,2518,2536,2544,2554],{"__ignoreMap":158},[417,2519,2520,2522,2524,2526,2528,2530,2532,2534],{"class":419,"line":420},[417,2521,1335],{"class":423},[417,2523,2295],{"class":427},[417,2525,2298],{"class":427},[417,2527,2301],{"class":427},[417,2529,2304],{"class":427},[417,2531,609],{"class":500},[417,2533,2309],{"class":427},[417,2535,614],{"class":500},[417,2537,2538,2540,2542],{"class":419,"line":578},[417,2539,1335],{"class":423},[417,2541,2327],{"class":427},[417,2543,2330],{"class":427},[417,2545,2546,2548,2550,2552],{"class":419,"line":596},[417,2547,1335],{"class":423},[417,2549,2355],{"class":427},[417,2551,2358],{"class":427},[417,2553,2361],{"class":427},[417,2555,2556,2558,2560],{"class":419,"line":617},[417,2557,1335],{"class":423},[417,2559,2295],{"class":427},[417,2561,2562],{"class":427}," pop\n",[11,2564,2565,2566,2569],{},"ただし、rebase後のコードと変更箇所が重なっていると、",[160,2567,2568],{},"stash pop"," 時にコンフリクトする可能性があります。",[169,2571,2572],{"id":2572},"未pushのコミットがある場合",[11,2574,2575],{},"ローカルに必要なコミットがある場合は、コミットIDを控えるか、退避用ブランチを作ってから同期します。その後、必要なコミットをcherry-pickします。",[152,2577,2579],{"className":1318,"code":2578,"language":1320,"meta":158,"style":158},"git fetch origin\ngit log --oneline origin\u002Ffeature\u002Fsample-docs..HEAD\ngit branch backup\u002Fsample-docs-before-sync\ngit reset --hard origin\u002Ffeature\u002Fsample-docs\ngit cherry-pick \u003C残したいコミットID>\n",[160,2580,2581,2589,2602,2612,2622],{"__ignoreMap":158},[417,2582,2583,2585,2587],{"class":419,"line":420},[417,2584,1335],{"class":423},[417,2586,2327],{"class":427},[417,2588,2330],{"class":427},[417,2590,2591,2593,2596,2599],{"class":419,"line":578},[417,2592,1335],{"class":423},[417,2594,2595],{"class":427}," log",[417,2597,2598],{"class":427}," --oneline",[417,2600,2601],{"class":427}," origin\u002Ffeature\u002Fsample-docs..HEAD\n",[417,2603,2604,2606,2609],{"class":419,"line":596},[417,2605,1335],{"class":423},[417,2607,2608],{"class":427}," branch",[417,2610,2611],{"class":427}," backup\u002Fsample-docs-before-sync\n",[417,2613,2614,2616,2618,2620],{"class":419,"line":617},[417,2615,1335],{"class":423},[417,2617,2355],{"class":427},[417,2619,2358],{"class":427},[417,2621,2361],{"class":427},[417,2623,2624,2626,2629,2632,2635,2637],{"class":419,"line":623},[417,2625,1335],{"class":423},[417,2627,2628],{"class":427}," cherry-pick",[417,2630,2631],{"class":500}," \u003C",[417,2633,2634],{"class":427},"残したいコミットI",[417,2636,2203],{"class":675},[417,2638,2639],{"class":500},">\n",[11,2641,2642],{},"cherry-pickでも、rebase後の変更と重なっている場合はコンフリクトの解消が必要です。",[35,2644,2646],{"id":2645},"複数のstackブランチを同期する場合","複数のStackブランチを同期する場合",[11,2648,2649],{},"GitHubのStack rebaseでは、Stack内の複数ブランチが更新されます。",[11,2651,2652,2653,2656],{},"ローカルでも複数の子ブランチを使い続ける場合は、",[160,2654,2655],{},"git fetch origin"," を実行したあと、それぞれを対応するリモートブランチへ同期します。",[152,2658,2660],{"className":1318,"code":2659,"language":1320,"meta":158,"style":158},"git switch feature\u002Fsample-api\ngit reset --hard origin\u002Ffeature\u002Fsample-api\n\ngit switch feature\u002Fsample-ui\ngit reset --hard origin\u002Ffeature\u002Fsample-ui\n\ngit switch feature\u002Fsample-docs\ngit reset --hard origin\u002Ffeature\u002Fsample-docs\n",[160,2661,2662,2672,2683,2687,2696,2707,2711,2719],{"__ignoreMap":158},[417,2663,2664,2666,2669],{"class":419,"line":420},[417,2665,1335],{"class":423},[417,2667,2668],{"class":427}," switch",[417,2670,2671],{"class":427}," feature\u002Fsample-api\n",[417,2673,2674,2676,2678,2680],{"class":419,"line":578},[417,2675,1335],{"class":423},[417,2677,2355],{"class":427},[417,2679,2358],{"class":427},[417,2681,2682],{"class":427}," origin\u002Ffeature\u002Fsample-api\n",[417,2684,2685],{"class":419,"line":596},[417,2686,981],{"emptyLinePlaceholder":732},[417,2688,2689,2691,2693],{"class":419,"line":617},[417,2690,1335],{"class":423},[417,2692,2668],{"class":427},[417,2694,2695],{"class":427}," feature\u002Fsample-ui\n",[417,2697,2698,2700,2702,2704],{"class":419,"line":623},[417,2699,1335],{"class":423},[417,2701,2355],{"class":427},[417,2703,2358],{"class":427},[417,2705,2706],{"class":427}," origin\u002Ffeature\u002Fsample-ui\n",[417,2708,2709],{"class":419,"line":999},[417,2710,981],{"emptyLinePlaceholder":732},[417,2712,2713,2715,2717],{"class":419,"line":1004},[417,2714,1335],{"class":423},[417,2716,2668],{"class":427},[417,2718,2451],{"class":427},[417,2720,2721,2723,2725,2727],{"class":419,"line":1010},[417,2722,1335],{"class":423},[417,2724,2355],{"class":427},[417,2726,2358],{"class":427},[417,2728,2361],{"class":427},[11,2730,2731],{},"作業を続ける最上位ブランチしか使わない場合は、ひとまずそのブランチだけ同期すれば作業を再開できます。あとから途中のブランチへ戻る場合は、その時点で同期が必要です。",[35,2733,1180],{"id":1180},[11,2735,2736],{},"GitHub上でStack PRをrebaseすると、リモート側のコミットIDが作り直されます。そのため、古い履歴を参照しているローカルブランチから通常のpushはできなくなります。",[11,2738,2739],{},"同期するときの基本方針は次のとおりです。",[124,2741,2742,2748,2751,2756,2762],{},[127,2743,2744,2747],{},[160,2745,2746],{},"git status"," で未コミットの変更を確認する",[127,2749,2750],{},"必要であればstashや退避用ブランチを作る",[127,2752,2753,2755],{},[160,2754,2655],{}," でrebase後の履歴を取得する",[127,2757,2758,2761],{},[160,2759,2760],{},"git reset --hard origin\u002F\u003Cブランチ名>"," で同期する",[127,2763,2764],{},"古いローカル履歴からforce pushしない",[11,2766,2767,2768,2770],{},"rebase後にpushできなくなるのは異常ではありません。",[2169,2769],{},"GitHubとローカルが異なるコミット履歴を参照しているために起きる、Gitとして正常な挙動です。",[11,2772,2773,2774,2777],{},"今回の経験を通して、rebaseによる履歴の変化だけでなく、",[27,2775,2776],{},"どちらの履歴を正として、どちらを合わせるのか"," を判断することが大切だと学びました。",[711,2779,2780],{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":158,"searchDepth":578,"depth":578,"links":2782},[2783,2787,2792,2793,2794,2795,2799,2800],{"id":2174,"depth":578,"text":2174,"children":2784},[2785,2786],{"id":2183,"depth":596,"text":2183},{"id":2192,"depth":596,"text":2192},{"id":2243,"depth":578,"text":2243,"children":2788},[2789,2790,2791],{"id":2258,"depth":596,"text":2259},{"id":2314,"depth":596,"text":2315},{"id":2342,"depth":596,"text":2343},{"id":2384,"depth":578,"text":2384},{"id":2422,"depth":578,"text":2423},{"id":2476,"depth":578,"text":2477},{"id":2506,"depth":578,"text":2506,"children":2796},[2797,2798],{"id":2509,"depth":596,"text":2509},{"id":2572,"depth":596,"text":2572},{"id":2645,"depth":578,"text":2646},{"id":1180,"depth":578,"text":1180},"GitHub上でStack PRをrebaseしたあと、古いコミット履歴が残るローカルブランチをrebase済みのリモートブランチへ安全に同期する手順を紹介します。",{},"\u002Farticles\u002F2026\u002Fsync-local-branch-after-stack-pr-rebase","2026-08-27",{"title":2134,"description":2801},"articles\u002F2026\u002Fsync-local-branch-after-stack-pr-rebase",[2128,2808],"GitHub","\u002Fimages\u002Farticles\u002Fsync-local-branch-after-stack-pr-rebase.png","2026-08-29","dBjHJRNGHtkl1XTP0Qbhr3-DHoHrffQddWseIgn7_s0",{"id":2813,"title":2814,"body":2815,"description":3416,"extension":730,"meta":3417,"navigation":732,"path":3418,"publishDate":3419,"published":732,"seo":3420,"stem":3421,"tags":3422,"thumbnail":3424,"updated":3419,"__hash__":3425},"articles\u002Farticles\u002F2026\u002Fresolve-mac-system-data-storage-shortage-with-docker.md","Macの「システムデータ」が267GBに増えた原因はDockerだった",{"type":8,"value":2816,"toc":3406},[2817,2819,2826,2829,2836,2839,2845,2849,2852,2858,2861,2867,2870,2873,2876,2912,2921,2928,2934,2940,2968,2975,2981,2987,3015,3018,3024,3027,3030,3034,3037,3052,3055,3061,3064,3102,3108,3112,3115,3133,3139,3142,3148,3151,3155,3158,3170,3173,3188,3191,3197,3204,3208,3211,3228,3231,3237,3240,3243,3252,3261,3264,3270,3273,3287,3290,3293,3296,3339,3342,3349,3351,3354,3382,3385,3388,3400,3403],[11,2818,13],{},[11,2820,2821,2822,2825],{},"Xcodeをインストールしてアプリ開発するため、一応MacBookのストレージを確認したところ、「システムデータ」が ",[27,2823,2824],{},"267GB"," まで増えていました、、",[11,2827,2828],{},"システムデータはmacOSがまとめて表示している領域で、ストレージ設定を見ただけでは、何に容量を使っているのか全然分かりませんでした。",[11,2830,2831,2832,2835],{},"そこでターミナルから使用量を調べた結果、主な原因は ",[27,2833,2834],{},"Docker Desktopのデータ"," でした。",[11,2837,2838],{},"今回は、原因を特定した手順と、DockerのBuild Cache、Image、Volumeを整理して空き容量を増やした方法を紹介します。",[1764,2840,2842],{"title":2841,"type":2014},"削除前に必要なデータを確認する",[11,2843,2844],{},"この記事にはDockerのデータを削除するコマンドが登場します。必要なImageやVolumeまで削除しないよう、各コマンドの対象を確認し、DBなどの重要なデータは事前にバックアップしてください。",[35,2846,2848],{"id":2847},"macのストレージ状況を確認する","Macのストレージ状況を確認する",[11,2850,2851],{},"macOSでは、次の順番でストレージの使用状況を確認できます。",[152,2853,2856],{"className":2854,"code":2855,"language":157,"meta":158},[155],"メニュー\n  ↓\nシステム設定\n  ↓\n一般\n  ↓\nストレージ\n",[160,2857,2855],{"__ignoreMap":158},[11,2859,2860],{},"今回確認したときは、システムデータだけで267GBを使用していました。",[152,2862,2865],{"className":2863,"code":2864,"language":157,"meta":158},[155],"システムデータ  267GB\n",[160,2866,2864],{"__ignoreMap":158},[11,2868,2869],{},"通常のファイル整理だけでは解消できそうになかったため、どのディレクトリが容量を使っているのか調べました。",[35,2871,2872],{"id":2872},"容量を使っているディレクトリを調べる",[11,2874,2875],{},"まず、ホームディレクトリ直下の使用量を確認します。",[152,2877,2879],{"className":1318,"code":2878,"language":1320,"meta":158,"style":158},"du -h -d 1 ~ 2>\u002Fdev\u002Fnull | sort -h\n",[160,2880,2881],{"__ignoreMap":158},[417,2882,2883,2886,2889,2891,2894,2897,2900,2903,2906,2909],{"class":419,"line":420},[417,2884,2885],{"class":423},"du",[417,2887,2888],{"class":427}," -h",[417,2890,1809],{"class":427},[417,2892,2893],{"class":1419}," 1",[417,2895,2896],{"class":427}," ~",[417,2898,2899],{"class":500}," 2>",[417,2901,2902],{"class":427},"\u002Fdev\u002Fnull",[417,2904,2905],{"class":500}," |",[417,2907,2908],{"class":423}," sort",[417,2910,2911],{"class":427}," -h\n",[11,2913,2914,2916,2917,2920],{},[160,2915,2885],{}," はディレクトリごとの使用量を表示するコマンドです。",[160,2918,2919],{},"-d 1"," を指定すると、1階層下までを集計できます。",[11,2922,2923,2924,2927],{},"結果を見ると、",[160,2925,2926],{},"~\u002FLibrary"," が約254GBを占めていました。",[152,2929,2932],{"className":2930,"code":2931,"language":157,"meta":158},[155],"254G  \u002FUsers\u002Fxxxxx\u002FLibrary\n",[160,2933,2931],{"__ignoreMap":158},[11,2935,2936,2937,2939],{},"次に、",[160,2938,2926],{}," の内訳を確認します。",[152,2941,2943],{"className":1318,"code":2942,"language":1320,"meta":158,"style":158},"du -h -d 1 ~\u002FLibrary 2>\u002Fdev\u002Fnull | sort -h\n",[160,2944,2945],{"__ignoreMap":158},[417,2946,2947,2949,2951,2953,2955,2958,2960,2962,2964,2966],{"class":419,"line":420},[417,2948,2885],{"class":423},[417,2950,2888],{"class":427},[417,2952,1809],{"class":427},[417,2954,2893],{"class":1419},[417,2956,2957],{"class":427}," ~\u002FLibrary",[417,2959,2899],{"class":500},[417,2961,2902],{"class":427},[417,2963,2905],{"class":500},[417,2965,2908],{"class":423},[417,2967,2911],{"class":427},[11,2969,2970,2971,2974],{},"ここでは、",[160,2972,2973],{},"Containers"," が約210GBを使用していました。",[152,2976,2979],{"className":2977,"code":2978,"language":157,"meta":158},[155],"210G  \u002FUsers\u002Fxxxxx\u002FLibrary\u002FContainers\n",[160,2980,2978],{"__ignoreMap":158},[11,2982,2983,2984,2986],{},"さらに、",[160,2985,2973],{}," の中を調べます。",[152,2988,2990],{"className":1318,"code":2989,"language":1320,"meta":158,"style":158},"du -h -d 1 ~\u002FLibrary\u002FContainers 2>\u002Fdev\u002Fnull | sort -h\n",[160,2991,2992],{"__ignoreMap":158},[417,2993,2994,2996,2998,3000,3002,3005,3007,3009,3011,3013],{"class":419,"line":420},[417,2995,2885],{"class":423},[417,2997,2888],{"class":427},[417,2999,1809],{"class":427},[417,3001,2893],{"class":1419},[417,3003,3004],{"class":427}," ~\u002FLibrary\u002FContainers",[417,3006,2899],{"class":500},[417,3008,2902],{"class":427},[417,3010,2905],{"class":500},[417,3012,2908],{"class":423},[417,3014,2911],{"class":427},[11,3016,3017],{},"すると、Docker Desktopのコンテナーディレクトリが約210GBを占めていることが分かりました。",[152,3019,3022],{"className":3020,"code":3021,"language":157,"meta":158},[155],"210G  \u002FUsers\u002Fxxxxx\u002FLibrary\u002FContainers\u002Fcom.docker.docker\n",[160,3023,3021],{"__ignoreMap":158},[11,3025,3026],{},"macOS版のDocker Desktopは、Linuxコンテナーを動かすための仮想ディスクをMac上に保存しています。",[11,3028,3029],{},"そのためDockerのImage、Volume、Build Cacheなどが増えると、macOSではシステムデータとして大きく表示されることがあります。",[35,3031,3033],{"id":3032},"dockerの使用量を確認する","Dockerの使用量を確認する",[11,3035,3036],{},"Docker側の内訳は、次のコマンドで確認できます。",[152,3038,3040],{"className":1318,"code":3039,"language":1320,"meta":158,"style":158},"docker system df\n",[160,3041,3042],{"__ignoreMap":158},[417,3043,3044,3046,3049],{"class":419,"line":420},[417,3045,1475],{"class":423},[417,3047,3048],{"class":427}," system",[417,3050,3051],{"class":427}," df\n",[11,3053,3054],{},"今回の主な結果は次のとおりでした。",[152,3056,3059],{"className":3057,"code":3058,"language":157,"meta":158},[155],"TYPE            TOTAL     SIZE\nImages          20        107.6GB\nContainers      12        526MB\nLocal Volumes   46        100.2GB\nBuild Cache     196       73GB\n",[160,3060,3058],{"__ignoreMap":158},[11,3062,3063],{},"特に容量が大きかったのは、次の3項目です。",[43,3065,3066,3076],{},[46,3067,3068],{},[49,3069,3070,3072],{},[52,3071,329],{},[52,3073,3075],{"align":3074},"right","容量",[59,3077,3078,3086,3094],{},[49,3079,3080,3083],{},[64,3081,3082],{},"Images",[64,3084,3085],{"align":3074},"107.6GB",[49,3087,3088,3091],{},[64,3089,3090],{},"Local Volumes",[64,3092,3093],{"align":3074},"100.2GB",[49,3095,3096,3099],{},[64,3097,3098],{},"Build Cache",[64,3100,3101],{"align":3074},"73GB",[11,3103,3104,3107],{},[160,3105,3106],{},"docker system df"," の数値には共有レイヤーなども含まれるため、表示された値の合計が、そのままMac上で解放できる容量になるとは限りません。ただし、どの種類のデータから調べるべきかを判断する目安になります。",[35,3109,3111],{"id":3110},"build-cacheを削除する","Build Cacheを削除する",[11,3113,3114],{},"まず、最も整理しやすいBuild Cacheを削除しました。",[152,3116,3118],{"className":1318,"code":3117,"language":1320,"meta":158,"style":158},"docker builder prune -a\n",[160,3119,3120],{"__ignoreMap":158},[417,3121,3122,3124,3127,3130],{"class":419,"line":420},[417,3123,1475],{"class":423},[417,3125,3126],{"class":427}," builder",[417,3128,3129],{"class":427}," prune",[417,3131,3132],{"class":427}," -a\n",[11,3134,3135,3138],{},[160,3136,3137],{},"-a"," を付けると、現在使われていないBuild Cacheがまとめて削除されます。実行前には削除対象と確認メッセージが表示されます。",[11,3140,3141],{},"今回、Build Cacheは73GBから0Bになりました。",[152,3143,3146],{"className":3144,"code":3145,"language":157,"meta":158},[155],"73GB → 0B\n",[160,3147,3145],{"__ignoreMap":158},[11,3149,3150],{},"Build CacheはDocker Imageをビルドするときに再利用される中間データです。削除しても必要に応じて再生成されますが、次回のビルドには時間がかかる場合があります。",[35,3152,3154],{"id":3153},"不要なimageを整理する","不要なImageを整理する",[11,3156,3157],{},"次に、保存されているImageを確認しました。",[152,3159,3161],{"className":1318,"code":3160,"language":1320,"meta":158,"style":158},"docker images\n",[160,3162,3163],{"__ignoreMap":158},[417,3164,3165,3167],{"class":419,"line":420},[417,3166,1475],{"class":423},[417,3168,3169],{"class":427}," images\n",[11,3171,3172],{},"まずは、タグがなく、コンテナーから参照されていないdangling imageを削除します。",[152,3174,3176],{"className":1318,"code":3175,"language":1320,"meta":158,"style":158},"docker image prune\n",[160,3177,3178],{"__ignoreMap":158},[417,3179,3180,3182,3185],{"class":419,"line":420},[417,3181,1475],{"class":423},[417,3183,3184],{"class":427}," image",[417,3186,3187],{"class":427}," prune\n",[11,3189,3190],{},"今回の削除量は約2.4GBでした。",[152,3192,3195],{"className":3193,"code":3194,"language":157,"meta":158},[155],"Total reclaimed space: 2.355GB\n",[160,3196,3194],{"__ignoreMap":158},[11,3198,3199,3200,3203],{},"すべての未使用Imageを対象にする ",[160,3201,3202],{},"docker image prune -a"," もありますが、次回の起動時に再取得が必要になるImageまで削除されます。今回は一覧を確認しながら、必要なImageを残して整理しました。",[35,3205,3207],{"id":3206},"大きなvolumeの中身を調べる","大きなVolumeの中身を調べる",[11,3209,3210],{},"Volumeごとの詳しい使用量は、次のコマンドで確認できます。",[152,3212,3214],{"className":1318,"code":3213,"language":1320,"meta":158,"style":158},"docker system df -v\n",[160,3215,3216],{"__ignoreMap":158},[417,3217,3218,3220,3222,3225],{"class":419,"line":420},[417,3219,1475],{"class":423},[417,3221,3048],{"class":427},[417,3223,3224],{"class":427}," df",[417,3226,3227],{"class":427}," -v\n",[11,3229,3230],{},"確認したところ、開発用DBのデータを保存しているVolumeが84.28GBを使用していました。",[152,3232,3235],{"className":3233,"code":3234,"language":157,"meta":158},[155],"xxxxxx_db-store  84.28GB\n",[160,3236,3234],{"__ignoreMap":158},[11,3238,3239],{},"このVolumeは現在利用しているプロジェクトのDBだったため、Volume自体は削除できません。そこで、DBの中に残っている不要な開発用スキーマを確認し、必要なデータではないことを確かめてから削除しました。",[11,3241,3242],{},"MySQLでは、次のSQLでスキーマを削除できます。",[152,3244,3246],{"className":967,"code":3245,"language":969,"meta":158,"style":158},"DROP SCHEMA schema_name;\n",[160,3247,3248],{"__ignoreMap":158},[417,3249,3250],{"class":419,"line":420},[417,3251,3245],{},[1764,3253,3255],{"title":3254,"type":2014},"DROP SCHEMAは元に戻せない",[11,3256,3257,3260],{},[160,3258,3259],{},"DROP SCHEMA"," を実行すると、スキーマ内のテーブルやデータも削除されます。対象名をよく確認し、必要に応じてバックアップを取得してから実行してください。",[11,3262,3263],{},"不要なスキーマを整理した結果、Local Volumesの使用量は100.2GBから53.89GBまで減りました。",[152,3265,3268],{"className":3266,"code":3267,"language":157,"meta":158},[155],"100.2GB → 53.89GB\n",[160,3269,3267],{"__ignoreMap":158},[11,3271,3272],{},"なお、使われていないVolumeをまとめて削除する場合は、次のコマンドを利用できます。",[152,3274,3276],{"className":1318,"code":3275,"language":1320,"meta":158,"style":158},"docker volume prune\n",[160,3277,3278],{"__ignoreMap":158},[417,3279,3280,3282,3285],{"class":419,"line":420},[417,3281,1475],{"class":423},[417,3283,3284],{"class":427}," volume",[417,3286,3187],{"class":427},[11,3288,3289],{},"VolumeにはDBなどの永続データが保存されていることがあります。名前や利用状況を確認せずに実行するのは避けたほうが安全です。",[35,3291,3292],{"id":3292},"整理後の結果",[11,3294,3295],{},"整理前と整理後のDocker使用量は、次のようになりました。",[43,3297,3298,3310],{},[46,3299,3300],{},[49,3301,3302,3304,3307],{},[52,3303,329],{},[52,3305,3306],{"align":3074},"整理前",[52,3308,3309],{"align":3074},"整理後",[59,3311,3312,3321,3330],{},[49,3313,3314,3316,3318],{},[64,3315,3082],{},[64,3317,3085],{"align":3074},[64,3319,3320],{"align":3074},"50.4GB",[49,3322,3323,3325,3327],{},[64,3324,3090],{},[64,3326,3093],{"align":3074},[64,3328,3329],{"align":3074},"53.89GB",[49,3331,3332,3334,3336],{},[64,3333,3098],{},[64,3335,3101],{"align":3074},[64,3337,3338],{"align":3074},"0B",[11,3340,3341],{},"Build Cacheの削除と、不要なImage、DBスキーマの整理によって、Docker関連のデータを100GB以上削減できました。",[11,3343,3344,3345,3348],{},"Docker Desktopの仮想ディスクはスパースファイルとして管理されるため、Docker上でデータを削除しても、ファイル自体の見かけの最大サイズがすぐに小さくならない場合があります。実際の空き容量はmacOSのストレージ画面や ",[160,3346,3347],{},"df -h"," でも確認すると確実です。",[35,3350,1180],{"id":1180},[11,3352,3353],{},"Macのシステムデータが異常に増えた場合は、次の順番で調べると原因を絞り込めます。",[124,3355,3356,3364,3370,3376,3379],{},[127,3357,3358,3360,3361,3363],{},[160,3359,2885],{}," で ",[160,3362,2926],{}," の使用量を確認する",[127,3365,3366,3369],{},[160,3367,3368],{},"~\u002FLibrary\u002FContainers"," に大きなディレクトリがないか確認する",[127,3371,3372,3373,3375],{},"Docker Desktopが大きい場合は ",[160,3374,3106],{}," で内訳を確認する",[127,3377,3378],{},"不要なBuild CacheやImageを整理する",[127,3380,3381],{},"大きなVolumeは削除せず、保存されているデータの中身まで確認する",[11,3383,3384],{},"特にDocker Desktopを長期間使っていると、過去のBuild CacheやImage、開発用DBのデータが蓄積します。",[11,3386,3387],{},"Macの容量不足に気づいてから慌てないよう、定期的に次のコマンドで使用量を確認しておくと安心です。",[152,3389,3390],{"className":1318,"code":3039,"language":1320,"meta":158,"style":158},[160,3391,3392],{"__ignoreMap":158},[417,3393,3394,3396,3398],{"class":419,"line":420},[417,3395,1475],{"class":423},[417,3397,3048],{"class":427},[417,3399,3051],{"class":427},[11,3401,3402],{},"Macのシステムデータが数百GBまで増えている場合は、Docker Desktopのデータが原因になっていないか確認してみてください。",[711,3404,3405],{},"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":158,"searchDepth":578,"depth":578,"links":3407},[3408,3409,3410,3411,3412,3413,3414,3415],{"id":2847,"depth":578,"text":2848},{"id":2872,"depth":578,"text":2872},{"id":3032,"depth":578,"text":3033},{"id":3110,"depth":578,"text":3111},{"id":3153,"depth":578,"text":3154},{"id":3206,"depth":578,"text":3207},{"id":3292,"depth":578,"text":3292},{"id":1180,"depth":578,"text":1180},"Macの容量不足をきっかけに「システムデータ」が267GBまで肥大化した原因を調査し、DockerのBuild Cache、Image、DB Volumeを整理した手順を紹介します。",{},"\u002Farticles\u002F2026\u002Fresolve-mac-system-data-storage-shortage-with-docker","2026-08-10",{"title":2814,"description":3416},"articles\u002F2026\u002Fresolve-mac-system-data-storage-shortage-with-docker",[3423,2129],"Mac","\u002Fimages\u002Farticles\u002Fresolve-mac-system-data-storage-shortage-with-docker.png","KWp9gSbK5ytqT20G5ObWg3n5uQyKFKVp9aGSMNPqbgs",{"id":3427,"title":3428,"body":3429,"description":4122,"extension":730,"meta":4123,"navigation":732,"path":4124,"publishDate":4125,"published":732,"seo":4126,"stem":4127,"tags":4128,"thumbnail":4130,"updated":4125,"__hash__":4131},"articles\u002Farticles\u002F2024\u002Flately-learned-js-tip.md","最近学んだJavaScriptのTipsをアウトプット",{"type":8,"value":3430,"toc":4105},[3431,3433,3436,3439,3442,3491,3494,3497,3565,3582,3597,3611,3626,3629,3632,3668,3677,3685,3699,3725,3741,3744,3759,3762,3769,3826,3829,3836,3869,3879,3883,3892,3911,3914,3922,3960,3963,3987,3994,4000,4011,4039,4060,4063,4069,4072,4089,4091,4094,4103],[11,3432,13],{},[11,3434,3435],{},"今回は、最近学んだJavaScriptの小さなTipsとして、オブジェクトの分割代入とオプショナルチェーンを整理します。",[35,3437,3438],{"id":3438},"オブジェクトの分割代入",[11,3440,3441],{},"オブジェクトの分割代入を使うと、プロパティの値を取り出して変数へ代入できます。",[152,3443,3447],{"className":3444,"code":3445,"language":3446,"meta":158,"style":158},"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",[160,3448,3449,3454,3459,3464,3468,3472,3477,3481,3486],{"__ignoreMap":158},[417,3450,3451],{"class":419,"line":420},[417,3452,3453],{},"const user = {\n",[417,3455,3456],{"class":419,"line":578},[417,3457,3458],{},"  greeting: 'Hello',\n",[417,3460,3461],{"class":419,"line":596},[417,3462,3463],{},"  farewell: 'Bye',\n",[417,3465,3466],{"class":419,"line":617},[417,3467,626],{},[417,3469,3470],{"class":419,"line":623},[417,3471,981],{"emptyLinePlaceholder":732},[417,3473,3474],{"class":419,"line":999},[417,3475,3476],{},"const { greeting, farewell } = user\n",[417,3478,3479],{"class":419,"line":1004},[417,3480,981],{"emptyLinePlaceholder":732},[417,3482,3483],{"class":419,"line":1010},[417,3484,3485],{},"console.log(greeting) \u002F\u002F 'Hello'\n",[417,3487,3488],{"class":419,"line":1016},[417,3489,3490],{},"console.log(farewell) \u002F\u002F 'Bye'\n",[169,3492,3493],{"id":3493},"ネストしたプロパティを取り出す",[11,3495,3496],{},"オブジェクトの中にオブジェクトがある場合は、データの構造に合わせて分割代入のパターンもネストできます。",[152,3498,3500],{"className":3444,"code":3499,"language":3446,"meta":158,"style":158},"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",[160,3501,3502,3506,3510,3515,3520,3525,3529,3533,3538,3543,3548,3553,3557,3561],{"__ignoreMap":158},[417,3503,3504],{"class":419,"line":420},[417,3505,3453],{},[417,3507,3508],{"class":419,"line":578},[417,3509,3458],{},[417,3511,3512],{"class":419,"line":596},[417,3513,3514],{},"  message: {\n",[417,3516,3517],{"class":419,"line":617},[417,3518,3519],{},"    farewell: 'Bye',\n",[417,3521,3522],{"class":419,"line":623},[417,3523,3524],{},"  },\n",[417,3526,3527],{"class":419,"line":999},[417,3528,626],{},[417,3530,3531],{"class":419,"line":1004},[417,3532,981],{"emptyLinePlaceholder":732},[417,3534,3535],{"class":419,"line":1010},[417,3536,3537],{},"const {\n",[417,3539,3540],{"class":419,"line":1016},[417,3541,3542],{},"  greeting,\n",[417,3544,3545],{"class":419,"line":1022},[417,3546,3547],{},"  message: { farewell },\n",[417,3549,3550],{"class":419,"line":1027},[417,3551,3552],{},"} = user\n",[417,3554,3555],{"class":419,"line":1033},[417,3556,981],{"emptyLinePlaceholder":732},[417,3558,3559],{"class":419,"line":1039},[417,3560,3485],{},[417,3562,3563],{"class":419,"line":1045},[417,3564,3490],{},[11,3566,3567,3568,3571,3572,874,3575,3578,3579,3581],{},"この例で作られる変数は",[160,3569,3570],{},"greeting","と",[160,3573,3574],{},"farewell",[160,3576,3577],{},"message","は、内側の",[160,3580,3574],{},"へたどるためのパターンとして使われているだけなので、変数として宣言されません。",[152,3583,3585],{"className":3444,"code":3584,"language":3446,"meta":158,"style":158},"console.log(message)\n\u002F\u002F ReferenceError: message is not defined\n",[160,3586,3587,3592],{"__ignoreMap":158},[417,3588,3589],{"class":419,"line":420},[417,3590,3591],{},"console.log(message)\n",[417,3593,3594],{"class":419,"line":578},[417,3595,3596],{},"\u002F\u002F ReferenceError: message is not defined\n",[1764,3598,3600],{"title":3599,"type":1767},"親オブジェクトも使いたい場合",[11,3601,3602,3604,3605,3607,3608,3610],{},[160,3603,3577],{},"自体と、その中の",[160,3606,3574],{},"を両方使いたい場合は、分割代入を分けるか、先に",[160,3609,3577],{},"を取り出してから再度分割代入します。",[152,3612,3614],{"className":3444,"code":3613,"language":3446,"meta":158,"style":158},"const { message } = user\nconst { farewell } = message\n",[160,3615,3616,3621],{"__ignoreMap":158},[417,3617,3618],{"class":419,"line":420},[417,3619,3620],{},"const { message } = user\n",[417,3622,3623],{"class":419,"line":578},[417,3624,3625],{},"const { farewell } = message\n",[169,3627,3628],{"id":3628},"プロパティ名とは異なる変数名で受け取る",[11,3630,3631],{},"コロンの右側へ名前を書くと、プロパティ名とは異なる変数名で値を受け取れます。",[152,3633,3635],{"className":3444,"code":3634,"language":3446,"meta":158,"style":158},"const user = {\n  name: 'Yuri',\n}\n\nconst { name: userName } = user\n\nconsole.log(userName) \u002F\u002F 'Yuri'\n",[160,3636,3637,3641,3646,3650,3654,3659,3663],{"__ignoreMap":158},[417,3638,3639],{"class":419,"line":420},[417,3640,3453],{},[417,3642,3643],{"class":419,"line":578},[417,3644,3645],{},"  name: 'Yuri',\n",[417,3647,3648],{"class":419,"line":596},[417,3649,626],{},[417,3651,3652],{"class":419,"line":617},[417,3653,981],{"emptyLinePlaceholder":732},[417,3655,3656],{"class":419,"line":623},[417,3657,3658],{},"const { name: userName } = user\n",[417,3660,3661],{"class":419,"line":999},[417,3662,981],{"emptyLinePlaceholder":732},[417,3664,3665],{"class":419,"line":1004},[417,3666,3667],{},"console.log(userName) \u002F\u002F 'Yuri'\n",[11,3669,3670,3671,3673,3674,874],{},"この場合も",[160,3672,1952],{},"という変数は作られず、作られるのは",[160,3675,3676],{},"userName",[35,3678,3680,3681,3684],{"id":3679},"オプショナルチェーン","オプショナルチェーン（",[160,3682,3683],{},"?.","）",[11,3686,3687,3688,3691,3692,3695,3696,3698],{},"オプショナルチェーンは、参照の途中にある値が",[160,3689,3690],{},"null","または",[160,3693,3694],{},"undefined","だった場合、エラーを発生させずに",[160,3697,3694],{},"を返す演算子です。",[152,3700,3702],{"className":3444,"code":3701,"language":3446,"meta":158,"style":158},"const user = {\n  name: 'Yuri',\n}\n\nconsole.log(user.profile?.hobby) \u002F\u002F undefined\n",[160,3703,3704,3708,3712,3716,3720],{"__ignoreMap":158},[417,3705,3706],{"class":419,"line":420},[417,3707,3453],{},[417,3709,3710],{"class":419,"line":578},[417,3711,3645],{},[417,3713,3714],{"class":419,"line":596},[417,3715,626],{},[417,3717,3718],{"class":419,"line":617},[417,3719,981],{"emptyLinePlaceholder":732},[417,3721,3722],{"class":419,"line":623},[417,3723,3724],{},"console.log(user.profile?.hobby) \u002F\u002F undefined\n",[11,3726,3727,3730,3731,3733,3734,3736,3737,3740],{},[160,3728,3729],{},"user.profile","は",[160,3732,3694],{},"ですが、",[160,3735,3683],{},"を使っているため、その先の",[160,3738,3739],{},"hobby","へアクセスせず評価を終了します。",[11,3742,3743],{},"通常のプロパティアクセスではエラーになります。",[152,3745,3747],{"className":3444,"code":3746,"language":3446,"meta":158,"style":158},"console.log(user.profile.hobby)\n\u002F\u002F TypeError: Cannot read properties of undefined\n",[160,3748,3749,3754],{"__ignoreMap":158},[417,3750,3751],{"class":419,"line":420},[417,3752,3753],{},"console.log(user.profile.hobby)\n",[417,3755,3756],{"class":419,"line":578},[417,3757,3758],{},"\u002F\u002F TypeError: Cannot read properties of undefined\n",[169,3760,3761],{"id":3761},"配列の要素へアクセスする",[11,3763,3764,3765,3768],{},"角括弧によるアクセスでは、",[160,3766,3767],{},"?.[]","の形で使用します。",[152,3770,3772],{"className":3444,"code":3771,"language":3446,"meta":158,"style":158},"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",[160,3773,3774,3779,3784,3789,3794,3798,3803,3808,3812,3817,3821],{"__ignoreMap":158},[417,3775,3776],{"class":419,"line":420},[417,3777,3778],{},"const items = [\n",[417,3780,3781],{"class":419,"line":578},[417,3782,3783],{},"  { name: 'Item 1' },\n",[417,3785,3786],{"class":419,"line":596},[417,3787,3788],{},"  { name: 'Item 2' },\n",[417,3790,3791],{"class":419,"line":617},[417,3792,3793],{},"]\n",[417,3795,3796],{"class":419,"line":623},[417,3797,981],{"emptyLinePlaceholder":732},[417,3799,3800],{"class":419,"line":999},[417,3801,3802],{},"console.log(items[1]?.name) \u002F\u002F 'Item 2'\n",[417,3804,3805],{"class":419,"line":1004},[417,3806,3807],{},"console.log(items[3]?.name) \u002F\u002F undefined\n",[417,3809,3810],{"class":419,"line":1010},[417,3811,981],{"emptyLinePlaceholder":732},[417,3813,3814],{"class":419,"line":1016},[417,3815,3816],{},"const emptyItems = undefined\n",[417,3818,3819],{"class":419,"line":1022},[417,3820,981],{"emptyLinePlaceholder":732},[417,3822,3823],{"class":419,"line":1027},[417,3824,3825],{},"console.log(emptyItems?.[0]) \u002F\u002F undefined\n",[169,3827,3828],{"id":3828},"関数やメソッドを呼び出す",[11,3830,3831,3832,3835],{},"関数が存在するときだけ呼び出したい場合は、",[160,3833,3834],{},"?.()","を使用します。",[152,3837,3839],{"className":3444,"code":3838,"language":3446,"meta":158,"style":158},"const actions = {\n  greet: () => 'Hello',\n}\n\nconsole.log(actions.greet?.()) \u002F\u002F 'Hello'\nconsole.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[160,3840,3841,3846,3851,3855,3859,3864],{"__ignoreMap":158},[417,3842,3843],{"class":419,"line":420},[417,3844,3845],{},"const actions = {\n",[417,3847,3848],{"class":419,"line":578},[417,3849,3850],{},"  greet: () => 'Hello',\n",[417,3852,3853],{"class":419,"line":596},[417,3854,626],{},[417,3856,3857],{"class":419,"line":617},[417,3858,981],{"emptyLinePlaceholder":732},[417,3860,3861],{"class":419,"line":623},[417,3862,3863],{},"console.log(actions.greet?.()) \u002F\u002F 'Hello'\n",[417,3865,3866],{"class":419,"line":999},[417,3867,3868],{},"console.log(actions.sayGoodbye?.()) \u002F\u002F undefined\n",[11,3870,3871,3872,3875,3876,3878],{},"プロパティが存在していても、その値が関数でなければ",[160,3873,3874],{},"TypeError","になります。",[160,3877,3834],{},"は「呼び出し可能かどうか」まで確認するものではありません。",[169,3880,3882],{"id":3881},"dom要素へアクセスする","DOM要素へアクセスする",[11,3884,3885,3888,3889,3891],{},[160,3886,3887],{},"querySelector","は対象が見つからなかった場合に",[160,3890,3690],{},"を返します。要素が存在するときだけプロパティを参照したい場合にも利用できます。",[152,3893,3895],{"className":3444,"code":3894,"language":3446,"meta":158,"style":158},"const button = document.querySelector('.sample-button')\n\nconsole.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[160,3896,3897,3902,3906],{"__ignoreMap":158},[417,3898,3899],{"class":419,"line":420},[417,3900,3901],{},"const button = document.querySelector('.sample-button')\n",[417,3903,3904],{"class":419,"line":578},[417,3905,981],{"emptyLinePlaceholder":732},[417,3907,3908],{"class":419,"line":596},[417,3909,3910],{},"console.log(button?.textContent) \u002F\u002F 要素がなければundefined\n",[169,3912,3913],{"id":3913},"短絡評価される範囲",[11,3915,3916,3917,3691,3919,3921],{},"オプショナルチェーンでは、左側が",[160,3918,3690],{},[160,3920,3694],{},"の場合、そのチェーンの残りは評価されません。",[152,3923,3925],{"className":3444,"code":3924,"language":3446,"meta":158,"style":158},"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",[160,3926,3927,3932,3937,3941,3946,3950,3955],{"__ignoreMap":158},[417,3928,3929],{"class":419,"line":420},[417,3930,3931],{},"let index = 0\n",[417,3933,3934],{"class":419,"line":578},[417,3935,3936],{},"const items = null\n",[417,3938,3939],{"class":419,"line":596},[417,3940,981],{"emptyLinePlaceholder":732},[417,3942,3943],{"class":419,"line":617},[417,3944,3945],{},"const item = items?.[index++]\n",[417,3947,3948],{"class":419,"line":623},[417,3949,981],{"emptyLinePlaceholder":732},[417,3951,3952],{"class":419,"line":999},[417,3953,3954],{},"console.log(item) \u002F\u002F undefined\n",[417,3956,3957],{"class":419,"line":1004},[417,3958,3959],{},"console.log(index) \u002F\u002F 0\n",[11,3961,3962],{},"ただし、オプショナルチェーンが途切れた後のアクセスは保護されません。",[152,3964,3966],{"className":3444,"code":3965,"language":3446,"meta":158,"style":158},"const user = null\n\nuser?.profile.name \u002F\u002F undefined\n(user?.profile).name \u002F\u002F TypeError\n",[160,3967,3968,3973,3977,3982],{"__ignoreMap":158},[417,3969,3970],{"class":419,"line":420},[417,3971,3972],{},"const user = null\n",[417,3974,3975],{"class":419,"line":578},[417,3976,981],{"emptyLinePlaceholder":732},[417,3978,3979],{"class":419,"line":596},[417,3980,3981],{},"user?.profile.name \u002F\u002F undefined\n",[417,3983,3984],{"class":419,"line":617},[417,3985,3986],{},"(user?.profile).name \u002F\u002F TypeError\n",[11,3988,3989,3990,3993],{},"括弧で区切ると、その後の",[160,3991,3992],{},".name","は別のプロパティアクセスとして評価されます。",[35,3995,3997,3996],{"id":3996},"と組み合わせて既定値を設定する",[160,3998,3999],{},"??",[11,4001,4002,4003,3691,4005,4007,4008,4010],{},"オプショナルチェーンで取得した結果が",[160,4004,3690],{},[160,4006,3694],{},"だった場合、ヌル値合体演算子（",[160,4009,3999],{},"）で既定値を設定できます。",[152,4012,4014],{"className":3444,"code":4013,"language":3446,"meta":158,"style":158},"const user = {}\n\nconst hobby = user.profile?.hobby ?? '未設定'\n\nconsole.log(hobby) \u002F\u002F '未設定'\n",[160,4015,4016,4021,4025,4030,4034],{"__ignoreMap":158},[417,4017,4018],{"class":419,"line":420},[417,4019,4020],{},"const user = {}\n",[417,4022,4023],{"class":419,"line":578},[417,4024,981],{"emptyLinePlaceholder":732},[417,4026,4027],{"class":419,"line":596},[417,4028,4029],{},"const hobby = user.profile?.hobby ?? '未設定'\n",[417,4031,4032],{"class":419,"line":617},[417,4033,981],{"emptyLinePlaceholder":732},[417,4035,4036],{"class":419,"line":623},[417,4037,4038],{},"console.log(hobby) \u002F\u002F '未設定'\n",[11,4040,4041,3730,4044,4047,4048,4051,4052,4054,4055,3691,4057,4059],{},[160,4042,4043],{},"||",[160,4045,4046],{},"0","、空文字列、",[160,4049,4050],{},"false","も右側の値へ置き換えますが、",[160,4053,3999],{},"が右側を返すのは",[160,4056,3690],{},[160,4058,3694],{},"の場合だけです。",[35,4061,4062],{"id":4062},"オプショナルチェーンを使うときの注意点",[11,4064,4065,4066,4068],{},"オプショナルチェーンは条件分岐を簡潔にできますが、必須であるはずの値にまで使用すると、不具合を",[160,4067,3694],{},"として見逃す可能性があります。",[11,4070,4071],{},"次のように使い分けることが大切です。",[204,4073,4074,4080,4083],{},[127,4075,4076,4077,4079],{},"値が存在しないことを仕様として許容する場合は",[160,4078,3683],{},"を使う",[127,4081,4082],{},"値が必須の場合は明示的に確認し、存在しなければエラーとして扱う",[127,4084,4085,4086,4088],{},"取得結果に既定値が必要な場合は",[160,4087,3999],{},"を組み合わせる",[35,4090,1180],{"id":1180},[11,4092,4093],{},"ネストした分割代入を使うと、深い階層の値を簡潔に変数へ取り出せます。ただし、途中のプロパティ名がそのまま変数になるわけではありません。",[11,4095,4096,4097,4099,4100,4102],{},"オプショナルチェーンを使うと、",[160,4098,3690],{},"や",[160,4101,3694],{},"の可能性があるプロパティ、配列、関数へ安全にアクセスできます。便利さだけで多用せず、その値が本当に省略可能なのかを考えて使っていきたいです。",[711,4104,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":4106},[4107,4111,4118,4120,4121],{"id":3438,"depth":578,"text":3438,"children":4108},[4109,4110],{"id":3493,"depth":596,"text":3493},{"id":3628,"depth":596,"text":3628},{"id":3679,"depth":578,"text":4112,"children":4113},"オプショナルチェーン（?.）",[4114,4115,4116,4117],{"id":3761,"depth":596,"text":3761},{"id":3828,"depth":596,"text":3828},{"id":3881,"depth":596,"text":3882},{"id":3913,"depth":596,"text":3913},{"id":3996,"depth":578,"text":4119},"??と組み合わせて既定値を設定する",{"id":4062,"depth":578,"text":4062},{"id":1180,"depth":578,"text":1180},"JavaScriptのネストしたオブジェクトの分割代入とオプショナルチェーンについて、コード例と注意点を交えて整理します。",{},"\u002Farticles\u002F2024\u002Flately-learned-js-tip","2024-12-28",{"title":3428,"description":4122},"articles\u002F2024\u002Flately-learned-js-tip",[4129],"JavaScript","\u002Fimages\u002Farticles\u002Flately-learned-js-tip.png","Xi5F4LrgdP-cQxce9jEEPhpLiC086mIJfek4NR0cS3g",{"id":4133,"title":4134,"body":4135,"description":5771,"extension":730,"meta":5772,"navigation":732,"path":5773,"publishDate":5774,"published":732,"seo":5775,"stem":5776,"tags":5777,"thumbnail":5778,"updated":5774,"__hash__":5779},"articles\u002Farticles\u002F2024\u002Forganize-learned-from-todo.md","Todoアプリのハンズオンで学んだことを整理する",{"type":8,"value":4136,"toc":5742},[4137,4139,4148,4161,4164,4171,4180,4210,4213,4219,4221,4224,4227,4269,4272,4276,4279,4289,4292,4295,4301,4310,4512,4523,4526,4529,4630,4633,4636,4723,4726,4729,4757,4760,4763,4774,4919,4922,4925,4928,4931,4934,4942,4954,5022,5028,5033,5039,5082,5087,5090,5093,5159,5166,5169,5176,5289,5298,5305,5310,5369,5372,5375,5378,5472,5475,5481,5500,5510,5513,5516,5595,5602,5605,5608,5728,5731,5733,5736,5739],[11,4138,13],{},[11,4140,4141,4142,4147],{},"今回は「",[176,4143,4146],{"href":4144,"rel":4145},"https:\u002F\u002Fzenn.dev\u002Fsprout2000\u002Fbooks\u002F76a279bb90c3f3",[884],"React Hooks と TypeScript でつくる Todo PWA ～入門 React ハンズオン～","」を進める中で学んだことを、次の4つに分けて整理します。",[204,4149,4150,4153,4155,4158],{},[127,4151,4152],{},"HTML",[127,4154,4129],{},[127,4156,4157],{},"React",[127,4159,4160],{},"TypeScript",[35,4162,4152],{"id":4163},"html",[169,4165,4167,4170],{"id":4166},"autofocus属性",[160,4168,4169],{},"autofocus","属性",[11,4172,4173,4175,4176,4179],{},[160,4174,4169],{},"は、ページの読み込み時や",[160,4177,4178],{},"dialog","要素の表示時に、指定した要素へ自動的にフォーカスするための属性です。",[152,4181,4184],{"className":4182,"code":4183,"language":4163,"meta":158,"style":158},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cinput type=\"text\" autofocus>\n",[160,4185,4186],{"__ignoreMap":158},[417,4187,4188,4191,4194,4197,4199,4201,4203,4205,4208],{"class":419,"line":420},[417,4189,4190],{"class":500},"\u003C",[417,4192,4193],{"class":1398},"input",[417,4195,4196],{"class":584}," type",[417,4198,679],{"class":500},[417,4200,587],{"class":500},[417,4202,157],{"class":427},[417,4204,587],{"class":500},[417,4206,4207],{"class":584}," autofocus",[417,4209,2639],{"class":500},[11,4211,4212],{},"1つの文書やダイアログ内では、複数の要素へ指定しないようにします。複数指定した場合、最初に見つかった要素がフォーカスされます。",[1764,4214,4216],{"title":4215,"type":2014},"アクセシビリティへの配慮",[11,4217,4218],{},"ページを開いた直後にフォーカスが移動すると、スクリーンリーダー利用者やモバイル利用者を混乱させる場合があります。本当に自動フォーカスが必要かを検討して使用しましょう。",[35,4220,4129],{"id":3446},[169,4222,4223],{"id":4223},"オブジェクトのプロパティ名を動的にする",[11,4225,4226],{},"オブジェクトリテラルのプロパティ名を角括弧で囲むと、式の評価結果をプロパティ名として使用できます。これは計算プロパティ名と呼ばれます。",[152,4228,4230],{"className":3444,"code":4229,"language":3446,"meta":158,"style":158},"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",[160,4231,4232,4237,4241,4246,4251,4255,4259,4264],{"__ignoreMap":158},[417,4233,4234],{"class":419,"line":420},[417,4235,4236],{},"const key = 'sampleKey'\n",[417,4238,4239],{"class":419,"line":578},[417,4240,981],{"emptyLinePlaceholder":732},[417,4242,4243],{"class":419,"line":596},[417,4244,4245],{},"const sample = {\n",[417,4247,4248],{"class":419,"line":617},[417,4249,4250],{},"  [key]: 'sampleValue',\n",[417,4252,4253],{"class":419,"line":623},[417,4254,626],{},[417,4256,4257],{"class":419,"line":999},[417,4258,981],{"emptyLinePlaceholder":732},[417,4260,4261],{"class":419,"line":1004},[417,4262,4263],{},"console.log(sample) \u002F\u002F { sampleKey: 'sampleValue' }\n",[417,4265,4266],{"class":419,"line":1010},[417,4267,4268],{},"console.log(sample[key]) \u002F\u002F 'sampleValue'\n",[11,4270,4271],{},"入力項目の名前をキーとしてオブジェクトを更新する場合などに利用できます。",[169,4273,4275],{"id":4274},"tree-shaking","Tree Shaking",[11,4277,4278],{},"Tree Shakingは、利用されていないコードをビルド結果から取り除く最適化です。",[11,4280,4281,4282,3571,4285,4288],{},"主にバンドラーがES Modulesの",[160,4283,4284],{},"import",[160,4286,4287],{},"export","を静的に解析し、参照されていないエクスポートを出力対象から除外します。",[11,4290,4291],{},"実際に削除できる範囲は、バンドラーの設定やコードに副作用があるかどうかによって変わります。",[35,4293,4157],{"id":4294},"react",[169,4296,4298],{"id":4297},"createroot",[160,4299,4300],{},"createRoot",[11,4302,4303,4305,4306,4309],{},[160,4304,4300],{},"は、Reactが管理するルートをブラウザのDOM要素へ作成するAPIです。作成したルートの",[160,4307,4308],{},"render","メソッドへReact要素を渡して表示します。",[152,4311,4315],{"className":4312,"code":4313,"language":4314,"meta":158,"style":158},"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",[160,4316,4317,4340,4360,4377,4381,4413,4417,4433,4455,4459,4463,4477,4487,4498,4508],{"__ignoreMap":158},[417,4318,4319,4322,4325,4328,4331,4334,4336,4338],{"class":419,"line":420},[417,4320,4284],{"class":4321},"s7zQu",[417,4323,4324],{"class":500}," {",[417,4326,4327],{"class":675}," StrictMode",[417,4329,4330],{"class":500}," }",[417,4332,4333],{"class":4321}," from",[417,4335,501],{"class":500},[417,4337,4294],{"class":427},[417,4339,507],{"class":500},[417,4341,4342,4344,4346,4349,4351,4353,4355,4358],{"class":419,"line":578},[417,4343,4284],{"class":4321},[417,4345,4324],{"class":500},[417,4347,4348],{"class":675}," createRoot",[417,4350,4330],{"class":500},[417,4352,4333],{"class":4321},[417,4354,501],{"class":500},[417,4356,4357],{"class":427},"react-dom\u002Fclient",[417,4359,507],{"class":500},[417,4361,4362,4364,4367,4370,4372,4375],{"class":419,"line":596},[417,4363,4284],{"class":4321},[417,4365,4366],{"class":675}," App ",[417,4368,4369],{"class":4321},"from",[417,4371,501],{"class":500},[417,4373,4374],{"class":427},".\u002FApp",[417,4376,507],{"class":500},[417,4378,4379],{"class":419,"line":617},[417,4380,981],{"emptyLinePlaceholder":732},[417,4382,4383,4386,4389,4391,4394,4396,4399,4402,4405,4408,4410],{"class":419,"line":623},[417,4384,4385],{"class":584},"const",[417,4387,4388],{"class":675}," container ",[417,4390,679],{"class":500},[417,4392,4393],{"class":675}," document",[417,4395,1493],{"class":500},[417,4397,4398],{"class":493},"getElementById",[417,4400,4401],{"class":675},"(",[417,4403,4404],{"class":500},"'",[417,4406,4407],{"class":427},"root",[417,4409,4404],{"class":500},[417,4411,4412],{"class":675},")\n",[417,4414,4415],{"class":419,"line":999},[417,4416,981],{"emptyLinePlaceholder":732},[417,4418,4419,4422,4425,4428,4431],{"class":419,"line":1004},[417,4420,4421],{"class":4321},"if",[417,4423,4424],{"class":675}," (",[417,4426,4427],{"class":500},"!",[417,4429,4430],{"class":675},"container) ",[417,4432,575],{"class":500},[417,4434,4435,4438,4441,4444,4446,4448,4451,4453],{"class":419,"line":1010},[417,4436,4437],{"class":4321},"  throw",[417,4439,4440],{"class":500}," new",[417,4442,4443],{"class":493}," Error",[417,4445,4401],{"class":1398},[417,4447,4404],{"class":500},[417,4449,4450],{"class":427},"root要素が見つかりません",[417,4452,4404],{"class":500},[417,4454,4412],{"class":1398},[417,4456,4457],{"class":419,"line":1016},[417,4458,626],{"class":500},[417,4460,4461],{"class":419,"line":1022},[417,4462,981],{"emptyLinePlaceholder":732},[417,4464,4465,4467,4470,4472,4474],{"class":419,"line":1027},[417,4466,4300],{"class":493},[417,4468,4469],{"class":675},"(container)",[417,4471,1493],{"class":500},[417,4473,4308],{"class":493},[417,4475,4476],{"class":675},"(\n",[417,4478,4479,4482,4485],{"class":419,"line":1033},[417,4480,4481],{"class":500},"  \u003C",[417,4483,4484],{"class":423},"StrictMode",[417,4486,2639],{"class":500},[417,4488,4489,4492,4495],{"class":419,"line":1039},[417,4490,4491],{"class":500},"    \u003C",[417,4493,4494],{"class":423},"App",[417,4496,4497],{"class":500}," \u002F>\n",[417,4499,4500,4503,4505],{"class":419,"line":1045},[417,4501,4502],{"class":500},"  \u003C\u002F",[417,4504,4484],{"class":423},[417,4506,4507],{"class":500},">,\n",[417,4509,4510],{"class":419,"line":1050},[417,4511,4412],{"class":675},[11,4513,4514,4516,4517,4519,4520,3835],{},[160,4515,4300],{},"へ渡したDOM要素の内側はReactが管理します。サーバー側でReactが生成したHTMLを再利用する場合は、",[160,4518,4300],{},"ではなく",[160,4521,4522],{},"hydrateRoot",[169,4524,4525],{"id":4525},"stateを直接変更しない",[11,4527,4528],{},"Reactのstateに保存したオブジェクトや配列は、読み取り専用として扱います。値を直接変更せず、新しい値を作ってset関数へ渡します。",[152,4530,4532],{"className":4312,"code":4531,"language":4314,"meta":158,"style":158},"setTodos(currentTodos =>\n  currentTodos.map(todo =>\n    todo.id === id\n      ? { ...todo, completed: true }\n      : todo,\n  ),\n)\n",[160,4533,4534,4548,4565,4581,4608,4619,4626],{"__ignoreMap":158},[417,4535,4536,4539,4541,4545],{"class":419,"line":420},[417,4537,4538],{"class":493},"setTodos",[417,4540,4401],{"class":675},[417,4542,4544],{"class":4543},"sHdIc","currentTodos",[417,4546,4547],{"class":584}," =>\n",[417,4549,4550,4553,4555,4558,4560,4563],{"class":419,"line":578},[417,4551,4552],{"class":675},"  currentTodos",[417,4554,1493],{"class":500},[417,4556,4557],{"class":493},"map",[417,4559,4401],{"class":675},[417,4561,4562],{"class":4543},"todo",[417,4564,4547],{"class":584},[417,4566,4567,4570,4572,4575,4578],{"class":419,"line":596},[417,4568,4569],{"class":675},"    todo",[417,4571,1493],{"class":500},[417,4573,4574],{"class":675},"id ",[417,4576,4577],{"class":500},"===",[417,4579,4580],{"class":675}," id\n",[417,4582,4583,4586,4588,4591,4593,4596,4599,4601,4605],{"class":419,"line":617},[417,4584,4585],{"class":500},"      ?",[417,4587,4324],{"class":500},[417,4589,4590],{"class":500}," ...",[417,4592,4562],{"class":675},[417,4594,4595],{"class":500},",",[417,4597,4598],{"class":1398}," completed",[417,4600,590],{"class":500},[417,4602,4604],{"class":4603},"sfNiH"," true",[417,4606,4607],{"class":500}," }\n",[417,4609,4610,4613,4616],{"class":419,"line":623},[417,4611,4612],{"class":500},"      :",[417,4614,4615],{"class":675}," todo",[417,4617,4618],{"class":500},",\n",[417,4620,4621,4624],{"class":419,"line":999},[417,4622,4623],{"class":675},"  )",[417,4625,4618],{"class":500},[417,4627,4628],{"class":419,"line":1004},[417,4629,4412],{"class":675},[11,4631,4632],{},"配列を新しく作っても、その中にあるオブジェクトまでは自動的に複製されません。更新対象のオブジェクトもスプレッド構文などで新しく作る必要があります。",[11,4634,4635],{},"配列を更新する際は、次のように破壊的な操作を避けます。",[43,4637,4638,4651],{},[46,4639,4640],{},[49,4641,4642,4645,4648],{},[52,4643,4644],{},"操作",[52,4646,4647],{},"避けたい方法",[52,4649,4650],{},"利用する方法",[59,4652,4653,4672,4693,4707],{},[49,4654,4655,4658,4666],{},[64,4656,4657],{},"追加",[64,4659,4660,2208,4663],{},[160,4661,4662],{},"push",[160,4664,4665],{},"unshift",[64,4667,4668,4669],{},"スプレッド構文、",[160,4670,4671],{},"concat",[49,4673,4674,4677,4685],{},[64,4675,4676],{},"削除",[64,4678,4679,2208,4682],{},[160,4680,4681],{},"pop",[160,4683,4684],{},"splice",[64,4686,4687,2208,4690],{},[160,4688,4689],{},"filter",[160,4691,4692],{},"slice",[49,4694,4695,4698,4703],{},[64,4696,4697],{},"置換",[64,4699,4700,4701],{},"添字への代入、",[160,4702,4684],{},[64,4704,4705],{},[160,4706,4557],{},[49,4708,4709,4712,4718],{},[64,4710,4711],{},"並び替え",[64,4713,4714,4715],{},"元配列への",[160,4716,4717],{},"sort",[64,4719,4720,4721],{},"コピー後に",[160,4722,4717],{},[169,4724,4725],{"id":4725},"直前のstateを基に更新する",[11,4727,4728],{},"更新後のstateが更新前の値に依存する場合は、set関数へ値ではなく更新用の関数を渡します。",[152,4730,4732],{"className":4312,"code":4731,"language":4314,"meta":158,"style":158},"setCount(currentCount => currentCount + 1)\n",[160,4733,4734],{"__ignoreMap":158},[417,4735,4736,4739,4741,4744,4747,4750,4753,4755],{"class":419,"line":420},[417,4737,4738],{"class":493},"setCount",[417,4740,4401],{"class":675},[417,4742,4743],{"class":4543},"currentCount",[417,4745,4746],{"class":584}," =>",[417,4748,4749],{"class":675}," currentCount ",[417,4751,4752],{"class":500},"+",[417,4754,2893],{"class":1419},[417,4756,4412],{"class":675},[11,4758,4759],{},"Reactはイベントハンドラーの処理をまとめてからstateを更新することがあります。更新用関数を使うことで、その時点の最新のstateを基に次の値を計算できます。",[169,4761,4762],{"id":4762},"イベントハンドラーの命名",[11,4764,4765,4766,4769,4770,4773],{},"イベントを処理する関数には",[160,4767,4768],{},"handle","、propsとして受け渡すイベントには",[160,4771,4772],{},"on","を付けると役割が伝わりやすくなります。",[152,4775,4777],{"className":4312,"code":4776,"language":4314,"meta":158,"style":158},"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",[160,4778,4779,4792,4817,4821,4825,4848,4865,4876,4880,4884,4915],{"__ignoreMap":158},[417,4780,4781,4784,4787,4790],{"class":419,"line":420},[417,4782,4783],{"class":584},"type",[417,4785,4786],{"class":423}," TodoItemProps",[417,4788,4789],{"class":500}," =",[417,4791,593],{"class":500},[417,4793,4794,4797,4799,4801,4804,4806,4809,4812,4814],{"class":419,"line":578},[417,4795,4796],{"class":1398},"  onChange",[417,4798,590],{"class":500},[417,4800,4424],{"class":500},[417,4802,4803],{"class":4543},"id",[417,4805,590],{"class":500},[417,4807,4808],{"class":423}," number",[417,4810,4811],{"class":500},")",[417,4813,4746],{"class":584},[417,4815,4816],{"class":423}," void\n",[417,4818,4819],{"class":419,"line":596},[417,4820,626],{"class":500},[417,4822,4823],{"class":419,"line":617},[417,4824,981],{"emptyLinePlaceholder":732},[417,4826,4827,4830,4833,4836,4839,4842,4844,4846],{"class":419,"line":623},[417,4828,4829],{"class":584},"function",[417,4831,4832],{"class":493}," TodoItem",[417,4834,4835],{"class":500},"({",[417,4837,4838],{"class":4543}," onChange",[417,4840,4841],{"class":500}," }:",[417,4843,4786],{"class":423},[417,4845,4811],{"class":500},[417,4847,593],{"class":500},[417,4849,4850,4853,4856,4858,4861,4863],{"class":419,"line":999},[417,4851,4852],{"class":584},"  const",[417,4854,4855],{"class":675}," handleChange",[417,4857,4789],{"class":500},[417,4859,4860],{"class":500}," ()",[417,4862,4746],{"class":584},[417,4864,593],{"class":500},[417,4866,4867,4870,4872,4874],{"class":419,"line":1004},[417,4868,4869],{"class":493},"    onChange",[417,4871,4401],{"class":1398},[417,4873,832],{"class":1419},[417,4875,4412],{"class":1398},[417,4877,4878],{"class":419,"line":1010},[417,4879,620],{"class":500},[417,4881,4882],{"class":419,"line":1016},[417,4883,981],{"emptyLinePlaceholder":732},[417,4885,4886,4889,4891,4893,4895,4897,4899,4902,4904,4906,4909,4912],{"class":419,"line":1022},[417,4887,4888],{"class":4321},"  return",[417,4890,2631],{"class":500},[417,4892,4193],{"class":1398},[417,4894,4196],{"class":584},[417,4896,679],{"class":500},[417,4898,587],{"class":500},[417,4900,4901],{"class":427},"checkbox",[417,4903,587],{"class":500},[417,4905,4838],{"class":584},[417,4907,4908],{"class":500},"={",[417,4910,4911],{"class":675},"handleChange",[417,4913,4914],{"class":500},"} \u002F>\n",[417,4916,4917],{"class":419,"line":1027},[417,4918,626],{"class":500},[11,4920,4921],{},"これはReactが強制する規則ではありませんが、一貫した命名はコードを読みやすくします。",[169,4923,4924],{"id":4924},"propsの分割代入",[11,4926,4927],{},"propsを分割代入すると記述は短くなりますが、変数がprops由来なのかコンポーネント内で定義されたものなのか分かりにくくなる場合があります。",[11,4929,4930],{},"コンポーネントが大きくなった場合は、変数名やコンポーネントの責務を見直し、値の出所を追いやすくすることが大切です。",[35,4932,4160],{"id":4933},"typescript",[169,4935,4937,3571,4940],{"id":4936},"documentgetelementbyidとnull",[160,4938,4939],{},"document.getElementById",[160,4941,3690],{},[11,4943,4944,4946,4947,4950,4951,4953],{},[160,4945,4939],{},"の戻り値は",[160,4948,4949],{},"HTMLElement | null","です。対象の要素が存在しない可能性があるため、利用前に",[160,4952,3690],{},"を確認します。",[152,4955,4958],{"className":4956,"code":4957,"language":4933,"meta":158,"style":158},"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",[160,4959,4960,4984,4988,5000,5018],{"__ignoreMap":158},[417,4961,4962,4964,4966,4968,4970,4972,4974,4976,4978,4980,4982],{"class":419,"line":420},[417,4963,4385],{"class":584},[417,4965,4388],{"class":675},[417,4967,679],{"class":500},[417,4969,4393],{"class":675},[417,4971,1493],{"class":500},[417,4973,4398],{"class":493},[417,4975,4401],{"class":675},[417,4977,4404],{"class":500},[417,4979,4407],{"class":427},[417,4981,4404],{"class":500},[417,4983,4412],{"class":675},[417,4985,4986],{"class":419,"line":578},[417,4987,981],{"emptyLinePlaceholder":732},[417,4989,4990,4992,4994,4996,4998],{"class":419,"line":596},[417,4991,4421],{"class":4321},[417,4993,4424],{"class":675},[417,4995,4427],{"class":500},[417,4997,4430],{"class":675},[417,4999,575],{"class":500},[417,5001,5002,5004,5006,5008,5010,5012,5014,5016],{"class":419,"line":617},[417,5003,4437],{"class":4321},[417,5005,4440],{"class":500},[417,5007,4443],{"class":493},[417,5009,4401],{"class":1398},[417,5011,4404],{"class":500},[417,5013,4450],{"class":427},[417,5015,4404],{"class":500},[417,5017,4412],{"class":1398},[417,5019,5020],{"class":419,"line":623},[417,5021,626],{"class":500},[11,5023,5024,5025,5027],{},"Non-nullアサーション演算子（",[160,5026,4427],{},"）で確認を省略することもできますが、実行時に要素が必ず存在することをTypeScriptが保証するわけではありません。",[169,5029,5031],{"id":5030},"readonly",[160,5032,5030],{},[11,5034,5035,5036,5038],{},"プロパティへ",[160,5037,5030],{},"を指定すると、そのプロパティへの再代入を型チェックで防げます。",[152,5040,5042],{"className":4956,"code":5041,"language":4933,"meta":158,"style":158},"type Todo = {\n  readonly id: number\n  title: string\n}\n",[160,5043,5044,5055,5068,5078],{"__ignoreMap":158},[417,5045,5046,5048,5051,5053],{"class":419,"line":420},[417,5047,4783],{"class":584},[417,5049,5050],{"class":423}," Todo",[417,5052,4789],{"class":500},[417,5054,593],{"class":500},[417,5056,5057,5060,5063,5065],{"class":419,"line":578},[417,5058,5059],{"class":584},"  readonly",[417,5061,5062],{"class":1398}," id",[417,5064,590],{"class":500},[417,5066,5067],{"class":423}," number\n",[417,5069,5070,5073,5075],{"class":419,"line":596},[417,5071,5072],{"class":1398},"  title",[417,5074,590],{"class":500},[417,5076,5077],{"class":423}," string\n",[417,5079,5080],{"class":419,"line":617},[417,5081,626],{"class":500},[11,5083,5084,5086],{},[160,5085,5030],{},"はコンパイル時の制約です。また、入れ子になったオブジェクトまで自動的に読み取り専用にするものではありません。",[169,5088,5089],{"id":5089},"イベントごとの型",[11,5091,5092],{},"Reactのイベントハンドラーでは、対象に応じたイベント型を利用できます。",[152,5094,5096],{"className":4312,"code":5095,"language":4314,"meta":158,"style":158},"function handleChange(event: React.ChangeEvent\u003CHTMLInputElement>) {\n  console.log(event.target.checked)\n}\n",[160,5097,5098,5129,5155],{"__ignoreMap":158},[417,5099,5100,5102,5104,5106,5109,5111,5114,5116,5119,5121,5124,5127],{"class":419,"line":420},[417,5101,4829],{"class":584},[417,5103,4855],{"class":493},[417,5105,4401],{"class":500},[417,5107,5108],{"class":4543},"event",[417,5110,590],{"class":500},[417,5112,5113],{"class":423}," React",[417,5115,1493],{"class":500},[417,5117,5118],{"class":423},"ChangeEvent",[417,5120,4190],{"class":500},[417,5122,5123],{"class":423},"HTMLInputElement",[417,5125,5126],{"class":500},">)",[417,5128,593],{"class":500},[417,5130,5131,5134,5136,5139,5141,5143,5145,5148,5150,5153],{"class":419,"line":578},[417,5132,5133],{"class":675},"  console",[417,5135,1493],{"class":500},[417,5137,5138],{"class":493},"log",[417,5140,4401],{"class":1398},[417,5142,5108],{"class":675},[417,5144,1493],{"class":500},[417,5146,5147],{"class":675},"target",[417,5149,1493],{"class":500},[417,5151,5152],{"class":675},"checked",[417,5154,4412],{"class":1398},[417,5156,5157],{"class":419,"line":596},[417,5158,626],{"class":500},[11,5160,5161,5162,5165],{},"イベント型だけでなく、",[160,5163,5164],{},"ChangeEventHandler\u003CHTMLInputElement>","のようなハンドラー全体の型を付ける方法もあります。",[169,5167,5168],{"id":5168},"ジェネリクスの型引数へ制約を付ける",[11,5170,5171,5172,5175],{},"型引数に",[160,5173,5174],{},"extends","を指定すると、ジェネリクスで受け取れる型に必要なプロパティを保証できます。",[152,5177,5179],{"className":4956,"code":5178,"language":4933,"meta":158,"style":158},"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",[160,5180,5181,5192,5201,5205,5209,5252,5285],{"__ignoreMap":158},[417,5182,5183,5185,5188,5190],{"class":419,"line":420},[417,5184,4783],{"class":584},[417,5186,5187],{"class":423}," Identifiable",[417,5189,4789],{"class":500},[417,5191,593],{"class":500},[417,5193,5194,5197,5199],{"class":419,"line":578},[417,5195,5196],{"class":1398},"  id",[417,5198,590],{"class":500},[417,5200,5067],{"class":423},[417,5202,5203],{"class":419,"line":596},[417,5204,626],{"class":500},[417,5206,5207],{"class":419,"line":617},[417,5208,981],{"emptyLinePlaceholder":732},[417,5210,5211,5213,5216,5218,5221,5224,5226,5229,5232,5234,5237,5240,5242,5244,5246,5248,5250],{"class":419,"line":623},[417,5212,4829],{"class":584},[417,5214,5215],{"class":493}," findById",[417,5217,4190],{"class":500},[417,5219,5220],{"class":423},"T",[417,5222,5223],{"class":584}," extends",[417,5225,5187],{"class":423},[417,5227,5228],{"class":500},">(",[417,5230,5231],{"class":4543},"items",[417,5233,590],{"class":500},[417,5235,5236],{"class":423}," T",[417,5238,5239],{"class":675},"[]",[417,5241,4595],{"class":500},[417,5243,5062],{"class":4543},[417,5245,590],{"class":500},[417,5247,4808],{"class":423},[417,5249,4811],{"class":500},[417,5251,593],{"class":500},[417,5253,5254,5256,5259,5261,5264,5266,5269,5271,5274,5276,5278,5281,5283],{"class":419,"line":999},[417,5255,4888],{"class":4321},[417,5257,5258],{"class":675}," items",[417,5260,1493],{"class":500},[417,5262,5263],{"class":493},"find",[417,5265,4401],{"class":1398},[417,5267,5268],{"class":4543},"item",[417,5270,4746],{"class":584},[417,5272,5273],{"class":675}," item",[417,5275,1493],{"class":500},[417,5277,4803],{"class":675},[417,5279,5280],{"class":500}," ===",[417,5282,5062],{"class":675},[417,5284,4412],{"class":1398},[417,5286,5287],{"class":419,"line":1004},[417,5288,626],{"class":500},[11,5290,5291,5292,5294,5295,5297],{},"制約がなければ",[160,5293,5220],{},"にどのような型が渡されるか分からないため、関数内で",[160,5296,4803],{},"へ安全にアクセスできません。",[169,5299,5301,5304],{"id":5300},"keyof型演算子",[160,5302,5303],{},"keyof","型演算子",[11,5306,5307,5309],{},[160,5308,5303],{},"は、オブジェクト型のプロパティ名からユニオン型を作る型演算子です。",[152,5311,5313],{"className":4956,"code":5312,"language":4933,"meta":158,"style":158},"type Todo = {\n  id: number\n  title: string\n}\n\ntype TodoKey = keyof Todo\n\u002F\u002F 'id' | 'title'\n",[160,5314,5315,5325,5333,5341,5345,5349,5364],{"__ignoreMap":158},[417,5316,5317,5319,5321,5323],{"class":419,"line":420},[417,5318,4783],{"class":584},[417,5320,5050],{"class":423},[417,5322,4789],{"class":500},[417,5324,593],{"class":500},[417,5326,5327,5329,5331],{"class":419,"line":578},[417,5328,5196],{"class":1398},[417,5330,590],{"class":500},[417,5332,5067],{"class":423},[417,5334,5335,5337,5339],{"class":419,"line":596},[417,5336,5072],{"class":1398},[417,5338,590],{"class":500},[417,5340,5077],{"class":423},[417,5342,5343],{"class":419,"line":617},[417,5344,626],{"class":500},[417,5346,5347],{"class":419,"line":623},[417,5348,981],{"emptyLinePlaceholder":732},[417,5350,5351,5353,5356,5358,5361],{"class":419,"line":999},[417,5352,4783],{"class":584},[417,5354,5355],{"class":423}," TodoKey",[417,5357,4789],{"class":500},[417,5359,5360],{"class":500}," keyof",[417,5362,5363],{"class":423}," Todo\n",[417,5365,5366],{"class":419,"line":1004},[417,5367,5368],{"class":1704},"\u002F\u002F 'id' | 'title'\n",[11,5370,5371],{},"プロパティを追加・削除したときにユニオン型を手作業で更新する必要がなくなり、型定義との不整合を防ぎやすくなります。",[169,5373,5374],{"id":5374},"インデックスアクセス型",[11,5376,5377],{},"インデックスアクセス型を使うと、オブジェクト型から特定のプロパティの型を取り出せます。",[152,5379,5381],{"className":4956,"code":5380,"language":4933,"meta":158,"style":158},"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",[160,5382,5383,5393,5401,5409,5413,5417,5439,5444,5448,5467],{"__ignoreMap":158},[417,5384,5385,5387,5389,5391],{"class":419,"line":420},[417,5386,4783],{"class":584},[417,5388,5050],{"class":423},[417,5390,4789],{"class":500},[417,5392,593],{"class":500},[417,5394,5395,5397,5399],{"class":419,"line":578},[417,5396,5196],{"class":1398},[417,5398,590],{"class":500},[417,5400,5067],{"class":423},[417,5402,5403,5405,5407],{"class":419,"line":596},[417,5404,5072],{"class":1398},[417,5406,590],{"class":500},[417,5408,5077],{"class":423},[417,5410,5411],{"class":419,"line":617},[417,5412,626],{"class":500},[417,5414,5415],{"class":419,"line":623},[417,5416,981],{"emptyLinePlaceholder":732},[417,5418,5419,5421,5424,5426,5428,5431,5433,5435,5437],{"class":419,"line":999},[417,5420,4783],{"class":584},[417,5422,5423],{"class":423}," TodoId",[417,5425,4789],{"class":500},[417,5427,5050],{"class":423},[417,5429,5430],{"class":675},"[",[417,5432,4404],{"class":500},[417,5434,4803],{"class":427},[417,5436,4404],{"class":500},[417,5438,3793],{"class":675},[417,5440,5441],{"class":419,"line":1004},[417,5442,5443],{"class":1704},"\u002F\u002F number\n",[417,5445,5446],{"class":419,"line":1010},[417,5447,981],{"emptyLinePlaceholder":732},[417,5449,5450,5452,5455,5457,5459,5461,5463,5465],{"class":419,"line":1016},[417,5451,4783],{"class":584},[417,5453,5454],{"class":423}," TodoValue",[417,5456,4789],{"class":500},[417,5458,5050],{"class":423},[417,5460,5430],{"class":675},[417,5462,5303],{"class":500},[417,5464,5050],{"class":423},[417,5466,3793],{"class":675},[417,5468,5469],{"class":419,"line":1022},[417,5470,5471],{"class":1704},"\u002F\u002F number | string\n",[169,5473,5474],{"id":5474},"アンビエント宣言",[11,5476,5477,5480],{},[160,5478,5479],{},"declare","を使うと、実装が別の場所に存在する値や型をTypeScriptへ伝えられます。JavaScriptライブラリや実行環境が提供するグローバル変数の型を補う場合などに使用します。",[152,5482,5484],{"className":4956,"code":5483,"language":4933,"meta":158,"style":158},"declare const appVersion: string\n",[160,5485,5486],{"__ignoreMap":158},[417,5487,5488,5490,5493,5496,5498],{"class":419,"line":420},[417,5489,5479],{"class":584},[417,5491,5492],{"class":584}," const",[417,5494,5495],{"class":675}," appVersion",[417,5497,590],{"class":500},[417,5499,5077],{"class":423},[11,5501,5502,5503,5506,5507,5509],{},"一般的には",[160,5504,5505],{},".d.ts","形式の型定義ファイルへ記述します。",[160,5508,5479],{},"は実行時の値を作成しないため、実体が存在しなければ実行時エラーになります。",[169,5511,5512],{"id":5512},"メソッドの型注釈",[11,5514,5515],{},"オブジェクト型のメソッドは、メソッド構文と関数プロパティ構文のどちらでも表現できます。",[152,5517,5519],{"className":4956,"code":5518,"language":4933,"meta":158,"style":158},"type Formatter = {\n  format(value: string): string\n}\n\ntype FormatterProperty = {\n  format: (value: string) => string\n}\n",[160,5520,5521,5532,5552,5556,5560,5571,5591],{"__ignoreMap":158},[417,5522,5523,5525,5528,5530],{"class":419,"line":420},[417,5524,4783],{"class":584},[417,5526,5527],{"class":423}," Formatter",[417,5529,4789],{"class":500},[417,5531,593],{"class":500},[417,5533,5534,5537,5539,5542,5544,5547,5550],{"class":419,"line":578},[417,5535,5536],{"class":1398},"  format",[417,5538,4401],{"class":500},[417,5540,5541],{"class":4543},"value",[417,5543,590],{"class":500},[417,5545,5546],{"class":423}," string",[417,5548,5549],{"class":500},"):",[417,5551,5077],{"class":423},[417,5553,5554],{"class":419,"line":596},[417,5555,626],{"class":500},[417,5557,5558],{"class":419,"line":617},[417,5559,981],{"emptyLinePlaceholder":732},[417,5561,5562,5564,5567,5569],{"class":419,"line":623},[417,5563,4783],{"class":584},[417,5565,5566],{"class":423}," FormatterProperty",[417,5568,4789],{"class":500},[417,5570,593],{"class":500},[417,5572,5573,5575,5577,5579,5581,5583,5585,5587,5589],{"class":419,"line":999},[417,5574,5536],{"class":1398},[417,5576,590],{"class":500},[417,5578,4424],{"class":500},[417,5580,5541],{"class":4543},[417,5582,590],{"class":500},[417,5584,5546],{"class":423},[417,5586,4811],{"class":500},[417,5588,4746],{"class":584},[417,5590,5077],{"class":423},[417,5592,5593],{"class":419,"line":1004},[417,5594,626],{"class":500},[11,5596,5597,5598,5601],{},"両者には、継承や",[160,5599,5600],{},"strictFunctionTypes","における引数型の扱いなどで違いがあります。プロジェクト内で意図に合った書き方へ揃えることが大切です。",[169,5603,5604],{"id":5604},"型ガード",[11,5606,5607],{},"型ガードは、実行時の確認を通して変数の型を絞り込む仕組みです。ユーザー定義型ガードでは、戻り値の型に型述語を指定します。",[152,5609,5611],{"className":4956,"code":5610,"language":4933,"meta":158,"style":158},"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",[160,5612,5613,5641,5659,5663,5667,5682,5686,5700,5724],{"__ignoreMap":158},[417,5614,5615,5617,5620,5622,5624,5626,5629,5631,5634,5637,5639],{"class":419,"line":420},[417,5616,4829],{"class":584},[417,5618,5619],{"class":493}," isNumber",[417,5621,4401],{"class":500},[417,5623,5541],{"class":4543},[417,5625,590],{"class":500},[417,5627,5628],{"class":423}," unknown",[417,5630,5549],{"class":500},[417,5632,5633],{"class":4543}," value",[417,5635,5636],{"class":500}," is",[417,5638,4808],{"class":423},[417,5640,593],{"class":500},[417,5642,5643,5645,5648,5650,5652,5654,5657],{"class":419,"line":578},[417,5644,4888],{"class":4321},[417,5646,5647],{"class":500}," typeof",[417,5649,5633],{"class":675},[417,5651,5280],{"class":500},[417,5653,501],{"class":500},[417,5655,5656],{"class":427},"number",[417,5658,507],{"class":500},[417,5660,5661],{"class":419,"line":596},[417,5662,626],{"class":500},[417,5664,5665],{"class":419,"line":617},[417,5666,981],{"emptyLinePlaceholder":732},[417,5668,5669,5671,5673,5675,5677,5679],{"class":419,"line":623},[417,5670,4385],{"class":584},[417,5672,5633],{"class":675},[417,5674,590],{"class":500},[417,5676,5628],{"class":423},[417,5678,4789],{"class":500},[417,5680,5681],{"class":1419}," 10\n",[417,5683,5684],{"class":419,"line":999},[417,5685,981],{"emptyLinePlaceholder":732},[417,5687,5688,5690,5692,5695,5698],{"class":419,"line":1004},[417,5689,4421],{"class":4321},[417,5691,4424],{"class":675},[417,5693,5694],{"class":493},"isNumber",[417,5696,5697],{"class":675},"(value)) ",[417,5699,575],{"class":500},[417,5701,5702,5704,5706,5708,5710,5712,5714,5717,5719,5721],{"class":419,"line":1010},[417,5703,5133],{"class":675},[417,5705,1493],{"class":500},[417,5707,5138],{"class":493},[417,5709,4401],{"class":1398},[417,5711,5541],{"class":675},[417,5713,1493],{"class":500},[417,5715,5716],{"class":493},"toFixed",[417,5718,4401],{"class":1398},[417,5720,842],{"class":1419},[417,5722,5723],{"class":1398},"))\n",[417,5725,5726],{"class":419,"line":1016},[417,5727,626],{"class":500},[11,5729,5730],{},"APIレスポンスなど外部から受け取った値は、型アサーションで決めつけるのではなく、実行時に検証してから利用すると安全です。",[35,5732,1180],{"id":1180},[11,5734,5735],{},"Todoアプリの実装を通して、HTML属性の使い方からReactのstate更新、TypeScriptの型操作まで、幅広い内容を学べました。",[11,5737,5738],{},"個々の構文を覚えるだけでなく、「なぜその書き方が必要なのか」を実際のアプリ開発と結び付けて理解することが大切だと感じました。",[711,5740,5741],{},"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":158,"searchDepth":578,"depth":578,"links":5743},[5744,5747,5751,5758,5770],{"id":4163,"depth":578,"text":4152,"children":5745},[5746],{"id":4166,"depth":596,"text":4166},{"id":3446,"depth":578,"text":4129,"children":5748},[5749,5750],{"id":4223,"depth":596,"text":4223},{"id":4274,"depth":596,"text":4275},{"id":4294,"depth":578,"text":4157,"children":5752},[5753,5754,5755,5756,5757],{"id":4297,"depth":596,"text":4300},{"id":4525,"depth":596,"text":4525},{"id":4725,"depth":596,"text":4725},{"id":4762,"depth":596,"text":4762},{"id":4924,"depth":596,"text":4924},{"id":4933,"depth":578,"text":4160,"children":5759},[5760,5762,5763,5764,5765,5766,5767,5768,5769],{"id":4936,"depth":596,"text":5761},"document.getElementByIdとnull",{"id":5030,"depth":596,"text":5030},{"id":5089,"depth":596,"text":5089},{"id":5168,"depth":596,"text":5168},{"id":5300,"depth":596,"text":5300},{"id":5374,"depth":596,"text":5374},{"id":5474,"depth":596,"text":5474},{"id":5512,"depth":596,"text":5512},{"id":5604,"depth":596,"text":5604},{"id":1180,"depth":578,"text":1180},"React HooksとTypeScriptでTodoアプリを作るハンズオンを通して学んだ、HTML、JavaScript、React、TypeScriptのポイントを整理します。",{},"\u002Farticles\u002F2024\u002Forganize-learned-from-todo","2024-12-23",{"title":4134,"description":5771},"articles\u002F2024\u002Forganize-learned-from-todo",[4157,4160],"\u002Fimages\u002Farticles\u002Forganize-learned-from-todo.png","ic1Do2Gie9Gb4WmAmZ2IL55ETNgmySMOwEHT_s3q0bk",{"id":5781,"title":5782,"body":5783,"description":6258,"extension":730,"meta":6259,"navigation":732,"path":6260,"publishDate":6261,"published":732,"seo":6262,"stem":6263,"tags":6264,"thumbnail":6266,"updated":6261,"__hash__":6267},"articles\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb.md","Web StorageとIndexedDBについて整理する",{"type":8,"value":5784,"toc":6248},[5785,5787,5790,5800,5803,5806,5809,5812,5894,5897,5902,5905,5933,5944,5995,5998,6001,6009,6028,6031,6034,6037,6040,6043,6145,6148,6162,6165,6168,6171,6195,6201,6204,6207,6214,6217,6220,6235,6238,6240,6243,6246],[11,5786,13],{},[11,5788,5789],{},"Todoアプリを作った際にIndexedDBを利用したのですが、ブラウザにデータを保存する方法としてはWeb Storageもあります。",[11,5791,5792,5793,2208,5796,5799],{},"今回は、",[160,5794,5795],{},"localStorage",[160,5797,5798],{},"sessionStorage","、IndexedDBの特徴と使い分けを整理します。",[35,5801,5802],{"id":5802},"ブラウザにデータを保存する仕組み",[11,5804,5805],{},"Web StorageとIndexedDBは、どちらもブラウザ側にデータを保存するためのWeb APIです。",[11,5807,5808],{},"保存したデータが自動的にサーバーへ送信されることはなく、同一オリジンの制約を受けます。ただし、保存容量やデータが削除される条件はブラウザや利用状況によって異なるため、永続性を前提にしすぎないことが大切です。",[11,5810,5811],{},"主な違いは次のとおりです。",[43,5813,5814,5827],{},[46,5815,5816],{},[49,5817,5818,5820,5822,5824],{},[52,5819,329],{},[52,5821,5795],{},[52,5823,5798],{},[52,5825,5826],{},"IndexedDB",[59,5828,5829,5842,5854,5867,5880],{},[49,5830,5831,5834,5837,5839],{},[64,5832,5833],{},"保存形式",[64,5835,5836],{},"文字列のキーバリュー",[64,5838,5836],{},[64,5840,5841],{},"オブジェクトやBlobなど",[49,5843,5844,5846,5849,5851],{},[64,5845,794],{},[64,5847,5848],{},"同期",[64,5850,5848],{},[64,5852,5853],{},"非同期",[49,5855,5856,5859,5862,5865],{},[64,5857,5858],{},"データの範囲",[64,5860,5861],{},"同一オリジン",[64,5863,5864],{},"同一オリジンかつタブ単位",[64,5866,5861],{},[49,5868,5869,5872,5875,5878],{},[64,5870,5871],{},"データの寿命",[64,5873,5874],{},"明示的に削除されるまで",[64,5876,5877],{},"タブを閉じるまで",[64,5879,5874],{},[49,5881,5882,5885,5888,5891],{},[64,5883,5884],{},"得意な用途",[64,5886,5887],{},"小さな設定値",[64,5889,5890],{},"一時的な入力状態",[64,5892,5893],{},"大量・構造化データ",[35,5895,5795],{"id":5896},"localstorage",[11,5898,5899,5901],{},[160,5900,5795],{},"は、文字列をキーバリュー形式で保存する同期APIです。",[11,5903,5904],{},"ブラウザやタブを閉じてもデータが残るため、テーマや表示設定など、小さく単純なデータの保存に向いています。",[152,5906,5908],{"className":3444,"code":5907,"language":3446,"meta":158,"style":158},"localStorage.setItem('theme', 'dark')\n\nconst theme = localStorage.getItem('theme')\n\nlocalStorage.removeItem('theme')\n",[160,5909,5910,5915,5919,5924,5928],{"__ignoreMap":158},[417,5911,5912],{"class":419,"line":420},[417,5913,5914],{},"localStorage.setItem('theme', 'dark')\n",[417,5916,5917],{"class":419,"line":578},[417,5918,981],{"emptyLinePlaceholder":732},[417,5920,5921],{"class":419,"line":596},[417,5922,5923],{},"const theme = localStorage.getItem('theme')\n",[417,5925,5926],{"class":419,"line":617},[417,5927,981],{"emptyLinePlaceholder":732},[417,5929,5930],{"class":419,"line":623},[417,5931,5932],{},"localStorage.removeItem('theme')\n",[11,5934,5935,5936,5939,5940,5943],{},"値は文字列として保存されます。オブジェクトを扱う場合は、保存時に",[160,5937,5938],{},"JSON.stringify()","、取得時に",[160,5941,5942],{},"JSON.parse()","が必要です。",[152,5945,5947],{"className":3444,"code":5946,"language":3446,"meta":158,"style":158},"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",[160,5948,5949,5954,5959,5964,5968,5972,5977,5981,5986,5991],{"__ignoreMap":158},[417,5950,5951],{"class":419,"line":420},[417,5952,5953],{},"const settings = {\n",[417,5955,5956],{"class":419,"line":578},[417,5957,5958],{},"  theme: 'dark',\n",[417,5960,5961],{"class":419,"line":596},[417,5962,5963],{},"  fontSize: 16,\n",[417,5965,5966],{"class":419,"line":617},[417,5967,626],{},[417,5969,5970],{"class":419,"line":623},[417,5971,981],{"emptyLinePlaceholder":732},[417,5973,5974],{"class":419,"line":999},[417,5975,5976],{},"localStorage.setItem('settings', JSON.stringify(settings))\n",[417,5978,5979],{"class":419,"line":1004},[417,5980,981],{"emptyLinePlaceholder":732},[417,5982,5983],{"class":419,"line":1010},[417,5984,5985],{},"const storedSettings = JSON.parse(\n",[417,5987,5988],{"class":419,"line":1016},[417,5989,5990],{},"  localStorage.getItem('settings') ?? '{}',\n",[417,5992,5993],{"class":419,"line":1022},[417,5994,4412],{},[11,5996,5997],{},"同期APIのため、大きなデータを頻繁に読み書きするとメインスレッドを塞ぐ可能性があります。",[35,5999,5798],{"id":6000},"sessionstorage",[11,6002,6003,6005,6006,6008],{},[160,6004,5798],{},"も、文字列をキーバリュー形式で保存する同期APIです。基本的な操作方法は",[160,6007,5795],{},"と同じです。",[152,6010,6012],{"className":3444,"code":6011,"language":3446,"meta":158,"style":158},"sessionStorage.setItem('draft', '入力途中の内容')\n\nconst draft = sessionStorage.getItem('draft')\n",[160,6013,6014,6019,6023],{"__ignoreMap":158},[417,6015,6016],{"class":419,"line":420},[417,6017,6018],{},"sessionStorage.setItem('draft', '入力途中の内容')\n",[417,6020,6021],{"class":419,"line":578},[417,6022,981],{"emptyLinePlaceholder":732},[417,6024,6025],{"class":419,"line":596},[417,6026,6027],{},"const draft = sessionStorage.getItem('draft')\n",[11,6029,6030],{},"ページを再読み込みしてもデータは残りますが、保存領域はタブごとのページセッションに分かれ、タブを閉じるとデータも削除されます。",[11,6032,6033],{},"そのため、フォームの入力途中の状態や、画面遷移中だけ保持したい一時的な情報に向いています。",[35,6035,5826],{"id":6036},"indexeddb",[11,6038,6039],{},"IndexedDBは、大量の構造化データをブラウザへ保存するための非同期APIです。",[11,6041,6042],{},"JavaScriptのオブジェクトだけでなく、ファイルやBlobなども保存できます。また、オブジェクトストア、インデックス、トランザクションを利用できるため、検索や更新を伴うデータ管理に向いています。",[152,6044,6046],{"className":3444,"code":6045,"language":3446,"meta":158,"style":158},"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",[160,6047,6048,6053,6057,6062,6067,6071,6076,6081,6086,6091,6096,6100,6104,6108,6113,6117,6123,6129,6134,6140],{"__ignoreMap":158},[417,6049,6050],{"class":419,"line":420},[417,6051,6052],{},"const request = indexedDB.open('todo-app', 1)\n",[417,6054,6055],{"class":419,"line":578},[417,6056,981],{"emptyLinePlaceholder":732},[417,6058,6059],{"class":419,"line":596},[417,6060,6061],{},"request.onupgradeneeded = () => {\n",[417,6063,6064],{"class":419,"line":617},[417,6065,6066],{},"  const database = request.result\n",[417,6068,6069],{"class":419,"line":623},[417,6070,981],{"emptyLinePlaceholder":732},[417,6072,6073],{"class":419,"line":999},[417,6074,6075],{},"  if (!database.objectStoreNames.contains('todos')) {\n",[417,6077,6078],{"class":419,"line":1004},[417,6079,6080],{},"    database.createObjectStore('todos', {\n",[417,6082,6083],{"class":419,"line":1010},[417,6084,6085],{},"      keyPath: 'id',\n",[417,6087,6088],{"class":419,"line":1016},[417,6089,6090],{},"      autoIncrement: true,\n",[417,6092,6093],{"class":419,"line":1022},[417,6094,6095],{},"    })\n",[417,6097,6098],{"class":419,"line":1027},[417,6099,620],{},[417,6101,6102],{"class":419,"line":1033},[417,6103,626],{},[417,6105,6106],{"class":419,"line":1039},[417,6107,981],{"emptyLinePlaceholder":732},[417,6109,6110],{"class":419,"line":1045},[417,6111,6112],{},"request.onsuccess = () => {\n",[417,6114,6115],{"class":419,"line":1050},[417,6116,6066],{},[417,6118,6120],{"class":419,"line":6119},16,[417,6121,6122],{},"  const transaction = database.transaction('todos', 'readwrite')\n",[417,6124,6126],{"class":419,"line":6125},17,[417,6127,6128],{},"  const todos = transaction.objectStore('todos')\n",[417,6130,6132],{"class":419,"line":6131},18,[417,6133,981],{"emptyLinePlaceholder":732},[417,6135,6137],{"class":419,"line":6136},19,[417,6138,6139],{},"  todos.add({ title: '記事を書く', completed: false })\n",[417,6141,6143],{"class":419,"line":6142},20,[417,6144,626],{},[11,6146,6147],{},"Web Storageよりも扱う概念は多いものの、次のような用途で力を発揮します。",[204,6149,6150,6153,6156,6159],{},[127,6151,6152],{},"オフラインでも利用するアプリ",[127,6154,6155],{},"Todoやメモなど、件数が増えるデータ",[127,6157,6158],{},"検索や並び替えにインデックスを使いたいデータ",[127,6160,6161],{},"画像やファイルを含むデータ",[35,6163,6164],{"id":6164},"保存容量とデータの削除",[11,6166,6167],{},"ブラウザストレージの容量は、特定の数値をどの環境でも保証できるものではありません。ブラウザ、端末の空き容量、ユーザー設定などによって変わります。",[11,6169,6170],{},"利用状況はStorage APIから概算できます。",[152,6172,6174],{"className":3444,"code":6173,"language":3446,"meta":158,"style":158},"const estimate = await navigator.storage.estimate()\n\nconsole.log(estimate.usage)\nconsole.log(estimate.quota)\n",[160,6175,6176,6181,6185,6190],{"__ignoreMap":158},[417,6177,6178],{"class":419,"line":420},[417,6179,6180],{},"const estimate = await navigator.storage.estimate()\n",[417,6182,6183],{"class":419,"line":578},[417,6184,981],{"emptyLinePlaceholder":732},[417,6186,6187],{"class":419,"line":596},[417,6188,6189],{},"console.log(estimate.usage)\n",[417,6191,6192],{"class":419,"line":617},[417,6193,6194],{},"console.log(estimate.quota)\n",[1764,6196,6198],{"title":6197,"type":2014},"ブラウザストレージを唯一の保存先にしない",[11,6199,6200],{},"保存したデータは、ユーザーによるサイトデータの削除や、ブラウザのストレージ管理によって失われる場合があります。失われると困るデータはサーバーにも保存しましょう。",[35,6202,6203],{"id":6203},"セキュリティ上の注意",[11,6205,6206],{},"Web StorageとIndexedDBは、認証された同一オリジンのJavaScriptからアクセスできます。",[1764,6208,6211],{"title":6209,"type":6210},"機密情報の保存に注意する","warning",[11,6212,6213],{},"クロスサイトスクリプティング（XSS）が発生すると、保存内容を読み取られる可能性があります。アクセストークンや個人情報などの機密情報を、安易に保存しないようにしましょう。",[35,6215,6216],{"id":6216},"どれを選ぶか",[11,6218,6219],{},"選び方を簡単にまとめると、次のようになります。",[204,6221,6222,6227,6232],{},[127,6223,6224,6225],{},"小さな設定をブラウザを閉じた後も残したい場合は",[160,6226,5795],{},[127,6228,6229,6230],{},"タブを開いている間だけ一時的に残したい場合は",[160,6231,5798],{},[127,6233,6234],{},"大量のデータや構造化データを非同期で扱いたい場合はIndexedDB",[11,6236,6237],{},"Web Storageは手軽ですが、同期APIであり文字列しか保存できません。データ量が増えるアプリや、検索・更新を伴うデータにはIndexedDBを検討するとよいでしょう。",[35,6239,1180],{"id":1180},[11,6241,6242],{},"Web StorageとIndexedDBは、どちらもブラウザ側へデータを保存できますが、得意な用途が異なります。",[11,6244,6245],{},"保存するデータの量や形式だけでなく、同期処理による影響、データを保持する期間、失われた場合の影響まで考えて選ぶことが大切です。",[711,6247,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":6249},[6250,6251,6252,6253,6254,6255,6256,6257],{"id":5802,"depth":578,"text":5802},{"id":5896,"depth":578,"text":5795},{"id":6000,"depth":578,"text":5798},{"id":6036,"depth":578,"text":5826},{"id":6164,"depth":578,"text":6164},{"id":6203,"depth":578,"text":6203},{"id":6216,"depth":578,"text":6216},{"id":1180,"depth":578,"text":1180},"localStorage、sessionStorage、IndexedDBの違いを、保存形式、同期・非同期、データの寿命、用途から整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-webstorage-indexeddb","2024-12-22",{"title":5782,"description":6258},"articles\u002F2024\u002Fdescribe-webstorage-indexeddb",[6265,5826],"Web Storage","\u002Fimages\u002Farticles\u002Fdescribe-webstorage-indexeddb.png","3W_8UP01CjjLWIG3qOQhJB7e1YiLPuYONYyx_372v98",{"id":6269,"title":6270,"body":6271,"description":6746,"extension":730,"meta":6747,"navigation":732,"path":6748,"publishDate":6749,"published":732,"seo":6750,"stem":6751,"tags":6752,"thumbnail":6753,"updated":6749,"__hash__":6754},"articles\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime.md","JavaScriptのランタイム構成からイベントループを学ぶ",{"type":8,"value":6272,"toc":6736},[6273,6275,6284,6287,6291,6294,6297,6300,6317,6319,6322,6325,6389,6392,6425,6428,6431,6434,6437,6451,6454,6497,6500,6502,6505,6508,6522,6527,6530,6532,6535,6560,6563,6566,6568,6571,6574,6591,6594,6597,6672,6675,6681,6691,6700,6702,6722,6725,6734],[11,6274,13],{},[11,6276,6277,6278,6283],{},"今回は、JavaScriptのイベントループについて、動画「",[176,6279,6282],{"href":6280,"rel":6281},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=eiC58R16hb8",[884],"JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue","」で学んだ内容を整理します。",[11,6285,6286],{},"ブラウザでJavaScriptがどのように同期処理と非同期処理を扱っているのか、ランタイムを構成する要素から確認していきます。",[35,6288,6290],{"id":6289},"javascriptエンジンとホスト環境","JavaScriptエンジンとホスト環境",[11,6292,6293],{},"ブラウザでJavaScriptを実行するためには、JavaScriptエンジンとブラウザというホスト環境が連携します。",[11,6295,6296],{},"JavaScriptエンジンはコードを解析・実行し、ブラウザはタイマー、ネットワーク通信、DOMイベントなどの環境固有の機能を提供します。",[11,6298,6299],{},"イベントループを理解するうえでは、次の要素を押さえておくと全体像が見えやすくなります。",[204,6301,6302,6305,6308,6311,6314],{},[127,6303,6304],{},"コールスタック",[127,6306,6307],{},"Web APIs",[127,6309,6310],{},"タスクキュー",[127,6312,6313],{},"マイクロタスクキュー",[127,6315,6316],{},"イベントループ",[35,6318,6304],{"id":6304},[11,6320,6321],{},"コールスタックは、実行中の関数や実行コンテキストを管理するスタックです。",[11,6323,6324],{},"後から追加されたものが先に取り出される、後入れ先出し（LIFO）の構造になっています。",[152,6326,6328],{"className":3444,"code":6327,"language":3446,"meta":158,"style":158},"function a() {\n  console.log('a')\n}\n\nfunction b() {\n  a()\n}\n\nfunction c() {\n  b()\n}\n\nc()\n",[160,6329,6330,6335,6340,6344,6348,6353,6358,6362,6366,6371,6376,6380,6384],{"__ignoreMap":158},[417,6331,6332],{"class":419,"line":420},[417,6333,6334],{},"function a() {\n",[417,6336,6337],{"class":419,"line":578},[417,6338,6339],{},"  console.log('a')\n",[417,6341,6342],{"class":419,"line":596},[417,6343,626],{},[417,6345,6346],{"class":419,"line":617},[417,6347,981],{"emptyLinePlaceholder":732},[417,6349,6350],{"class":419,"line":623},[417,6351,6352],{},"function b() {\n",[417,6354,6355],{"class":419,"line":999},[417,6356,6357],{},"  a()\n",[417,6359,6360],{"class":419,"line":1004},[417,6361,626],{},[417,6363,6364],{"class":419,"line":1010},[417,6365,981],{"emptyLinePlaceholder":732},[417,6367,6368],{"class":419,"line":1016},[417,6369,6370],{},"function c() {\n",[417,6372,6373],{"class":419,"line":1022},[417,6374,6375],{},"  b()\n",[417,6377,6378],{"class":419,"line":1027},[417,6379,626],{},[417,6381,6382],{"class":419,"line":1033},[417,6383,981],{"emptyLinePlaceholder":732},[417,6385,6386],{"class":419,"line":1039},[417,6387,6388],{},"c()\n",[11,6390,6391],{},"このコードは、次の流れで実行されます。",[124,6393,6394,6400,6409,6416],{},[127,6395,6396,6399],{},[160,6397,6398],{},"c()"," がスタックへ追加される",[127,6401,6402,6404,6405,6408],{},[160,6403,6398],{}," から呼ばれた ",[160,6406,6407],{},"b()"," が追加される",[127,6410,6411,6404,6413,6408],{},[160,6412,6407],{},[160,6414,6415],{},"a()",[127,6417,6418,2208,6420,2208,6422,6424],{},[160,6419,6415],{},[160,6421,6407],{},[160,6423,6398],{}," の順に処理を終えてスタックから取り除かれる",[11,6426,6427],{},"1つの長い同期処理がコールスタックを占有すると、その処理が終わるまでクリックや描画など、同じスレッド上のほかの処理を進められません。",[35,6429,6307],{"id":6430},"web-apis",[11,6432,6433],{},"Web APIsは、ブラウザというホスト環境が提供する機能です。",[11,6435,6436],{},"代表的なものには、次があります。",[204,6438,6439,6442,6445,6448],{},[127,6440,6441],{},"Fetch API",[127,6443,6444],{},"タイマー",[127,6446,6447],{},"Geolocation API",[127,6449,6450],{},"DOMイベント",[11,6452,6453],{},"JavaScriptからこれらの非同期APIを呼び出すと、ブラウザ側でタイマーの計測やネットワーク通信などが進みます。JavaScriptはその完了を待ってコールスタックを占有し続ける必要がないため、別のコードを実行できます。",[152,6455,6457],{"className":3444,"code":6456,"language":3446,"meta":158,"style":158},"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",[160,6458,6459,6464,6469,6474,6478,6482,6487,6492],{"__ignoreMap":158},[417,6460,6461],{"class":419,"line":420},[417,6462,6463],{},"navigator.geolocation.getCurrentPosition(\n",[417,6465,6466],{"class":419,"line":578},[417,6467,6468],{},"  position => console.log(position),\n",[417,6470,6471],{"class":419,"line":596},[417,6472,6473],{},"  error => console.error(error),\n",[417,6475,6476],{"class":419,"line":617},[417,6477,4412],{},[417,6479,6480],{"class":419,"line":623},[417,6481,981],{"emptyLinePlaceholder":732},[417,6483,6484],{"class":419,"line":999},[417,6485,6486],{},"fetch('https:\u002F\u002Fexample.com\u002Fapi\u002Fdata')\n",[417,6488,6489],{"class":419,"line":1004},[417,6490,6491],{},"  .then(response => response.json())\n",[417,6493,6494],{"class":419,"line":1010},[417,6495,6496],{},"  .then(data => console.log(data))\n",[11,6498,6499],{},"APIの処理が完了しても、コールバックがその場ですぐに実行されるとは限りません。実行可能になった処理は、タスクやマイクロタスクとしてキューへ登録されます。",[35,6501,6310],{"id":6310},[11,6503,6504],{},"タスクキューには、タイマーやイベントなどをきっかけに実行可能になったタスクが並びます。",[11,6506,6507],{},"代表的な例は次のとおりです。",[204,6509,6510,6516,6519],{},[127,6511,6512,6515],{},[160,6513,6514],{},"setTimeout()"," のコールバック",[127,6517,6518],{},"ユーザー操作のイベントハンドラー",[127,6520,6521],{},"メッセージイベント",[11,6523,6524,6526],{},[160,6525,6514],{}," に指定する時間は、コールバックが必ずその時間後に実行されるという意味ではありません。指定時間を経過したあとにタスクとして実行可能になるまでの最低待機時間です。",[11,6528,6529],{},"コールスタックや先に処理されるタスクが残っていれば、実際の実行はさらに遅くなります。",[35,6531,6313],{"id":6313},[11,6533,6534],{},"マイクロタスクキューには、主に次の処理が登録されます。",[204,6536,6537,6549,6555],{},[127,6538,6539,6540,2208,6543,2208,6546],{},"Promiseの ",[160,6541,6542],{},"then()",[160,6544,6545],{},"catch()",[160,6547,6548],{},"finally()",[127,6550,6551,6554],{},[160,6552,6553],{},"queueMicrotask()"," に渡したコールバック",[127,6556,6557,6515],{},[160,6558,6559],{},"MutationObserver",[11,6561,6562],{},"現在のタスクと同期処理が終わってコールスタックが空になると、次のタスクへ進む前にマイクロタスクキューが空になるまで処理されます。",[11,6564,6565],{},"マイクロタスクの実行中に新しいマイクロタスクが追加された場合も、同じタイミングで続けて処理されます。そのため、マイクロタスクを追加し続ける処理は、次のタスクや画面描画を遅らせる可能性があります。",[35,6567,6316],{"id":6316},[11,6569,6570],{},"イベントループは、コールスタックと各キューの状態を見ながら、実行する処理を選び続けます。",[11,6572,6573],{},"ブラウザ上の流れを単純化すると、次のようになります。",[124,6575,6576,6579,6582,6585,6588],{},[127,6577,6578],{},"1つのタスクを実行する",[127,6580,6581],{},"コールスタック上の同期処理を最後まで実行する",[127,6583,6584],{},"マイクロタスクキューを空になるまで処理する",[127,6586,6587],{},"必要に応じて画面を描画する",[127,6589,6590],{},"次のタスクへ進む",[35,6592,6593],{"id":6593},"コードで実行順を確認する",[11,6595,6596],{},"タスクとマイクロタスクの実行順を、コードで確認してみましょう。",[152,6598,6600],{"className":3444,"code":6599,"language":3446,"meta":158,"style":158},"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",[160,6601,6602,6607,6611,6616,6621,6626,6630,6635,6640,6645,6649,6654,6659,6663,6667],{"__ignoreMap":158},[417,6603,6604],{"class":419,"line":420},[417,6605,6606],{},"console.log('start')\n",[417,6608,6609],{"class":419,"line":578},[417,6610,981],{"emptyLinePlaceholder":732},[417,6612,6613],{"class":419,"line":596},[417,6614,6615],{},"setTimeout(() => {\n",[417,6617,6618],{"class":419,"line":617},[417,6619,6620],{},"  console.log('timeout')\n",[417,6622,6623],{"class":419,"line":623},[417,6624,6625],{},"}, 0)\n",[417,6627,6628],{"class":419,"line":999},[417,6629,981],{"emptyLinePlaceholder":732},[417,6631,6632],{"class":419,"line":1004},[417,6633,6634],{},"Promise.resolve().then(() => {\n",[417,6636,6637],{"class":419,"line":1010},[417,6638,6639],{},"  console.log('promise')\n",[417,6641,6642],{"class":419,"line":1016},[417,6643,6644],{},"})\n",[417,6646,6647],{"class":419,"line":1022},[417,6648,981],{"emptyLinePlaceholder":732},[417,6650,6651],{"class":419,"line":1027},[417,6652,6653],{},"queueMicrotask(() => {\n",[417,6655,6656],{"class":419,"line":1033},[417,6657,6658],{},"  console.log('microtask')\n",[417,6660,6661],{"class":419,"line":1039},[417,6662,6644],{},[417,6664,6665],{"class":419,"line":1045},[417,6666,981],{"emptyLinePlaceholder":732},[417,6668,6669],{"class":419,"line":1050},[417,6670,6671],{},"console.log('end')\n",[11,6673,6674],{},"出力順は次のようになります。",[152,6676,6679],{"className":6677,"code":6678,"language":157,"meta":158},[155],"start\nend\npromise\nmicrotask\ntimeout\n",[160,6680,6678],{"__ignoreMap":158},[11,6682,6683,6684,2204,6687,6690],{},"まず同期処理の ",[160,6685,6686],{},"start",[160,6688,6689],{},"end"," が出力されます。",[11,6692,6693,6694,6696,6697,6699],{},"続いて、登録された順にPromiseのコールバックと ",[160,6695,6553],{}," のコールバックがマイクロタスクとして実行されます。マイクロタスクキューが空になったあと、",[160,6698,6514],{}," のコールバックが次のタスクとして実行されます。",[35,6701,1180],{"id":1180},[204,6703,6704,6707,6710,6713,6716,6719],{},[127,6705,6706],{},"コールスタックは、実行中の関数をLIFOで管理する",[127,6708,6709],{},"ブラウザは、タイマーやネットワーク通信などのWeb APIsを提供する",[127,6711,6712],{},"タイマーやイベントのコールバックなどは、タスクとしてキューへ登録される",[127,6714,6715],{},"Promiseのコールバックなどは、マイクロタスクとして登録される",[127,6717,6718],{},"現在のタスクが完了すると、次のタスクより先にマイクロタスクが処理される",[127,6720,6721],{},"長い同期処理や増え続けるマイクロタスクは、画面の応答を遅らせる可能性がある",[11,6723,6724],{},"非同期処理の実行順で迷ったときは、「現在の同期処理」「マイクロタスク」「次のタスク」の順に分けて考えると整理しやすくなります。",[11,6726,6727,6728,6733],{},"より詳しい実行モデルは、",[176,6729,6732],{"href":6730,"rel":6731},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FExecution_model",[884],"MDNのJavaScript実行モデル","も参考になります。",[711,6735,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":6737},[6738,6739,6740,6741,6742,6743,6744,6745],{"id":6289,"depth":578,"text":6290},{"id":6304,"depth":578,"text":6304},{"id":6430,"depth":578,"text":6307},{"id":6310,"depth":578,"text":6310},{"id":6313,"depth":578,"text":6313},{"id":6316,"depth":578,"text":6316},{"id":6593,"depth":578,"text":6593},{"id":1180,"depth":578,"text":1180},"ブラウザのJavaScriptランタイムを構成するコールスタック、Web APIs、タスクキュー、マイクロタスクキューとイベントループの関係を整理します。",{},"\u002Farticles\u002F2024\u002Flearn-javascript-eventloop-from-runtime","2024-11-25",{"title":6270,"description":6746},"articles\u002F2024\u002Flearn-javascript-eventloop-from-runtime",[4129],"\u002Fimages\u002Farticles\u002Flearn-javascript-eventloop-from-runtime.png","BcnDDE_gLqK4tjYoVA9O89QF7-dNwS-6lyORZ07cH5g",{"id":6756,"title":6757,"body":6758,"description":7173,"extension":730,"meta":7174,"navigation":732,"path":7175,"publishDate":7176,"published":732,"seo":7177,"stem":7178,"tags":7179,"thumbnail":7180,"updated":7176,"__hash__":7181},"articles\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects.md","JavaScriptのビルトインオブジェクトのメソッドをどう使うか",{"type":8,"value":6759,"toc":7165},[6760,6762,6765,6768,6772,6775,6787,6796,6800,6810,6837,6854,6862,6865,6872,6912,6923,6931,6943,6967,6971,6978,7016,7022,7027,7048,7051,7060,7098,7108,7126,7128,7160,7163],[11,6761,13],{},[11,6763,6764],{},"今回は、プロジェクトで「なるほど」と思った、JavaScriptのビルトインオブジェクトのメソッドの使い方を紹介します。",[11,6766,6767],{},"具体的には、オブジェクトが自身のプロパティを持っているか、安全に確認する方法です。仕組みを知っておくと、オブジェクトに同名のメソッドが定義されている場合も意図した判定ができます。",[35,6769,6771],{"id":6770},"ビルトインオブジェクトってなに","「ビルトインオブジェクト」ってなに？",[11,6773,6774],{},"ビルトインオブジェクトは「組み込みオブジェクト」とも呼ばれ、JavaScriptの実行環境にあらかじめ用意されているオブジェクトです。",[11,6776,6777,2208,6780,2208,6783,6786],{},[160,6778,6779],{},"Object",[160,6781,6782],{},"Array",[160,6784,6785],{},"String"," など、さまざまな種類があります。",[11,6788,6789,6790,6795],{},"詳しくは、",[176,6791,6794],{"href":6792,"rel":6793},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FJavaScript\u002FReference\u002FGlobal_Objects",[884],"MDNの標準組み込みオブジェクト","を参照してください。",[35,6797,6799],{"id":6798},"hasownpropertyをインスタンスから呼び出す","hasOwnPropertyをインスタンスから呼び出す",[11,6801,6802,6803,6805,6806,6809],{},"まずは、オブジェクト自身が ",[160,6804,1952],{}," プロパティを持っているか、",[160,6807,6808],{},"hasOwnProperty()"," で確認してみます。",[152,6811,6813],{"className":3444,"code":6812,"language":3446,"meta":158,"style":158},"const obj = {\n  name: 'Yuri',\n}\n\nobj.hasOwnProperty('name') \u002F\u002F true\n",[160,6814,6815,6820,6824,6828,6832],{"__ignoreMap":158},[417,6816,6817],{"class":419,"line":420},[417,6818,6819],{},"const obj = {\n",[417,6821,6822],{"class":419,"line":578},[417,6823,3645],{},[417,6825,6826],{"class":419,"line":596},[417,6827,626],{},[417,6829,6830],{"class":419,"line":617},[417,6831,981],{"emptyLinePlaceholder":732},[417,6833,6834],{"class":419,"line":623},[417,6835,6836],{},"obj.hasOwnProperty('name') \u002F\u002F true\n",[11,6838,6839,6840,6843,6844,6847,6848,6850,6851,6853],{},"オブジェクトリテラルで作成した ",[160,6841,6842],{},"obj"," は、通常 ",[160,6845,6846],{},"Object.prototype"," を継承しています。そのため、",[160,6849,6846],{}," に定義されている ",[160,6852,6808],{}," を呼び出せます。",[11,6855,6856,6857,6733],{},"プロトタイプ継承については、",[176,6858,6861],{"href":6859,"rel":6860},"https:\u002F\u002Fja.javascript.info\u002Fprototype-inheritance",[884],"JavaScript.infoのプロトタイプ継承",[35,6863,6864],{"id":6864},"インスタンスから呼び出す場合の問題",[11,6866,6867,6868,6871],{},"では、オブジェクト自身が ",[160,6869,6870],{},"hasOwnProperty"," という同名のメソッドを持っていたらどうなるでしょうか。",[152,6873,6875],{"className":3444,"code":6874,"language":3446,"meta":158,"style":158},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nobj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[160,6876,6877,6881,6885,6890,6895,6899,6903,6907],{"__ignoreMap":158},[417,6878,6879],{"class":419,"line":420},[417,6880,6819],{},[417,6882,6883],{"class":419,"line":578},[417,6884,3645],{},[417,6886,6887],{"class":419,"line":596},[417,6888,6889],{},"  hasOwnProperty() {\n",[417,6891,6892],{"class":419,"line":617},[417,6893,6894],{},"    console.log('Hello')\n",[417,6896,6897],{"class":419,"line":623},[417,6898,3524],{},[417,6900,6901],{"class":419,"line":999},[417,6902,626],{},[417,6904,6905],{"class":419,"line":1004},[417,6906,981],{"emptyLinePlaceholder":732},[417,6908,6909],{"class":419,"line":1010},[417,6910,6911],{},"obj.hasOwnProperty('name') \u002F\u002F 「Hello」と出力される\n",[11,6913,6914,6915,6918,6919,6922],{},"先ほどは ",[160,6916,6917],{},"true"," を返していた呼び出しが、今度は ",[160,6920,6921],{},"Hello"," を出力しました。",[11,6924,6925,6927,6928,6930],{},[160,6926,6842],{}," 自身の ",[160,6929,6870],{}," が、プロトタイプから継承した同名メソッドよりも優先されたためです。外部から受け取ったオブジェクトなど、自分で構造を完全に管理できない値では、インスタンスから直接呼び出す方法は意図しない結果につながる可能性があります。",[11,6932,1073,6933,6936,6937,6939,6940,6942],{},[160,6934,6935],{},"Object.create(null)"," で作ったオブジェクトは ",[160,6938,6846],{}," を継承しないため、そもそも ",[160,6941,6808],{}," を持っていません。",[152,6944,6946],{"className":3444,"code":6945,"language":3446,"meta":158,"style":158},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nobj.hasOwnProperty('name') \u002F\u002F TypeError\n",[160,6947,6948,6953,6958,6962],{"__ignoreMap":158},[417,6949,6950],{"class":419,"line":420},[417,6951,6952],{},"const obj = Object.create(null)\n",[417,6954,6955],{"class":419,"line":578},[417,6956,6957],{},"obj.name = 'Yuri'\n",[417,6959,6960],{"class":419,"line":596},[417,6961,981],{"emptyLinePlaceholder":732},[417,6963,6964],{"class":419,"line":617},[417,6965,6966],{},"obj.hasOwnProperty('name') \u002F\u002F TypeError\n",[35,6968,6970],{"id":6969},"objecthasownを使う","Object.hasOwnを使う",[11,6972,6973,6974,6977],{},"現在は、オブジェクト自身のプロパティを調べる場合、静的メソッドの ",[160,6975,6976],{},"Object.hasOwn()"," を使うと簡潔です。",[152,6979,6981],{"className":3444,"code":6980,"language":3446,"meta":158,"style":158},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[160,6982,6983,6987,6991,6995,6999,7003,7007,7011],{"__ignoreMap":158},[417,6984,6985],{"class":419,"line":420},[417,6986,6819],{},[417,6988,6989],{"class":419,"line":578},[417,6990,3645],{},[417,6992,6993],{"class":419,"line":596},[417,6994,6889],{},[417,6996,6997],{"class":419,"line":617},[417,6998,6894],{},[417,7000,7001],{"class":419,"line":623},[417,7002,3524],{},[417,7004,7005],{"class":419,"line":999},[417,7006,626],{},[417,7008,7009],{"class":419,"line":1004},[417,7010,981],{"emptyLinePlaceholder":732},[417,7012,7013],{"class":419,"line":1010},[417,7014,7015],{},"Object.hasOwn(obj, 'name') \u002F\u002F true\n",[11,7017,7018,7019,7021],{},"第1引数に調べたいオブジェクト、第2引数にプロパティ名を渡します。対象のオブジェクトに同名の ",[160,7020,6870],{}," が定義されていても影響を受けません。",[11,7023,7024,7026],{},[160,7025,6935],{}," で作ったオブジェクトにも使用できます。",[152,7028,7030],{"className":3444,"code":7029,"language":3446,"meta":158,"style":158},"const obj = Object.create(null)\nobj.name = 'Yuri'\n\nObject.hasOwn(obj, 'name') \u002F\u002F true\n",[160,7031,7032,7036,7040,7044],{"__ignoreMap":158},[417,7033,7034],{"class":419,"line":420},[417,7035,6952],{},[417,7037,7038],{"class":419,"line":578},[417,7039,6957],{},[417,7041,7042],{"class":419,"line":596},[417,7043,981],{"emptyLinePlaceholder":732},[417,7045,7046],{"class":419,"line":617},[417,7047,7015],{},[35,7049,7050],{"id":7050},"古い実行環境も考慮する場合",[11,7052,7053,7055,7056,7059],{},[160,7054,6976],{}," を利用できない古い実行環境まで考慮する場合は、",[160,7057,7058],{},"Object.prototype.hasOwnProperty.call()"," という書き方もできます。",[152,7061,7063],{"className":3444,"code":7062,"language":3446,"meta":158,"style":158},"const obj = {\n  name: 'Yuri',\n  hasOwnProperty() {\n    console.log('Hello')\n  },\n}\n\nObject.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[160,7064,7065,7069,7073,7077,7081,7085,7089,7093],{"__ignoreMap":158},[417,7066,7067],{"class":419,"line":420},[417,7068,6819],{},[417,7070,7071],{"class":419,"line":578},[417,7072,3645],{},[417,7074,7075],{"class":419,"line":596},[417,7076,6889],{},[417,7078,7079],{"class":419,"line":617},[417,7080,6894],{},[417,7082,7083],{"class":419,"line":623},[417,7084,3524],{},[417,7086,7087],{"class":419,"line":999},[417,7088,626],{},[417,7090,7091],{"class":419,"line":1004},[417,7092,981],{"emptyLinePlaceholder":732},[417,7094,7095],{"class":419,"line":1010},[417,7096,7097],{},"Object.prototype.hasOwnProperty.call(obj, 'name') \u002F\u002F true\n",[11,7099,7100,7103,7104,7107],{},[160,7101,7102],{},"call()"," の第1引数に ",[160,7105,7106],{},"this"," として扱うオブジェクトを指定し、それ以降の引数を元のメソッドへ渡しています。",[11,7109,7110,7111,7113,7114,7116,7117,7119,7120,7122,7123,7125],{},"この例では ",[160,7112,6846],{}," が持つ本来の ",[160,7115,6808],{}," を直接取得し、",[160,7118,6842],{}," を ",[160,7121,7106],{}," として呼び出しています。そのため、",[160,7124,6842],{}," 自身に定義された同名メソッドの影響を受けません。",[35,7127,1180],{"id":1180},[204,7129,7130,7136,7139,7146,7153],{},[127,7131,7132,7133,7135],{},"オブジェクトリテラルは通常、",[160,7134,6846],{}," のメソッドを継承する",[127,7137,7138],{},"オブジェクト自身が同名メソッドを持つと、継承したメソッドは隠される",[127,7140,7141,6936,7143,7145],{},[160,7142,6935],{},[160,7144,6808],{}," を継承しない",[127,7147,7148,7149,7152],{},"自身のプロパティを確認する場合は、基本的に ",[160,7150,7151],{},"Object.hasOwn(obj, property)"," を使う",[127,7154,7155,7156,7159],{},"古い実行環境も考慮する場合は、",[160,7157,7158],{},"Object.prototype.hasOwnProperty.call(obj, property)"," を使える",[11,7161,7162],{},"オブジェクトの出所や構造を完全には把握できない場合も、インスタンスの同名メソッドに依存しない呼び出し方を選ぶと安全です。",[711,7164,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":7166},[7167,7168,7169,7170,7171,7172],{"id":6770,"depth":578,"text":6771},{"id":6798,"depth":578,"text":6799},{"id":6864,"depth":578,"text":6864},{"id":6969,"depth":578,"text":6970},{"id":7050,"depth":578,"text":7050},{"id":1180,"depth":578,"text":1180},"JavaScriptでオブジェクト自身のプロパティを安全に確認する方法を、hasOwnPropertyとObject.hasOwnの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fhow-to-use-javascript-built-in-objects","2024-11-24",{"title":6757,"description":7173},"articles\u002F2024\u002Fhow-to-use-javascript-built-in-objects",[4129],"\u002Fimages\u002Farticles\u002Fhow-to-use-javascript-built-in-objects.png","nujvvO9Kj5xXhtbuHUxO1l6JeNtgWjuj3S4rljZKkdU",{"id":7183,"title":7184,"body":7185,"description":7564,"extension":730,"meta":7565,"navigation":732,"path":7566,"publishDate":7567,"published":732,"seo":7568,"stem":7569,"tags":7570,"thumbnail":7571,"updated":7567,"__hash__":7572},"articles\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy.md","JavaScriptのディープコピーとは？",{"type":8,"value":7186,"toc":7557},[7187,7189,7192,7195,7199,7202,7205,7214,7217,7224,7275,7288,7303,7306,7330,7333,7342,7346,7353,7399,7404,7419,7422,7446,7461,7468,7477,7481,7484,7493,7496,7521,7527,7529,7552,7555],[11,7188,13],{},[11,7190,7191],{},"今回は、JavaScriptにおけるオブジェクトのディープコピーについて紹介します。",[11,7193,7194],{},"シャローコピーとの違いや実装方法を理解しておくと、コピー先の変更が意図せずコピー元へ影響する問題を避けられます。",[35,7196,7198],{"id":7197},"ディープコピーとは","ディープコピーとは？",[11,7200,7201],{},"ディープコピーとは、コピー元とコピー先が、内部にあるオブジェクトの参照を共有しないコピーのことです。",[11,7203,7204],{},"たとえば、入れ子になったオブジェクトをコピーしたあと、コピー先の内側にある値を変更しても、コピー元の値には影響しません。",[11,7206,7207,7208,7213],{},"詳しい定義は、",[176,7209,7212],{"href":7210,"rel":7211},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FGlossary\u002FDeep_copy",[884],"MDNのディープコピー","も参照してください。",[35,7215,7216],{"id":7216},"シャローコピーでは参照が共有される",[11,7218,7219,7220,7223],{},"まずは、",[160,7221,7222],{},"Object.assign()"," を使ったシャローコピーを確認します。",[152,7225,7227],{"className":3444,"code":7226,"language":3446,"meta":158,"style":158},"const original = {\n  user: {\n    name: 'Yuri',\n  },\n  settings: {\n    theme: 'light',\n  },\n}\n\nconst shallowCopy = Object.assign({}, original)\n",[160,7228,7229,7234,7239,7244,7248,7253,7258,7262,7266,7270],{"__ignoreMap":158},[417,7230,7231],{"class":419,"line":420},[417,7232,7233],{},"const original = {\n",[417,7235,7236],{"class":419,"line":578},[417,7237,7238],{},"  user: {\n",[417,7240,7241],{"class":419,"line":596},[417,7242,7243],{},"    name: 'Yuri',\n",[417,7245,7246],{"class":419,"line":617},[417,7247,3524],{},[417,7249,7250],{"class":419,"line":623},[417,7251,7252],{},"  settings: {\n",[417,7254,7255],{"class":419,"line":999},[417,7256,7257],{},"    theme: 'light',\n",[417,7259,7260],{"class":419,"line":1004},[417,7261,3524],{},[417,7263,7264],{"class":419,"line":1010},[417,7265,626],{},[417,7267,7268],{"class":419,"line":1016},[417,7269,981],{"emptyLinePlaceholder":732},[417,7271,7272],{"class":419,"line":1022},[417,7273,7274],{},"const shallowCopy = Object.assign({}, original)\n",[11,7276,7277,7280,7281,1773,7284,7287],{},[160,7278,7279],{},"Object.assign({}, original)"," で新しい外側のオブジェクトは作られますが、",[160,7282,7283],{},"user",[160,7285,7286],{},"settings"," はコピー元と同じオブジェクトを参照しています。",[152,7289,7291],{"className":3444,"code":7290,"language":3446,"meta":158,"style":158},"console.log(original === shallowCopy) \u002F\u002F false\nconsole.log(original.user === shallowCopy.user) \u002F\u002F true\n",[160,7292,7293,7298],{"__ignoreMap":158},[417,7294,7295],{"class":419,"line":420},[417,7296,7297],{},"console.log(original === shallowCopy) \u002F\u002F false\n",[417,7299,7300],{"class":419,"line":578},[417,7301,7302],{},"console.log(original.user === shallowCopy.user) \u002F\u002F true\n",[11,7304,7305],{},"そのため、コピー先にある入れ子の値を変更すると、コピー元にも影響します。",[152,7307,7309],{"className":3444,"code":7308,"language":3446,"meta":158,"style":158},"shallowCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Kohei」\nconsole.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[160,7310,7311,7316,7320,7325],{"__ignoreMap":158},[417,7312,7313],{"class":419,"line":420},[417,7314,7315],{},"shallowCopy.user.name = 'Kohei'\n",[417,7317,7318],{"class":419,"line":578},[417,7319,981],{"emptyLinePlaceholder":732},[417,7321,7322],{"class":419,"line":596},[417,7323,7324],{},"console.log(original.user.name) \u002F\u002F 「Kohei」\n",[417,7326,7327],{"class":419,"line":617},[417,7328,7329],{},"console.log(shallowCopy.user.name) \u002F\u002F 「Kohei」\n",[11,7331,7332],{},"オブジェクトスプレッド構文も、同様にシャローコピーです。",[152,7334,7336],{"className":3444,"code":7335,"language":3446,"meta":158,"style":158},"const shallowCopy = { ...original }\n",[160,7337,7338],{"__ignoreMap":158},[417,7339,7340],{"class":419,"line":420},[417,7341,7335],{},[35,7343,7345],{"id":7344},"structuredcloneでディープコピーする","structuredCloneでディープコピーする",[11,7347,7348,7349,7352],{},"ディープコピーには、",[160,7350,7351],{},"structuredClone()"," を利用できます。",[152,7354,7356],{"className":3444,"code":7355,"language":3446,"meta":158,"style":158},"const original = {\n  user: {\n    name: 'Yuri',\n  },\n  settings: {\n    theme: 'light',\n  },\n}\n\nconst deepCopy = structuredClone(original)\n",[160,7357,7358,7362,7366,7370,7374,7378,7382,7386,7390,7394],{"__ignoreMap":158},[417,7359,7360],{"class":419,"line":420},[417,7361,7233],{},[417,7363,7364],{"class":419,"line":578},[417,7365,7238],{},[417,7367,7368],{"class":419,"line":596},[417,7369,7243],{},[417,7371,7372],{"class":419,"line":617},[417,7373,3524],{},[417,7375,7376],{"class":419,"line":623},[417,7377,7252],{},[417,7379,7380],{"class":419,"line":999},[417,7381,7257],{},[417,7383,7384],{"class":419,"line":1004},[417,7385,3524],{},[417,7387,7388],{"class":419,"line":1010},[417,7389,626],{},[417,7391,7392],{"class":419,"line":1016},[417,7393,981],{"emptyLinePlaceholder":732},[417,7395,7396],{"class":419,"line":1022},[417,7397,7398],{},"const deepCopy = structuredClone(original)\n",[11,7400,7401,7403],{},[160,7402,7351],{}," で作ったコピーは、入れ子のオブジェクトもコピー元とは異なる参照になります。",[152,7405,7407],{"className":3444,"code":7406,"language":3446,"meta":158,"style":158},"console.log(original === deepCopy) \u002F\u002F false\nconsole.log(original.user === deepCopy.user) \u002F\u002F false\n",[160,7408,7409,7414],{"__ignoreMap":158},[417,7410,7411],{"class":419,"line":420},[417,7412,7413],{},"console.log(original === deepCopy) \u002F\u002F false\n",[417,7415,7416],{"class":419,"line":578},[417,7417,7418],{},"console.log(original.user === deepCopy.user) \u002F\u002F false\n",[11,7420,7421],{},"コピー先を変更しても、コピー元には影響しません。",[152,7423,7425],{"className":3444,"code":7424,"language":3446,"meta":158,"style":158},"deepCopy.user.name = 'Kohei'\n\nconsole.log(original.user.name) \u002F\u002F 「Yuri」\nconsole.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[160,7426,7427,7432,7436,7441],{"__ignoreMap":158},[417,7428,7429],{"class":419,"line":420},[417,7430,7431],{},"deepCopy.user.name = 'Kohei'\n",[417,7433,7434],{"class":419,"line":578},[417,7435,981],{"emptyLinePlaceholder":732},[417,7437,7438],{"class":419,"line":596},[417,7439,7440],{},"console.log(original.user.name) \u002F\u002F 「Yuri」\n",[417,7442,7443],{"class":419,"line":617},[417,7444,7445],{},"console.log(deepCopy.user.name) \u002F\u002F 「Kohei」\n",[11,7447,7448,7450,7451,2208,7454,2208,7457,7460],{},[160,7449,7351],{}," は通常のオブジェクトや配列だけでなく、",[160,7452,7453],{},"Date",[160,7455,7456],{},"Map",[160,7458,7459],{},"Set"," など、構造化複製アルゴリズムが対応している型をコピーできます。また、循環参照を持つオブジェクトにも対応しています。",[11,7462,7463,7464,7467],{},"ただし、関数など構造化複製できない値が含まれている場合は ",[160,7465,7466],{},"DataCloneError"," が発生します。すべてのJavaScriptの値を無条件にコピーできるわけではありません。",[11,7469,7470,7471,7476],{},"詳しい対応範囲は、",[176,7472,7475],{"href":7473,"rel":7474},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fja\u002Fdocs\u002FWeb\u002FAPI\u002FWindow\u002FstructuredClone",[884],"MDNのstructuredClone()","を確認してください。",[35,7478,7480],{"id":7479},"jsonを使ったディープコピーの注意点","JSONを使ったディープコピーの注意点",[11,7482,7483],{},"単純なデータだけを扱う場合、JSONへ変換して戻す方法もあります。",[152,7485,7487],{"className":3444,"code":7486,"language":3446,"meta":158,"style":158},"const deepCopy = JSON.parse(JSON.stringify(original))\n",[160,7488,7489],{"__ignoreMap":158},[417,7490,7491],{"class":419,"line":420},[417,7492,7486],{},[11,7494,7495],{},"ただし、この方法はJSONとして表現できる値に限られます。",[204,7497,7498,7503,7512,7518],{},[127,7499,7500,7502],{},[160,7501,7453],{}," は文字列へ変換される",[127,7504,7505,7507,7508,7511],{},[160,7506,3694],{},"、関数、",[160,7509,7510],{},"Symbol"," などは正しく保持できない",[127,7513,7514,7517],{},[160,7515,7516],{},"BigInt"," を含むと例外が発生する",[127,7519,7520],{},"循環参照を持つオブジェクトは変換できない",[11,7522,7523,7524,7526],{},"対象がJSON互換のデータだと分かっている場合には使えますが、一般的なディープコピーとしては ",[160,7525,7351],{}," の方が意図を表しやすく、扱える型も多くなります。",[35,7528,1180],{"id":1180},[204,7530,7531,7536,7539,7544,7549],{},[127,7532,7533,7535],{},[160,7534,7222],{}," とオブジェクトスプレッド構文はシャローコピーになる",[127,7537,7538],{},"シャローコピーでは、入れ子のオブジェクトの参照がコピー元と共有される",[127,7540,7541,7543],{},[160,7542,7351],{}," を使うと、対応している値をディープコピーできる",[127,7545,7546,7548],{},[160,7547,7351],{}," でも、関数などコピーできない値がある",[127,7550,7551],{},"JSONによるコピーは、JSON互換データだけに限定して使う",[11,7553,7554],{},"コピー方法を選ぶときは、対象のデータ構造と、コピー後にどの階層まで独立して変更したいかを確認することが大切です。",[711,7556,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":7558},[7559,7560,7561,7562,7563],{"id":7197,"depth":578,"text":7198},{"id":7216,"depth":578,"text":7216},{"id":7344,"depth":578,"text":7345},{"id":7479,"depth":578,"text":7480},{"id":1180,"depth":578,"text":1180},"JavaScriptのシャローコピーとディープコピーの違いを確認し、structuredCloneを使った実装方法と注意点を整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-javascript-deepcopy","2024-11-23",{"title":7184,"description":7564},"articles\u002F2024\u002Fdescribe-javascript-deepcopy",[4129],"\u002Fimages\u002Farticles\u002Fdescribe-javascript-deepcopy.png","dtSQ5LrS1Kfo1hFYE2MzMKOvrhU_5JGE1X1eQ9eHhIY",{"id":7574,"title":7575,"body":7576,"description":7987,"extension":730,"meta":7988,"navigation":732,"path":7989,"publishDate":7990,"published":732,"seo":7991,"stem":7992,"tags":7993,"thumbnail":7994,"updated":7995,"__hash__":7996},"articles\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this.md","JavaScriptのthisの挙動について呼び出し元で整理する",{"type":8,"value":7577,"toc":7979},[7578,7580,7586,7590,7595,7601,7604,7607,7613,7621,7623,7629,7635,7644,7647,7687,7694,7713,7715,7721,7741,7744,7781,7793,7813,7819,7822,7825,7867,7885,7894,7908,7918,7933,7935,7940,7972,7977],[11,7579,13],{},[11,7581,7582,7583,7585],{},"今回は、プロジェクトや個人開発で振り回されることが多かったJavaScriptの ",[160,7584,7106],{}," の挙動について、あらためて振り返ります。自分をはじめ、初学者の方も知っておくと開発が楽になるかと思います。",[35,7587,7589],{"id":7588},"そもそもthisってなんだ","そもそも「this」ってなんだ？",[11,7591,7592,7594],{},[160,7593,7106],{}," は、関数が実行されたときのコンテキストを参照するためのキーワードです。",[11,7596,7597,7598,7600],{},"同じ関数であっても、どのように呼び出されたかによって ",[160,7599,7106],{}," が参照する値は変わります。この特徴が便利なところでもあり、難しいところでもあります。",[11,7602,7603],{},"それでは、呼び出し方によって参照先がどう変わるのか見てみましょう。",[35,7605,7606],{"id":7606},"使用する場所ごとのthis",[11,7608,7609,7610,7612],{},"この記事では、",[160,7611,7106],{}," を使用するケースを次の2つに分けて確認します。",[204,7614,7615,7618],{},[127,7616,7617],{},"オブジェクトのメソッドとして呼び出す場合",[127,7619,7620],{},"通常の関数として呼び出す場合",[35,7622,7617],{"id":7617},[11,7624,7625,7626,7628],{},"オブジェクトのメソッドとして呼び出した場合、",[160,7627,7106],{}," は基本的に呼び出し元のオブジェクトを参照します。",[11,7630,7631,7632,7634],{},"ここでいう呼び出し元のオブジェクトとは、次の例では ",[160,7633,6842],{}," のことです。",[152,7636,7638],{"className":3444,"code":7637,"language":3446,"meta":158,"style":158},"const obj = {}\n",[160,7639,7640],{"__ignoreMap":158},[417,7641,7642],{"class":419,"line":420},[417,7643,7637],{},[11,7645,7646],{},"実際に挙動を見てみましょう。",[152,7648,7650],{"className":3444,"code":7649,"language":3446,"meta":158,"style":158},"const obj = {\n  name: 'Yuri',\n  message: function () {\n    console.log('Hello ' + this.name)\n  },\n}\n\nobj.message()\n",[160,7651,7652,7656,7660,7665,7670,7674,7678,7682],{"__ignoreMap":158},[417,7653,7654],{"class":419,"line":420},[417,7655,6819],{},[417,7657,7658],{"class":419,"line":578},[417,7659,3645],{},[417,7661,7662],{"class":419,"line":596},[417,7663,7664],{},"  message: function () {\n",[417,7666,7667],{"class":419,"line":617},[417,7668,7669],{},"    console.log('Hello ' + this.name)\n",[417,7671,7672],{"class":419,"line":623},[417,7673,3524],{},[417,7675,7676],{"class":419,"line":999},[417,7677,626],{},[417,7679,7680],{"class":419,"line":1004},[417,7681,981],{"emptyLinePlaceholder":732},[417,7683,7684],{"class":419,"line":1010},[417,7685,7686],{},"obj.message()\n",[11,7688,7689,7690,7693],{},"この例では、",[160,7691,7692],{},"Hello Yuri"," と出力されます。",[11,7695,7696,7699,7700,7702,7703,7705,7706,7702,7709,7712],{},[160,7697,7698],{},"obj.message()"," という形で呼び出しているため、メソッド内の ",[160,7701,7106],{}," は ",[160,7704,6842],{}," を参照します。したがって、",[160,7707,7708],{},"this.name",[160,7710,7711],{},"obj.name"," として評価されます。",[35,7714,7620],{"id":7620},[11,7716,7717,7718,7720],{},"通常の関数として呼び出した場合、",[160,7719,7106],{}," の値は実行モードによって異なります。",[204,7722,7723,7733],{},[127,7724,7725,7726,7728,7729,7732],{},"非厳格モードのブラウザでは、",[160,7727,7106],{}," はグローバルオブジェクトの ",[160,7730,7731],{},"window"," を参照する",[127,7734,7735,7736,7702,7738,7740],{},"厳格モードやES Modulesでは、",[160,7737,7106],{},[160,7739,3694],{}," になる",[11,7742,7743],{},"次のコードは、ブラウザの非厳格モードで実行する例です。",[152,7745,7747],{"className":3444,"code":7746,"language":3446,"meta":158,"style":158},"window.name = 'Yuri'\n\nfunction message() {\n  console.log('Hello ' + this.name)\n}\n\nmessage()\n",[160,7748,7749,7754,7758,7763,7768,7772,7776],{"__ignoreMap":158},[417,7750,7751],{"class":419,"line":420},[417,7752,7753],{},"window.name = 'Yuri'\n",[417,7755,7756],{"class":419,"line":578},[417,7757,981],{"emptyLinePlaceholder":732},[417,7759,7760],{"class":419,"line":596},[417,7761,7762],{},"function message() {\n",[417,7764,7765],{"class":419,"line":617},[417,7766,7767],{},"  console.log('Hello ' + this.name)\n",[417,7769,7770],{"class":419,"line":623},[417,7771,626],{},[417,7773,7774],{"class":419,"line":999},[417,7775,981],{"emptyLinePlaceholder":732},[417,7777,7778],{"class":419,"line":1004},[417,7779,7780],{},"message()\n",[11,7782,7783,7784,7786,7787,7790,7791,7693],{},"非厳格モードでは ",[160,7785,7708],{}," が ",[160,7788,7789],{},"window.name"," として評価されるため、",[160,7792,7692],{},[1548,7794,7795],{},[11,7796,7797,1773,7800,7802,7803,7805,7806,7809,7810,7812],{},[160,7798,7799],{},"let",[160,7801,4385],{}," で宣言した変数は、",[160,7804,7731],{}," オブジェクトのプロパティとして追加されません。一方、ブラウザでトップレベルに ",[160,7807,7808],{},"var"," を使って宣言した変数は、",[160,7811,7731],{}," のプロパティになります。",[11,7814,7815,7816,7818],{},"現在のフロントエンド開発ではES Modulesが広く使われています。ES Modulesは自動的に厳格モードとして扱われるため、通常の関数呼び出しで ",[160,7817,7106],{}," に依存する実装は避けた方が安全です。",[35,7820,7821],{"id":7821},"オブジェクトのメソッドを変数へ代入した場合",[11,7823,7824],{},"ここまでを踏まえて、オブジェクトのメソッドを変数へ代入した場合の挙動を見てみましょう。",[152,7826,7828],{"className":3444,"code":7827,"language":3446,"meta":158,"style":158},"const obj = {\n  name: 'Yuri',\n  message: function () {\n    console.log('Hello ' + this.name)\n  },\n}\n\nconst message = obj.message\nmessage()\n",[160,7829,7830,7834,7838,7842,7846,7850,7854,7858,7863],{"__ignoreMap":158},[417,7831,7832],{"class":419,"line":420},[417,7833,6819],{},[417,7835,7836],{"class":419,"line":578},[417,7837,3645],{},[417,7839,7840],{"class":419,"line":596},[417,7841,7664],{},[417,7843,7844],{"class":419,"line":617},[417,7845,7669],{},[417,7847,7848],{"class":419,"line":623},[417,7849,3524],{},[417,7851,7852],{"class":419,"line":999},[417,7853,626],{},[417,7855,7856],{"class":419,"line":1004},[417,7857,981],{"emptyLinePlaceholder":732},[417,7859,7860],{"class":419,"line":1010},[417,7861,7862],{},"const message = obj.message\n",[417,7864,7865],{"class":419,"line":1016},[417,7866,7780],{},[11,7868,7869,7872,7873,7875,7876,7879,7880,2204,7882,7884],{},[160,7870,7871],{},"const message = obj.message"," では、関数そのものを変数へ代入しています。その後は ",[160,7874,7698],{}," ではなく ",[160,7877,7878],{},"message()"," として呼び出しているため、",[160,7881,7106],{},[160,7883,6842],{}," の結び付きは失われます。",[11,7886,7783,7887,7786,7889,2223,7891,7893],{},[160,7888,7106],{},[160,7890,7731],{},[160,7892,7789],{}," が設定されていなければ、実行環境に応じて空文字などが返ります。",[11,7895,7896,7897,7786,7899,7901,7902,7904,7905,7907],{},"厳格モードやES Modulesでは ",[160,7898,7106],{},[160,7900,3694],{}," になるため、",[160,7903,7708],{}," を読み取ろうとすると ",[160,7906,3874],{}," が発生します。",[11,7909,7910,7911,7914,7915,7917],{},"このような場合は、",[160,7912,7913],{},"bind()"," を使って ",[160,7916,7106],{}," の参照先を固定できます。",[152,7919,7921],{"className":3444,"code":7920,"language":3446,"meta":158,"style":158},"const message = obj.message.bind(obj)\nmessage() \u002F\u002F 「Hello Yuri」と出力される\n",[160,7922,7923,7928],{"__ignoreMap":158},[417,7924,7925],{"class":419,"line":420},[417,7926,7927],{},"const message = obj.message.bind(obj)\n",[417,7929,7930],{"class":419,"line":578},[417,7931,7932],{},"message() \u002F\u002F 「Hello Yuri」と出力される\n",[35,7934,1180],{"id":1180},[11,7936,7937,7939],{},[160,7938,7106],{}," の参照先は、関数を定義した場所だけではなく、主に関数の呼び出し方によって決まります。",[204,7941,7942,7951,7961,7964],{},[127,7943,7944,7946,7947,7702,7949,7732],{},[160,7945,7698],{}," のようなメソッド呼び出しでは、",[160,7948,7106],{},[160,7950,6842],{},[127,7952,7953,7955,7956,7958,7959,7740],{},[160,7954,7878],{}," のような通常の関数呼び出しでは、非厳格モードのブラウザなら ",[160,7957,7731],{},"、厳格モードやES Modulesなら ",[160,7960,3694],{},[127,7962,7963],{},"メソッドを変数へ代入すると、元のオブジェクトとの結び付きは失われる",[127,7965,7966,7967,3360,7969,7971],{},"元のオブジェクトを参照させたい場合は、",[160,7968,7913],{},[160,7970,7106],{}," を固定できる",[11,7973,7974,7976],{},[160,7975,7106],{}," で迷ったときは「この関数はどのような形で呼び出されているか」を確認すると、参照先を判断しやすくなります。",[711,7978,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":7980},[7981,7982,7983,7984,7985,7986],{"id":7588,"depth":578,"text":7589},{"id":7606,"depth":578,"text":7606},{"id":7617,"depth":578,"text":7617},{"id":7620,"depth":578,"text":7620},{"id":7821,"depth":578,"text":7821},{"id":1180,"depth":578,"text":1180},"JavaScriptのthisが何を参照するのか、メソッド呼び出しと関数呼び出しの違いから整理します。",{},"\u002Farticles\u002F2024\u002Fdescribe-behavior-javascript-this","2024-11-20",{"title":7575,"description":7987},"articles\u002F2024\u002Fdescribe-behavior-javascript-this",[4129],"\u002Fimages\u002Farticles\u002Fdescribe-behavior-javascript-this.png","2025-03-21","Kay_1TeIK8YsouKEwYLRPzbQMnabHxZ_GWvHciKSZBs",[7998,8487,8840,9522,10046,10510,11055,12402,12780,13151,13477,13776],{"id":5,"title":6,"body":7999,"description":729,"extension":730,"meta":8484,"navigation":732,"path":733,"publishDate":734,"published":732,"seo":8485,"stem":736,"tags":8486,"thumbnail":741,"updated":742,"__hash__":743},{"type":8,"value":8000,"toc":8469},[8001,8003,8005,8007,8009,8013,8015,8017,8019,8055,8057,8059,8061,8063,8065,8067,8071,8073,8089,8091,8096,8098,8100,8102,8106,8108,8110,8112,8114,8116,8118,8120,8134,8138,8140,8142,8144,8146,8148,8150,8154,8156,8158,8160,8196,8198,8200,8202,8268,8270,8280,8284,8286,8288,8290,8292,8294,8308,8312,8314,8316,8332,8334,8336,8338,8340,8342,8352,8354,8359,8363,8369,8413,8417,8419,8427,8429,8433,8449,8451,8453,8455,8457,8459,8461,8463,8465,8467],[11,8002,13],{},[11,8004,16],{},[11,8006,19],{},[11,8008,22],{},[11,8010,25,8011,30],{},[27,8012,29],{},[11,8014,33],{},[35,8016,38],{"id":37},[11,8018,41],{},[43,8020,8021,8029],{},[46,8022,8023],{},[49,8024,8025,8027],{},[52,8026,54],{},[52,8028,57],{},[59,8030,8031,8037,8043,8049],{},[49,8032,8033,8035],{},[64,8034,66],{},[64,8036,69],{},[49,8038,8039,8041],{},[64,8040,74],{},[64,8042,77],{},[49,8044,8045,8047],{},[64,8046,82],{},[64,8048,85],{},[49,8050,8051,8053],{},[64,8052,90],{},[64,8054,93],{},[11,8056,96],{},[11,8058,99],{},[11,8060,102],{},[11,8062,105],{},[35,8064,109],{"id":108},[11,8066,112],{},[11,8068,115,8069,119],{},[27,8070,118],{},[11,8072,122],{},[124,8074,8075,8077,8079,8081,8083,8085,8087],{},[127,8076,129],{},[127,8078,132],{},[127,8080,135],{},[127,8082,138],{},[127,8084,141],{},[127,8086,144],{},[127,8088,147],{},[11,8090,150],{},[152,8092,8094],{"className":8093,"code":156,"language":157,"meta":158},[155],[160,8095,156],{"__ignoreMap":158},[11,8097,164],{},[11,8099,167],{},[169,8101,171],{"id":171},[11,8103,174,8104,180],{},[176,8105,179],{"href":178},[11,8107,183],{},[11,8109,186],{},[11,8111,189],{},[35,8113,193],{"id":192},[11,8115,196],{},[11,8117,199],{},[11,8119,202],{},[204,8121,8122,8124,8126,8128,8130,8132],{},[127,8123,208],{},[127,8125,211],{},[127,8127,214],{},[127,8129,217],{},[127,8131,220],{},[127,8133,223],{},[11,8135,226,8136,230],{},[160,8137,229],{},[11,8139,233],{},[11,8141,236],{},[35,8143,240],{"id":239},[11,8145,243],{},[11,8147,246],{},[11,8149,249],{},[11,8151,252,8152,256],{},[27,8153,255],{},[11,8155,259],{},[35,8157,262],{"id":262},[11,8159,265],{},[43,8161,8162,8170],{},[46,8163,8164],{},[49,8165,8166,8168],{},[52,8167,274],{},[52,8169,277],{},[59,8171,8172,8178,8184,8190],{},[49,8173,8174,8176],{},[64,8175,284],{},[64,8177,287],{},[49,8179,8180,8182],{},[64,8181,292],{},[64,8183,295],{},[49,8185,8186,8188],{},[64,8187,300],{},[64,8189,303],{},[49,8191,8192,8194],{},[64,8193,308],{},[64,8195,311],{},[11,8197,314],{},[11,8199,317],{},[11,8201,320],{},[43,8203,8204,8212],{},[46,8205,8206],{},[49,8207,8208,8210],{},[52,8209,329],{},[52,8211,332],{},[59,8213,8214,8220,8226,8232,8238,8244,8250,8256,8262],{},[49,8215,8216,8218],{},[64,8217,339],{},[64,8219,342],{},[49,8221,8222,8224],{},[64,8223,347],{},[64,8225,350],{},[49,8227,8228,8230],{},[64,8229,355],{},[64,8231,358],{},[49,8233,8234,8236],{},[64,8235,363],{},[64,8237,366],{},[49,8239,8240,8242],{},[64,8241,371],{},[64,8243,374],{},[49,8245,8246,8248],{},[64,8247,379],{},[64,8249,382],{},[49,8251,8252,8254],{},[64,8253,387],{},[64,8255,390],{},[49,8257,8258,8260],{},[64,8259,395],{},[64,8261,398],{},[49,8263,8264,8266],{},[64,8265,403],{},[64,8267,406],{},[11,8269,409],{},[152,8271,8272],{"className":412,"code":413,"language":292,"meta":158,"style":158},[160,8273,8274],{"__ignoreMap":158},[417,8275,8276,8278],{"class":419,"line":420},[417,8277,424],{"class":423},[417,8279,428],{"class":427},[11,8281,431,8282,435],{},[160,8283,434],{},[11,8285,438],{},[35,8287,442],{"id":441},[11,8289,445],{},[11,8291,448],{},[11,8293,451],{},[152,8295,8296],{"className":412,"code":454,"language":292,"meta":158,"style":158},[160,8297,8298],{"__ignoreMap":158},[417,8299,8300,8302,8304,8306],{"class":419,"line":420},[417,8301,461],{"class":423},[417,8303,464],{"class":427},[417,8305,467],{"class":427},[417,8307,470],{"class":427},[11,8309,473,8310,477],{},[27,8311,476],{},[169,8313,480],{"id":480},[11,8315,483],{},[152,8317,8318],{"className":412,"code":486,"language":292,"meta":158,"style":158},[160,8319,8320],{"__ignoreMap":158},[417,8321,8322,8324,8326,8328,8330],{"class":419,"line":420},[417,8323,494],{"class":493},[417,8325,497],{"class":427},[417,8327,501],{"class":500},[417,8329,504],{"class":427},[417,8331,507],{"class":500},[11,8333,510],{},[11,8335,513],{},[11,8337,516],{},[169,8339,520],{"id":519},[11,8341,523],{},[152,8343,8344],{"className":412,"code":526,"language":292,"meta":158,"style":158},[160,8345,8346],{"__ignoreMap":158},[417,8347,8348,8350],{"class":419,"line":420},[417,8349,533],{"class":423},[417,8351,536],{"class":427},[11,8353,539],{},[152,8355,8357],{"className":8356,"code":543,"language":157,"meta":158},[155],[160,8358,543],{"__ignoreMap":158},[11,8360,548,8361,552],{},[160,8362,551],{},[11,8364,555,8365,559,8367,563],{},[160,8366,558],{},[160,8368,562],{},[152,8370,8371],{"className":566,"code":567,"language":568,"meta":158,"style":158},[160,8372,8373,8377,8389,8405,8409],{"__ignoreMap":158},[417,8374,8375],{"class":419,"line":420},[417,8376,575],{"class":500},[417,8378,8379,8381,8383,8385,8387],{"class":419,"line":578},[417,8380,581],{"class":500},[417,8382,562],{"class":584},[417,8384,587],{"class":500},[417,8386,590],{"class":500},[417,8388,593],{"class":500},[417,8390,8391,8393,8395,8397,8399,8401,8403],{"class":419,"line":596},[417,8392,599],{"class":500},[417,8394,602],{"class":423},[417,8396,587],{"class":500},[417,8398,590],{"class":500},[417,8400,609],{"class":500},[417,8402,308],{"class":427},[417,8404,614],{"class":500},[417,8406,8407],{"class":419,"line":617},[417,8408,620],{"class":500},[417,8410,8411],{"class":419,"line":623},[417,8412,626],{"class":500},[11,8414,629,8415,633],{},[160,8416,632],{},[11,8418,636],{},[11,8420,639,8421,643,8423,647,8425,650],{},[160,8422,642],{},[160,8424,646],{},[160,8426,533],{},[169,8428,653],{"id":653},[11,8430,656,8431,659],{},[160,8432,434],{},[152,8434,8435],{"className":412,"code":662,"language":292,"meta":158,"style":158},[160,8436,8437],{"__ignoreMap":158},[417,8438,8439,8441,8443,8445,8447],{"class":419,"line":420},[417,8440,669],{"class":584},[417,8442,672],{"class":427},[417,8444,676],{"class":675},[417,8446,679],{"class":500},[417,8448,682],{"class":675},[11,8450,685],{},[11,8452,688],{},[35,8454,691],{"id":691},[11,8456,694],{},[11,8458,697],{},[11,8460,700],{},[11,8462,703],{},[11,8464,706],{},[11,8466,709],{},[711,8468,713],{},{"title":158,"searchDepth":578,"depth":578,"links":8470},[8471,8472,8475,8476,8477,8478,8483],{"id":37,"depth":578,"text":38},{"id":108,"depth":578,"text":109,"children":8473},[8474],{"id":171,"depth":596,"text":171},{"id":192,"depth":578,"text":193},{"id":239,"depth":578,"text":240},{"id":262,"depth":578,"text":262},{"id":441,"depth":578,"text":442,"children":8479},[8480,8481,8482],{"id":480,"depth":596,"text":480},{"id":519,"depth":596,"text":520},{"id":653,"depth":596,"text":653},{"id":691,"depth":578,"text":691},{},{"title":6,"description":729},[738,739,74,740],{"id":745,"title":746,"body":8488,"description":1228,"extension":730,"meta":8837,"navigation":732,"path":1230,"publishDate":1231,"published":732,"seo":8838,"stem":1233,"tags":8839,"thumbnail":1236,"updated":742,"__hash__":1237},{"type":8,"value":8489,"toc":8823},[8490,8492,8496,8498,8500,8502,8504,8506,8536,8538,8584,8588,8590,8595,8597,8599,8604,8606,8608,8610,8615,8619,8621,8623,8628,8630,8632,8637,8639,8644,8646,8648,8650,8652,8716,8720,8725,8727,8731,8733,8735,8737,8742,8746,8748,8753,8755,8757,8759,8761,8763,8765,8770,8772,8774,8778,8783,8785,8787,8789,8791,8793,8795,8797,8799,8801,8803,8815,8819,8821],[11,8491,13],{},[11,8493,753,8494,757],{},[27,8495,756],{},[11,8497,760],{},[11,8499,763],{},[35,8501,766],{"id":766},[11,8503,769],{},[11,8505,772],{},[43,8507,8508,8518],{},[46,8509,8510],{},[49,8511,8512,8514,8516],{},[52,8513,781],{},[52,8515,784],{},[52,8517,787],{},[59,8519,8520,8528],{},[49,8521,8522,8524,8526],{},[64,8523,794],{},[64,8525,797],{},[64,8527,800],{},[49,8529,8530,8532,8534],{},[64,8531,805],{},[64,8533,800],{},[64,8535,797],{},[11,8537,812],{},[43,8539,8540,8550],{},[46,8541,8542],{},[49,8543,8544,8546,8548],{},[52,8545,821],{},[52,8547,794],{},[52,8549,805],{},[59,8551,8552,8560,8568,8576],{},[49,8553,8554,8556,8558],{},[64,8555,832],{},[64,8557,835],{},[64,8559],{},[49,8561,8562,8564,8566],{},[64,8563,842],{},[64,8565],{},[64,8567,847],{},[49,8569,8570,8572,8574],{},[64,8571,852],{},[64,8573,855],{},[64,8575],{},[49,8577,8578,8580,8582],{},[64,8579,862],{},[64,8581],{},[64,8583,867],{},[11,8585,870,8586,874],{},[27,8587,873],{},[11,8589,877],{},[11,8591,8592],{},[176,8593,885],{"href":882,"rel":8594},[884],[35,8596,888],{"id":888},[11,8598,891],{},[152,8600,8602],{"className":8601,"code":895,"language":157,"meta":158},[155],[160,8603,895],{"__ignoreMap":158},[11,8605,900],{},[11,8607,903],{},[11,8609,906],{},[11,8611,8612],{},[176,8613,885],{"href":882,"rel":8614},[884],[11,8616,914,8617,874],{},[27,8618,917],{},[35,8620,921],{"id":920},[11,8622,924],{},[152,8624,8626],{"className":8625,"code":928,"language":157,"meta":158},[155],[160,8627,928],{"__ignoreMap":158},[11,8629,933],{},[11,8631,936],{},[152,8633,8635],{"className":8634,"code":940,"language":157,"meta":158},[155],[160,8636,940],{"__ignoreMap":158},[11,8638,945],{},[152,8640,8642],{"className":8641,"code":949,"language":157,"meta":158},[155],[160,8643,949],{"__ignoreMap":158},[11,8645,954],{},[11,8647,957],{},[35,8649,961],{"id":960},[11,8651,964],{},[152,8653,8654],{"className":967,"code":968,"language":969,"meta":158,"style":158},[160,8655,8656,8660,8664,8668,8672,8676,8680,8684,8688,8692,8696,8700,8704,8708,8712],{"__ignoreMap":158},[417,8657,8658],{"class":419,"line":420},[417,8659,976],{},[417,8661,8662],{"class":419,"line":578},[417,8663,981],{"emptyLinePlaceholder":732},[417,8665,8666],{"class":419,"line":596},[417,8667,986],{},[417,8669,8670],{"class":419,"line":617},[417,8671,991],{},[417,8673,8674],{"class":419,"line":623},[417,8675,996],{},[417,8677,8678],{"class":419,"line":999},[417,8679,981],{"emptyLinePlaceholder":732},[417,8681,8682],{"class":419,"line":1004},[417,8683,1007],{},[417,8685,8686],{"class":419,"line":1010},[417,8687,1013],{},[417,8689,8690],{"class":419,"line":1016},[417,8691,1019],{},[417,8693,8694],{"class":419,"line":1022},[417,8695,981],{"emptyLinePlaceholder":732},[417,8697,8698],{"class":419,"line":1027},[417,8699,1030],{},[417,8701,8702],{"class":419,"line":1033},[417,8703,1036],{},[417,8705,8706],{"class":419,"line":1039},[417,8707,1042],{},[417,8709,8710],{"class":419,"line":1045},[417,8711,981],{"emptyLinePlaceholder":732},[417,8713,8714],{"class":419,"line":1050},[417,8715,1053],{},[11,8717,1056,8718,1060],{},[160,8719,1059],{},[11,8721,8722],{},[176,8723,1067],{"href":1065,"rel":8724},[884],[11,8726,1070],{},[11,8728,1073,8729,1077],{},[160,8730,1076],{},[11,8732,1080],{},[35,8734,1084],{"id":1083},[11,8736,1087],{},[152,8738,8740],{"className":8739,"code":1091,"language":157,"meta":158},[155],[160,8741,1091],{"__ignoreMap":158},[11,8743,1096,8744,1100],{},[160,8745,1099],{},[11,8747,1103],{},[152,8749,8751],{"className":8750,"code":1107,"language":157,"meta":158},[155],[160,8752,1107],{"__ignoreMap":158},[11,8754,1112],{},[11,8756,1115],{},[35,8758,1118],{"id":1118},[169,8760,1121],{"id":1121},[11,8762,1124],{},[11,8764,1127],{},[11,8766,8767],{},[176,8768,885],{"href":882,"rel":8769},[884],[169,8771,1135],{"id":1135},[11,8773,1138],{},[11,8775,1141,8776,1145],{},[160,8777,1144],{},[11,8779,8780],{},[176,8781,1152],{"href":1150,"rel":8782},[884],[11,8784,1155],{},[169,8786,1158],{"id":1158},[11,8788,1161],{},[11,8790,1164],{},[169,8792,1168],{"id":1167},[11,8794,1171],{},[11,8796,1174],{},[11,8798,1177],{},[35,8800,1180],{"id":1180},[11,8802,1183],{},[204,8804,8805,8807,8809,8811,8813],{},[127,8806,1188],{},[127,8808,1191],{},[127,8810,1194],{},[127,8812,1197],{},[127,8814,1200],{},[11,8816,1203,8817,1207],{},[27,8818,1206],{},[11,8820,1210],{},[711,8822,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":8824},[8825,8826,8827,8828,8829,8830,8836],{"id":766,"depth":578,"text":766},{"id":888,"depth":578,"text":888},{"id":920,"depth":578,"text":921},{"id":960,"depth":578,"text":961},{"id":1083,"depth":578,"text":1084},{"id":1118,"depth":578,"text":1118,"children":8831},[8832,8833,8834,8835],{"id":1121,"depth":596,"text":1121},{"id":1135,"depth":596,"text":1135},{"id":1158,"depth":596,"text":1158},{"id":1167,"depth":596,"text":1168},{"id":1180,"depth":578,"text":1180},{},{"title":746,"description":1228},[1235],{"id":1239,"title":179,"body":8841,"description":2122,"extension":730,"meta":9519,"navigation":732,"path":178,"publishDate":2124,"published":732,"seo":9520,"stem":2126,"tags":9521,"thumbnail":2130,"updated":2124,"__hash__":2131},{"type":8,"value":8842,"toc":9505},[8843,8845,8847,8849,8851,8853,8855,8857,8859,8861,8863,8865,8867,8871,8873,8881,8883,8885,8887,8891,8913,8915,8920,8922,8927,8931,8933,8937,8939,8991,8995,9015,9023,9027,9032,9036,9041,9049,9054,9056,9058,9062,9064,9066,9068,9092,9116,9120,9124,9129,9131,9183,9185,9213,9241,9243,9251,9253,9255,9260,9262,9280,9282,9302,9322,9324,9326,9328,9330,9332,9337,9339,9341,9343,9387,9391,9415,9417,9419,9421,9423,9425,9433,9435,9439,9441,9443,9481,9483,9485,9487,9489,9491,9493,9497,9499,9503],[11,8844,13],{},[11,8846,1246],{},[11,8848,1249],{},[11,8850,1252],{},[11,8852,1255],{},[11,8854,1258],{},[11,8856,1261],{},[11,8858,1264],{},[35,8860,1268],{"id":1267},[11,8862,1271],{},[11,8864,1274],{},[11,8866,1277],{},[11,8868,1280,8869,1284],{},[160,8870,1283],{},[11,8872,1287],{},[204,8874,8875,8877,8879],{},[127,8876,1292],{},[127,8878,1295],{},[127,8880,1298],{},[11,8882,1301],{},[35,8884,1305],{"id":1304},[11,8886,1308],{},[11,8888,1311,8889,1315],{},[160,8890,1314],{},[152,8892,8893],{"className":1318,"code":1319,"language":1320,"meta":158,"style":158},[160,8894,8895,8901],{"__ignoreMap":158},[417,8896,8897,8899],{"class":419,"line":420},[417,8898,1327],{"class":493},[417,8900,1330],{"class":427},[417,8902,8903,8905,8907,8909,8911],{"class":419,"line":578},[417,8904,1335],{"class":423},[417,8906,1338],{"class":427},[417,8908,1341],{"class":427},[417,8910,1344],{"class":427},[417,8912,1347],{"class":427},[11,8914,1350],{},[152,8916,8918],{"className":8917,"code":1354,"language":157,"meta":158},[155],[160,8919,1354],{"__ignoreMap":158},[11,8921,1359],{},[152,8923,8925],{"className":8924,"code":1363,"language":157,"meta":158},[155],[160,8926,1363],{"__ignoreMap":158},[11,8928,1368,8929,1372],{},[27,8930,1371],{},[35,8932,1376],{"id":1375},[11,8934,1379,8935,1383],{},[160,8936,1382],{},[11,8938,1386],{},[152,8940,8941],{"className":1389,"code":1390,"language":1391,"meta":158,"style":158},[160,8942,8943,8949,8955,8963,8969,8975,8981],{"__ignoreMap":158},[417,8944,8945,8947],{"class":419,"line":420},[417,8946,1399],{"class":1398},[417,8948,1402],{"class":500},[417,8950,8951,8953],{"class":419,"line":578},[417,8952,1407],{"class":1398},[417,8954,1402],{"class":500},[417,8956,8957,8959,8961],{"class":419,"line":596},[417,8958,1414],{"class":1398},[417,8960,590],{"class":500},[417,8962,1420],{"class":1419},[417,8964,8965,8967],{"class":419,"line":617},[417,8966,1425],{"class":1398},[417,8968,1402],{"class":500},[417,8970,8971,8973],{"class":419,"line":623},[417,8972,1432],{"class":500},[417,8974,1435],{"class":427},[417,8976,8977,8979],{"class":419,"line":999},[417,8978,1440],{"class":1398},[417,8980,1402],{"class":500},[417,8982,8983,8985,8987,8989],{"class":419,"line":1004},[417,8984,1432],{"class":500},[417,8986,609],{"class":500},[417,8988,1451],{"class":427},[417,8990,614],{"class":500},[11,8992,1456,8993,1459],{},[160,8994,1382],{},[152,8996,8997],{"className":1318,"code":1462,"language":1320,"meta":158,"style":158},[160,8998,8999,9005],{"__ignoreMap":158},[417,9000,9001,9003],{"class":419,"line":420},[417,9002,1327],{"class":493},[417,9004,1330],{"class":427},[417,9006,9007,9009,9011,9013],{"class":419,"line":578},[417,9008,1475],{"class":423},[417,9010,1478],{"class":427},[417,9012,1481],{"class":427},[417,9014,1484],{"class":427},[11,9016,9017,1490,9019,1494,9021,1498],{},[160,9018,1489],{},[160,9020,1493],{},[160,9022,1497],{},[11,9024,1501,9025,1504],{},[160,9026,1382],{},[152,9028,9030],{"className":9029,"code":1508,"language":157,"meta":158},[155],[160,9031,1508],{"__ignoreMap":158},[11,9033,1513,9034,1517],{},[160,9035,1516],{},[152,9037,9039],{"className":9038,"code":1521,"language":157,"meta":158},[155],[160,9040,1521],{"__ignoreMap":158},[11,9042,1526,9043,1529,9045,256,9047,1534],{},[160,9044,1497],{},[160,9046,1382],{},[160,9048,1516],{},[152,9050,9052],{"className":9051,"code":1538,"language":157,"meta":158},[155],[160,9053,1538],{"__ignoreMap":158},[11,9055,1543],{},[11,9057,1546],{},[1548,9059,9060],{},[11,9061,1552],{},[11,9063,1555],{},[35,9065,1559],{"id":1558},[11,9067,1562],{},[152,9069,9070],{"className":1318,"code":1565,"language":1320,"meta":158,"style":158},[160,9071,9072,9078],{"__ignoreMap":158},[417,9073,9074,9076],{"class":419,"line":420},[417,9075,1327],{"class":493},[417,9077,1330],{"class":427},[417,9079,9080,9082,9084,9086,9088,9090],{"class":419,"line":578},[417,9081,1475],{"class":423},[417,9083,1478],{"class":427},[417,9085,1582],{"class":427},[417,9087,1585],{"class":427},[417,9089,1481],{"class":427},[417,9091,1484],{"class":427},[152,9093,9094],{"className":1318,"code":1592,"language":1320,"meta":158,"style":158},[160,9095,9096,9102],{"__ignoreMap":158},[417,9097,9098,9100],{"class":419,"line":420},[417,9099,1327],{"class":493},[417,9101,1601],{"class":427},[417,9103,9104,9106,9108,9110,9112,9114],{"class":419,"line":578},[417,9105,1475],{"class":423},[417,9107,1478],{"class":427},[417,9109,1582],{"class":427},[417,9111,1612],{"class":427},[417,9113,1481],{"class":427},[417,9115,1484],{"class":427},[11,9117,9118,1622],{},[160,9119,1621],{},[11,9121,1625,9122,1628],{},[160,9123,1489],{},[152,9125,9127],{"className":9126,"code":1632,"language":157,"meta":158},[155],[160,9128,1632],{"__ignoreMap":158},[11,9130,1637],{},[152,9132,9133],{"className":1389,"code":1640,"language":1391,"meta":158,"style":158},[160,9134,9135,9141,9147,9155,9161,9167,9173],{"__ignoreMap":158},[417,9136,9137,9139],{"class":419,"line":420},[417,9138,1399],{"class":1398},[417,9140,1402],{"class":500},[417,9142,9143,9145],{"class":419,"line":578},[417,9144,1407],{"class":1398},[417,9146,1402],{"class":500},[417,9148,9149,9151,9153],{"class":419,"line":596},[417,9150,1414],{"class":1398},[417,9152,590],{"class":500},[417,9154,1420],{"class":1419},[417,9156,9157,9159],{"class":419,"line":617},[417,9158,1425],{"class":1398},[417,9160,1402],{"class":500},[417,9162,9163,9165],{"class":419,"line":623},[417,9164,1432],{"class":500},[417,9166,1435],{"class":427},[417,9168,9169,9171],{"class":419,"line":999},[417,9170,1440],{"class":1398},[417,9172,1402],{"class":500},[417,9174,9175,9177,9179,9181],{"class":419,"line":1004},[417,9176,1432],{"class":500},[417,9178,609],{"class":500},[417,9180,1689],{"class":427},[417,9182,614],{"class":500},[11,9184,1694],{},[152,9186,9187],{"className":1318,"code":1697,"language":1320,"meta":158,"style":158},[160,9188,9189,9193],{"__ignoreMap":158},[417,9190,9191],{"class":419,"line":420},[417,9192,1705],{"class":1704},[417,9194,9195,9197,9199,9201,9203,9205,9207,9209,9211],{"class":419,"line":578},[417,9196,1710],{"class":675},[417,9198,679],{"class":500},[417,9200,1715],{"class":427},[417,9202,1718],{"class":423},[417,9204,1478],{"class":427},[417,9206,1582],{"class":427},[417,9208,1585],{"class":427},[417,9210,1481],{"class":427},[417,9212,1484],{"class":427},[152,9214,9215],{"className":1318,"code":1731,"language":1320,"meta":158,"style":158},[160,9216,9217,9221],{"__ignoreMap":158},[417,9218,9219],{"class":419,"line":420},[417,9220,1738],{"class":1704},[417,9222,9223,9225,9227,9229,9231,9233,9235,9237,9239],{"class":419,"line":578},[417,9224,1710],{"class":675},[417,9226,679],{"class":500},[417,9228,1747],{"class":427},[417,9230,1718],{"class":423},[417,9232,1478],{"class":427},[417,9234,1582],{"class":427},[417,9236,1612],{"class":427},[417,9238,1481],{"class":427},[417,9240,1484],{"class":427},[11,9242,1762],{},[1764,9244,9245],{"title":1766,"type":1767},[11,9246,1770,9247,1773,9249,1777],{},[160,9248,1621],{},[160,9250,1776],{},[35,9252,1781],{"id":1780},[11,9254,1784],{},[152,9256,9258],{"className":9257,"code":1788,"language":157,"meta":158},[155],[160,9259,1788],{"__ignoreMap":158},[11,9261,1793],{},[152,9263,9264],{"className":1318,"code":1796,"language":1320,"meta":158,"style":158},[160,9265,9266],{"__ignoreMap":158},[417,9267,9268,9270,9272,9274,9276,9278],{"class":419,"line":420},[417,9269,1475],{"class":423},[417,9271,1478],{"class":427},[417,9273,1481],{"class":427},[417,9275,1809],{"class":427},[417,9277,1812],{"class":427},[417,9279,1815],{"class":427},[11,9281,1818],{},[152,9283,9284],{"className":1318,"code":1821,"language":1320,"meta":158,"style":158},[160,9285,9286,9292],{"__ignoreMap":158},[417,9287,9288,9290],{"class":419,"line":420},[417,9289,1327],{"class":493},[417,9291,1330],{"class":427},[417,9293,9294,9296,9298,9300],{"class":419,"line":578},[417,9295,1834],{"class":423},[417,9297,1837],{"class":427},[417,9299,1840],{"class":427},[417,9301,1843],{"class":1419},[152,9303,9304],{"className":1318,"code":1846,"language":1320,"meta":158,"style":158},[160,9305,9306,9312],{"__ignoreMap":158},[417,9307,9308,9310],{"class":419,"line":420},[417,9309,1327],{"class":493},[417,9311,1601],{"class":427},[417,9313,9314,9316,9318,9320],{"class":419,"line":578},[417,9315,1834],{"class":423},[417,9317,1837],{"class":427},[417,9319,1840],{"class":427},[417,9321,1865],{"class":1419},[11,9323,1868],{},[11,9325,1871],{},[35,9327,1875],{"id":1874},[169,9329,1878],{"id":1878},[11,9331,1881],{},[152,9333,9335],{"className":9334,"code":1885,"language":157,"meta":158},[155],[160,9336,1885],{"__ignoreMap":158},[11,9338,1890],{},[169,9340,1894],{"id":1893},[11,9342,1897],{},[152,9344,9345],{"className":1389,"code":1900,"language":1391,"meta":158,"style":158},[160,9346,9347,9353,9359,9365,9371,9375,9381],{"__ignoreMap":158},[417,9348,9349,9351],{"class":419,"line":420},[417,9350,1399],{"class":1398},[417,9352,1402],{"class":500},[417,9354,9355,9357],{"class":419,"line":578},[417,9356,1913],{"class":1398},[417,9358,1402],{"class":500},[417,9360,9361,9363],{"class":419,"line":596},[417,9362,1425],{"class":1398},[417,9364,1402],{"class":500},[417,9366,9367,9369],{"class":419,"line":617},[417,9368,1432],{"class":500},[417,9370,1928],{"class":427},[417,9372,9373],{"class":419,"line":623},[417,9374,981],{"emptyLinePlaceholder":732},[417,9376,9377,9379],{"class":419,"line":999},[417,9378,1937],{"class":1398},[417,9380,1402],{"class":500},[417,9382,9383,9385],{"class":419,"line":1004},[417,9384,1944],{"class":1398},[417,9386,1402],{"class":500},[11,9388,1949,9389,1953],{},[160,9390,1952],{},[152,9392,9393],{"className":1389,"code":1956,"language":1391,"meta":158,"style":158},[160,9394,9395,9401,9407],{"__ignoreMap":158},[417,9396,9397,9399],{"class":419,"line":420},[417,9398,1937],{"class":1398},[417,9400,1402],{"class":500},[417,9402,9403,9405],{"class":419,"line":578},[417,9404,1944],{"class":1398},[417,9406,1402],{"class":500},[417,9408,9409,9411,9413],{"class":419,"line":596},[417,9410,1975],{"class":1398},[417,9412,590],{"class":500},[417,9414,1980],{"class":427},[11,9416,1983],{},[169,9418,1987],{"id":1986},[11,9420,1990],{},[11,9422,1993],{},[11,9424,1996],{},[204,9426,9427,9429,9431],{},[127,9428,2001],{},[127,9430,2004],{},[127,9432,2007],{},[11,9434,2010],{},[1764,9436,9437],{"title":2013,"type":2014},[11,9438,2017],{},[35,9440,2020],{"id":2020},[11,9442,2023],{},[43,9444,9445,9455],{},[46,9446,9447],{},[49,9448,9449,9451,9453],{},[52,9450,2032],{},[52,9452,2035],{},[52,9454,2038],{},[59,9456,9457,9465,9473],{},[49,9458,9459,9461,9463],{},[64,9460,2045],{},[64,9462,2048],{},[64,9464,2051],{},[49,9466,9467,9469,9471],{},[64,9468,2056],{},[64,9470,2059],{},[64,9472,2062],{},[49,9474,9475,9477,9479],{},[64,9476,2067],{},[64,9478,2070],{},[64,9480,2073],{},[11,9482,2076],{},[11,9484,2079],{},[35,9486,1180],{"id":1180},[11,9488,2084],{},[11,9490,2087],{},[11,9492,2090],{},[1548,9494,9495],{},[11,9496,1552],{},[11,9498,2097],{},[11,9500,2100,9501,2104],{},[27,9502,2103],{},[711,9504,2107],{},{"title":158,"searchDepth":578,"depth":578,"links":9506},[9507,9508,9509,9510,9511,9512,9517,9518],{"id":1267,"depth":578,"text":1268},{"id":1304,"depth":578,"text":1305},{"id":1375,"depth":578,"text":1376},{"id":1558,"depth":578,"text":1559},{"id":1780,"depth":578,"text":1781},{"id":1874,"depth":578,"text":1875,"children":9513},[9514,9515,9516],{"id":1878,"depth":596,"text":1878},{"id":1893,"depth":596,"text":1894},{"id":1986,"depth":596,"text":1987},{"id":2020,"depth":578,"text":2020},{"id":1180,"depth":578,"text":1180},{},{"title":179,"description":2122},[2128,2129],{"id":2133,"title":2134,"body":9523,"description":2801,"extension":730,"meta":10043,"navigation":732,"path":2803,"publishDate":2804,"published":732,"seo":10044,"stem":2806,"tags":10045,"thumbnail":2809,"updated":2810,"__hash__":2811},{"type":8,"value":9524,"toc":10023},[9525,9527,9531,9536,9538,9540,9548,9550,9552,9554,9556,9561,9563,9568,9578,9590,9595,9597,9599,9601,9606,9608,9610,9620,9622,9627,9629,9651,9653,9665,9671,9673,9687,9689,9697,9701,9703,9705,9733,9735,9737,9741,9743,9757,9762,9764,9766,9772,9774,9776,9788,9790,9795,9797,9799,9801,9849,9853,9855,9857,9911,9913,9915,9917,9921,9987,9989,9991,9993,9995,10013,10017,10021],[11,9526,13],{},[11,9528,2141,9529,2145],{},[160,9530,2144],{},[152,9532,9534],{"className":9533,"code":2149,"language":157,"meta":158},[155],[160,9535,2149],{"__ignoreMap":158},[11,9537,2154],{},[11,9539,2157],{},[1764,9541,9542],{"title":2160,"type":2014},[11,9543,2163,9544,2167,9546,2171],{},[160,9545,2166],{},[2169,9547],{},[35,9549,2174],{"id":2174},[11,9551,2177],{},[11,9553,2180],{},[169,9555,2183],{"id":2183},[152,9557,9559],{"className":9558,"code":2187,"language":157,"meta":158},[155],[160,9560,2187],{"__ignoreMap":158},[169,9562,2192],{"id":2192},[152,9564,9566],{"className":9565,"code":2196,"language":157,"meta":158},[155],[160,9567,2196],{"__ignoreMap":158},[11,9569,9570,2204,9572,2208,9574,2204,9576,2215],{},[160,9571,2203],{},[160,9573,2207],{},[160,9575,2211],{},[160,9577,2214],{},[11,9579,2218,9580,2204,9582,2223,9584,2226,9586,2204,9588,2231],{},[160,9581,2207],{},[160,9583,2214],{},[2169,9585],{},[160,9587,2203],{},[160,9589,2211],{},[152,9591,9593],{"className":9592,"code":2235,"language":157,"meta":158},[155],[160,9594,2235],{"__ignoreMap":158},[11,9596,2240],{},[35,9598,2243],{"id":2243},[11,9600,2246],{},[152,9602,9604],{"className":9603,"code":2250,"language":157,"meta":158},[155],[160,9605,2250],{"__ignoreMap":158},[11,9607,2255],{},[169,9609,2259],{"id":2258},[152,9611,9612],{"className":1318,"code":2262,"language":1320,"meta":158,"style":158},[160,9613,9614],{"__ignoreMap":158},[417,9615,9616,9618],{"class":419,"line":420},[417,9617,1335],{"class":423},[417,9619,2271],{"class":427},[11,9621,2274],{},[152,9623,9625],{"className":9624,"code":2278,"language":157,"meta":158},[155],[160,9626,2278],{"__ignoreMap":158},[11,9628,2283],{},[152,9630,9631],{"className":1318,"code":2286,"language":1320,"meta":158,"style":158},[160,9632,9633],{"__ignoreMap":158},[417,9634,9635,9637,9639,9641,9643,9645,9647,9649],{"class":419,"line":420},[417,9636,1335],{"class":423},[417,9638,2295],{"class":427},[417,9640,2298],{"class":427},[417,9642,2301],{"class":427},[417,9644,2304],{"class":427},[417,9646,609],{"class":500},[417,9648,2309],{"class":427},[417,9650,614],{"class":500},[169,9652,2315],{"id":2314},[152,9654,9655],{"className":1318,"code":2318,"language":1320,"meta":158,"style":158},[160,9656,9657],{"__ignoreMap":158},[417,9658,9659,9661,9663],{"class":419,"line":420},[417,9660,1335],{"class":423},[417,9662,2327],{"class":427},[417,9664,2330],{"class":427},[11,9666,9667,2336,9669,2339],{},[160,9668,2335],{},[2169,9670],{},[169,9672,2343],{"id":2342},[152,9674,9675],{"className":1318,"code":2346,"language":1320,"meta":158,"style":158},[160,9676,9677],{"__ignoreMap":158},[417,9678,9679,9681,9683,9685],{"class":419,"line":420},[417,9680,1335],{"class":423},[417,9682,2355],{"class":427},[417,9684,2358],{"class":427},[417,9686,2361],{"class":427},[11,9688,2364],{},[204,9690,9691,9693,9695],{},[127,9692,2369],{},[127,9694,2372],{},[127,9696,2375],{},[11,9698,2378,9699,2381],{},[160,9700,2166],{},[35,9702,2384],{"id":2384},[11,9704,2387],{},[152,9706,9707],{"className":1318,"code":2390,"language":1320,"meta":158,"style":158},[160,9708,9709,9715,9723],{"__ignoreMap":158},[417,9710,9711,9713],{"class":419,"line":420},[417,9712,1335],{"class":423},[417,9714,2271],{"class":427},[417,9716,9717,9719,9721],{"class":419,"line":578},[417,9718,1335],{"class":423},[417,9720,2327],{"class":427},[417,9722,2330],{"class":427},[417,9724,9725,9727,9729,9731],{"class":419,"line":596},[417,9726,1335],{"class":423},[417,9728,2355],{"class":427},[417,9730,2358],{"class":427},[417,9732,2361],{"class":427},[11,9734,2419],{},[35,9736,2423],{"id":2422},[11,9738,2426,9739,2430],{},[160,9740,2429],{},[11,9742,2433],{},[152,9744,9745],{"className":1318,"code":2436,"language":1320,"meta":158,"style":158},[160,9746,9747],{"__ignoreMap":158},[417,9748,9749,9751,9753,9755],{"class":419,"line":420},[417,9750,1335],{"class":423},[417,9752,2445],{"class":427},[417,9754,2448],{"class":427},[417,9756,2451],{"class":427},[152,9758,9760],{"className":9759,"code":2455,"language":157,"meta":158},[155],[160,9761,2455],{"__ignoreMap":158},[11,9763,2460],{},[11,9765,2463],{},[11,9767,2466,9768,2469,9770,2473],{},[160,9769,2335],{},[160,9771,2472],{},[35,9773,2477],{"id":2476},[11,9775,2480],{},[152,9777,9778],{"className":1318,"code":2483,"language":1320,"meta":158,"style":158},[160,9779,9780],{"__ignoreMap":158},[417,9781,9782,9784,9786],{"class":419,"line":420},[417,9783,1335],{"class":423},[417,9785,2298],{"class":427},[417,9787,2494],{"class":427},[11,9789,2497],{},[152,9791,9793],{"className":9792,"code":2501,"language":157,"meta":158},[155],[160,9794,2501],{"__ignoreMap":158},[35,9796,2506],{"id":2506},[169,9798,2509],{"id":2509},[11,9800,2512],{},[152,9802,9803],{"className":1318,"code":2515,"language":1320,"meta":158,"style":158},[160,9804,9805,9823,9831,9841],{"__ignoreMap":158},[417,9806,9807,9809,9811,9813,9815,9817,9819,9821],{"class":419,"line":420},[417,9808,1335],{"class":423},[417,9810,2295],{"class":427},[417,9812,2298],{"class":427},[417,9814,2301],{"class":427},[417,9816,2304],{"class":427},[417,9818,609],{"class":500},[417,9820,2309],{"class":427},[417,9822,614],{"class":500},[417,9824,9825,9827,9829],{"class":419,"line":578},[417,9826,1335],{"class":423},[417,9828,2327],{"class":427},[417,9830,2330],{"class":427},[417,9832,9833,9835,9837,9839],{"class":419,"line":596},[417,9834,1335],{"class":423},[417,9836,2355],{"class":427},[417,9838,2358],{"class":427},[417,9840,2361],{"class":427},[417,9842,9843,9845,9847],{"class":419,"line":617},[417,9844,1335],{"class":423},[417,9846,2295],{"class":427},[417,9848,2562],{"class":427},[11,9850,2565,9851,2569],{},[160,9852,2568],{},[169,9854,2572],{"id":2572},[11,9856,2575],{},[152,9858,9859],{"className":1318,"code":2578,"language":1320,"meta":158,"style":158},[160,9860,9861,9869,9879,9887,9897],{"__ignoreMap":158},[417,9862,9863,9865,9867],{"class":419,"line":420},[417,9864,1335],{"class":423},[417,9866,2327],{"class":427},[417,9868,2330],{"class":427},[417,9870,9871,9873,9875,9877],{"class":419,"line":578},[417,9872,1335],{"class":423},[417,9874,2595],{"class":427},[417,9876,2598],{"class":427},[417,9878,2601],{"class":427},[417,9880,9881,9883,9885],{"class":419,"line":596},[417,9882,1335],{"class":423},[417,9884,2608],{"class":427},[417,9886,2611],{"class":427},[417,9888,9889,9891,9893,9895],{"class":419,"line":617},[417,9890,1335],{"class":423},[417,9892,2355],{"class":427},[417,9894,2358],{"class":427},[417,9896,2361],{"class":427},[417,9898,9899,9901,9903,9905,9907,9909],{"class":419,"line":623},[417,9900,1335],{"class":423},[417,9902,2628],{"class":427},[417,9904,2631],{"class":500},[417,9906,2634],{"class":427},[417,9908,2203],{"class":675},[417,9910,2639],{"class":500},[11,9912,2642],{},[35,9914,2646],{"id":2645},[11,9916,2649],{},[11,9918,2652,9919,2656],{},[160,9920,2655],{},[152,9922,9923],{"className":1318,"code":2659,"language":1320,"meta":158,"style":158},[160,9924,9925,9933,9943,9947,9955,9965,9969,9977],{"__ignoreMap":158},[417,9926,9927,9929,9931],{"class":419,"line":420},[417,9928,1335],{"class":423},[417,9930,2668],{"class":427},[417,9932,2671],{"class":427},[417,9934,9935,9937,9939,9941],{"class":419,"line":578},[417,9936,1335],{"class":423},[417,9938,2355],{"class":427},[417,9940,2358],{"class":427},[417,9942,2682],{"class":427},[417,9944,9945],{"class":419,"line":596},[417,9946,981],{"emptyLinePlaceholder":732},[417,9948,9949,9951,9953],{"class":419,"line":617},[417,9950,1335],{"class":423},[417,9952,2668],{"class":427},[417,9954,2695],{"class":427},[417,9956,9957,9959,9961,9963],{"class":419,"line":623},[417,9958,1335],{"class":423},[417,9960,2355],{"class":427},[417,9962,2358],{"class":427},[417,9964,2706],{"class":427},[417,9966,9967],{"class":419,"line":999},[417,9968,981],{"emptyLinePlaceholder":732},[417,9970,9971,9973,9975],{"class":419,"line":1004},[417,9972,1335],{"class":423},[417,9974,2668],{"class":427},[417,9976,2451],{"class":427},[417,9978,9979,9981,9983,9985],{"class":419,"line":1010},[417,9980,1335],{"class":423},[417,9982,2355],{"class":427},[417,9984,2358],{"class":427},[417,9986,2361],{"class":427},[11,9988,2731],{},[35,9990,1180],{"id":1180},[11,9992,2736],{},[11,9994,2739],{},[124,9996,9997,10001,10003,10007,10011],{},[127,9998,9999,2747],{},[160,10000,2746],{},[127,10002,2750],{},[127,10004,10005,2755],{},[160,10006,2655],{},[127,10008,10009,2761],{},[160,10010,2760],{},[127,10012,2764],{},[11,10014,2767,10015,2770],{},[2169,10016],{},[11,10018,2773,10019,2777],{},[27,10020,2776],{},[711,10022,2780],{},{"title":158,"searchDepth":578,"depth":578,"links":10024},[10025,10029,10034,10035,10036,10037,10041,10042],{"id":2174,"depth":578,"text":2174,"children":10026},[10027,10028],{"id":2183,"depth":596,"text":2183},{"id":2192,"depth":596,"text":2192},{"id":2243,"depth":578,"text":2243,"children":10030},[10031,10032,10033],{"id":2258,"depth":596,"text":2259},{"id":2314,"depth":596,"text":2315},{"id":2342,"depth":596,"text":2343},{"id":2384,"depth":578,"text":2384},{"id":2422,"depth":578,"text":2423},{"id":2476,"depth":578,"text":2477},{"id":2506,"depth":578,"text":2506,"children":10038},[10039,10040],{"id":2509,"depth":596,"text":2509},{"id":2572,"depth":596,"text":2572},{"id":2645,"depth":578,"text":2646},{"id":1180,"depth":578,"text":1180},{},{"title":2134,"description":2801},[2128,2808],{"id":2813,"title":2814,"body":10047,"description":3416,"extension":730,"meta":10507,"navigation":732,"path":3418,"publishDate":3419,"published":732,"seo":10508,"stem":3421,"tags":10509,"thumbnail":3424,"updated":3419,"__hash__":3425},{"type":8,"value":10048,"toc":10497},[10049,10051,10055,10057,10061,10063,10067,10069,10071,10076,10078,10083,10085,10087,10089,10115,10121,10125,10130,10134,10160,10164,10169,10173,10199,10201,10206,10208,10210,10212,10214,10226,10228,10233,10235,10265,10269,10271,10273,10287,10291,10293,10298,10300,10302,10304,10314,10316,10328,10330,10335,10339,10341,10343,10357,10359,10364,10366,10368,10376,10382,10384,10389,10391,10403,10405,10407,10409,10447,10449,10453,10455,10457,10477,10479,10481,10493,10495],[11,10050,13],{},[11,10052,2821,10053,2825],{},[27,10054,2824],{},[11,10056,2828],{},[11,10058,2831,10059,2835],{},[27,10060,2834],{},[11,10062,2838],{},[1764,10064,10065],{"title":2841,"type":2014},[11,10066,2844],{},[35,10068,2848],{"id":2847},[11,10070,2851],{},[152,10072,10074],{"className":10073,"code":2855,"language":157,"meta":158},[155],[160,10075,2855],{"__ignoreMap":158},[11,10077,2860],{},[152,10079,10081],{"className":10080,"code":2864,"language":157,"meta":158},[155],[160,10082,2864],{"__ignoreMap":158},[11,10084,2869],{},[35,10086,2872],{"id":2872},[11,10088,2875],{},[152,10090,10091],{"className":1318,"code":2878,"language":1320,"meta":158,"style":158},[160,10092,10093],{"__ignoreMap":158},[417,10094,10095,10097,10099,10101,10103,10105,10107,10109,10111,10113],{"class":419,"line":420},[417,10096,2885],{"class":423},[417,10098,2888],{"class":427},[417,10100,1809],{"class":427},[417,10102,2893],{"class":1419},[417,10104,2896],{"class":427},[417,10106,2899],{"class":500},[417,10108,2902],{"class":427},[417,10110,2905],{"class":500},[417,10112,2908],{"class":423},[417,10114,2911],{"class":427},[11,10116,10117,2916,10119,2920],{},[160,10118,2885],{},[160,10120,2919],{},[11,10122,2923,10123,2927],{},[160,10124,2926],{},[152,10126,10128],{"className":10127,"code":2931,"language":157,"meta":158},[155],[160,10129,2931],{"__ignoreMap":158},[11,10131,2936,10132,2939],{},[160,10133,2926],{},[152,10135,10136],{"className":1318,"code":2942,"language":1320,"meta":158,"style":158},[160,10137,10138],{"__ignoreMap":158},[417,10139,10140,10142,10144,10146,10148,10150,10152,10154,10156,10158],{"class":419,"line":420},[417,10141,2885],{"class":423},[417,10143,2888],{"class":427},[417,10145,1809],{"class":427},[417,10147,2893],{"class":1419},[417,10149,2957],{"class":427},[417,10151,2899],{"class":500},[417,10153,2902],{"class":427},[417,10155,2905],{"class":500},[417,10157,2908],{"class":423},[417,10159,2911],{"class":427},[11,10161,2970,10162,2974],{},[160,10163,2973],{},[152,10165,10167],{"className":10166,"code":2978,"language":157,"meta":158},[155],[160,10168,2978],{"__ignoreMap":158},[11,10170,2983,10171,2986],{},[160,10172,2973],{},[152,10174,10175],{"className":1318,"code":2989,"language":1320,"meta":158,"style":158},[160,10176,10177],{"__ignoreMap":158},[417,10178,10179,10181,10183,10185,10187,10189,10191,10193,10195,10197],{"class":419,"line":420},[417,10180,2885],{"class":423},[417,10182,2888],{"class":427},[417,10184,1809],{"class":427},[417,10186,2893],{"class":1419},[417,10188,3004],{"class":427},[417,10190,2899],{"class":500},[417,10192,2902],{"class":427},[417,10194,2905],{"class":500},[417,10196,2908],{"class":423},[417,10198,2911],{"class":427},[11,10200,3017],{},[152,10202,10204],{"className":10203,"code":3021,"language":157,"meta":158},[155],[160,10205,3021],{"__ignoreMap":158},[11,10207,3026],{},[11,10209,3029],{},[35,10211,3033],{"id":3032},[11,10213,3036],{},[152,10215,10216],{"className":1318,"code":3039,"language":1320,"meta":158,"style":158},[160,10217,10218],{"__ignoreMap":158},[417,10219,10220,10222,10224],{"class":419,"line":420},[417,10221,1475],{"class":423},[417,10223,3048],{"class":427},[417,10225,3051],{"class":427},[11,10227,3054],{},[152,10229,10231],{"className":10230,"code":3058,"language":157,"meta":158},[155],[160,10232,3058],{"__ignoreMap":158},[11,10234,3063],{},[43,10236,10237,10245],{},[46,10238,10239],{},[49,10240,10241,10243],{},[52,10242,329],{},[52,10244,3075],{"align":3074},[59,10246,10247,10253,10259],{},[49,10248,10249,10251],{},[64,10250,3082],{},[64,10252,3085],{"align":3074},[49,10254,10255,10257],{},[64,10256,3090],{},[64,10258,3093],{"align":3074},[49,10260,10261,10263],{},[64,10262,3098],{},[64,10264,3101],{"align":3074},[11,10266,10267,3107],{},[160,10268,3106],{},[35,10270,3111],{"id":3110},[11,10272,3114],{},[152,10274,10275],{"className":1318,"code":3117,"language":1320,"meta":158,"style":158},[160,10276,10277],{"__ignoreMap":158},[417,10278,10279,10281,10283,10285],{"class":419,"line":420},[417,10280,1475],{"class":423},[417,10282,3126],{"class":427},[417,10284,3129],{"class":427},[417,10286,3132],{"class":427},[11,10288,10289,3138],{},[160,10290,3137],{},[11,10292,3141],{},[152,10294,10296],{"className":10295,"code":3145,"language":157,"meta":158},[155],[160,10297,3145],{"__ignoreMap":158},[11,10299,3150],{},[35,10301,3154],{"id":3153},[11,10303,3157],{},[152,10305,10306],{"className":1318,"code":3160,"language":1320,"meta":158,"style":158},[160,10307,10308],{"__ignoreMap":158},[417,10309,10310,10312],{"class":419,"line":420},[417,10311,1475],{"class":423},[417,10313,3169],{"class":427},[11,10315,3172],{},[152,10317,10318],{"className":1318,"code":3175,"language":1320,"meta":158,"style":158},[160,10319,10320],{"__ignoreMap":158},[417,10321,10322,10324,10326],{"class":419,"line":420},[417,10323,1475],{"class":423},[417,10325,3184],{"class":427},[417,10327,3187],{"class":427},[11,10329,3190],{},[152,10331,10333],{"className":10332,"code":3194,"language":157,"meta":158},[155],[160,10334,3194],{"__ignoreMap":158},[11,10336,3199,10337,3203],{},[160,10338,3202],{},[35,10340,3207],{"id":3206},[11,10342,3210],{},[152,10344,10345],{"className":1318,"code":3213,"language":1320,"meta":158,"style":158},[160,10346,10347],{"__ignoreMap":158},[417,10348,10349,10351,10353,10355],{"class":419,"line":420},[417,10350,1475],{"class":423},[417,10352,3048],{"class":427},[417,10354,3224],{"class":427},[417,10356,3227],{"class":427},[11,10358,3230],{},[152,10360,10362],{"className":10361,"code":3234,"language":157,"meta":158},[155],[160,10363,3234],{"__ignoreMap":158},[11,10365,3239],{},[11,10367,3242],{},[152,10369,10370],{"className":967,"code":3245,"language":969,"meta":158,"style":158},[160,10371,10372],{"__ignoreMap":158},[417,10373,10374],{"class":419,"line":420},[417,10375,3245],{},[1764,10377,10378],{"title":3254,"type":2014},[11,10379,10380,3260],{},[160,10381,3259],{},[11,10383,3263],{},[152,10385,10387],{"className":10386,"code":3267,"language":157,"meta":158},[155],[160,10388,3267],{"__ignoreMap":158},[11,10390,3272],{},[152,10392,10393],{"className":1318,"code":3275,"language":1320,"meta":158,"style":158},[160,10394,10395],{"__ignoreMap":158},[417,10396,10397,10399,10401],{"class":419,"line":420},[417,10398,1475],{"class":423},[417,10400,3284],{"class":427},[417,10402,3187],{"class":427},[11,10404,3289],{},[35,10406,3292],{"id":3292},[11,10408,3295],{},[43,10410,10411,10421],{},[46,10412,10413],{},[49,10414,10415,10417,10419],{},[52,10416,329],{},[52,10418,3306],{"align":3074},[52,10420,3309],{"align":3074},[59,10422,10423,10431,10439],{},[49,10424,10425,10427,10429],{},[64,10426,3082],{},[64,10428,3085],{"align":3074},[64,10430,3320],{"align":3074},[49,10432,10433,10435,10437],{},[64,10434,3090],{},[64,10436,3093],{"align":3074},[64,10438,3329],{"align":3074},[49,10440,10441,10443,10445],{},[64,10442,3098],{},[64,10444,3101],{"align":3074},[64,10446,3338],{"align":3074},[11,10448,3341],{},[11,10450,3344,10451,3348],{},[160,10452,3347],{},[35,10454,1180],{"id":1180},[11,10456,3353],{},[124,10458,10459,10465,10469,10473,10475],{},[127,10460,10461,3360,10463,3363],{},[160,10462,2885],{},[160,10464,2926],{},[127,10466,10467,3369],{},[160,10468,3368],{},[127,10470,3372,10471,3375],{},[160,10472,3106],{},[127,10474,3378],{},[127,10476,3381],{},[11,10478,3384],{},[11,10480,3387],{},[152,10482,10483],{"className":1318,"code":3039,"language":1320,"meta":158,"style":158},[160,10484,10485],{"__ignoreMap":158},[417,10486,10487,10489,10491],{"class":419,"line":420},[417,10488,1475],{"class":423},[417,10490,3048],{"class":427},[417,10492,3051],{"class":427},[11,10494,3402],{},[711,10496,3405],{},{"title":158,"searchDepth":578,"depth":578,"links":10498},[10499,10500,10501,10502,10503,10504,10505,10506],{"id":2847,"depth":578,"text":2848},{"id":2872,"depth":578,"text":2872},{"id":3032,"depth":578,"text":3033},{"id":3110,"depth":578,"text":3111},{"id":3153,"depth":578,"text":3154},{"id":3206,"depth":578,"text":3207},{"id":3292,"depth":578,"text":3292},{"id":1180,"depth":578,"text":1180},{},{"title":2814,"description":3416},[3423,2129],{"id":3427,"title":3428,"body":10511,"description":4122,"extension":730,"meta":11052,"navigation":732,"path":4124,"publishDate":4125,"published":732,"seo":11053,"stem":4127,"tags":11054,"thumbnail":4130,"updated":4125,"__hash__":4131},{"type":8,"value":10512,"toc":11037},[10513,10515,10517,10519,10521,10561,10563,10565,10625,10635,10647,10657,10669,10671,10673,10705,10711,10715,10723,10747,10757,10759,10771,10773,10777,10825,10827,10831,10859,10865,10867,10873,10889,10891,10897,10929,10931,10951,10955,10959,10967,10991,11005,11007,11011,11013,11025,11027,11029,11035],[11,10514,13],{},[11,10516,3435],{},[35,10518,3438],{"id":3438},[11,10520,3441],{},[152,10522,10523],{"className":3444,"code":3445,"language":3446,"meta":158,"style":158},[160,10524,10525,10529,10533,10537,10541,10545,10549,10553,10557],{"__ignoreMap":158},[417,10526,10527],{"class":419,"line":420},[417,10528,3453],{},[417,10530,10531],{"class":419,"line":578},[417,10532,3458],{},[417,10534,10535],{"class":419,"line":596},[417,10536,3463],{},[417,10538,10539],{"class":419,"line":617},[417,10540,626],{},[417,10542,10543],{"class":419,"line":623},[417,10544,981],{"emptyLinePlaceholder":732},[417,10546,10547],{"class":419,"line":999},[417,10548,3476],{},[417,10550,10551],{"class":419,"line":1004},[417,10552,981],{"emptyLinePlaceholder":732},[417,10554,10555],{"class":419,"line":1010},[417,10556,3485],{},[417,10558,10559],{"class":419,"line":1016},[417,10560,3490],{},[169,10562,3493],{"id":3493},[11,10564,3496],{},[152,10566,10567],{"className":3444,"code":3499,"language":3446,"meta":158,"style":158},[160,10568,10569,10573,10577,10581,10585,10589,10593,10597,10601,10605,10609,10613,10617,10621],{"__ignoreMap":158},[417,10570,10571],{"class":419,"line":420},[417,10572,3453],{},[417,10574,10575],{"class":419,"line":578},[417,10576,3458],{},[417,10578,10579],{"class":419,"line":596},[417,10580,3514],{},[417,10582,10583],{"class":419,"line":617},[417,10584,3519],{},[417,10586,10587],{"class":419,"line":623},[417,10588,3524],{},[417,10590,10591],{"class":419,"line":999},[417,10592,626],{},[417,10594,10595],{"class":419,"line":1004},[417,10596,981],{"emptyLinePlaceholder":732},[417,10598,10599],{"class":419,"line":1010},[417,10600,3537],{},[417,10602,10603],{"class":419,"line":1016},[417,10604,3542],{},[417,10606,10607],{"class":419,"line":1022},[417,10608,3547],{},[417,10610,10611],{"class":419,"line":1027},[417,10612,3552],{},[417,10614,10615],{"class":419,"line":1033},[417,10616,981],{"emptyLinePlaceholder":732},[417,10618,10619],{"class":419,"line":1039},[417,10620,3485],{},[417,10622,10623],{"class":419,"line":1045},[417,10624,3490],{},[11,10626,3567,10627,3571,10629,874,10631,3578,10633,3581],{},[160,10628,3570],{},[160,10630,3574],{},[160,10632,3577],{},[160,10634,3574],{},[152,10636,10637],{"className":3444,"code":3584,"language":3446,"meta":158,"style":158},[160,10638,10639,10643],{"__ignoreMap":158},[417,10640,10641],{"class":419,"line":420},[417,10642,3591],{},[417,10644,10645],{"class":419,"line":578},[417,10646,3596],{},[1764,10648,10649],{"title":3599,"type":1767},[11,10650,10651,3604,10653,3607,10655,3610],{},[160,10652,3577],{},[160,10654,3574],{},[160,10656,3577],{},[152,10658,10659],{"className":3444,"code":3613,"language":3446,"meta":158,"style":158},[160,10660,10661,10665],{"__ignoreMap":158},[417,10662,10663],{"class":419,"line":420},[417,10664,3620],{},[417,10666,10667],{"class":419,"line":578},[417,10668,3625],{},[169,10670,3628],{"id":3628},[11,10672,3631],{},[152,10674,10675],{"className":3444,"code":3634,"language":3446,"meta":158,"style":158},[160,10676,10677,10681,10685,10689,10693,10697,10701],{"__ignoreMap":158},[417,10678,10679],{"class":419,"line":420},[417,10680,3453],{},[417,10682,10683],{"class":419,"line":578},[417,10684,3645],{},[417,10686,10687],{"class":419,"line":596},[417,10688,626],{},[417,10690,10691],{"class":419,"line":617},[417,10692,981],{"emptyLinePlaceholder":732},[417,10694,10695],{"class":419,"line":623},[417,10696,3658],{},[417,10698,10699],{"class":419,"line":999},[417,10700,981],{"emptyLinePlaceholder":732},[417,10702,10703],{"class":419,"line":1004},[417,10704,3667],{},[11,10706,3670,10707,3673,10709,874],{},[160,10708,1952],{},[160,10710,3676],{},[35,10712,3680,10713,3684],{"id":3679},[160,10714,3683],{},[11,10716,3687,10717,3691,10719,3695,10721,3698],{},[160,10718,3690],{},[160,10720,3694],{},[160,10722,3694],{},[152,10724,10725],{"className":3444,"code":3701,"language":3446,"meta":158,"style":158},[160,10726,10727,10731,10735,10739,10743],{"__ignoreMap":158},[417,10728,10729],{"class":419,"line":420},[417,10730,3453],{},[417,10732,10733],{"class":419,"line":578},[417,10734,3645],{},[417,10736,10737],{"class":419,"line":596},[417,10738,626],{},[417,10740,10741],{"class":419,"line":617},[417,10742,981],{"emptyLinePlaceholder":732},[417,10744,10745],{"class":419,"line":623},[417,10746,3724],{},[11,10748,10749,3730,10751,3733,10753,3736,10755,3740],{},[160,10750,3729],{},[160,10752,3694],{},[160,10754,3683],{},[160,10756,3739],{},[11,10758,3743],{},[152,10760,10761],{"className":3444,"code":3746,"language":3446,"meta":158,"style":158},[160,10762,10763,10767],{"__ignoreMap":158},[417,10764,10765],{"class":419,"line":420},[417,10766,3753],{},[417,10768,10769],{"class":419,"line":578},[417,10770,3758],{},[169,10772,3761],{"id":3761},[11,10774,3764,10775,3768],{},[160,10776,3767],{},[152,10778,10779],{"className":3444,"code":3771,"language":3446,"meta":158,"style":158},[160,10780,10781,10785,10789,10793,10797,10801,10805,10809,10813,10817,10821],{"__ignoreMap":158},[417,10782,10783],{"class":419,"line":420},[417,10784,3778],{},[417,10786,10787],{"class":419,"line":578},[417,10788,3783],{},[417,10790,10791],{"class":419,"line":596},[417,10792,3788],{},[417,10794,10795],{"class":419,"line":617},[417,10796,3793],{},[417,10798,10799],{"class":419,"line":623},[417,10800,981],{"emptyLinePlaceholder":732},[417,10802,10803],{"class":419,"line":999},[417,10804,3802],{},[417,10806,10807],{"class":419,"line":1004},[417,10808,3807],{},[417,10810,10811],{"class":419,"line":1010},[417,10812,981],{"emptyLinePlaceholder":732},[417,10814,10815],{"class":419,"line":1016},[417,10816,3816],{},[417,10818,10819],{"class":419,"line":1022},[417,10820,981],{"emptyLinePlaceholder":732},[417,10822,10823],{"class":419,"line":1027},[417,10824,3825],{},[169,10826,3828],{"id":3828},[11,10828,3831,10829,3835],{},[160,10830,3834],{},[152,10832,10833],{"className":3444,"code":3838,"language":3446,"meta":158,"style":158},[160,10834,10835,10839,10843,10847,10851,10855],{"__ignoreMap":158},[417,10836,10837],{"class":419,"line":420},[417,10838,3845],{},[417,10840,10841],{"class":419,"line":578},[417,10842,3850],{},[417,10844,10845],{"class":419,"line":596},[417,10846,626],{},[417,10848,10849],{"class":419,"line":617},[417,10850,981],{"emptyLinePlaceholder":732},[417,10852,10853],{"class":419,"line":623},[417,10854,3863],{},[417,10856,10857],{"class":419,"line":999},[417,10858,3868],{},[11,10860,3871,10861,3875,10863,3878],{},[160,10862,3874],{},[160,10864,3834],{},[169,10866,3882],{"id":3881},[11,10868,10869,3888,10871,3891],{},[160,10870,3887],{},[160,10872,3690],{},[152,10874,10875],{"className":3444,"code":3894,"language":3446,"meta":158,"style":158},[160,10876,10877,10881,10885],{"__ignoreMap":158},[417,10878,10879],{"class":419,"line":420},[417,10880,3901],{},[417,10882,10883],{"class":419,"line":578},[417,10884,981],{"emptyLinePlaceholder":732},[417,10886,10887],{"class":419,"line":596},[417,10888,3910],{},[169,10890,3913],{"id":3913},[11,10892,3916,10893,3691,10895,3921],{},[160,10894,3690],{},[160,10896,3694],{},[152,10898,10899],{"className":3444,"code":3924,"language":3446,"meta":158,"style":158},[160,10900,10901,10905,10909,10913,10917,10921,10925],{"__ignoreMap":158},[417,10902,10903],{"class":419,"line":420},[417,10904,3931],{},[417,10906,10907],{"class":419,"line":578},[417,10908,3936],{},[417,10910,10911],{"class":419,"line":596},[417,10912,981],{"emptyLinePlaceholder":732},[417,10914,10915],{"class":419,"line":617},[417,10916,3945],{},[417,10918,10919],{"class":419,"line":623},[417,10920,981],{"emptyLinePlaceholder":732},[417,10922,10923],{"class":419,"line":999},[417,10924,3954],{},[417,10926,10927],{"class":419,"line":1004},[417,10928,3959],{},[11,10930,3962],{},[152,10932,10933],{"className":3444,"code":3965,"language":3446,"meta":158,"style":158},[160,10934,10935,10939,10943,10947],{"__ignoreMap":158},[417,10936,10937],{"class":419,"line":420},[417,10938,3972],{},[417,10940,10941],{"class":419,"line":578},[417,10942,981],{"emptyLinePlaceholder":732},[417,10944,10945],{"class":419,"line":596},[417,10946,3981],{},[417,10948,10949],{"class":419,"line":617},[417,10950,3986],{},[11,10952,3989,10953,3993],{},[160,10954,3992],{},[35,10956,10957,3996],{"id":3996},[160,10958,3999],{},[11,10960,4002,10961,3691,10963,4007,10965,4010],{},[160,10962,3690],{},[160,10964,3694],{},[160,10966,3999],{},[152,10968,10969],{"className":3444,"code":4013,"language":3446,"meta":158,"style":158},[160,10970,10971,10975,10979,10983,10987],{"__ignoreMap":158},[417,10972,10973],{"class":419,"line":420},[417,10974,4020],{},[417,10976,10977],{"class":419,"line":578},[417,10978,981],{"emptyLinePlaceholder":732},[417,10980,10981],{"class":419,"line":596},[417,10982,4029],{},[417,10984,10985],{"class":419,"line":617},[417,10986,981],{"emptyLinePlaceholder":732},[417,10988,10989],{"class":419,"line":623},[417,10990,4038],{},[11,10992,10993,3730,10995,4047,10997,4051,10999,4054,11001,3691,11003,4059],{},[160,10994,4043],{},[160,10996,4046],{},[160,10998,4050],{},[160,11000,3999],{},[160,11002,3690],{},[160,11004,3694],{},[35,11006,4062],{"id":4062},[11,11008,4065,11009,4068],{},[160,11010,3694],{},[11,11012,4071],{},[204,11014,11015,11019,11021],{},[127,11016,4076,11017,4079],{},[160,11018,3683],{},[127,11020,4082],{},[127,11022,4085,11023,4088],{},[160,11024,3999],{},[35,11026,1180],{"id":1180},[11,11028,4093],{},[11,11030,4096,11031,4099,11033,4102],{},[160,11032,3690],{},[160,11034,3694],{},[711,11036,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":11038},[11039,11043,11049,11050,11051],{"id":3438,"depth":578,"text":3438,"children":11040},[11041,11042],{"id":3493,"depth":596,"text":3493},{"id":3628,"depth":596,"text":3628},{"id":3679,"depth":578,"text":4112,"children":11044},[11045,11046,11047,11048],{"id":3761,"depth":596,"text":3761},{"id":3828,"depth":596,"text":3828},{"id":3881,"depth":596,"text":3882},{"id":3913,"depth":596,"text":3913},{"id":3996,"depth":578,"text":4119},{"id":4062,"depth":578,"text":4062},{"id":1180,"depth":578,"text":1180},{},{"title":3428,"description":4122},[4129],{"id":4133,"title":4134,"body":11056,"description":5771,"extension":730,"meta":12399,"navigation":732,"path":5773,"publishDate":5774,"published":732,"seo":12400,"stem":5776,"tags":12401,"thumbnail":5778,"updated":5774,"__hash__":5779},{"type":8,"value":11057,"toc":12371},[11058,11060,11065,11075,11077,11081,11087,11111,11113,11117,11119,11121,11123,11159,11161,11163,11165,11171,11173,11175,11179,11185,11349,11357,11359,11361,11439,11441,11443,11511,11513,11515,11537,11539,11541,11547,11669,11671,11673,11675,11677,11679,11685,11693,11759,11763,11767,11771,11807,11811,11813,11815,11871,11875,11877,11881,11979,11985,11989,11993,12047,12049,12051,12053,12141,12143,12147,12163,12169,12171,12173,12245,12249,12251,12253,12361,12363,12365,12367,12369],[11,11059,13],{},[11,11061,4141,11062,4147],{},[176,11063,4146],{"href":4144,"rel":11064},[884],[204,11066,11067,11069,11071,11073],{},[127,11068,4152],{},[127,11070,4129],{},[127,11072,4157],{},[127,11074,4160],{},[35,11076,4152],{"id":4163},[169,11078,11079,4170],{"id":4166},[160,11080,4169],{},[11,11082,11083,4175,11085,4179],{},[160,11084,4169],{},[160,11086,4178],{},[152,11088,11089],{"className":4182,"code":4183,"language":4163,"meta":158,"style":158},[160,11090,11091],{"__ignoreMap":158},[417,11092,11093,11095,11097,11099,11101,11103,11105,11107,11109],{"class":419,"line":420},[417,11094,4190],{"class":500},[417,11096,4193],{"class":1398},[417,11098,4196],{"class":584},[417,11100,679],{"class":500},[417,11102,587],{"class":500},[417,11104,157],{"class":427},[417,11106,587],{"class":500},[417,11108,4207],{"class":584},[417,11110,2639],{"class":500},[11,11112,4212],{},[1764,11114,11115],{"title":4215,"type":2014},[11,11116,4218],{},[35,11118,4129],{"id":3446},[169,11120,4223],{"id":4223},[11,11122,4226],{},[152,11124,11125],{"className":3444,"code":4229,"language":3446,"meta":158,"style":158},[160,11126,11127,11131,11135,11139,11143,11147,11151,11155],{"__ignoreMap":158},[417,11128,11129],{"class":419,"line":420},[417,11130,4236],{},[417,11132,11133],{"class":419,"line":578},[417,11134,981],{"emptyLinePlaceholder":732},[417,11136,11137],{"class":419,"line":596},[417,11138,4245],{},[417,11140,11141],{"class":419,"line":617},[417,11142,4250],{},[417,11144,11145],{"class":419,"line":623},[417,11146,626],{},[417,11148,11149],{"class":419,"line":999},[417,11150,981],{"emptyLinePlaceholder":732},[417,11152,11153],{"class":419,"line":1004},[417,11154,4263],{},[417,11156,11157],{"class":419,"line":1010},[417,11158,4268],{},[11,11160,4271],{},[169,11162,4275],{"id":4274},[11,11164,4278],{},[11,11166,4281,11167,3571,11169,4288],{},[160,11168,4284],{},[160,11170,4287],{},[11,11172,4291],{},[35,11174,4157],{"id":4294},[169,11176,11177],{"id":4297},[160,11178,4300],{},[11,11180,11181,4305,11183,4309],{},[160,11182,4300],{},[160,11184,4308],{},[152,11186,11187],{"className":4312,"code":4313,"language":4314,"meta":158,"style":158},[160,11188,11189,11207,11225,11239,11243,11267,11271,11283,11301,11305,11309,11321,11329,11337,11345],{"__ignoreMap":158},[417,11190,11191,11193,11195,11197,11199,11201,11203,11205],{"class":419,"line":420},[417,11192,4284],{"class":4321},[417,11194,4324],{"class":500},[417,11196,4327],{"class":675},[417,11198,4330],{"class":500},[417,11200,4333],{"class":4321},[417,11202,501],{"class":500},[417,11204,4294],{"class":427},[417,11206,507],{"class":500},[417,11208,11209,11211,11213,11215,11217,11219,11221,11223],{"class":419,"line":578},[417,11210,4284],{"class":4321},[417,11212,4324],{"class":500},[417,11214,4348],{"class":675},[417,11216,4330],{"class":500},[417,11218,4333],{"class":4321},[417,11220,501],{"class":500},[417,11222,4357],{"class":427},[417,11224,507],{"class":500},[417,11226,11227,11229,11231,11233,11235,11237],{"class":419,"line":596},[417,11228,4284],{"class":4321},[417,11230,4366],{"class":675},[417,11232,4369],{"class":4321},[417,11234,501],{"class":500},[417,11236,4374],{"class":427},[417,11238,507],{"class":500},[417,11240,11241],{"class":419,"line":617},[417,11242,981],{"emptyLinePlaceholder":732},[417,11244,11245,11247,11249,11251,11253,11255,11257,11259,11261,11263,11265],{"class":419,"line":623},[417,11246,4385],{"class":584},[417,11248,4388],{"class":675},[417,11250,679],{"class":500},[417,11252,4393],{"class":675},[417,11254,1493],{"class":500},[417,11256,4398],{"class":493},[417,11258,4401],{"class":675},[417,11260,4404],{"class":500},[417,11262,4407],{"class":427},[417,11264,4404],{"class":500},[417,11266,4412],{"class":675},[417,11268,11269],{"class":419,"line":999},[417,11270,981],{"emptyLinePlaceholder":732},[417,11272,11273,11275,11277,11279,11281],{"class":419,"line":1004},[417,11274,4421],{"class":4321},[417,11276,4424],{"class":675},[417,11278,4427],{"class":500},[417,11280,4430],{"class":675},[417,11282,575],{"class":500},[417,11284,11285,11287,11289,11291,11293,11295,11297,11299],{"class":419,"line":1010},[417,11286,4437],{"class":4321},[417,11288,4440],{"class":500},[417,11290,4443],{"class":493},[417,11292,4401],{"class":1398},[417,11294,4404],{"class":500},[417,11296,4450],{"class":427},[417,11298,4404],{"class":500},[417,11300,4412],{"class":1398},[417,11302,11303],{"class":419,"line":1016},[417,11304,626],{"class":500},[417,11306,11307],{"class":419,"line":1022},[417,11308,981],{"emptyLinePlaceholder":732},[417,11310,11311,11313,11315,11317,11319],{"class":419,"line":1027},[417,11312,4300],{"class":493},[417,11314,4469],{"class":675},[417,11316,1493],{"class":500},[417,11318,4308],{"class":493},[417,11320,4476],{"class":675},[417,11322,11323,11325,11327],{"class":419,"line":1033},[417,11324,4481],{"class":500},[417,11326,4484],{"class":423},[417,11328,2639],{"class":500},[417,11330,11331,11333,11335],{"class":419,"line":1039},[417,11332,4491],{"class":500},[417,11334,4494],{"class":423},[417,11336,4497],{"class":500},[417,11338,11339,11341,11343],{"class":419,"line":1045},[417,11340,4502],{"class":500},[417,11342,4484],{"class":423},[417,11344,4507],{"class":500},[417,11346,11347],{"class":419,"line":1050},[417,11348,4412],{"class":675},[11,11350,11351,4516,11353,4519,11355,3835],{},[160,11352,4300],{},[160,11354,4300],{},[160,11356,4522],{},[169,11358,4525],{"id":4525},[11,11360,4528],{},[152,11362,11363],{"className":4312,"code":4531,"language":4314,"meta":158,"style":158},[160,11364,11365,11375,11389,11401,11421,11429,11435],{"__ignoreMap":158},[417,11366,11367,11369,11371,11373],{"class":419,"line":420},[417,11368,4538],{"class":493},[417,11370,4401],{"class":675},[417,11372,4544],{"class":4543},[417,11374,4547],{"class":584},[417,11376,11377,11379,11381,11383,11385,11387],{"class":419,"line":578},[417,11378,4552],{"class":675},[417,11380,1493],{"class":500},[417,11382,4557],{"class":493},[417,11384,4401],{"class":675},[417,11386,4562],{"class":4543},[417,11388,4547],{"class":584},[417,11390,11391,11393,11395,11397,11399],{"class":419,"line":596},[417,11392,4569],{"class":675},[417,11394,1493],{"class":500},[417,11396,4574],{"class":675},[417,11398,4577],{"class":500},[417,11400,4580],{"class":675},[417,11402,11403,11405,11407,11409,11411,11413,11415,11417,11419],{"class":419,"line":617},[417,11404,4585],{"class":500},[417,11406,4324],{"class":500},[417,11408,4590],{"class":500},[417,11410,4562],{"class":675},[417,11412,4595],{"class":500},[417,11414,4598],{"class":1398},[417,11416,590],{"class":500},[417,11418,4604],{"class":4603},[417,11420,4607],{"class":500},[417,11422,11423,11425,11427],{"class":419,"line":623},[417,11424,4612],{"class":500},[417,11426,4615],{"class":675},[417,11428,4618],{"class":500},[417,11430,11431,11433],{"class":419,"line":999},[417,11432,4623],{"class":675},[417,11434,4618],{"class":500},[417,11436,11437],{"class":419,"line":1004},[417,11438,4412],{"class":675},[11,11440,4632],{},[11,11442,4635],{},[43,11444,11445,11455],{},[46,11446,11447],{},[49,11448,11449,11451,11453],{},[52,11450,4644],{},[52,11452,4647],{},[52,11454,4650],{},[59,11456,11457,11471,11487,11499],{},[49,11458,11459,11461,11467],{},[64,11460,4657],{},[64,11462,11463,2208,11465],{},[160,11464,4662],{},[160,11466,4665],{},[64,11468,4668,11469],{},[160,11470,4671],{},[49,11472,11473,11475,11481],{},[64,11474,4676],{},[64,11476,11477,2208,11479],{},[160,11478,4681],{},[160,11480,4684],{},[64,11482,11483,2208,11485],{},[160,11484,4689],{},[160,11486,4692],{},[49,11488,11489,11491,11495],{},[64,11490,4697],{},[64,11492,4700,11493],{},[160,11494,4684],{},[64,11496,11497],{},[160,11498,4557],{},[49,11500,11501,11503,11507],{},[64,11502,4711],{},[64,11504,4714,11505],{},[160,11506,4717],{},[64,11508,4720,11509],{},[160,11510,4717],{},[169,11512,4725],{"id":4725},[11,11514,4728],{},[152,11516,11517],{"className":4312,"code":4731,"language":4314,"meta":158,"style":158},[160,11518,11519],{"__ignoreMap":158},[417,11520,11521,11523,11525,11527,11529,11531,11533,11535],{"class":419,"line":420},[417,11522,4738],{"class":493},[417,11524,4401],{"class":675},[417,11526,4743],{"class":4543},[417,11528,4746],{"class":584},[417,11530,4749],{"class":675},[417,11532,4752],{"class":500},[417,11534,2893],{"class":1419},[417,11536,4412],{"class":675},[11,11538,4759],{},[169,11540,4762],{"id":4762},[11,11542,4765,11543,4769,11545,4773],{},[160,11544,4768],{},[160,11546,4772],{},[152,11548,11549],{"className":4312,"code":4776,"language":4314,"meta":158,"style":158},[160,11550,11551,11561,11581,11585,11589,11607,11621,11631,11635,11639,11665],{"__ignoreMap":158},[417,11552,11553,11555,11557,11559],{"class":419,"line":420},[417,11554,4783],{"class":584},[417,11556,4786],{"class":423},[417,11558,4789],{"class":500},[417,11560,593],{"class":500},[417,11562,11563,11565,11567,11569,11571,11573,11575,11577,11579],{"class":419,"line":578},[417,11564,4796],{"class":1398},[417,11566,590],{"class":500},[417,11568,4424],{"class":500},[417,11570,4803],{"class":4543},[417,11572,590],{"class":500},[417,11574,4808],{"class":423},[417,11576,4811],{"class":500},[417,11578,4746],{"class":584},[417,11580,4816],{"class":423},[417,11582,11583],{"class":419,"line":596},[417,11584,626],{"class":500},[417,11586,11587],{"class":419,"line":617},[417,11588,981],{"emptyLinePlaceholder":732},[417,11590,11591,11593,11595,11597,11599,11601,11603,11605],{"class":419,"line":623},[417,11592,4829],{"class":584},[417,11594,4832],{"class":493},[417,11596,4835],{"class":500},[417,11598,4838],{"class":4543},[417,11600,4841],{"class":500},[417,11602,4786],{"class":423},[417,11604,4811],{"class":500},[417,11606,593],{"class":500},[417,11608,11609,11611,11613,11615,11617,11619],{"class":419,"line":999},[417,11610,4852],{"class":584},[417,11612,4855],{"class":675},[417,11614,4789],{"class":500},[417,11616,4860],{"class":500},[417,11618,4746],{"class":584},[417,11620,593],{"class":500},[417,11622,11623,11625,11627,11629],{"class":419,"line":1004},[417,11624,4869],{"class":493},[417,11626,4401],{"class":1398},[417,11628,832],{"class":1419},[417,11630,4412],{"class":1398},[417,11632,11633],{"class":419,"line":1010},[417,11634,620],{"class":500},[417,11636,11637],{"class":419,"line":1016},[417,11638,981],{"emptyLinePlaceholder":732},[417,11640,11641,11643,11645,11647,11649,11651,11653,11655,11657,11659,11661,11663],{"class":419,"line":1022},[417,11642,4888],{"class":4321},[417,11644,2631],{"class":500},[417,11646,4193],{"class":1398},[417,11648,4196],{"class":584},[417,11650,679],{"class":500},[417,11652,587],{"class":500},[417,11654,4901],{"class":427},[417,11656,587],{"class":500},[417,11658,4838],{"class":584},[417,11660,4908],{"class":500},[417,11662,4911],{"class":675},[417,11664,4914],{"class":500},[417,11666,11667],{"class":419,"line":1027},[417,11668,626],{"class":500},[11,11670,4921],{},[169,11672,4924],{"id":4924},[11,11674,4927],{},[11,11676,4930],{},[35,11678,4160],{"id":4933},[169,11680,11681,3571,11683],{"id":4936},[160,11682,4939],{},[160,11684,3690],{},[11,11686,11687,4946,11689,4950,11691,4953],{},[160,11688,4939],{},[160,11690,4949],{},[160,11692,3690],{},[152,11694,11695],{"className":4956,"code":4957,"language":4933,"meta":158,"style":158},[160,11696,11697,11721,11725,11737,11755],{"__ignoreMap":158},[417,11698,11699,11701,11703,11705,11707,11709,11711,11713,11715,11717,11719],{"class":419,"line":420},[417,11700,4385],{"class":584},[417,11702,4388],{"class":675},[417,11704,679],{"class":500},[417,11706,4393],{"class":675},[417,11708,1493],{"class":500},[417,11710,4398],{"class":493},[417,11712,4401],{"class":675},[417,11714,4404],{"class":500},[417,11716,4407],{"class":427},[417,11718,4404],{"class":500},[417,11720,4412],{"class":675},[417,11722,11723],{"class":419,"line":578},[417,11724,981],{"emptyLinePlaceholder":732},[417,11726,11727,11729,11731,11733,11735],{"class":419,"line":596},[417,11728,4421],{"class":4321},[417,11730,4424],{"class":675},[417,11732,4427],{"class":500},[417,11734,4430],{"class":675},[417,11736,575],{"class":500},[417,11738,11739,11741,11743,11745,11747,11749,11751,11753],{"class":419,"line":617},[417,11740,4437],{"class":4321},[417,11742,4440],{"class":500},[417,11744,4443],{"class":493},[417,11746,4401],{"class":1398},[417,11748,4404],{"class":500},[417,11750,4450],{"class":427},[417,11752,4404],{"class":500},[417,11754,4412],{"class":1398},[417,11756,11757],{"class":419,"line":623},[417,11758,626],{"class":500},[11,11760,5024,11761,5027],{},[160,11762,4427],{},[169,11764,11765],{"id":5030},[160,11766,5030],{},[11,11768,5035,11769,5038],{},[160,11770,5030],{},[152,11772,11773],{"className":4956,"code":5041,"language":4933,"meta":158,"style":158},[160,11774,11775,11785,11795,11803],{"__ignoreMap":158},[417,11776,11777,11779,11781,11783],{"class":419,"line":420},[417,11778,4783],{"class":584},[417,11780,5050],{"class":423},[417,11782,4789],{"class":500},[417,11784,593],{"class":500},[417,11786,11787,11789,11791,11793],{"class":419,"line":578},[417,11788,5059],{"class":584},[417,11790,5062],{"class":1398},[417,11792,590],{"class":500},[417,11794,5067],{"class":423},[417,11796,11797,11799,11801],{"class":419,"line":596},[417,11798,5072],{"class":1398},[417,11800,590],{"class":500},[417,11802,5077],{"class":423},[417,11804,11805],{"class":419,"line":617},[417,11806,626],{"class":500},[11,11808,11809,5086],{},[160,11810,5030],{},[169,11812,5089],{"id":5089},[11,11814,5092],{},[152,11816,11817],{"className":4312,"code":5095,"language":4314,"meta":158,"style":158},[160,11818,11819,11845,11867],{"__ignoreMap":158},[417,11820,11821,11823,11825,11827,11829,11831,11833,11835,11837,11839,11841,11843],{"class":419,"line":420},[417,11822,4829],{"class":584},[417,11824,4855],{"class":493},[417,11826,4401],{"class":500},[417,11828,5108],{"class":4543},[417,11830,590],{"class":500},[417,11832,5113],{"class":423},[417,11834,1493],{"class":500},[417,11836,5118],{"class":423},[417,11838,4190],{"class":500},[417,11840,5123],{"class":423},[417,11842,5126],{"class":500},[417,11844,593],{"class":500},[417,11846,11847,11849,11851,11853,11855,11857,11859,11861,11863,11865],{"class":419,"line":578},[417,11848,5133],{"class":675},[417,11850,1493],{"class":500},[417,11852,5138],{"class":493},[417,11854,4401],{"class":1398},[417,11856,5108],{"class":675},[417,11858,1493],{"class":500},[417,11860,5147],{"class":675},[417,11862,1493],{"class":500},[417,11864,5152],{"class":675},[417,11866,4412],{"class":1398},[417,11868,11869],{"class":419,"line":596},[417,11870,626],{"class":500},[11,11872,5161,11873,5165],{},[160,11874,5164],{},[169,11876,5168],{"id":5168},[11,11878,5171,11879,5175],{},[160,11880,5174],{},[152,11882,11883],{"className":4956,"code":5178,"language":4933,"meta":158,"style":158},[160,11884,11885,11895,11903,11907,11911,11947,11975],{"__ignoreMap":158},[417,11886,11887,11889,11891,11893],{"class":419,"line":420},[417,11888,4783],{"class":584},[417,11890,5187],{"class":423},[417,11892,4789],{"class":500},[417,11894,593],{"class":500},[417,11896,11897,11899,11901],{"class":419,"line":578},[417,11898,5196],{"class":1398},[417,11900,590],{"class":500},[417,11902,5067],{"class":423},[417,11904,11905],{"class":419,"line":596},[417,11906,626],{"class":500},[417,11908,11909],{"class":419,"line":617},[417,11910,981],{"emptyLinePlaceholder":732},[417,11912,11913,11915,11917,11919,11921,11923,11925,11927,11929,11931,11933,11935,11937,11939,11941,11943,11945],{"class":419,"line":623},[417,11914,4829],{"class":584},[417,11916,5215],{"class":493},[417,11918,4190],{"class":500},[417,11920,5220],{"class":423},[417,11922,5223],{"class":584},[417,11924,5187],{"class":423},[417,11926,5228],{"class":500},[417,11928,5231],{"class":4543},[417,11930,590],{"class":500},[417,11932,5236],{"class":423},[417,11934,5239],{"class":675},[417,11936,4595],{"class":500},[417,11938,5062],{"class":4543},[417,11940,590],{"class":500},[417,11942,4808],{"class":423},[417,11944,4811],{"class":500},[417,11946,593],{"class":500},[417,11948,11949,11951,11953,11955,11957,11959,11961,11963,11965,11967,11969,11971,11973],{"class":419,"line":999},[417,11950,4888],{"class":4321},[417,11952,5258],{"class":675},[417,11954,1493],{"class":500},[417,11956,5263],{"class":493},[417,11958,4401],{"class":1398},[417,11960,5268],{"class":4543},[417,11962,4746],{"class":584},[417,11964,5273],{"class":675},[417,11966,1493],{"class":500},[417,11968,4803],{"class":675},[417,11970,5280],{"class":500},[417,11972,5062],{"class":675},[417,11974,4412],{"class":1398},[417,11976,11977],{"class":419,"line":1004},[417,11978,626],{"class":500},[11,11980,5291,11981,5294,11983,5297],{},[160,11982,5220],{},[160,11984,4803],{},[169,11986,11987,5304],{"id":5300},[160,11988,5303],{},[11,11990,11991,5309],{},[160,11992,5303],{},[152,11994,11995],{"className":4956,"code":5312,"language":4933,"meta":158,"style":158},[160,11996,11997,12007,12015,12023,12027,12031,12043],{"__ignoreMap":158},[417,11998,11999,12001,12003,12005],{"class":419,"line":420},[417,12000,4783],{"class":584},[417,12002,5050],{"class":423},[417,12004,4789],{"class":500},[417,12006,593],{"class":500},[417,12008,12009,12011,12013],{"class":419,"line":578},[417,12010,5196],{"class":1398},[417,12012,590],{"class":500},[417,12014,5067],{"class":423},[417,12016,12017,12019,12021],{"class":419,"line":596},[417,12018,5072],{"class":1398},[417,12020,590],{"class":500},[417,12022,5077],{"class":423},[417,12024,12025],{"class":419,"line":617},[417,12026,626],{"class":500},[417,12028,12029],{"class":419,"line":623},[417,12030,981],{"emptyLinePlaceholder":732},[417,12032,12033,12035,12037,12039,12041],{"class":419,"line":999},[417,12034,4783],{"class":584},[417,12036,5355],{"class":423},[417,12038,4789],{"class":500},[417,12040,5360],{"class":500},[417,12042,5363],{"class":423},[417,12044,12045],{"class":419,"line":1004},[417,12046,5368],{"class":1704},[11,12048,5371],{},[169,12050,5374],{"id":5374},[11,12052,5377],{},[152,12054,12055],{"className":4956,"code":5380,"language":4933,"meta":158,"style":158},[160,12056,12057,12067,12075,12083,12087,12091,12111,12115,12119,12137],{"__ignoreMap":158},[417,12058,12059,12061,12063,12065],{"class":419,"line":420},[417,12060,4783],{"class":584},[417,12062,5050],{"class":423},[417,12064,4789],{"class":500},[417,12066,593],{"class":500},[417,12068,12069,12071,12073],{"class":419,"line":578},[417,12070,5196],{"class":1398},[417,12072,590],{"class":500},[417,12074,5067],{"class":423},[417,12076,12077,12079,12081],{"class":419,"line":596},[417,12078,5072],{"class":1398},[417,12080,590],{"class":500},[417,12082,5077],{"class":423},[417,12084,12085],{"class":419,"line":617},[417,12086,626],{"class":500},[417,12088,12089],{"class":419,"line":623},[417,12090,981],{"emptyLinePlaceholder":732},[417,12092,12093,12095,12097,12099,12101,12103,12105,12107,12109],{"class":419,"line":999},[417,12094,4783],{"class":584},[417,12096,5423],{"class":423},[417,12098,4789],{"class":500},[417,12100,5050],{"class":423},[417,12102,5430],{"class":675},[417,12104,4404],{"class":500},[417,12106,4803],{"class":427},[417,12108,4404],{"class":500},[417,12110,3793],{"class":675},[417,12112,12113],{"class":419,"line":1004},[417,12114,5443],{"class":1704},[417,12116,12117],{"class":419,"line":1010},[417,12118,981],{"emptyLinePlaceholder":732},[417,12120,12121,12123,12125,12127,12129,12131,12133,12135],{"class":419,"line":1016},[417,12122,4783],{"class":584},[417,12124,5454],{"class":423},[417,12126,4789],{"class":500},[417,12128,5050],{"class":423},[417,12130,5430],{"class":675},[417,12132,5303],{"class":500},[417,12134,5050],{"class":423},[417,12136,3793],{"class":675},[417,12138,12139],{"class":419,"line":1022},[417,12140,5471],{"class":1704},[169,12142,5474],{"id":5474},[11,12144,12145,5480],{},[160,12146,5479],{},[152,12148,12149],{"className":4956,"code":5483,"language":4933,"meta":158,"style":158},[160,12150,12151],{"__ignoreMap":158},[417,12152,12153,12155,12157,12159,12161],{"class":419,"line":420},[417,12154,5479],{"class":584},[417,12156,5492],{"class":584},[417,12158,5495],{"class":675},[417,12160,590],{"class":500},[417,12162,5077],{"class":423},[11,12164,5502,12165,5506,12167,5509],{},[160,12166,5505],{},[160,12168,5479],{},[169,12170,5512],{"id":5512},[11,12172,5515],{},[152,12174,12175],{"className":4956,"code":5518,"language":4933,"meta":158,"style":158},[160,12176,12177,12187,12203,12207,12211,12221,12241],{"__ignoreMap":158},[417,12178,12179,12181,12183,12185],{"class":419,"line":420},[417,12180,4783],{"class":584},[417,12182,5527],{"class":423},[417,12184,4789],{"class":500},[417,12186,593],{"class":500},[417,12188,12189,12191,12193,12195,12197,12199,12201],{"class":419,"line":578},[417,12190,5536],{"class":1398},[417,12192,4401],{"class":500},[417,12194,5541],{"class":4543},[417,12196,590],{"class":500},[417,12198,5546],{"class":423},[417,12200,5549],{"class":500},[417,12202,5077],{"class":423},[417,12204,12205],{"class":419,"line":596},[417,12206,626],{"class":500},[417,12208,12209],{"class":419,"line":617},[417,12210,981],{"emptyLinePlaceholder":732},[417,12212,12213,12215,12217,12219],{"class":419,"line":623},[417,12214,4783],{"class":584},[417,12216,5566],{"class":423},[417,12218,4789],{"class":500},[417,12220,593],{"class":500},[417,12222,12223,12225,12227,12229,12231,12233,12235,12237,12239],{"class":419,"line":999},[417,12224,5536],{"class":1398},[417,12226,590],{"class":500},[417,12228,4424],{"class":500},[417,12230,5541],{"class":4543},[417,12232,590],{"class":500},[417,12234,5546],{"class":423},[417,12236,4811],{"class":500},[417,12238,4746],{"class":584},[417,12240,5077],{"class":423},[417,12242,12243],{"class":419,"line":1004},[417,12244,626],{"class":500},[11,12246,5597,12247,5601],{},[160,12248,5600],{},[169,12250,5604],{"id":5604},[11,12252,5607],{},[152,12254,12255],{"className":4956,"code":5610,"language":4933,"meta":158,"style":158},[160,12256,12257,12281,12297,12301,12305,12319,12323,12335,12357],{"__ignoreMap":158},[417,12258,12259,12261,12263,12265,12267,12269,12271,12273,12275,12277,12279],{"class":419,"line":420},[417,12260,4829],{"class":584},[417,12262,5619],{"class":493},[417,12264,4401],{"class":500},[417,12266,5541],{"class":4543},[417,12268,590],{"class":500},[417,12270,5628],{"class":423},[417,12272,5549],{"class":500},[417,12274,5633],{"class":4543},[417,12276,5636],{"class":500},[417,12278,4808],{"class":423},[417,12280,593],{"class":500},[417,12282,12283,12285,12287,12289,12291,12293,12295],{"class":419,"line":578},[417,12284,4888],{"class":4321},[417,12286,5647],{"class":500},[417,12288,5633],{"class":675},[417,12290,5280],{"class":500},[417,12292,501],{"class":500},[417,12294,5656],{"class":427},[417,12296,507],{"class":500},[417,12298,12299],{"class":419,"line":596},[417,12300,626],{"class":500},[417,12302,12303],{"class":419,"line":617},[417,12304,981],{"emptyLinePlaceholder":732},[417,12306,12307,12309,12311,12313,12315,12317],{"class":419,"line":623},[417,12308,4385],{"class":584},[417,12310,5633],{"class":675},[417,12312,590],{"class":500},[417,12314,5628],{"class":423},[417,12316,4789],{"class":500},[417,12318,5681],{"class":1419},[417,12320,12321],{"class":419,"line":999},[417,12322,981],{"emptyLinePlaceholder":732},[417,12324,12325,12327,12329,12331,12333],{"class":419,"line":1004},[417,12326,4421],{"class":4321},[417,12328,4424],{"class":675},[417,12330,5694],{"class":493},[417,12332,5697],{"class":675},[417,12334,575],{"class":500},[417,12336,12337,12339,12341,12343,12345,12347,12349,12351,12353,12355],{"class":419,"line":1010},[417,12338,5133],{"class":675},[417,12340,1493],{"class":500},[417,12342,5138],{"class":493},[417,12344,4401],{"class":1398},[417,12346,5541],{"class":675},[417,12348,1493],{"class":500},[417,12350,5716],{"class":493},[417,12352,4401],{"class":1398},[417,12354,842],{"class":1419},[417,12356,5723],{"class":1398},[417,12358,12359],{"class":419,"line":1016},[417,12360,626],{"class":500},[11,12362,5730],{},[35,12364,1180],{"id":1180},[11,12366,5735],{},[11,12368,5738],{},[711,12370,5741],{},{"title":158,"searchDepth":578,"depth":578,"links":12372},[12373,12376,12380,12387,12398],{"id":4163,"depth":578,"text":4152,"children":12374},[12375],{"id":4166,"depth":596,"text":4166},{"id":3446,"depth":578,"text":4129,"children":12377},[12378,12379],{"id":4223,"depth":596,"text":4223},{"id":4274,"depth":596,"text":4275},{"id":4294,"depth":578,"text":4157,"children":12381},[12382,12383,12384,12385,12386],{"id":4297,"depth":596,"text":4300},{"id":4525,"depth":596,"text":4525},{"id":4725,"depth":596,"text":4725},{"id":4762,"depth":596,"text":4762},{"id":4924,"depth":596,"text":4924},{"id":4933,"depth":578,"text":4160,"children":12388},[12389,12390,12391,12392,12393,12394,12395,12396,12397],{"id":4936,"depth":596,"text":5761},{"id":5030,"depth":596,"text":5030},{"id":5089,"depth":596,"text":5089},{"id":5168,"depth":596,"text":5168},{"id":5300,"depth":596,"text":5300},{"id":5374,"depth":596,"text":5374},{"id":5474,"depth":596,"text":5474},{"id":5512,"depth":596,"text":5512},{"id":5604,"depth":596,"text":5604},{"id":1180,"depth":578,"text":1180},{},{"title":4134,"description":5771},[4157,4160],{"id":5781,"title":5782,"body":12403,"description":6258,"extension":730,"meta":12777,"navigation":732,"path":6260,"publishDate":6261,"published":732,"seo":12778,"stem":6263,"tags":12779,"thumbnail":6266,"updated":6261,"__hash__":6267},{"type":8,"value":12404,"toc":12767},[12405,12407,12409,12415,12417,12419,12421,12423,12489,12491,12495,12497,12521,12527,12571,12573,12575,12581,12597,12599,12601,12603,12605,12607,12691,12693,12703,12705,12707,12709,12729,12733,12735,12737,12741,12743,12745,12757,12759,12761,12763,12765],[11,12406,13],{},[11,12408,5789],{},[11,12410,5792,12411,2208,12413,5799],{},[160,12412,5795],{},[160,12414,5798],{},[35,12416,5802],{"id":5802},[11,12418,5805],{},[11,12420,5808],{},[11,12422,5811],{},[43,12424,12425,12437],{},[46,12426,12427],{},[49,12428,12429,12431,12433,12435],{},[52,12430,329],{},[52,12432,5795],{},[52,12434,5798],{},[52,12436,5826],{},[59,12438,12439,12449,12459,12469,12479],{},[49,12440,12441,12443,12445,12447],{},[64,12442,5833],{},[64,12444,5836],{},[64,12446,5836],{},[64,12448,5841],{},[49,12450,12451,12453,12455,12457],{},[64,12452,794],{},[64,12454,5848],{},[64,12456,5848],{},[64,12458,5853],{},[49,12460,12461,12463,12465,12467],{},[64,12462,5858],{},[64,12464,5861],{},[64,12466,5864],{},[64,12468,5861],{},[49,12470,12471,12473,12475,12477],{},[64,12472,5871],{},[64,12474,5874],{},[64,12476,5877],{},[64,12478,5874],{},[49,12480,12481,12483,12485,12487],{},[64,12482,5884],{},[64,12484,5887],{},[64,12486,5890],{},[64,12488,5893],{},[35,12490,5795],{"id":5896},[11,12492,12493,5901],{},[160,12494,5795],{},[11,12496,5904],{},[152,12498,12499],{"className":3444,"code":5907,"language":3446,"meta":158,"style":158},[160,12500,12501,12505,12509,12513,12517],{"__ignoreMap":158},[417,12502,12503],{"class":419,"line":420},[417,12504,5914],{},[417,12506,12507],{"class":419,"line":578},[417,12508,981],{"emptyLinePlaceholder":732},[417,12510,12511],{"class":419,"line":596},[417,12512,5923],{},[417,12514,12515],{"class":419,"line":617},[417,12516,981],{"emptyLinePlaceholder":732},[417,12518,12519],{"class":419,"line":623},[417,12520,5932],{},[11,12522,5935,12523,5939,12525,5943],{},[160,12524,5938],{},[160,12526,5942],{},[152,12528,12529],{"className":3444,"code":5946,"language":3446,"meta":158,"style":158},[160,12530,12531,12535,12539,12543,12547,12551,12555,12559,12563,12567],{"__ignoreMap":158},[417,12532,12533],{"class":419,"line":420},[417,12534,5953],{},[417,12536,12537],{"class":419,"line":578},[417,12538,5958],{},[417,12540,12541],{"class":419,"line":596},[417,12542,5963],{},[417,12544,12545],{"class":419,"line":617},[417,12546,626],{},[417,12548,12549],{"class":419,"line":623},[417,12550,981],{"emptyLinePlaceholder":732},[417,12552,12553],{"class":419,"line":999},[417,12554,5976],{},[417,12556,12557],{"class":419,"line":1004},[417,12558,981],{"emptyLinePlaceholder":732},[417,12560,12561],{"class":419,"line":1010},[417,12562,5985],{},[417,12564,12565],{"class":419,"line":1016},[417,12566,5990],{},[417,12568,12569],{"class":419,"line":1022},[417,12570,4412],{},[11,12572,5997],{},[35,12574,5798],{"id":6000},[11,12576,12577,6005,12579,6008],{},[160,12578,5798],{},[160,12580,5795],{},[152,12582,12583],{"className":3444,"code":6011,"language":3446,"meta":158,"style":158},[160,12584,12585,12589,12593],{"__ignoreMap":158},[417,12586,12587],{"class":419,"line":420},[417,12588,6018],{},[417,12590,12591],{"class":419,"line":578},[417,12592,981],{"emptyLinePlaceholder":732},[417,12594,12595],{"class":419,"line":596},[417,12596,6027],{},[11,12598,6030],{},[11,12600,6033],{},[35,12602,5826],{"id":6036},[11,12604,6039],{},[11,12606,6042],{},[152,12608,12609],{"className":3444,"code":6045,"language":3446,"meta":158,"style":158},[160,12610,12611,12615,12619,12623,12627,12631,12635,12639,12643,12647,12651,12655,12659,12663,12667,12671,12675,12679,12683,12687],{"__ignoreMap":158},[417,12612,12613],{"class":419,"line":420},[417,12614,6052],{},[417,12616,12617],{"class":419,"line":578},[417,12618,981],{"emptyLinePlaceholder":732},[417,12620,12621],{"class":419,"line":596},[417,12622,6061],{},[417,12624,12625],{"class":419,"line":617},[417,12626,6066],{},[417,12628,12629],{"class":419,"line":623},[417,12630,981],{"emptyLinePlaceholder":732},[417,12632,12633],{"class":419,"line":999},[417,12634,6075],{},[417,12636,12637],{"class":419,"line":1004},[417,12638,6080],{},[417,12640,12641],{"class":419,"line":1010},[417,12642,6085],{},[417,12644,12645],{"class":419,"line":1016},[417,12646,6090],{},[417,12648,12649],{"class":419,"line":1022},[417,12650,6095],{},[417,12652,12653],{"class":419,"line":1027},[417,12654,620],{},[417,12656,12657],{"class":419,"line":1033},[417,12658,626],{},[417,12660,12661],{"class":419,"line":1039},[417,12662,981],{"emptyLinePlaceholder":732},[417,12664,12665],{"class":419,"line":1045},[417,12666,6112],{},[417,12668,12669],{"class":419,"line":1050},[417,12670,6066],{},[417,12672,12673],{"class":419,"line":6119},[417,12674,6122],{},[417,12676,12677],{"class":419,"line":6125},[417,12678,6128],{},[417,12680,12681],{"class":419,"line":6131},[417,12682,981],{"emptyLinePlaceholder":732},[417,12684,12685],{"class":419,"line":6136},[417,12686,6139],{},[417,12688,12689],{"class":419,"line":6142},[417,12690,626],{},[11,12692,6147],{},[204,12694,12695,12697,12699,12701],{},[127,12696,6152],{},[127,12698,6155],{},[127,12700,6158],{},[127,12702,6161],{},[35,12704,6164],{"id":6164},[11,12706,6167],{},[11,12708,6170],{},[152,12710,12711],{"className":3444,"code":6173,"language":3446,"meta":158,"style":158},[160,12712,12713,12717,12721,12725],{"__ignoreMap":158},[417,12714,12715],{"class":419,"line":420},[417,12716,6180],{},[417,12718,12719],{"class":419,"line":578},[417,12720,981],{"emptyLinePlaceholder":732},[417,12722,12723],{"class":419,"line":596},[417,12724,6189],{},[417,12726,12727],{"class":419,"line":617},[417,12728,6194],{},[1764,12730,12731],{"title":6197,"type":2014},[11,12732,6200],{},[35,12734,6203],{"id":6203},[11,12736,6206],{},[1764,12738,12739],{"title":6209,"type":6210},[11,12740,6213],{},[35,12742,6216],{"id":6216},[11,12744,6219],{},[204,12746,12747,12751,12755],{},[127,12748,6224,12749],{},[160,12750,5795],{},[127,12752,6229,12753],{},[160,12754,5798],{},[127,12756,6234],{},[11,12758,6237],{},[35,12760,1180],{"id":1180},[11,12762,6242],{},[11,12764,6245],{},[711,12766,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":12768},[12769,12770,12771,12772,12773,12774,12775,12776],{"id":5802,"depth":578,"text":5802},{"id":5896,"depth":578,"text":5795},{"id":6000,"depth":578,"text":5798},{"id":6036,"depth":578,"text":5826},{"id":6164,"depth":578,"text":6164},{"id":6203,"depth":578,"text":6203},{"id":6216,"depth":578,"text":6216},{"id":1180,"depth":578,"text":1180},{},{"title":5782,"description":6258},[6265,5826],{"id":6269,"title":6270,"body":12781,"description":6746,"extension":730,"meta":13148,"navigation":732,"path":6748,"publishDate":6749,"published":732,"seo":13149,"stem":6751,"tags":13150,"thumbnail":6753,"updated":6749,"__hash__":6754},{"type":8,"value":12782,"toc":13138},[12783,12785,12790,12792,12794,12796,12798,12800,12812,12814,12816,12818,12874,12876,12902,12904,12906,12908,12910,12920,12922,12958,12960,12962,12964,12966,12976,12980,12982,12984,12986,13004,13006,13008,13010,13012,13014,13026,13028,13030,13094,13096,13101,13107,13113,13115,13129,13131,13136],[11,12784,13],{},[11,12786,6277,12787,6283],{},[176,12788,6282],{"href":6280,"rel":12789},[884],[11,12791,6286],{},[35,12793,6290],{"id":6289},[11,12795,6293],{},[11,12797,6296],{},[11,12799,6299],{},[204,12801,12802,12804,12806,12808,12810],{},[127,12803,6304],{},[127,12805,6307],{},[127,12807,6310],{},[127,12809,6313],{},[127,12811,6316],{},[35,12813,6304],{"id":6304},[11,12815,6321],{},[11,12817,6324],{},[152,12819,12820],{"className":3444,"code":6327,"language":3446,"meta":158,"style":158},[160,12821,12822,12826,12830,12834,12838,12842,12846,12850,12854,12858,12862,12866,12870],{"__ignoreMap":158},[417,12823,12824],{"class":419,"line":420},[417,12825,6334],{},[417,12827,12828],{"class":419,"line":578},[417,12829,6339],{},[417,12831,12832],{"class":419,"line":596},[417,12833,626],{},[417,12835,12836],{"class":419,"line":617},[417,12837,981],{"emptyLinePlaceholder":732},[417,12839,12840],{"class":419,"line":623},[417,12841,6352],{},[417,12843,12844],{"class":419,"line":999},[417,12845,6357],{},[417,12847,12848],{"class":419,"line":1004},[417,12849,626],{},[417,12851,12852],{"class":419,"line":1010},[417,12853,981],{"emptyLinePlaceholder":732},[417,12855,12856],{"class":419,"line":1016},[417,12857,6370],{},[417,12859,12860],{"class":419,"line":1022},[417,12861,6375],{},[417,12863,12864],{"class":419,"line":1027},[417,12865,626],{},[417,12867,12868],{"class":419,"line":1033},[417,12869,981],{"emptyLinePlaceholder":732},[417,12871,12872],{"class":419,"line":1039},[417,12873,6388],{},[11,12875,6391],{},[124,12877,12878,12882,12888,12894],{},[127,12879,12880,6399],{},[160,12881,6398],{},[127,12883,12884,6404,12886,6408],{},[160,12885,6398],{},[160,12887,6407],{},[127,12889,12890,6404,12892,6408],{},[160,12891,6407],{},[160,12893,6415],{},[127,12895,12896,2208,12898,2208,12900,6424],{},[160,12897,6415],{},[160,12899,6407],{},[160,12901,6398],{},[11,12903,6427],{},[35,12905,6307],{"id":6430},[11,12907,6433],{},[11,12909,6436],{},[204,12911,12912,12914,12916,12918],{},[127,12913,6441],{},[127,12915,6444],{},[127,12917,6447],{},[127,12919,6450],{},[11,12921,6453],{},[152,12923,12924],{"className":3444,"code":6456,"language":3446,"meta":158,"style":158},[160,12925,12926,12930,12934,12938,12942,12946,12950,12954],{"__ignoreMap":158},[417,12927,12928],{"class":419,"line":420},[417,12929,6463],{},[417,12931,12932],{"class":419,"line":578},[417,12933,6468],{},[417,12935,12936],{"class":419,"line":596},[417,12937,6473],{},[417,12939,12940],{"class":419,"line":617},[417,12941,4412],{},[417,12943,12944],{"class":419,"line":623},[417,12945,981],{"emptyLinePlaceholder":732},[417,12947,12948],{"class":419,"line":999},[417,12949,6486],{},[417,12951,12952],{"class":419,"line":1004},[417,12953,6491],{},[417,12955,12956],{"class":419,"line":1010},[417,12957,6496],{},[11,12959,6499],{},[35,12961,6310],{"id":6310},[11,12963,6504],{},[11,12965,6507],{},[204,12967,12968,12972,12974],{},[127,12969,12970,6515],{},[160,12971,6514],{},[127,12973,6518],{},[127,12975,6521],{},[11,12977,12978,6526],{},[160,12979,6514],{},[11,12981,6529],{},[35,12983,6313],{"id":6313},[11,12985,6534],{},[204,12987,12988,12996,13000],{},[127,12989,6539,12990,2208,12992,2208,12994],{},[160,12991,6542],{},[160,12993,6545],{},[160,12995,6548],{},[127,12997,12998,6554],{},[160,12999,6553],{},[127,13001,13002,6515],{},[160,13003,6559],{},[11,13005,6562],{},[11,13007,6565],{},[35,13009,6316],{"id":6316},[11,13011,6570],{},[11,13013,6573],{},[124,13015,13016,13018,13020,13022,13024],{},[127,13017,6578],{},[127,13019,6581],{},[127,13021,6584],{},[127,13023,6587],{},[127,13025,6590],{},[35,13027,6593],{"id":6593},[11,13029,6596],{},[152,13031,13032],{"className":3444,"code":6599,"language":3446,"meta":158,"style":158},[160,13033,13034,13038,13042,13046,13050,13054,13058,13062,13066,13070,13074,13078,13082,13086,13090],{"__ignoreMap":158},[417,13035,13036],{"class":419,"line":420},[417,13037,6606],{},[417,13039,13040],{"class":419,"line":578},[417,13041,981],{"emptyLinePlaceholder":732},[417,13043,13044],{"class":419,"line":596},[417,13045,6615],{},[417,13047,13048],{"class":419,"line":617},[417,13049,6620],{},[417,13051,13052],{"class":419,"line":623},[417,13053,6625],{},[417,13055,13056],{"class":419,"line":999},[417,13057,981],{"emptyLinePlaceholder":732},[417,13059,13060],{"class":419,"line":1004},[417,13061,6634],{},[417,13063,13064],{"class":419,"line":1010},[417,13065,6639],{},[417,13067,13068],{"class":419,"line":1016},[417,13069,6644],{},[417,13071,13072],{"class":419,"line":1022},[417,13073,981],{"emptyLinePlaceholder":732},[417,13075,13076],{"class":419,"line":1027},[417,13077,6653],{},[417,13079,13080],{"class":419,"line":1033},[417,13081,6658],{},[417,13083,13084],{"class":419,"line":1039},[417,13085,6644],{},[417,13087,13088],{"class":419,"line":1045},[417,13089,981],{"emptyLinePlaceholder":732},[417,13091,13092],{"class":419,"line":1050},[417,13093,6671],{},[11,13095,6674],{},[152,13097,13099],{"className":13098,"code":6678,"language":157,"meta":158},[155],[160,13100,6678],{"__ignoreMap":158},[11,13102,6683,13103,2204,13105,6690],{},[160,13104,6686],{},[160,13106,6689],{},[11,13108,6693,13109,6696,13111,6699],{},[160,13110,6553],{},[160,13112,6514],{},[35,13114,1180],{"id":1180},[204,13116,13117,13119,13121,13123,13125,13127],{},[127,13118,6706],{},[127,13120,6709],{},[127,13122,6712],{},[127,13124,6715],{},[127,13126,6718],{},[127,13128,6721],{},[11,13130,6724],{},[11,13132,6727,13133,6733],{},[176,13134,6732],{"href":6730,"rel":13135},[884],[711,13137,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":13139},[13140,13141,13142,13143,13144,13145,13146,13147],{"id":6289,"depth":578,"text":6290},{"id":6304,"depth":578,"text":6304},{"id":6430,"depth":578,"text":6307},{"id":6310,"depth":578,"text":6310},{"id":6313,"depth":578,"text":6313},{"id":6316,"depth":578,"text":6316},{"id":6593,"depth":578,"text":6593},{"id":1180,"depth":578,"text":1180},{},{"title":6270,"description":6746},[4129],{"id":6756,"title":6757,"body":13152,"description":7173,"extension":730,"meta":13474,"navigation":732,"path":7175,"publishDate":7176,"published":732,"seo":13475,"stem":7178,"tags":13476,"thumbnail":7180,"updated":7176,"__hash__":7181},{"type":8,"value":13153,"toc":13466},[13154,13156,13158,13160,13162,13164,13172,13177,13179,13185,13209,13219,13224,13226,13230,13266,13272,13278,13286,13306,13308,13312,13348,13352,13356,13376,13378,13384,13420,13426,13438,13440,13462,13464],[11,13155,13],{},[11,13157,6764],{},[11,13159,6767],{},[35,13161,6771],{"id":6770},[11,13163,6774],{},[11,13165,13166,2208,13168,2208,13170,6786],{},[160,13167,6779],{},[160,13169,6782],{},[160,13171,6785],{},[11,13173,6789,13174,6795],{},[176,13175,6794],{"href":6792,"rel":13176},[884],[35,13178,6799],{"id":6798},[11,13180,6802,13181,6805,13183,6809],{},[160,13182,1952],{},[160,13184,6808],{},[152,13186,13187],{"className":3444,"code":6812,"language":3446,"meta":158,"style":158},[160,13188,13189,13193,13197,13201,13205],{"__ignoreMap":158},[417,13190,13191],{"class":419,"line":420},[417,13192,6819],{},[417,13194,13195],{"class":419,"line":578},[417,13196,3645],{},[417,13198,13199],{"class":419,"line":596},[417,13200,626],{},[417,13202,13203],{"class":419,"line":617},[417,13204,981],{"emptyLinePlaceholder":732},[417,13206,13207],{"class":419,"line":623},[417,13208,6836],{},[11,13210,6839,13211,6843,13213,6847,13215,6850,13217,6853],{},[160,13212,6842],{},[160,13214,6846],{},[160,13216,6846],{},[160,13218,6808],{},[11,13220,6856,13221,6733],{},[176,13222,6861],{"href":6859,"rel":13223},[884],[35,13225,6864],{"id":6864},[11,13227,6867,13228,6871],{},[160,13229,6870],{},[152,13231,13232],{"className":3444,"code":6874,"language":3446,"meta":158,"style":158},[160,13233,13234,13238,13242,13246,13250,13254,13258,13262],{"__ignoreMap":158},[417,13235,13236],{"class":419,"line":420},[417,13237,6819],{},[417,13239,13240],{"class":419,"line":578},[417,13241,3645],{},[417,13243,13244],{"class":419,"line":596},[417,13245,6889],{},[417,13247,13248],{"class":419,"line":617},[417,13249,6894],{},[417,13251,13252],{"class":419,"line":623},[417,13253,3524],{},[417,13255,13256],{"class":419,"line":999},[417,13257,626],{},[417,13259,13260],{"class":419,"line":1004},[417,13261,981],{"emptyLinePlaceholder":732},[417,13263,13264],{"class":419,"line":1010},[417,13265,6911],{},[11,13267,6914,13268,6918,13270,6922],{},[160,13269,6917],{},[160,13271,6921],{},[11,13273,13274,6927,13276,6930],{},[160,13275,6842],{},[160,13277,6870],{},[11,13279,1073,13280,6936,13282,6939,13284,6942],{},[160,13281,6935],{},[160,13283,6846],{},[160,13285,6808],{},[152,13287,13288],{"className":3444,"code":6945,"language":3446,"meta":158,"style":158},[160,13289,13290,13294,13298,13302],{"__ignoreMap":158},[417,13291,13292],{"class":419,"line":420},[417,13293,6952],{},[417,13295,13296],{"class":419,"line":578},[417,13297,6957],{},[417,13299,13300],{"class":419,"line":596},[417,13301,981],{"emptyLinePlaceholder":732},[417,13303,13304],{"class":419,"line":617},[417,13305,6966],{},[35,13307,6970],{"id":6969},[11,13309,6973,13310,6977],{},[160,13311,6976],{},[152,13313,13314],{"className":3444,"code":6980,"language":3446,"meta":158,"style":158},[160,13315,13316,13320,13324,13328,13332,13336,13340,13344],{"__ignoreMap":158},[417,13317,13318],{"class":419,"line":420},[417,13319,6819],{},[417,13321,13322],{"class":419,"line":578},[417,13323,3645],{},[417,13325,13326],{"class":419,"line":596},[417,13327,6889],{},[417,13329,13330],{"class":419,"line":617},[417,13331,6894],{},[417,13333,13334],{"class":419,"line":623},[417,13335,3524],{},[417,13337,13338],{"class":419,"line":999},[417,13339,626],{},[417,13341,13342],{"class":419,"line":1004},[417,13343,981],{"emptyLinePlaceholder":732},[417,13345,13346],{"class":419,"line":1010},[417,13347,7015],{},[11,13349,7018,13350,7021],{},[160,13351,6870],{},[11,13353,13354,7026],{},[160,13355,6935],{},[152,13357,13358],{"className":3444,"code":7029,"language":3446,"meta":158,"style":158},[160,13359,13360,13364,13368,13372],{"__ignoreMap":158},[417,13361,13362],{"class":419,"line":420},[417,13363,6952],{},[417,13365,13366],{"class":419,"line":578},[417,13367,6957],{},[417,13369,13370],{"class":419,"line":596},[417,13371,981],{"emptyLinePlaceholder":732},[417,13373,13374],{"class":419,"line":617},[417,13375,7015],{},[35,13377,7050],{"id":7050},[11,13379,13380,7055,13382,7059],{},[160,13381,6976],{},[160,13383,7058],{},[152,13385,13386],{"className":3444,"code":7062,"language":3446,"meta":158,"style":158},[160,13387,13388,13392,13396,13400,13404,13408,13412,13416],{"__ignoreMap":158},[417,13389,13390],{"class":419,"line":420},[417,13391,6819],{},[417,13393,13394],{"class":419,"line":578},[417,13395,3645],{},[417,13397,13398],{"class":419,"line":596},[417,13399,6889],{},[417,13401,13402],{"class":419,"line":617},[417,13403,6894],{},[417,13405,13406],{"class":419,"line":623},[417,13407,3524],{},[417,13409,13410],{"class":419,"line":999},[417,13411,626],{},[417,13413,13414],{"class":419,"line":1004},[417,13415,981],{"emptyLinePlaceholder":732},[417,13417,13418],{"class":419,"line":1010},[417,13419,7097],{},[11,13421,13422,7103,13424,7107],{},[160,13423,7102],{},[160,13425,7106],{},[11,13427,7110,13428,7113,13430,7116,13432,7119,13434,7122,13436,7125],{},[160,13429,6846],{},[160,13431,6808],{},[160,13433,6842],{},[160,13435,7106],{},[160,13437,6842],{},[35,13439,1180],{"id":1180},[204,13441,13442,13446,13448,13454,13458],{},[127,13443,7132,13444,7135],{},[160,13445,6846],{},[127,13447,7138],{},[127,13449,13450,6936,13452,7145],{},[160,13451,6935],{},[160,13453,6808],{},[127,13455,7148,13456,7152],{},[160,13457,7151],{},[127,13459,7155,13460,7159],{},[160,13461,7158],{},[11,13463,7162],{},[711,13465,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":13467},[13468,13469,13470,13471,13472,13473],{"id":6770,"depth":578,"text":6771},{"id":6798,"depth":578,"text":6799},{"id":6864,"depth":578,"text":6864},{"id":6969,"depth":578,"text":6970},{"id":7050,"depth":578,"text":7050},{"id":1180,"depth":578,"text":1180},{},{"title":6757,"description":7173},[4129],{"id":7183,"title":7184,"body":13478,"description":7564,"extension":730,"meta":13773,"navigation":732,"path":7566,"publishDate":7567,"published":732,"seo":13774,"stem":7569,"tags":13775,"thumbnail":7571,"updated":7567,"__hash__":7572},{"type":8,"value":13479,"toc":13766},[13480,13482,13484,13486,13488,13490,13492,13497,13499,13503,13547,13555,13567,13569,13589,13591,13599,13601,13605,13649,13653,13665,13667,13687,13697,13701,13706,13708,13710,13718,13720,13738,13742,13744,13762,13764],[11,13481,13],{},[11,13483,7191],{},[11,13485,7194],{},[35,13487,7198],{"id":7197},[11,13489,7201],{},[11,13491,7204],{},[11,13493,7207,13494,7213],{},[176,13495,7212],{"href":7210,"rel":13496},[884],[35,13498,7216],{"id":7216},[11,13500,7219,13501,7223],{},[160,13502,7222],{},[152,13504,13505],{"className":3444,"code":7226,"language":3446,"meta":158,"style":158},[160,13506,13507,13511,13515,13519,13523,13527,13531,13535,13539,13543],{"__ignoreMap":158},[417,13508,13509],{"class":419,"line":420},[417,13510,7233],{},[417,13512,13513],{"class":419,"line":578},[417,13514,7238],{},[417,13516,13517],{"class":419,"line":596},[417,13518,7243],{},[417,13520,13521],{"class":419,"line":617},[417,13522,3524],{},[417,13524,13525],{"class":419,"line":623},[417,13526,7252],{},[417,13528,13529],{"class":419,"line":999},[417,13530,7257],{},[417,13532,13533],{"class":419,"line":1004},[417,13534,3524],{},[417,13536,13537],{"class":419,"line":1010},[417,13538,626],{},[417,13540,13541],{"class":419,"line":1016},[417,13542,981],{"emptyLinePlaceholder":732},[417,13544,13545],{"class":419,"line":1022},[417,13546,7274],{},[11,13548,13549,7280,13551,1773,13553,7287],{},[160,13550,7279],{},[160,13552,7283],{},[160,13554,7286],{},[152,13556,13557],{"className":3444,"code":7290,"language":3446,"meta":158,"style":158},[160,13558,13559,13563],{"__ignoreMap":158},[417,13560,13561],{"class":419,"line":420},[417,13562,7297],{},[417,13564,13565],{"class":419,"line":578},[417,13566,7302],{},[11,13568,7305],{},[152,13570,13571],{"className":3444,"code":7308,"language":3446,"meta":158,"style":158},[160,13572,13573,13577,13581,13585],{"__ignoreMap":158},[417,13574,13575],{"class":419,"line":420},[417,13576,7315],{},[417,13578,13579],{"class":419,"line":578},[417,13580,981],{"emptyLinePlaceholder":732},[417,13582,13583],{"class":419,"line":596},[417,13584,7324],{},[417,13586,13587],{"class":419,"line":617},[417,13588,7329],{},[11,13590,7332],{},[152,13592,13593],{"className":3444,"code":7335,"language":3446,"meta":158,"style":158},[160,13594,13595],{"__ignoreMap":158},[417,13596,13597],{"class":419,"line":420},[417,13598,7335],{},[35,13600,7345],{"id":7344},[11,13602,7348,13603,7352],{},[160,13604,7351],{},[152,13606,13607],{"className":3444,"code":7355,"language":3446,"meta":158,"style":158},[160,13608,13609,13613,13617,13621,13625,13629,13633,13637,13641,13645],{"__ignoreMap":158},[417,13610,13611],{"class":419,"line":420},[417,13612,7233],{},[417,13614,13615],{"class":419,"line":578},[417,13616,7238],{},[417,13618,13619],{"class":419,"line":596},[417,13620,7243],{},[417,13622,13623],{"class":419,"line":617},[417,13624,3524],{},[417,13626,13627],{"class":419,"line":623},[417,13628,7252],{},[417,13630,13631],{"class":419,"line":999},[417,13632,7257],{},[417,13634,13635],{"class":419,"line":1004},[417,13636,3524],{},[417,13638,13639],{"class":419,"line":1010},[417,13640,626],{},[417,13642,13643],{"class":419,"line":1016},[417,13644,981],{"emptyLinePlaceholder":732},[417,13646,13647],{"class":419,"line":1022},[417,13648,7398],{},[11,13650,13651,7403],{},[160,13652,7351],{},[152,13654,13655],{"className":3444,"code":7406,"language":3446,"meta":158,"style":158},[160,13656,13657,13661],{"__ignoreMap":158},[417,13658,13659],{"class":419,"line":420},[417,13660,7413],{},[417,13662,13663],{"class":419,"line":578},[417,13664,7418],{},[11,13666,7421],{},[152,13668,13669],{"className":3444,"code":7424,"language":3446,"meta":158,"style":158},[160,13670,13671,13675,13679,13683],{"__ignoreMap":158},[417,13672,13673],{"class":419,"line":420},[417,13674,7431],{},[417,13676,13677],{"class":419,"line":578},[417,13678,981],{"emptyLinePlaceholder":732},[417,13680,13681],{"class":419,"line":596},[417,13682,7440],{},[417,13684,13685],{"class":419,"line":617},[417,13686,7445],{},[11,13688,13689,7450,13691,2208,13693,2208,13695,7460],{},[160,13690,7351],{},[160,13692,7453],{},[160,13694,7456],{},[160,13696,7459],{},[11,13698,7463,13699,7467],{},[160,13700,7466],{},[11,13702,7470,13703,7476],{},[176,13704,7475],{"href":7473,"rel":13705},[884],[35,13707,7480],{"id":7479},[11,13709,7483],{},[152,13711,13712],{"className":3444,"code":7486,"language":3446,"meta":158,"style":158},[160,13713,13714],{"__ignoreMap":158},[417,13715,13716],{"class":419,"line":420},[417,13717,7486],{},[11,13719,7495],{},[204,13721,13722,13726,13732,13736],{},[127,13723,13724,7502],{},[160,13725,7453],{},[127,13727,13728,7507,13730,7511],{},[160,13729,3694],{},[160,13731,7510],{},[127,13733,13734,7517],{},[160,13735,7516],{},[127,13737,7520],{},[11,13739,7523,13740,7526],{},[160,13741,7351],{},[35,13743,1180],{"id":1180},[204,13745,13746,13750,13752,13756,13760],{},[127,13747,13748,7535],{},[160,13749,7222],{},[127,13751,7538],{},[127,13753,13754,7543],{},[160,13755,7351],{},[127,13757,13758,7548],{},[160,13759,7351],{},[127,13761,7551],{},[11,13763,7554],{},[711,13765,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":13767},[13768,13769,13770,13771,13772],{"id":7197,"depth":578,"text":7198},{"id":7216,"depth":578,"text":7216},{"id":7344,"depth":578,"text":7345},{"id":7479,"depth":578,"text":7480},{"id":1180,"depth":578,"text":1180},{},{"title":7184,"description":7564},[4129],{"id":7574,"title":7575,"body":13777,"description":7987,"extension":730,"meta":14099,"navigation":732,"path":7989,"publishDate":7990,"published":732,"seo":14100,"stem":7992,"tags":14101,"thumbnail":7994,"updated":7995,"__hash__":7996},{"type":8,"value":13778,"toc":14091},[13779,13781,13785,13787,13791,13795,13797,13799,13803,13809,13811,13815,13819,13827,13829,13865,13869,13881,13883,13887,13901,13903,13935,13943,13957,13961,13963,13965,14005,14017,14025,14035,14041,14053,14055,14059,14085,14089],[11,13780,13],{},[11,13782,7582,13783,7585],{},[160,13784,7106],{},[35,13786,7589],{"id":7588},[11,13788,13789,7594],{},[160,13790,7106],{},[11,13792,7597,13793,7600],{},[160,13794,7106],{},[11,13796,7603],{},[35,13798,7606],{"id":7606},[11,13800,7609,13801,7612],{},[160,13802,7106],{},[204,13804,13805,13807],{},[127,13806,7617],{},[127,13808,7620],{},[35,13810,7617],{"id":7617},[11,13812,7625,13813,7628],{},[160,13814,7106],{},[11,13816,7631,13817,7634],{},[160,13818,6842],{},[152,13820,13821],{"className":3444,"code":7637,"language":3446,"meta":158,"style":158},[160,13822,13823],{"__ignoreMap":158},[417,13824,13825],{"class":419,"line":420},[417,13826,7637],{},[11,13828,7646],{},[152,13830,13831],{"className":3444,"code":7649,"language":3446,"meta":158,"style":158},[160,13832,13833,13837,13841,13845,13849,13853,13857,13861],{"__ignoreMap":158},[417,13834,13835],{"class":419,"line":420},[417,13836,6819],{},[417,13838,13839],{"class":419,"line":578},[417,13840,3645],{},[417,13842,13843],{"class":419,"line":596},[417,13844,7664],{},[417,13846,13847],{"class":419,"line":617},[417,13848,7669],{},[417,13850,13851],{"class":419,"line":623},[417,13852,3524],{},[417,13854,13855],{"class":419,"line":999},[417,13856,626],{},[417,13858,13859],{"class":419,"line":1004},[417,13860,981],{"emptyLinePlaceholder":732},[417,13862,13863],{"class":419,"line":1010},[417,13864,7686],{},[11,13866,7689,13867,7693],{},[160,13868,7692],{},[11,13870,13871,7699,13873,7702,13875,7705,13877,7702,13879,7712],{},[160,13872,7698],{},[160,13874,7106],{},[160,13876,6842],{},[160,13878,7708],{},[160,13880,7711],{},[35,13882,7620],{"id":7620},[11,13884,7717,13885,7720],{},[160,13886,7106],{},[204,13888,13889,13895],{},[127,13890,7725,13891,7728,13893,7732],{},[160,13892,7106],{},[160,13894,7731],{},[127,13896,7735,13897,7702,13899,7740],{},[160,13898,7106],{},[160,13900,3694],{},[11,13902,7743],{},[152,13904,13905],{"className":3444,"code":7746,"language":3446,"meta":158,"style":158},[160,13906,13907,13911,13915,13919,13923,13927,13931],{"__ignoreMap":158},[417,13908,13909],{"class":419,"line":420},[417,13910,7753],{},[417,13912,13913],{"class":419,"line":578},[417,13914,981],{"emptyLinePlaceholder":732},[417,13916,13917],{"class":419,"line":596},[417,13918,7762],{},[417,13920,13921],{"class":419,"line":617},[417,13922,7767],{},[417,13924,13925],{"class":419,"line":623},[417,13926,626],{},[417,13928,13929],{"class":419,"line":999},[417,13930,981],{"emptyLinePlaceholder":732},[417,13932,13933],{"class":419,"line":1004},[417,13934,7780],{},[11,13936,7783,13937,7786,13939,7790,13941,7693],{},[160,13938,7708],{},[160,13940,7789],{},[160,13942,7692],{},[1548,13944,13945],{},[11,13946,13947,1773,13949,7802,13951,7805,13953,7809,13955,7812],{},[160,13948,7799],{},[160,13950,4385],{},[160,13952,7731],{},[160,13954,7808],{},[160,13956,7731],{},[11,13958,7815,13959,7818],{},[160,13960,7106],{},[35,13962,7821],{"id":7821},[11,13964,7824],{},[152,13966,13967],{"className":3444,"code":7827,"language":3446,"meta":158,"style":158},[160,13968,13969,13973,13977,13981,13985,13989,13993,13997,14001],{"__ignoreMap":158},[417,13970,13971],{"class":419,"line":420},[417,13972,6819],{},[417,13974,13975],{"class":419,"line":578},[417,13976,3645],{},[417,13978,13979],{"class":419,"line":596},[417,13980,7664],{},[417,13982,13983],{"class":419,"line":617},[417,13984,7669],{},[417,13986,13987],{"class":419,"line":623},[417,13988,3524],{},[417,13990,13991],{"class":419,"line":999},[417,13992,626],{},[417,13994,13995],{"class":419,"line":1004},[417,13996,981],{"emptyLinePlaceholder":732},[417,13998,13999],{"class":419,"line":1010},[417,14000,7862],{},[417,14002,14003],{"class":419,"line":1016},[417,14004,7780],{},[11,14006,14007,7872,14009,7875,14011,7879,14013,2204,14015,7884],{},[160,14008,7871],{},[160,14010,7698],{},[160,14012,7878],{},[160,14014,7106],{},[160,14016,6842],{},[11,14018,7783,14019,7786,14021,2223,14023,7893],{},[160,14020,7106],{},[160,14022,7731],{},[160,14024,7789],{},[11,14026,7896,14027,7786,14029,7901,14031,7904,14033,7907],{},[160,14028,7106],{},[160,14030,3694],{},[160,14032,7708],{},[160,14034,3874],{},[11,14036,7910,14037,7914,14039,7917],{},[160,14038,7913],{},[160,14040,7106],{},[152,14042,14043],{"className":3444,"code":7920,"language":3446,"meta":158,"style":158},[160,14044,14045,14049],{"__ignoreMap":158},[417,14046,14047],{"class":419,"line":420},[417,14048,7927],{},[417,14050,14051],{"class":419,"line":578},[417,14052,7932],{},[35,14054,1180],{"id":1180},[11,14056,14057,7939],{},[160,14058,7106],{},[204,14060,14061,14069,14077,14079],{},[127,14062,14063,7946,14065,7702,14067,7732],{},[160,14064,7698],{},[160,14066,7106],{},[160,14068,6842],{},[127,14070,14071,7955,14073,7958,14075,7740],{},[160,14072,7878],{},[160,14074,7731],{},[160,14076,3694],{},[127,14078,7963],{},[127,14080,7966,14081,3360,14083,7971],{},[160,14082,7913],{},[160,14084,7106],{},[11,14086,14087,7976],{},[160,14088,7106],{},[711,14090,1213],{},{"title":158,"searchDepth":578,"depth":578,"links":14092},[14093,14094,14095,14096,14097,14098],{"id":7588,"depth":578,"text":7589},{"id":7606,"depth":578,"text":7606},{"id":7617,"depth":578,"text":7617},{"id":7620,"depth":578,"text":7620},{"id":7821,"depth":578,"text":7821},{"id":1180,"depth":578,"text":1180},{},{"title":7575,"description":7987},[4129],[14103,14119,14134,14151,14167,14184,14826],{"id":14104,"title":14105,"author":14106,"body":14107,"description":158,"extension":730,"meta":14111,"navigation":732,"path":14112,"publishDate":2804,"published":732,"publisher":14113,"seo":14114,"stem":14115,"tags":14116,"__hash__":14118},"books\u002Fbooks\u002F2026\u002Fnetwork-and-tcp-ip-basics-third-edition.md","スラスラわかるネットワーク＆TCP\u002FIPのきほん","リブロワークス",{"type":8,"value":14108,"toc":14109},[],{"title":158,"searchDepth":578,"depth":578,"links":14110},[],{},"\u002Fbooks\u002F2026\u002Fnetwork-and-tcp-ip-basics-third-edition","SBクリエイティブ",{"title":14105,"description":158},"books\u002F2026\u002Fnetwork-and-tcp-ip-basics-third-edition",[14117],"ネットワーク","xbhb-FmdB9ZUXSWhb6ZiW-gZhC-vBAHVIBUepRuVli8",{"id":14120,"title":14121,"author":14122,"body":14123,"description":158,"extension":730,"meta":14127,"navigation":732,"path":14128,"publishDate":14129,"published":732,"publisher":742,"seo":14130,"stem":14131,"tags":14132,"__hash__":14133},"books\u002Fbooks\u002F2026\u002Fcodex-cli-story-guide.md","ストーリーで覚えるCodex CLI入門","多佳宮崇志",{"type":8,"value":14124,"toc":14125},[],{"title":158,"searchDepth":578,"depth":578,"links":14126},[],{},"\u002Fbooks\u002F2026\u002Fcodex-cli-story-guide","2026-07-01",{"title":14121,"description":158},"books\u002F2026\u002Fcodex-cli-story-guide",[739,90],"PEgEg4PTkrDoxH9hQrqXYiZBJ67uDkx0IWREiaDBKPs",{"id":14135,"title":14136,"author":14137,"body":14138,"description":158,"extension":730,"meta":14142,"navigation":732,"path":14143,"publishDate":14144,"published":732,"publisher":14145,"seo":14146,"stem":14147,"tags":14148,"__hash__":14150},"books\u002Fbooks\u002F2026\u002Fdatabase-design-guide.md","達人に学ぶDB設計徹底指南書","ミック",{"type":8,"value":14139,"toc":14140},[],{"title":158,"searchDepth":578,"depth":578,"links":14141},[],{},"\u002Fbooks\u002F2026\u002Fdatabase-design-guide","2026-05-01","翔泳社",{"title":14136,"description":158},"books\u002F2026\u002Fdatabase-design-guide",[14149],"DB設計","OZjkZ3_sun4Iebo7nv_yIq3e-mN3Q4enB_x548F2n6E",{"id":14152,"title":14153,"author":14154,"body":14155,"description":158,"extension":730,"meta":14159,"navigation":732,"path":14160,"publishDate":14161,"published":732,"publisher":742,"seo":14162,"stem":14163,"tags":14164,"__hash__":14166},"books\u002Fbooks\u002F2025\u002Fdjango-rest-framework-textbook.md","現場で使える Django REST Framework の教科書［3.2 LTS 対応版］","横瀬明仁",{"type":8,"value":14156,"toc":14157},[],{"title":158,"searchDepth":578,"depth":578,"links":14158},[],{},"\u002Fbooks\u002F2025\u002Fdjango-rest-framework-textbook","2025-04-30",{"title":14153,"description":158},"books\u002F2025\u002Fdjango-rest-framework-textbook",[14165],"Django","PHo1FMxCs3EYdWF_zT1YpG5RxgBt1hTaxX5W8cHSb7Y",{"id":14168,"title":14169,"author":14170,"body":14171,"description":158,"extension":730,"meta":14175,"navigation":732,"path":14176,"publishDate":14177,"published":732,"publisher":14178,"seo":14179,"stem":14180,"tags":14181,"__hash__":14183},"books\u002Fbooks\u002F2025\u002Fweb-technology-for-professionals-revised-edition.md","［改訂新版］プロになるためのWeb技術入門","小森裕介",{"type":8,"value":14172,"toc":14173},[],{"title":158,"searchDepth":578,"depth":578,"links":14174},[],{},"\u002Fbooks\u002F2025\u002Fweb-technology-for-professionals-revised-edition","2025-03-31","技術評論社",{"title":14169,"description":158},"books\u002F2025\u002Fweb-technology-for-professionals-revised-edition",[14182],"Web","LNFLOzGXkq9b6hCTxytQFYlJnlvvorYY8OPjICfte9g",{"id":14185,"title":14186,"author":14106,"body":14187,"description":14817,"extension":730,"meta":14818,"navigation":732,"path":14819,"publishDate":14820,"published":732,"publisher":14821,"seo":14822,"stem":14823,"tags":14824,"__hash__":14825},"books\u002Fbooks\u002F2025\u002Forganize-learned-from-docker.md","Docker&仮想サーバー完全入門",{"type":8,"value":14188,"toc":14804},[14189,14197,14200,14204,14207,14210,14216,14220,14223,14269,14284,14287,14308,14311,14315,14321,14344,14354,14361,14366,14372,14385,14391,14399,14405,14448,14454,14479,14483,14490,14525,14531,14534,14537,14590,14593,14600,14614,14617,14634,14644,14668,14671,14678,14692,14703,14722,14734,14738,14741,14748,14754,14757,14760,14762,14765,14768,14798,14801],[11,14190,14191,14192,14196],{},"『",[176,14193,14186],{"href":14194,"rel":14195},"https:\u002F\u002Fbook.impress.co.jp\u002Fbooks\u002F1121101138",[884],"』を読了したため、本書を通して学んだことをまとめます。",[11,14198,14199],{},"まだ1周目で理解が浅い部分もあるため、Dockerを実際に使いながら必要に応じて追記していきます。",[35,14201,14203],{"id":14202},"dockerでホスト環境への影響を抑える","Dockerでホスト環境への影響を抑える",[11,14205,14206],{},"Dockerを利用すると、アプリケーションに必要なランタイムやライブラリをコンテナ内にまとめられます。",[11,14208,14209],{},"ホストOSへ依存関係を直接インストールする場面を減らせるため、開発環境を整理しやすくなります。また、DockerfileやComposeファイルを共有することで、チーム内で環境を再現しやすくなります。",[1764,14211,14213],{"title":14212,"type":1767},"ホストOSから完全に独立するわけではない",[11,14214,14215],{},"コンテナはホストのカーネルやDocker Engineを利用します。ボリューム、ポート、CPUアーキテクチャなど、ホスト環境との接点がなくなるわけではありません。",[35,14217,14219],{"id":14218},"dockerコマンドで操作対象を明示する","Dockerコマンドで操作対象を明示する",[11,14221,14222],{},"Docker CLIには、操作対象を含めて記述するコマンドがあります。",[152,14224,14226],{"className":1318,"code":14225,"language":1320,"meta":158,"style":158},"docker container run nginx\ndocker image pull nginx\ndocker volume ls\ndocker network ls\n",[160,14227,14228,14241,14251,14260],{"__ignoreMap":158},[417,14229,14230,14232,14235,14238],{"class":419,"line":420},[417,14231,1475],{"class":423},[417,14233,14234],{"class":427}," container",[417,14236,14237],{"class":427}," run",[417,14239,14240],{"class":427}," nginx\n",[417,14242,14243,14245,14247,14249],{"class":419,"line":578},[417,14244,1475],{"class":423},[417,14246,3184],{"class":427},[417,14248,2445],{"class":427},[417,14250,14240],{"class":427},[417,14252,14253,14255,14257],{"class":419,"line":596},[417,14254,1475],{"class":423},[417,14256,3284],{"class":427},[417,14258,14259],{"class":427}," ls\n",[417,14261,14262,14264,14267],{"class":419,"line":617},[417,14263,1475],{"class":423},[417,14265,14266],{"class":427}," network",[417,14268,14259],{"class":427},[11,14270,14271,2208,14274,2208,14277,2208,14280,14283],{},[160,14272,14273],{},"container",[160,14275,14276],{},"image",[160,14278,14279],{},"volume",[160,14281,14282],{},"network","のように対象が明示されるため、何を操作するコマンドなのか把握しやすくなります。",[11,14285,14286],{},"一方で、次の短い形式も現在利用できます。",[152,14288,14290],{"className":1318,"code":14289,"language":1320,"meta":158,"style":158},"docker run nginx\ndocker pull nginx\n",[160,14291,14292,14300],{"__ignoreMap":158},[417,14293,14294,14296,14298],{"class":419,"line":420},[417,14295,1475],{"class":423},[417,14297,14237],{"class":427},[417,14299,14240],{"class":427},[417,14301,14302,14304,14306],{"class":419,"line":578},[417,14303,1475],{"class":423},[417,14305,2445],{"class":427},[417,14307,14240],{"class":427},[11,14309,14310],{},"短い形式を古いという理由だけで避ける必要はありません。学習時には対象を含む形式も知っておくと、CLIの構造を理解しやすいと感じました。",[35,14312,14314],{"id":14313},"docker-compose-v2を利用する","Docker Compose V2を利用する",[11,14316,14317,14318,3835],{},"現在のCompose CLIでは、ハイフンのない",[160,14319,14320],{},"docker compose",[152,14322,14324],{"className":1318,"code":14323,"language":1320,"meta":158,"style":158},"docker compose up\ndocker compose down\n",[160,14325,14326,14335],{"__ignoreMap":158},[417,14327,14328,14330,14332],{"class":419,"line":420},[417,14329,1475],{"class":423},[417,14331,1478],{"class":427},[417,14333,14334],{"class":427}," up\n",[417,14336,14337,14339,14341],{"class":419,"line":578},[417,14338,1475],{"class":423},[417,14340,1478],{"class":427},[417,14342,14343],{"class":427}," down\n",[11,14345,14346,14347,14350,14351,14353],{},"旧Compose V1で使われていた",[160,14348,14349],{},"docker-compose","とはコマンド形式が異なります。Docker DesktopにはCompose CLIが含まれているため、基本的には",[160,14352,14320],{},"を利用します。",[35,14355,14357,14358,4079],{"id":14356},"composeファイルはcomposeyamlを使う","Composeファイルは",[160,14359,14360],{},"compose.yaml",[11,14362,14363,14364,874],{},"Composeファイルの推奨ファイル名は",[160,14365,14360],{},[152,14367,14370],{"className":14368,"code":14369,"language":157,"meta":158},[155],"compose.yaml\n",[160,14371,14369],{"__ignoreMap":158},[11,14373,14374,14377,14378,3571,14381,14384],{},[160,14375,14376],{},"compose.yml","も利用できます。また、",[160,14379,14380],{},"docker-compose.yaml",[160,14382,14383],{},"docker-compose.yml","も後方互換性のためサポートされています。",[11,14386,14387,14388,14390],{},"複数の候補が同じ場所にある場合は",[160,14389,14360],{},"が優先されるため、新しく作る場合はこの名前へ揃えると分かりやすくなります。",[35,14392,14394,14395,14398],{"id":14393},"トップレベルのversionは不要","トップレベルの",[160,14396,14397],{},"version","は不要",[11,14400,14401,14402,14404],{},"以前のComposeファイルでは、先頭に次のような",[160,14403,14397],{},"を書く例がありました。",[152,14406,14408],{"className":1389,"code":14407,"language":1391,"meta":158,"style":158},"version: '3'\n\nservices:\n  web:\n    image: nginx\n",[160,14409,14410,14422,14426,14432,14439],{"__ignoreMap":158},[417,14411,14412,14414,14416,14418,14420],{"class":419,"line":420},[417,14413,14397],{"class":1398},[417,14415,590],{"class":500},[417,14417,501],{"class":500},[417,14419,852],{"class":427},[417,14421,507],{"class":500},[417,14423,14424],{"class":419,"line":578},[417,14425,981],{"emptyLinePlaceholder":732},[417,14427,14428,14430],{"class":419,"line":596},[417,14429,1399],{"class":1398},[417,14431,1402],{"class":500},[417,14433,14434,14437],{"class":419,"line":617},[417,14435,14436],{"class":1398},"  web",[417,14438,1402],{"class":500},[417,14440,14441,14444,14446],{"class":419,"line":623},[417,14442,14443],{"class":1398},"    image",[417,14445,590],{"class":500},[417,14447,14240],{"class":427},[11,14449,14450,14451,14453],{},"現在、トップレベルの",[160,14452,14397],{},"は後方互換性のために残されたobsoleteな項目です。指定してもComposeは最新のスキーマでファイルを検証するため、新しいComposeファイルでは省略します。",[152,14455,14457],{"className":1389,"code":14456,"language":1391,"meta":158,"style":158},"services:\n  web:\n    image: nginx\n",[160,14458,14459,14465,14471],{"__ignoreMap":158},[417,14460,14461,14463],{"class":419,"line":420},[417,14462,1399],{"class":1398},[417,14464,1402],{"class":500},[417,14466,14467,14469],{"class":419,"line":578},[417,14468,14436],{"class":1398},[417,14470,1402],{"class":500},[417,14472,14473,14475,14477],{"class":419,"line":596},[417,14474,14443],{"class":1398},[417,14476,590],{"class":500},[417,14478,14240],{"class":427},[35,14480,14482],{"id":14481},"restart-policyは用途に合わせて設定する","restart policyは用途に合わせて設定する",[11,14484,14485,14486,14489],{},"Composeのサービスには、コンテナを再起動する条件を",[160,14487,14488],{},"restart","で設定できます。",[152,14491,14493],{"className":1389,"code":14492,"language":1391,"meta":158,"style":158},"services:\n  web:\n    image: nginx\n    restart: always\n",[160,14494,14495,14501,14507,14515],{"__ignoreMap":158},[417,14496,14497,14499],{"class":419,"line":420},[417,14498,1399],{"class":1398},[417,14500,1402],{"class":500},[417,14502,14503,14505],{"class":419,"line":578},[417,14504,14436],{"class":1398},[417,14506,1402],{"class":500},[417,14508,14509,14511,14513],{"class":419,"line":596},[417,14510,14443],{"class":1398},[417,14512,590],{"class":500},[417,14514,14240],{"class":427},[417,14516,14517,14520,14522],{"class":419,"line":617},[417,14518,14519],{"class":1398},"    restart",[417,14521,590],{"class":500},[417,14523,14524],{"class":427}," always\n",[11,14526,14527,14530],{},[160,14528,14529],{},"always","を指定したコンテナは、停止した場合やDockerデーモンが再起動した場合に再起動されます。",[11,14532,14533],{},"常時稼働が必要なサービスでは便利ですが、学習用コンテナへ一律に指定すると、Docker起動時に意図しないコンテナまで立ち上がることがあります。必要性を考えて設定することが大切です。",[11,14535,14536],{},"主なrestart policyには次があります。",[43,14538,14539,14549],{},[46,14540,14541],{},[49,14542,14543,14546],{},[52,14544,14545],{},"値",[52,14547,14548],{},"動作",[59,14550,14551,14561,14571,14580],{},[49,14552,14553,14558],{},[64,14554,14555],{},[160,14556,14557],{},"no",[64,14559,14560],{},"自動的に再起動しない",[49,14562,14563,14568],{},[64,14564,14565],{},[160,14566,14567],{},"on-failure",[64,14569,14570],{},"エラー終了した場合に再起動する",[49,14572,14573,14577],{},[64,14574,14575],{},[160,14576,14529],{},[64,14578,14579],{},"停止した場合に常に再起動する",[49,14581,14582,14587],{},[64,14583,14584],{},[160,14585,14586],{},"unless-stopped",[64,14588,14589],{},"明示的に停止されていない限り再起動する",[35,14591,14592],{"id":14592},"コンテナのログを確認する",[11,14594,14595,14596,14599],{},"Composeで起動したサービスのログは",[160,14597,14598],{},"docker compose logs","で確認できます。",[152,14601,14603],{"className":1318,"code":14602,"language":1320,"meta":158,"style":158},"docker compose logs\n",[160,14604,14605],{"__ignoreMap":158},[417,14606,14607,14609,14611],{"class":419,"line":420},[417,14608,1475],{"class":423},[417,14610,1478],{"class":427},[417,14612,14613],{"class":427}," logs\n",[11,14615,14616],{},"サービスを指定すると、対象のログだけを表示できます。",[152,14618,14620],{"className":1318,"code":14619,"language":1320,"meta":158,"style":158},"docker compose logs web\n",[160,14621,14622],{"__ignoreMap":158},[417,14623,14624,14626,14628,14631],{"class":419,"line":420},[417,14625,1475],{"class":423},[417,14627,1478],{"class":427},[417,14629,14630],{"class":427}," logs",[417,14632,14633],{"class":427}," web\n",[11,14635,14636,14637,14640,14641,3835],{},"ログを継続して追いかける場合は",[160,14638,14639],{},"--follow","、末尾の行数を限定する場合は",[160,14642,14643],{},"--tail",[152,14645,14647],{"className":1318,"code":14646,"language":1320,"meta":158,"style":158},"docker compose logs --follow --tail 100 web\n",[160,14648,14649],{"__ignoreMap":158},[417,14650,14651,14653,14655,14657,14660,14663,14666],{"class":419,"line":420},[417,14652,1475],{"class":423},[417,14654,1478],{"class":427},[417,14656,14630],{"class":427},[417,14658,14659],{"class":427}," --follow",[417,14661,14662],{"class":427}," --tail",[417,14664,14665],{"class":1419}," 100",[417,14667,14633],{"class":427},[35,14669,14670],{"id":14670},"イメージを再ビルドする",[11,14672,14673,14674,14677],{},"Composeでイメージをビルドするには",[160,14675,14676],{},"docker compose build","を使います。",[152,14679,14681],{"className":1318,"code":14680,"language":1320,"meta":158,"style":158},"docker compose build\n",[160,14682,14683],{"__ignoreMap":158},[417,14684,14685,14687,14689],{"class":419,"line":420},[417,14686,1475],{"class":423},[417,14688,1478],{"class":427},[417,14690,14691],{"class":427}," build\n",[11,14693,14694,14695,14698,14699,14702],{},"コンテナの起動前にビルドも実行したい場合は、",[160,14696,14697],{},"docker compose up","へ",[160,14700,14701],{},"--build","を付けられます。",[152,14704,14706],{"className":1318,"code":14705,"language":1320,"meta":158,"style":158},"docker compose up --detach --build\n",[160,14707,14708],{"__ignoreMap":158},[417,14709,14710,14712,14714,14716,14719],{"class":419,"line":420},[417,14711,1475],{"class":423},[417,14713,1478],{"class":427},[417,14715,1481],{"class":427},[417,14717,14718],{"class":427}," --detach",[417,14720,14721],{"class":427}," --build\n",[11,14723,14724,14726,14727,3691,14730,14733],{},[160,14725,14697],{},"は、サービスの設定やイメージが変更されている場合にコンテナを再作成します。ただし、Dockerfileやビルド対象を確実に再ビルドしてから起動したい場合は、",[160,14728,14729],{},"build",[160,14731,14732],{},"up --build","を明示すると意図が分かりやすくなります。",[35,14735,14737],{"id":14736},"dev-containerで開発環境をコンテナ化する","Dev Containerで開発環境をコンテナ化する",[11,14739,14740],{},"VS CodeのDev Containers拡張機能を使うと、コンテナを開発環境として利用できます。",[11,14742,14743,14744,14747],{},"プロジェクト内の",[160,14745,14746],{},".devcontainer\u002Fdevcontainer.json","へ設定を記述し、コンテナ内のランタイム、ツール、VS Code拡張機能などを揃えられます。",[152,14749,14752],{"className":14750,"code":14751,"language":157,"meta":158},[155],".devcontainer\u002F\n  devcontainer.json\n",[160,14753,14751],{"__ignoreMap":158},[11,14755,14756],{},"ソースコードをコンテナへマウントし、ターミナル、補完、コードナビゲーション、デバッグなどを普段のVS Codeと近い操作感で利用できます。",[11,14758,14759],{},"環境構築手順を文章だけで共有するよりも、実行環境そのものを設定として共有できる点が便利だと感じました。",[35,14761,1180],{"id":1180},[11,14763,14764],{},"本書を通して、Dockerの基本操作だけでなく、Composeによる複数コンテナの管理や、開発環境をコンテナ化する考え方を学べました。",[11,14766,14767],{},"特に、次の点を今後の開発でも意識したいです。",[204,14769,14770,14773,14778,14783,14789,14792,14795],{},[127,14771,14772],{},"Docker CLIで何を操作しているか理解する",[127,14774,14775,14776,4079],{},"Compose V2の",[160,14777,14320],{},[127,14779,14357,14780,14782],{},[160,14781,14360],{},"へ揃える",[127,14784,14785,14786,14788],{},"不要な",[160,14787,14397],{},"を記述しない",[127,14790,14791],{},"restart policyを用途に合わせて設定する",[127,14793,14794],{},"ログ確認と再ビルドのコマンドを使い分ける",[127,14796,14797],{},"Dev Containerで再現可能な開発環境を試す",[11,14799,14800],{},"Dockerはコマンドを覚えるだけでなく、イメージ、コンテナ、ボリューム、ネットワークの関係を実際に操作しながら理解していきたいです。",[711,14802,14803],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":158,"searchDepth":578,"depth":578,"links":14805},[14806,14807,14808,14809,14811,14812,14813,14814,14815,14816],{"id":14202,"depth":578,"text":14203},{"id":14218,"depth":578,"text":14219},{"id":14313,"depth":578,"text":14314},{"id":14356,"depth":578,"text":14810},"Composeファイルはcompose.yamlを使う",{"id":14393,"depth":578,"text":14393},{"id":14481,"depth":578,"text":14482},{"id":14592,"depth":578,"text":14592},{"id":14670,"depth":578,"text":14670},{"id":14736,"depth":578,"text":14737},{"id":1180,"depth":578,"text":1180},"『Docker&仮想サーバー完全入門』を読了したため、本書を通して学んだことをまとめます。",{},"\u002Fbooks\u002F2025\u002Forganize-learned-from-docker","2025-02-22","インプレス",{"title":14186,"description":14817},"books\u002F2025\u002Forganize-learned-from-docker",[2129],"tZTXcHlrKtyN5T4H4BpRH6Dc272-Srw05uyFSfG7w5Q",{"id":14827,"title":14828,"author":14829,"body":14830,"description":158,"extension":730,"meta":14834,"navigation":732,"path":14835,"publishDate":14836,"published":732,"publisher":14837,"seo":14838,"stem":14839,"tags":14840,"__hash__":14841},"books\u002Fbooks\u002F2024\u002Fhow-networks-connect-second-edition.md","ネットワークはなぜつながるのか　第２版","戸根勤",{"type":8,"value":14831,"toc":14832},[],{"title":158,"searchDepth":578,"depth":578,"links":14833},[],{},"\u002Fbooks\u002F2024\u002Fhow-networks-connect-second-edition","2024-05-31","日経BP",{"title":14828,"description":158},"books\u002F2024\u002Fhow-networks-connect-second-edition",[14117],"SIuIZbtr-w2AzFZh6gTb7u043lu97IMLINksxROAke0",1789994574916]