[{"data":1,"prerenderedAt":615},["ShallowReactive",2],{"navigation_docs":3,"-frontend-js-loading":190,"-frontend-js-loading-surround":610},[4,136,150,183],{"title":5,"path":6,"stem":7,"children":8},"Frontend","\u002Ffrontend","1.frontend",[9,13,39,76,109,130],{"title":10,"path":6,"stem":11,"order":12},"フロントエンド ガイドライン","1.frontend\u002Findex",1,{"title":14,"path":15,"stem":16,"children":17},"HTML","\u002Ffrontend\u002Fhtml","1.frontend\u002F1.html\u002Findex",[18,19,23,27,31,35],{"title":14,"path":15,"stem":16},{"title":20,"path":21,"stem":22},"コードスタイル","\u002Ffrontend\u002Fhtml\u002Fcode-style","1.frontend\u002F1.html\u002Fcode-style",{"title":24,"path":25,"stem":26},"見出しタグ","\u002Ffrontend\u002Fhtml\u002Fheading","1.frontend\u002F1.html\u002Fheading",{"title":28,"path":29,"stem":30},"img タグ","\u002Ffrontend\u002Fhtml\u002Fimg","1.frontend\u002F1.html\u002Fimg",{"title":32,"path":33,"stem":34},"パスとリンク","\u002Ffrontend\u002Fhtml\u002Flink","1.frontend\u002F1.html\u002Flink",{"title":36,"path":37,"stem":38},"品質管理","\u002Ffrontend\u002Fhtml\u002Fquality","1.frontend\u002F1.html\u002Fquality",{"title":40,"path":41,"stem":42,"children":43},"CSS","\u002Ffrontend\u002Fcss","1.frontend\u002F2.css\u002Findex",[44,45,49,52,56,60,64,68,72],{"title":40,"path":41,"stem":42},{"title":46,"path":47,"stem":48},"命名規則・コンポーネント設計","\u002Ffrontend\u002Fcss\u002Farchitecture","1.frontend\u002F2.css\u002Farchitecture",{"title":20,"path":50,"stem":51},"\u002Ffrontend\u002Fcss\u002Fcode-style","1.frontend\u002F2.css\u002Fcode-style",{"title":53,"path":54,"stem":55},"Web フォント","\u002Ffrontend\u002Fcss\u002Ffonts","1.frontend\u002F2.css\u002Ffonts",{"title":57,"path":58,"stem":59},"記述順番","\u002Ffrontend\u002Fcss\u002Forder","1.frontend\u002F2.css\u002Forder",{"title":61,"path":62,"stem":63},"プロパティのルール","\u002Ffrontend\u002Fcss\u002Fproperties","1.frontend\u002F2.css\u002Fproperties",{"title":65,"path":66,"stem":67},"Tailwind CSS","\u002Ffrontend\u002Fcss\u002Ftailwind","1.frontend\u002F2.css\u002Ftailwind",{"title":69,"path":70,"stem":71},"値のルール","\u002Ffrontend\u002Fcss\u002Fvalues","1.frontend\u002F2.css\u002Fvalues",{"title":73,"path":74,"stem":75},"CSS 変数（カスタムプロパティ）","\u002Ffrontend\u002Fcss\u002Fvariables","1.frontend\u002F2.css\u002Fvariables",{"title":77,"path":78,"stem":79,"children":80},"JavaScript","\u002Ffrontend\u002Fjs","1.frontend\u002F3.js\u002Findex",[81,82,85,89,93,97,101,105],{"title":77,"path":78,"stem":79},{"title":20,"path":83,"stem":84},"\u002Ffrontend\u002Fjs\u002Fcode-style","1.frontend\u002F3.js\u002Fcode-style",{"title":86,"path":87,"stem":88},"エラーハンドリング","\u002Ffrontend\u002Fjs\u002Ferror-handling","1.frontend\u002F3.js\u002Ferror-handling",{"title":90,"path":91,"stem":92},"ライブラリの利用","\u002Ffrontend\u002Fjs\u002Flibraries","1.frontend\u002F3.js\u002Flibraries",{"title":94,"path":95,"stem":96},"HTML への読み込み","\u002Ffrontend\u002Fjs\u002Floading","1.frontend\u002F3.js\u002Floading",{"title":98,"path":99,"stem":100},"モジュール","\u002Ffrontend\u002Fjs\u002Fmodule-structure","1.frontend\u002F3.js\u002Fmodule-structure",{"title":102,"path":103,"stem":104},"命名規則","\u002Ffrontend\u002Fjs\u002Fnaming","1.frontend\u002F3.js\u002Fnaming",{"title":106,"path":107,"stem":108},"パフォーマンス最適化","\u002Ffrontend\u002Fjs\u002Fperformance","1.frontend\u002F3.js\u002Fperformance",{"title":110,"path":111,"stem":112,"children":113},"画像・メディアリソースガイドライン","\u002Ffrontend\u002Fmedia","1.frontend\u002F4.media\u002Findex",[114,115,119,123,127],{"title":110,"path":111,"stem":112},{"title":116,"path":117,"stem":118},"アクセシビリティ","\u002Ffrontend\u002Fmedia\u002Faccessibility","1.frontend\u002F4.media\u002Faccessibility",{"title":120,"path":121,"stem":122},"画像フォーマット","\u002Ffrontend\u002Fmedia\u002Fformats","1.frontend\u002F4.media\u002Fformats",{"title":124,"path":125,"stem":126},"ファイル命名規則","\u002Ffrontend\u002Fmedia\u002Fnaming","1.frontend\u002F4.media\u002Fnaming",{"title":106,"path":128,"stem":129},"\u002Ffrontend\u002Fmedia\u002Foptimization","1.frontend\u002F4.media\u002Foptimization",{"title":131,"path":132,"stem":133,"children":134},"開発環境テンプレート","\u002Ffrontend\u002Fenvironment","1.frontend\u002F5.environment\u002Findex",[135],{"title":131,"path":132,"stem":133},{"title":137,"path":138,"stem":139,"children":140,"page":149},"Deploy Release","\u002Fdeploy-release","2.deploy-release",[141,145],{"title":142,"path":143,"stem":144},"デプロイ","\u002Fdeploy-release\u002Fdeploy","2.deploy-release\u002Fdeploy",{"title":146,"path":147,"stem":148},"リリース","\u002Fdeploy-release\u002Frelease","2.deploy-release\u002Frelease",false,{"title":151,"path":152,"stem":153,"children":154},"Git","\u002Fgit","3.git",[155,159,163,167,171,175,179],{"title":156,"path":152,"stem":157,"order":158},"Git ガイドライン","3.git\u002Findex",3,{"title":160,"path":161,"stem":162},"ブランチ戦略","\u002Fgit\u002Fbranch","3.git\u002Fbranch",{"title":164,"path":165,"stem":166},"CI\u002FCD運用","\u002Fgit\u002Fcicd","3.git\u002Fcicd",{"title":168,"path":169,"stem":170},"コミットメッセージとタグ","\u002Fgit\u002Fmessage","3.git\u002Fmessage",{"title":172,"path":173,"stem":174},"Pull Request運用","\u002Fgit\u002Fpull-request","3.git\u002Fpull-request",{"title":176,"path":177,"stem":178},"リポジトリ運用","\u002Fgit\u002Frepository","3.git\u002Frepository",{"title":180,"path":181,"stem":182},"GitHub権限・セキュリティ","\u002Fgit\u002Fsecurity","3.git\u002Fsecurity",{"title":184,"path":185,"stem":186,"children":187,"order":189},"AI 利用ガイドライン","\u002Fai","4.ai\u002Findex",[188],{"title":184,"path":185,"stem":186,"order":189},4,{"id":191,"title":94,"body":192,"description":604,"extension":605,"links":606,"meta":607,"navigation":545,"path":95,"seo":608,"stem":96,"__hash__":609},"docs\u002F1.frontend\u002F3.js\u002Floading.md",{"type":193,"value":194,"toc":599},"minimark",[195,212,217,223,301,305,311,383,418,421,427,595],[196,197,198,199,203,204,207,208,211],"p",{},"スクリプトの読み込み時、",[200,201,202],"code",{},"\u003Chead>"," タグ内で ",[200,205,206],{},"defer"," 属性や ",[200,209,210],{},"type=\"module\""," を活用することで、パフォーマンスを損なわずにスクリプトを読み込めます。",[213,214,216],"h3",{"id":215},"モジュール方式推奨","モジュール方式（推奨）",[196,218,219,220,222],{},"ES6 モジュールを利用する場合は、",[200,221,210],{}," を指定して読み込みます。これにより、スクリプトは自動的に遅延実行され、依存関係も管理しやすくなります。",[224,225,230],"pre",{"className":226,"code":227,"language":228,"meta":229,"style":229},"language-html shiki shiki-themes github-light material-theme material-theme-palenight","\u003Chead>\n  \u003Cscript type=\"module\" src=\"\u002Fassets\u002Fjs\u002Fmain.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n","html","",[200,231,232,247,292],{"__ignoreMap":229},[233,234,236,240,244],"span",{"class":235,"line":12},"line",[233,237,239],{"class":238},"sN50r","\u003C",[233,241,243],{"class":242},"sF3G6","head",[233,245,246],{"class":238},">\n",[233,248,250,253,256,260,263,267,271,273,276,278,280,283,285,288,290],{"class":235,"line":249},2,[233,251,252],{"class":238},"  \u003C",[233,254,255],{"class":242},"script",[233,257,259],{"class":258},"sAjK8"," type",[233,261,262],{"class":238},"=",[233,264,266],{"class":265},"ssQ5U","\"",[233,268,270],{"class":269},"scigg","module",[233,272,266],{"class":265},[233,274,275],{"class":258}," src",[233,277,262],{"class":238},[233,279,266],{"class":265},[233,281,282],{"class":269},"\u002Fassets\u002Fjs\u002Fmain.js",[233,284,266],{"class":265},[233,286,287],{"class":238},">\u003C\u002F",[233,289,255],{"class":242},[233,291,246],{"class":238},[233,293,294,297,299],{"class":235,"line":158},[233,295,296],{"class":238},"\u003C\u002F",[233,298,243],{"class":242},[233,300,246],{"class":238},[213,302,304],{"id":303},"defer-属性を使用","defer 属性を使用",[196,306,307,308,310],{},"従来のスクリプトを利用する場合は、",[200,309,206],{}," 属性を付与することで HTML のパースを妨げずにスクリプトを読み込めます。",[224,312,314],{"className":226,"code":313,"language":228,"meta":229,"style":229},"\u003Chead>\n  \u003Cscript defer src=\"\u002Fassets\u002Fjs\u002Fcommon.js\">\u003C\u002Fscript>\n  \u003Cscript defer src=\"\u002Fassets\u002Fjs\u002Fpage-specific.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n",[200,315,316,324,350,375],{"__ignoreMap":229},[233,317,318,320,322],{"class":235,"line":12},[233,319,239],{"class":238},[233,321,243],{"class":242},[233,323,246],{"class":238},[233,325,326,328,330,333,335,337,339,342,344,346,348],{"class":235,"line":249},[233,327,252],{"class":238},[233,329,255],{"class":242},[233,331,332],{"class":258}," defer",[233,334,275],{"class":258},[233,336,262],{"class":238},[233,338,266],{"class":265},[233,340,341],{"class":269},"\u002Fassets\u002Fjs\u002Fcommon.js",[233,343,266],{"class":265},[233,345,287],{"class":238},[233,347,255],{"class":242},[233,349,246],{"class":238},[233,351,352,354,356,358,360,362,364,367,369,371,373],{"class":235,"line":158},[233,353,252],{"class":238},[233,355,255],{"class":242},[233,357,332],{"class":258},[233,359,275],{"class":258},[233,361,262],{"class":238},[233,363,266],{"class":265},[233,365,366],{"class":269},"\u002Fassets\u002Fjs\u002Fpage-specific.js",[233,368,266],{"class":265},[233,370,287],{"class":238},[233,372,255],{"class":242},[233,374,246],{"class":238},[233,376,377,379,381],{"class":235,"line":189},[233,378,296],{"class":238},[233,380,243],{"class":242},[233,382,246],{"class":238},[384,385,386,389],"tip",{},[196,387,388],{},"defer 属性の利点",[390,391,392,400,406,412],"ul",{},[393,394,395,399],"li",{},[396,397,398],"strong",{},"HTML パース中断なし","：HTML の解析を中断せずにスクリプトをダウンロード",[393,401,402,405],{},[396,403,404],{},"実行順序保証","：記述順序通りにスクリプトが実行される",[393,407,408,411],{},[396,409,410],{},"DOMContentLoaded 前実行","：DOM 構築完了後、DOMContentLoaded イベント前に実行",[393,413,414,417],{},[396,415,416],{},"パフォーマンス向上","：ページの読み込み速度が向上",[213,419,420],{"id":420},"例外的なケース",[196,422,423,424,426],{},"一部のケースでは、即座に実行したいスクリプトや初期化処理が必要な場合があります。その場合は、インラインスクリプトや ",[200,425,206],{}," を使わない読み込みも検討します。",[224,428,430],{"className":226,"code":429,"language":228,"meta":229,"style":229},"\u003C!-- インライン初期化スクリプト（最小限に） -->\n\u003Chead>\n  \u003Cscript>\n    \u002F\u002F 重要な初期設定のみ\n    window.APP_CONFIG = {\n      apiUrl: \"\u002Fapi\",\n      debug: false,\n    };\n  \u003C\u002Fscript>\n\u003C\u002Fhead>\n\n\u003C!-- 外部ライブラリで即座の実行が必要な場合 -->\n\u003Chead>\n  \u003Cscript src=\"\u002Fassets\u002Fvendor\u002Fcritical-lib.js\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n",[200,431,432,438,446,454,459,480,501,515,521,531,540,547,553,562,586],{"__ignoreMap":229},[233,433,434],{"class":235,"line":12},[233,435,437],{"class":436},"su8Ar","\u003C!-- インライン初期化スクリプト（最小限に） -->\n",[233,439,440,442,444],{"class":235,"line":249},[233,441,239],{"class":238},[233,443,243],{"class":242},[233,445,246],{"class":238},[233,447,448,450,452],{"class":235,"line":158},[233,449,252],{"class":238},[233,451,255],{"class":242},[233,453,246],{"class":238},[233,455,456],{"class":235,"line":189},[233,457,458],{"class":436},"    \u002F\u002F 重要な初期設定のみ\n",[233,460,462,466,469,473,477],{"class":235,"line":461},5,[233,463,465],{"class":464},"sKuZN","    window",[233,467,468],{"class":238},".",[233,470,472],{"class":471},"s_GZX","APP_CONFIG",[233,474,476],{"class":475},"sSBoF"," =",[233,478,479],{"class":238}," {\n",[233,481,483,487,490,493,496,498],{"class":235,"line":482},6,[233,484,486],{"class":485},"sbBtD","      apiUrl",[233,488,489],{"class":238},":",[233,491,492],{"class":265}," \"",[233,494,495],{"class":269},"\u002Fapi",[233,497,266],{"class":265},[233,499,500],{"class":238},",\n",[233,502,504,507,509,513],{"class":235,"line":503},7,[233,505,506],{"class":485},"      debug",[233,508,489],{"class":238},[233,510,512],{"class":511},"s1f5w"," false",[233,514,500],{"class":238},[233,516,518],{"class":235,"line":517},8,[233,519,520],{"class":238},"    };\n",[233,522,524,527,529],{"class":235,"line":523},9,[233,525,526],{"class":238},"  \u003C\u002F",[233,528,255],{"class":242},[233,530,246],{"class":238},[233,532,534,536,538],{"class":235,"line":533},10,[233,535,296],{"class":238},[233,537,243],{"class":242},[233,539,246],{"class":238},[233,541,543],{"class":235,"line":542},11,[233,544,546],{"emptyLinePlaceholder":545},true,"\n",[233,548,550],{"class":235,"line":549},12,[233,551,552],{"class":436},"\u003C!-- 外部ライブラリで即座の実行が必要な場合 -->\n",[233,554,556,558,560],{"class":235,"line":555},13,[233,557,239],{"class":238},[233,559,243],{"class":242},[233,561,246],{"class":238},[233,563,565,567,569,571,573,575,578,580,582,584],{"class":235,"line":564},14,[233,566,252],{"class":238},[233,568,255],{"class":242},[233,570,275],{"class":258},[233,572,262],{"class":238},[233,574,266],{"class":265},[233,576,577],{"class":269},"\u002Fassets\u002Fvendor\u002Fcritical-lib.js",[233,579,266],{"class":265},[233,581,287],{"class":238},[233,583,255],{"class":242},[233,585,246],{"class":238},[233,587,589,591,593],{"class":235,"line":588},15,[233,590,296],{"class":238},[233,592,243],{"class":242},[233,594,246],{"class":238},[596,597,598],"style",{},"html pre.shiki code .sN50r, html code.shiki .sN50r{--shiki-light:#24292E;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sF3G6, html code.shiki .sF3G6{--shiki-light:#22863A;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sAjK8, html code.shiki .sAjK8{--shiki-light:#6F42C1;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .ssQ5U, html code.shiki .ssQ5U{--shiki-light:#032F62;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .scigg, html code.shiki .scigg{--shiki-light:#032F62;--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 .su8Ar, html code.shiki .su8Ar{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sKuZN, html code.shiki .sKuZN{--shiki-light:#24292E;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s_GZX, html code.shiki .s_GZX{--shiki-light:#005CC5;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sSBoF, html code.shiki .sSBoF{--shiki-light:#D73A49;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbBtD, html code.shiki .sbBtD{--shiki-light:#24292E;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s1f5w, html code.shiki .s1f5w{--shiki-light:#005CC5;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":229,"searchDepth":249,"depth":249,"links":600},[601,602,603],{"id":215,"depth":158,"text":216},{"id":303,"depth":158,"text":304},{"id":420,"depth":158,"text":420},"type=\"module\"とdefer属性によるスクリプト読み込みのベストプラクティス","md",null,{},{"title":94,"description":604},"tF1r3Pw5n1BsISwovThd8eiqln8JVEQ6_Kg8d1kLeBQ",[611,613],{"title":90,"path":91,"stem":92,"description":612,"children":-1},"外部ライブラリの選定基準、推奨ライブラリ、管理ルール",{"title":98,"path":99,"stem":100,"description":614,"children":-1},"ESモジュールの分割方針と実行タイミングの最適化",1780099579179]