[{"data":1,"prerenderedAt":550},["ShallowReactive",2],{"navigation_docs":3,"-frontend-js-module-structure":190,"-frontend-js-module-structure-surround":545},[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":98,"body":192,"description":539,"extension":540,"links":541,"meta":542,"navigation":314,"path":99,"seo":543,"stem":100,"__hash__":544},"docs\u002F1.frontend\u002F3.js\u002Fmodule-structure.md",{"type":193,"value":194,"toc":536},"minimark",[195,199,248,264,356,360,363,532],[196,197,198],"p",{},"基本的に目的や機能ごとに分割します。また、実行タイミングをコントロールできるようにひとつの関数としてまとめるようにしてください。",[200,201,206],"pre",{"className":202,"code":203,"language":204,"meta":205,"style":205},"language-js shiki shiki-themes github-light material-theme material-theme-palenight","\u002F\u002F 関数としてexportする\nexport default function () {\n  \u002F\u002F 処理...\n}\n","js","",[207,208,209,217,238,243],"code",{"__ignoreMap":205},[210,211,213],"span",{"class":212,"line":12},"line",[210,214,216],{"class":215},"su8Ar","\u002F\u002F 関数としてexportする\n",[210,218,220,224,227,231,235],{"class":212,"line":219},2,[210,221,223],{"class":222},"sktmp","export",[210,225,226],{"class":222}," default",[210,228,230],{"class":229},"sUoqF"," function",[210,232,234],{"class":233},"sN50r"," ()",[210,236,237],{"class":233}," {\n",[210,239,240],{"class":212,"line":158},[210,241,242],{"class":215},"  \u002F\u002F 処理...\n",[210,244,245],{"class":212,"line":189},[210,246,247],{"class":233},"}\n",[249,250,251,252,255,256,259,260,263],"tip",{},"import \u002F export 機能を利用する場合は、",[207,253,254],{},"\u003Cscript type=\"module\">"," を使用する必要があります。",[257,258],"br",{},"\n通常の ",[207,261,262],{},"\u003Cscript>"," タグでは import \u002F export は動作しません。",[200,265,269],{"className":266,"code":267,"language":268,"meta":205,"style":205},"language-html shiki shiki-themes github-light material-theme material-theme-palenight","\u003C!-- import\u002Fexportは使えない -->\n\u003Cscript src=\"main.js\">\u003C\u002Fscript>\n\n\u003C!-- import\u002Fexportが使える -->\n\u003Cscript type=\"module\" src=\"main.js\">\u003C\u002Fscript>\n","html",[207,270,271,276,310,316,321],{"__ignoreMap":205},[210,272,273],{"class":212,"line":12},[210,274,275],{"class":215},"\u003C!-- import\u002Fexportは使えない -->\n",[210,277,278,281,285,289,292,296,300,302,305,307],{"class":212,"line":219},[210,279,280],{"class":233},"\u003C",[210,282,284],{"class":283},"sF3G6","script",[210,286,288],{"class":287},"sAjK8"," src",[210,290,291],{"class":233},"=",[210,293,295],{"class":294},"ssQ5U","\"",[210,297,299],{"class":298},"scigg","main.js",[210,301,295],{"class":294},[210,303,304],{"class":233},">\u003C\u002F",[210,306,284],{"class":283},[210,308,309],{"class":233},">\n",[210,311,312],{"class":212,"line":158},[210,313,315],{"emptyLinePlaceholder":314},true,"\n",[210,317,318],{"class":212,"line":189},[210,319,320],{"class":215},"\u003C!-- import\u002Fexportが使える -->\n",[210,322,324,326,328,331,333,335,338,340,342,344,346,348,350,352,354],{"class":212,"line":323},5,[210,325,280],{"class":233},[210,327,284],{"class":283},[210,329,330],{"class":287}," type",[210,332,291],{"class":233},[210,334,295],{"class":294},[210,336,337],{"class":298},"module",[210,339,295],{"class":294},[210,341,288],{"class":287},[210,343,291],{"class":233},[210,345,295],{"class":294},[210,347,299],{"class":298},[210,349,295],{"class":294},[210,351,304],{"class":233},[210,353,284],{"class":283},[210,355,309],{"class":233},[357,358,359],"h2",{"id":359},"実行タイミングの最適化",[196,361,362],{},"分割したモジュールの中で、import した時点で即座にブラウザや DOM に影響する処理が走る実装は避けてください。",[364,365,366,455],"tabs",{},[367,368,370],"tabs-item",{"icon":369,"label":299},"i-lucide-code",[200,371,373],{"className":202,"code":372,"filename":299,"language":204,"meta":205,"style":205},"import { showAlert } from \".\u002Fshow-alert.js\";\n\ndocument.querySelector(\"button\").addEventListener(\"click\", showAlert);\n",[207,374,375,404,408],{"__ignoreMap":205},[210,376,377,380,383,387,390,393,396,399,401],{"class":212,"line":12},[210,378,379],{"class":222},"import",[210,381,382],{"class":233}," {",[210,384,386],{"class":385},"sKuZN"," showAlert",[210,388,389],{"class":233}," }",[210,391,392],{"class":222}," from",[210,394,395],{"class":294}," \"",[210,397,398],{"class":298},".\u002Fshow-alert.js",[210,400,295],{"class":294},[210,402,403],{"class":233},";\n",[210,405,406],{"class":212,"line":219},[210,407,315],{"emptyLinePlaceholder":314},[210,409,410,413,416,420,423,425,428,430,433,435,438,440,442,445,447,450,453],{"class":212,"line":158},[210,411,412],{"class":385},"document",[210,414,415],{"class":233},".",[210,417,419],{"class":418},"s3Zf7","querySelector",[210,421,422],{"class":385},"(",[210,424,295],{"class":294},[210,426,427],{"class":298},"button",[210,429,295],{"class":294},[210,431,432],{"class":385},")",[210,434,415],{"class":233},[210,436,437],{"class":418},"addEventListener",[210,439,422],{"class":385},[210,441,295],{"class":294},[210,443,444],{"class":298},"click",[210,446,295],{"class":294},[210,448,449],{"class":233},",",[210,451,452],{"class":385}," showAlert)",[210,454,403],{"class":233},[367,456,458],{"icon":369,"label":457},"show-alert.js",[200,459,461],{"className":202,"code":460,"filename":457,"language":204,"meta":205,"style":205},"\u002F\u002F ❌ 悪い例：import時にすぐ実行される\nalert(\"実行されました\");\n\n\u002F\u002F ✅ 良い例：関数としてexportし、必要なときだけ実行\nexport function showAlert() {\n  alert(\"実行されました\");\n}\n",[207,462,463,468,486,490,495,508,527],{"__ignoreMap":205},[210,464,465],{"class":212,"line":12},[210,466,467],{"class":215},"\u002F\u002F ❌ 悪い例：import時にすぐ実行される\n",[210,469,470,473,475,477,480,482,484],{"class":212,"line":219},[210,471,472],{"class":418},"alert",[210,474,422],{"class":385},[210,476,295],{"class":294},[210,478,479],{"class":298},"実行されました",[210,481,295],{"class":294},[210,483,432],{"class":385},[210,485,403],{"class":233},[210,487,488],{"class":212,"line":158},[210,489,315],{"emptyLinePlaceholder":314},[210,491,492],{"class":212,"line":189},[210,493,494],{"class":215},"\u002F\u002F ✅ 良い例：関数としてexportし、必要なときだけ実行\n",[210,496,497,499,501,503,506],{"class":212,"line":323},[210,498,223],{"class":222},[210,500,230],{"class":229},[210,502,386],{"class":418},[210,504,505],{"class":233},"()",[210,507,237],{"class":233},[210,509,511,514,517,519,521,523,525],{"class":212,"line":510},6,[210,512,513],{"class":418},"  alert",[210,515,422],{"class":516},"sbBtD",[210,518,295],{"class":294},[210,520,479],{"class":298},[210,522,295],{"class":294},[210,524,432],{"class":516},[210,526,403],{"class":233},[210,528,530],{"class":212,"line":529},7,[210,531,247],{"class":233},[533,534,535],"style",{},"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 .sktmp, html code.shiki .sktmp{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sUoqF, html code.shiki .sUoqF{--shiki-light:#D73A49;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sN50r, html code.shiki .sN50r{--shiki-light:#24292E;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .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 pre.shiki code .sKuZN, html code.shiki .sKuZN{--shiki-light:#24292E;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s3Zf7, html code.shiki .s3Zf7{--shiki-light:#6F42C1;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbBtD, html code.shiki .sbBtD{--shiki-light:#24292E;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":205,"searchDepth":219,"depth":219,"links":537},[538],{"id":359,"depth":219,"text":359},"ESモジュールの分割方針と実行タイミングの最適化","md",null,{},{"title":98,"description":539},"8PIcT4l5h32Z2IK811t-zc0eBtZDfKvVa6ZqSFpQCwA",[546,548],{"title":94,"path":95,"stem":96,"description":547,"children":-1},"type=\"module\"とdefer属性によるスクリプト読み込みのベストプラクティス",{"title":102,"path":103,"stem":104,"description":549,"children":-1},"変数・関数・クラスの命名規則とケース使い分け",1780099579258]