[{"data":1,"prerenderedAt":2471},["ShallowReactive",2],{"content-/npm-vs-cdn-guide":3,"all-pages-for-dir":2449,"related-/npm-vs-cdn-guide":2450,"og-image-/npm-vs-cdn-guide":2470},{"id":4,"title":5,"body":6,"category":2433,"concepts":2433,"description":2434,"extension":2435,"meta":2436,"navigation":275,"ogImage":2433,"path":2437,"project_name":2433,"published":2438,"publishedAt":2439,"seo":2440,"source":2433,"stem":2441,"tags":2442,"todo":2433,"unpublished":2438,"updatedAt":2433,"__hash__":2448},"pages/2025-11/2025-11-12/npm-vs-cdn-guide.md","npm vs CDN - JavaScriptライブラリの読み込み方法の違いと使い分け",{"type":7,"value":8,"toc":2389},"minimark",[9,13,17,21,38,41,44,238,241,245,292,295,369,372,474,477,516,519,540,543,551,555,558,563,600,608,679,682,836,839,939,942,974,977,1022,1025,1031,1034,1187,1190,1193,1253,1258,1309,1313,1365,1369,1407,1410,1414,1501,1504,1628,1631,1634,1770,1775,1784,1787,1791,1797,1898,1902,1907,1913,1917,1922,1947,1950,1954,2048,2052,2159,2162,2165,2261,2264,2325,2330,2350,2353,2385],[10,11,5],"h1",{"id":12},"npm-vs-cdn-javascriptライブラリの読み込み方法の違いと使い分け",[14,15,16],"h2",{"id":16},"概要",[18,19,20],"p",{},"JavaScriptのライブラリを使う方法は大きく分けて2つあります:",[22,23,24,32],"ol",{},[25,26,27,31],"li",{},[28,29,30],"strong",{},"npm（Node Package Manager）でインストール"," - ビルド時にバンドル",[25,33,34,37],{},[28,35,36],{},"CDN（Content Delivery Network）で読み込み"," - ブラウザから直接読み込み",[18,39,40],{},"このドキュメントでは、それぞれの違い、メリット・デメリット、使い分けの基準を解説します。",[14,42,43],{"id":43},"基本的な違い",[45,46,51],"pre",{"className":47,"code":48,"language":49,"meta":50,"style":50},"language-mermaid shiki shiki-themes vitesse-light vitesse-light","graph TB\n    subgraph \"npm方式\"\n        NPM[npm install]\n        Node[node_modules/]\n        Build[ビルドツール\u003Cbr/>Vite/Webpack]\n        Bundle[bundle.js\u003Cbr/>バンドルファイル]\n        Server1[Webサーバー]\n        \n        NPM --> Node\n        Node --> Build\n        Build --> Bundle\n        Bundle --> Server1\n    end\n    \n    subgraph \"CDN方式\"\n        CDN[CDNサーバー\u003Cbr/>jsdelivr/unpkg]\n        Browser[ブラウザ]\n        Script[scriptタグで読み込み]\n        \n        CDN --> Browser\n        Browser --> Script\n    end\n    \n    User[ユーザー]\n    User --> Server1\n    User --> Browser\n    \n    style NPM fill:#e1f5ff\n    style CDN fill:#ffe1e1\n    style Bundle fill:#90EE90\n    style Script fill:#FFB6C1\n","mermaid","",[52,53,54,62,68,74,80,86,92,98,104,110,116,122,128,134,140,146,152,158,164,169,175,181,186,191,197,203,209,214,220,226,232],"code",{"__ignoreMap":50},[55,56,59],"span",{"class":57,"line":58},"line",1,[55,60,61],{},"graph TB\n",[55,63,65],{"class":57,"line":64},2,[55,66,67],{},"    subgraph \"npm方式\"\n",[55,69,71],{"class":57,"line":70},3,[55,72,73],{},"        NPM[npm install]\n",[55,75,77],{"class":57,"line":76},4,[55,78,79],{},"        Node[node_modules/]\n",[55,81,83],{"class":57,"line":82},5,[55,84,85],{},"        Build[ビルドツール\u003Cbr/>Vite/Webpack]\n",[55,87,89],{"class":57,"line":88},6,[55,90,91],{},"        Bundle[bundle.js\u003Cbr/>バンドルファイル]\n",[55,93,95],{"class":57,"line":94},7,[55,96,97],{},"        Server1[Webサーバー]\n",[55,99,101],{"class":57,"line":100},8,[55,102,103],{},"        \n",[55,105,107],{"class":57,"line":106},9,[55,108,109],{},"        NPM --> Node\n",[55,111,113],{"class":57,"line":112},10,[55,114,115],{},"        Node --> Build\n",[55,117,119],{"class":57,"line":118},11,[55,120,121],{},"        Build --> Bundle\n",[55,123,125],{"class":57,"line":124},12,[55,126,127],{},"        Bundle --> Server1\n",[55,129,131],{"class":57,"line":130},13,[55,132,133],{},"    end\n",[55,135,137],{"class":57,"line":136},14,[55,138,139],{},"    \n",[55,141,143],{"class":57,"line":142},15,[55,144,145],{},"    subgraph \"CDN方式\"\n",[55,147,149],{"class":57,"line":148},16,[55,150,151],{},"        CDN[CDNサーバー\u003Cbr/>jsdelivr/unpkg]\n",[55,153,155],{"class":57,"line":154},17,[55,156,157],{},"        Browser[ブラウザ]\n",[55,159,161],{"class":57,"line":160},18,[55,162,163],{},"        Script[scriptタグで読み込み]\n",[55,165,167],{"class":57,"line":166},19,[55,168,103],{},[55,170,172],{"class":57,"line":171},20,[55,173,174],{},"        CDN --> Browser\n",[55,176,178],{"class":57,"line":177},21,[55,179,180],{},"        Browser --> Script\n",[55,182,184],{"class":57,"line":183},22,[55,185,133],{},[55,187,189],{"class":57,"line":188},23,[55,190,139],{},[55,192,194],{"class":57,"line":193},24,[55,195,196],{},"    User[ユーザー]\n",[55,198,200],{"class":57,"line":199},25,[55,201,202],{},"    User --> Server1\n",[55,204,206],{"class":57,"line":205},26,[55,207,208],{},"    User --> Browser\n",[55,210,212],{"class":57,"line":211},27,[55,213,139],{},[55,215,217],{"class":57,"line":216},28,[55,218,219],{},"    style NPM fill:#e1f5ff\n",[55,221,223],{"class":57,"line":222},29,[55,224,225],{},"    style CDN fill:#ffe1e1\n",[55,227,229],{"class":57,"line":228},30,[55,230,231],{},"    style Bundle fill:#90EE90\n",[55,233,235],{"class":57,"line":234},31,[55,236,237],{},"    style Script fill:#FFB6C1\n",[14,239,240],{"id":240},"npm方式の詳細",[242,243,244],"h3",{"id":244},"インストール方法",[45,246,250],{"className":247,"code":248,"language":249,"meta":50,"style":50},"language-bash shiki shiki-themes vitesse-light vitesse-light","# package.jsonに追加してインストール\nnpm install hyperformula\n\n# または\npnpm add hyperformula\n","bash",[52,251,252,258,271,277,282],{"__ignoreMap":50},[55,253,254],{"class":57,"line":58},[55,255,257],{"class":256},"sxvE3","# package.jsonに追加してインストール\n",[55,259,260,264,268],{"class":57,"line":64},[55,261,263],{"class":262},"senZ8","npm",[55,265,267],{"class":266},"sdGka"," install",[55,269,270],{"class":266}," hyperformula\n",[55,272,273],{"class":57,"line":70},[55,274,276],{"emptyLinePlaceholder":275},true,"\n",[55,278,279],{"class":57,"line":76},[55,280,281],{"class":256},"# または\n",[55,283,284,287,290],{"class":57,"line":82},[55,285,286],{"class":262},"pnpm",[55,288,289],{"class":266}," add",[55,291,270],{"class":266},[242,293,294],{"id":294},"コード内での使用",[45,296,300],{"className":297,"code":298,"language":299,"meta":50,"style":50},"language-typescript shiki shiki-themes vitesse-light vitesse-light","// トップレベルでimport\nimport { HyperFormula } from 'hyperformula'\n\n// 使用\nconst hf = HyperFormula.buildEmpty()\n","typescript",[52,301,302,307,337,341,346],{"__ignoreMap":50},[55,303,304],{"class":57,"line":58},[55,305,306],{"class":256},"// トップレベルでimport\n",[55,308,309,313,317,321,324,327,331,334],{"class":57,"line":64},[55,310,312],{"class":311},"sHkkW","import",[55,314,316],{"class":315},"shFtX"," {",[55,318,320],{"class":319},"s4oTP"," HyperFormula",[55,322,323],{"class":315}," }",[55,325,326],{"class":311}," from",[55,328,330],{"class":329},"sMJiu"," '",[55,332,333],{"class":266},"hyperformula",[55,335,336],{"class":329},"'\n",[55,338,339],{"class":57,"line":70},[55,340,276],{"emptyLinePlaceholder":275},[55,342,343],{"class":57,"line":76},[55,344,345],{"class":256},"// 使用\n",[55,347,348,352,355,358,360,363,366],{"class":57,"line":82},[55,349,351],{"class":350},"stQ0i","const ",[55,353,354],{"class":319},"hf",[55,356,357],{"class":315}," =",[55,359,320],{"class":319},[55,361,362],{"class":315},".",[55,364,365],{"class":262},"buildEmpty",[55,367,368],{"class":315},"()\n",[242,370,371],{"id":371},"処理フロー",[45,373,375],{"className":47,"code":374,"language":49,"meta":50,"style":50},"sequenceDiagram\n    participant Dev as 開発者\n    participant NPM as npm/pnpm\n    participant Node as node_modules\n    participant Build as ビルドツール\n    participant Bundle as バンドルファイル\n    participant Browser as ブラウザ\n    \n    Dev->>NPM: npm install hyperformula\n    NPM->>Node: パッケージダウンロード\n    Note over Node: node_modules/hyperformula/\n    \n    Dev->>Dev: import { HyperFormula }\n    Dev->>Build: npm run build\n    Build->>Node: ソースコード読み込み\n    Build->>Bundle: Tree Shaking\u003Cbr/>バンドル最適化\n    Note over Bundle: 使用する部分のみ含む\n    \n    Browser->>Bundle: bundle.jsダウンロード\n    Bundle->>Browser: HyperFormula実行\n",[52,376,377,382,387,392,397,402,407,412,416,421,426,431,435,440,445,450,455,460,464,469],{"__ignoreMap":50},[55,378,379],{"class":57,"line":58},[55,380,381],{},"sequenceDiagram\n",[55,383,384],{"class":57,"line":64},[55,385,386],{},"    participant Dev as 開発者\n",[55,388,389],{"class":57,"line":70},[55,390,391],{},"    participant NPM as npm/pnpm\n",[55,393,394],{"class":57,"line":76},[55,395,396],{},"    participant Node as node_modules\n",[55,398,399],{"class":57,"line":82},[55,400,401],{},"    participant Build as ビルドツール\n",[55,403,404],{"class":57,"line":88},[55,405,406],{},"    participant Bundle as バンドルファイル\n",[55,408,409],{"class":57,"line":94},[55,410,411],{},"    participant Browser as ブラウザ\n",[55,413,414],{"class":57,"line":100},[55,415,139],{},[55,417,418],{"class":57,"line":106},[55,419,420],{},"    Dev->>NPM: npm install hyperformula\n",[55,422,423],{"class":57,"line":112},[55,424,425],{},"    NPM->>Node: パッケージダウンロード\n",[55,427,428],{"class":57,"line":118},[55,429,430],{},"    Note over Node: node_modules/hyperformula/\n",[55,432,433],{"class":57,"line":124},[55,434,139],{},[55,436,437],{"class":57,"line":130},[55,438,439],{},"    Dev->>Dev: import { HyperFormula }\n",[55,441,442],{"class":57,"line":136},[55,443,444],{},"    Dev->>Build: npm run build\n",[55,446,447],{"class":57,"line":142},[55,448,449],{},"    Build->>Node: ソースコード読み込み\n",[55,451,452],{"class":57,"line":148},[55,453,454],{},"    Build->>Bundle: Tree Shaking\u003Cbr/>バンドル最適化\n",[55,456,457],{"class":57,"line":154},[55,458,459],{},"    Note over Bundle: 使用する部分のみ含む\n",[55,461,462],{"class":57,"line":160},[55,463,139],{},[55,465,466],{"class":57,"line":166},[55,467,468],{},"    Browser->>Bundle: bundle.jsダウンロード\n",[55,470,471],{"class":57,"line":171},[55,472,473],{},"    Bundle->>Browser: HyperFormula実行\n",[242,475,476],{"id":476},"メリット",[22,478,479,486,492,498,504,510],{},[25,480,481,482,485],{},"✅ ",[28,483,484],{},"型定義が使える"," - TypeScriptの補完・型チェック",[25,487,481,488,491],{},[28,489,490],{},"Tree Shaking"," - 使わない部分は削除（ファイルサイズ削減）",[25,493,481,494,497],{},[28,495,496],{},"バージョン固定"," - package.jsonで管理",[25,499,481,500,503],{},[28,501,502],{},"オフライン開発可能"," - インターネット不要",[25,505,481,506,509],{},[28,507,508],{},"ビルド時エラー検出"," - 事前に問題を発見",[25,511,481,512,515],{},[28,513,514],{},"モジュール統合"," - 他のコードと一緒にバンドル",[242,517,518],{"id":518},"デメリット",[22,520,521,528,534],{},[25,522,523,524,527],{},"❌ ",[28,525,526],{},"ビルドが必要"," - 開発時に時間がかかる",[25,529,523,530,533],{},[28,531,532],{},"node_modules肥大化"," - ディスク容量を消費",[25,535,523,536,539],{},[28,537,538],{},"セットアップが複雑"," - ビルドツールの設定が必要",[242,541,542],{"id":542},"ファイル構造",[45,544,549],{"className":545,"code":547,"language":548},[546],"language-text","project/\n├── package.json              # 依存関係定義\n├── node_modules/\n│   └── hyperformula/        # インストールされたパッケージ\n│       ├── dist/\n│       ├── types/           # 型定義ファイル\n│       └── package.json\n├── src/\n│   └── app.ts               # import文で使用\n└── dist/\n    └── bundle.js            # ビルド後（HyperFormulaを含む）\n","text",[52,550,547],{"__ignoreMap":50},[14,552,554],{"id":553},"cdn方式の詳細","CDN方式の詳細",[242,556,557],{"id":557},"読み込み方法",[559,560,562],"h4",{"id":561},"方法1-htmlで直接読み込み","方法1: HTMLで直接読み込み",[45,564,568],{"className":565,"code":566,"language":567,"meta":50,"style":50},"language-html shiki shiki-themes vitesse-light vitesse-light","\u003Cscript src=\"https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js\">\u003C/script>\n","html",[52,569,570],{"__ignoreMap":50},[55,571,572,575,578,581,584,587,590,592,595,597],{"class":57,"line":58},[55,573,574],{"class":315},"\u003C",[55,576,577],{"class":311},"script",[55,579,580],{"class":319}," src",[55,582,583],{"class":315},"=",[55,585,586],{"class":329},"\"",[55,588,589],{"class":266},"https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js",[55,591,586],{"class":329},[55,593,594],{"class":315},">\u003C/",[55,596,577],{"class":311},[55,598,599],{"class":315},">\n",[559,601,603,604,607],{"id":602},"方法2-vueのuseheadで読み込み","方法2: Vueの",[52,605,606],{},"useHead","で読み込み",[45,609,611],{"className":297,"code":610,"language":299,"meta":50,"style":50},"useHead({\n  script: [\n    {\n      src: 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js',\n      async: true,\n    }\n  ]\n})\n",[52,612,613,620,629,634,652,664,669,674],{"__ignoreMap":50},[55,614,615,617],{"class":57,"line":58},[55,616,606],{"class":262},[55,618,619],{"class":315},"({\n",[55,621,622,626],{"class":57,"line":64},[55,623,625],{"class":624},"sz8Xr","  script",[55,627,628],{"class":315},": [\n",[55,630,631],{"class":57,"line":70},[55,632,633],{"class":315},"    {\n",[55,635,636,639,642,645,647,649],{"class":57,"line":76},[55,637,638],{"class":624},"      src",[55,640,641],{"class":315},": ",[55,643,644],{"class":329},"'",[55,646,589],{"class":266},[55,648,644],{"class":329},[55,650,651],{"class":315},",\n",[55,653,654,657,659,662],{"class":57,"line":82},[55,655,656],{"class":624},"      async",[55,658,641],{"class":315},[55,660,661],{"class":311},"true",[55,663,651],{"class":315},[55,665,666],{"class":57,"line":88},[55,667,668],{"class":315},"    }\n",[55,670,671],{"class":57,"line":94},[55,672,673],{"class":315},"  ]\n",[55,675,676],{"class":57,"line":100},[55,677,678],{"class":315},"})\n",[242,680,294],{"id":681},"コード内での使用-1",[45,683,685],{"className":297,"code":684,"language":299,"meta":50,"style":50},"// グローバル変数としてアクセス\nconst XLSX = (window as any).XLSX\n\n// 読み込み待機が必要\nonMounted(() => {\n  const checkXLSX = setInterval(() => {\n    if (typeof (window as any).XLSX !== 'undefined') {\n      clearInterval(checkXLSX)\n      // ここで使用開始\n    }\n  }, 100)\n})\n",[52,686,687,692,720,724,729,743,762,800,812,817,821,832],{"__ignoreMap":50},[55,688,689],{"class":57,"line":58},[55,690,691],{"class":256},"// グローバル変数としてアクセス\n",[55,693,694,696,699,701,704,707,710,714,717],{"class":57,"line":64},[55,695,351],{"class":350},[55,697,698],{"class":319},"XLSX",[55,700,357],{"class":315},[55,702,703],{"class":315}," (",[55,705,706],{"class":319},"window",[55,708,709],{"class":311}," as",[55,711,713],{"class":712},"sSkh3"," any",[55,715,716],{"class":315},").",[55,718,719],{"class":319},"XLSX\n",[55,721,722],{"class":57,"line":70},[55,723,276],{"emptyLinePlaceholder":275},[55,725,726],{"class":57,"line":76},[55,727,728],{"class":256},"// 読み込み待機が必要\n",[55,730,731,734,737,740],{"class":57,"line":82},[55,732,733],{"class":262},"onMounted",[55,735,736],{"class":315},"(()",[55,738,739],{"class":315}," =>",[55,741,742],{"class":315}," {\n",[55,744,745,748,751,753,756,758,760],{"class":57,"line":88},[55,746,747],{"class":350},"  const ",[55,749,750],{"class":319},"checkXLSX",[55,752,357],{"class":315},[55,754,755],{"class":262}," setInterval",[55,757,736],{"class":315},[55,759,739],{"class":315},[55,761,742],{"class":315},[55,763,764,767,769,772,775,777,779,781,783,785,788,790,793,795,798],{"class":57,"line":94},[55,765,766],{"class":311},"    if",[55,768,703],{"class":315},[55,770,771],{"class":350},"typeof ",[55,773,774],{"class":315},"(",[55,776,706],{"class":319},[55,778,709],{"class":311},[55,780,713],{"class":712},[55,782,716],{"class":315},[55,784,698],{"class":319},[55,786,787],{"class":350}," !== ",[55,789,644],{"class":329},[55,791,792],{"class":266},"undefined",[55,794,644],{"class":329},[55,796,797],{"class":315},")",[55,799,742],{"class":315},[55,801,802,805,807,809],{"class":57,"line":100},[55,803,804],{"class":262},"      clearInterval",[55,806,774],{"class":315},[55,808,750],{"class":319},[55,810,811],{"class":315},")\n",[55,813,814],{"class":57,"line":106},[55,815,816],{"class":256},"      // ここで使用開始\n",[55,818,819],{"class":57,"line":112},[55,820,668],{"class":315},[55,822,823,826,830],{"class":57,"line":118},[55,824,825],{"class":315},"  },",[55,827,829],{"class":828},"sM54T"," 100",[55,831,811],{"class":315},[55,833,834],{"class":57,"line":124},[55,835,678],{"class":315},[242,837,371],{"id":838},"処理フロー-1",[45,840,842],{"className":47,"code":841,"language":49,"meta":50,"style":50},"sequenceDiagram\n    participant Browser as ブラウザ\n    participant HTML as HTMLページ\n    participant CDN as CDNサーバー\n    participant Window as window.XLSX\n    participant App as アプリコード\n    \n    Browser->>HTML: ページ読み込み\n    HTML->>CDN: scriptタグ読み込み\n    Note over CDN: https://cdn.jsdelivr.net/npm/xlsx@0.18.5/\n    CDN->>Browser: xlsx.full.min.jsダウンロード\n    Browser->>Window: window.XLSX作成\n    \n    App->>Window: XLSX使用可能か確認\n    alt XLSXが読み込み済み\n        Window->>App: 使用可能\n        App->>App: 処理開始\n    else まだ読み込み中\n        App->>App: setIntervalで待機\n    end\n",[52,843,844,848,852,857,862,867,872,876,881,886,891,896,901,905,910,915,920,925,930,935],{"__ignoreMap":50},[55,845,846],{"class":57,"line":58},[55,847,381],{},[55,849,850],{"class":57,"line":64},[55,851,411],{},[55,853,854],{"class":57,"line":70},[55,855,856],{},"    participant HTML as HTMLページ\n",[55,858,859],{"class":57,"line":76},[55,860,861],{},"    participant CDN as CDNサーバー\n",[55,863,864],{"class":57,"line":82},[55,865,866],{},"    participant Window as window.XLSX\n",[55,868,869],{"class":57,"line":88},[55,870,871],{},"    participant App as アプリコード\n",[55,873,874],{"class":57,"line":94},[55,875,139],{},[55,877,878],{"class":57,"line":100},[55,879,880],{},"    Browser->>HTML: ページ読み込み\n",[55,882,883],{"class":57,"line":106},[55,884,885],{},"    HTML->>CDN: scriptタグ読み込み\n",[55,887,888],{"class":57,"line":112},[55,889,890],{},"    Note over CDN: https://cdn.jsdelivr.net/npm/xlsx@0.18.5/\n",[55,892,893],{"class":57,"line":118},[55,894,895],{},"    CDN->>Browser: xlsx.full.min.jsダウンロード\n",[55,897,898],{"class":57,"line":124},[55,899,900],{},"    Browser->>Window: window.XLSX作成\n",[55,902,903],{"class":57,"line":130},[55,904,139],{},[55,906,907],{"class":57,"line":136},[55,908,909],{},"    App->>Window: XLSX使用可能か確認\n",[55,911,912],{"class":57,"line":142},[55,913,914],{},"    alt XLSXが読み込み済み\n",[55,916,917],{"class":57,"line":148},[55,918,919],{},"        Window->>App: 使用可能\n",[55,921,922],{"class":57,"line":154},[55,923,924],{},"        App->>App: 処理開始\n",[55,926,927],{"class":57,"line":160},[55,928,929],{},"    else まだ読み込み中\n",[55,931,932],{"class":57,"line":166},[55,933,934],{},"        App->>App: setIntervalで待機\n",[55,936,937],{"class":57,"line":171},[55,938,133],{},[242,940,476],{"id":941},"メリット-1",[22,943,944,950,956,962,968],{},[25,945,481,946,949],{},[28,947,948],{},"セットアップ簡単"," - scriptタグ1行で完了",[25,951,481,952,955],{},[28,953,954],{},"ビルド不要"," - すぐに使える",[25,957,481,958,961],{},[28,959,960],{},"キャッシュ活用"," - 他サイトで使っていればキャッシュヒット",[25,963,481,964,967],{},[28,965,966],{},"バンドルサイズ削減"," - アプリのbundle.jsに含まれない",[25,969,481,970,973],{},[28,971,972],{},"素早いプロトタイピング"," - 検証段階で便利",[242,975,518],{"id":976},"デメリット-1",[22,978,979,989,998,1004,1010,1016],{},[25,980,523,981,984,985,988],{},[28,982,983],{},"型定義がない"," - TypeScript補完なし（",[52,986,987],{},"any","型で扱う）",[25,990,523,991,994,995,997],{},[28,992,993],{},"読み込み待機が必要"," - ",[52,996,706],{},"オブジェクトに追加されるタイミングが不確定",[25,999,523,1000,1003],{},[28,1001,1002],{},"ネットワーク依存"," - CDNがダウンすると動かない",[25,1005,523,1006,1009],{},[28,1007,1008],{},"バージョン管理が困難"," - URLを手動で管理",[25,1011,523,1012,1015],{},[28,1013,1014],{},"Tree Shakingなし"," - ライブラリ全体を読み込む",[25,1017,523,1018,1021],{},[28,1019,1020],{},"セキュリティリスク"," - CDN改ざんのリスク",[242,1023,542],{"id":1024},"ファイル構造-1",[45,1026,1029],{"className":1027,"code":1028,"language":548},[546],"project/\n├── src/\n│   └── app.vue              # (window as any).XLSXで使用\n└── dist/\n    └── bundle.js            # XLSXは含まれない\n\n# ブラウザで実行時\nhttps://cdn.jsdelivr.net/   # CDNから直接読み込み\n",[52,1030,1028],{"__ignoreMap":50},[14,1032,1033],{"id":1033},"使い分けフローチャート",[45,1035,1037],{"className":47,"code":1036,"language":49,"meta":50,"style":50},"graph TD\n    Start[ライブラリを使いたい]\n    Q1{本番環境で\u003Cbr/>使う予定?}\n    Q2{TypeScript\u003Cbr/>型定義欲しい?}\n    Q3{ライブラリサイズ\u003Cbr/>大きい?}\n    Q4{頻繁に更新\u003Cbr/>する?}\n    Q5{プロトタイプ\u003Cbr/>検証段階?}\n    \n    UseNPM[✓ npm方式を使う]\n    UseCDN[✓ CDN方式を使う]\n    Consider[どちらでも可\u003Cbr/>プロジェクト方針で決定]\n    \n    Start --> Q1\n    Q1 -->|Yes| Q2\n    Q1 -->|No| Q5\n    \n    Q2 -->|Yes| UseNPM\n    Q2 -->|No| Q3\n    \n    Q3 -->|Yes\u003Cbr/>>500KB| UseNPM\n    Q3 -->|No| Q4\n    \n    Q4 -->|Yes| UseNPM\n    Q4 -->|No| Consider\n    \n    Q5 -->|Yes| UseCDN\n    Q5 -->|No| Q2\n    \n    style UseNPM fill:#90EE90\n    style UseCDN fill:#FFB6C1\n    style Consider fill:#FFE69C\n",[52,1038,1039,1044,1049,1054,1059,1064,1069,1074,1078,1083,1088,1093,1097,1102,1107,1112,1116,1121,1126,1130,1135,1140,1144,1149,1154,1158,1163,1168,1172,1177,1182],{"__ignoreMap":50},[55,1040,1041],{"class":57,"line":58},[55,1042,1043],{},"graph TD\n",[55,1045,1046],{"class":57,"line":64},[55,1047,1048],{},"    Start[ライブラリを使いたい]\n",[55,1050,1051],{"class":57,"line":70},[55,1052,1053],{},"    Q1{本番環境で\u003Cbr/>使う予定?}\n",[55,1055,1056],{"class":57,"line":76},[55,1057,1058],{},"    Q2{TypeScript\u003Cbr/>型定義欲しい?}\n",[55,1060,1061],{"class":57,"line":82},[55,1062,1063],{},"    Q3{ライブラリサイズ\u003Cbr/>大きい?}\n",[55,1065,1066],{"class":57,"line":88},[55,1067,1068],{},"    Q4{頻繁に更新\u003Cbr/>する?}\n",[55,1070,1071],{"class":57,"line":94},[55,1072,1073],{},"    Q5{プロトタイプ\u003Cbr/>検証段階?}\n",[55,1075,1076],{"class":57,"line":100},[55,1077,139],{},[55,1079,1080],{"class":57,"line":106},[55,1081,1082],{},"    UseNPM[✓ npm方式を使う]\n",[55,1084,1085],{"class":57,"line":112},[55,1086,1087],{},"    UseCDN[✓ CDN方式を使う]\n",[55,1089,1090],{"class":57,"line":118},[55,1091,1092],{},"    Consider[どちらでも可\u003Cbr/>プロジェクト方針で決定]\n",[55,1094,1095],{"class":57,"line":124},[55,1096,139],{},[55,1098,1099],{"class":57,"line":130},[55,1100,1101],{},"    Start --> Q1\n",[55,1103,1104],{"class":57,"line":136},[55,1105,1106],{},"    Q1 -->|Yes| Q2\n",[55,1108,1109],{"class":57,"line":142},[55,1110,1111],{},"    Q1 -->|No| Q5\n",[55,1113,1114],{"class":57,"line":148},[55,1115,139],{},[55,1117,1118],{"class":57,"line":154},[55,1119,1120],{},"    Q2 -->|Yes| UseNPM\n",[55,1122,1123],{"class":57,"line":160},[55,1124,1125],{},"    Q2 -->|No| Q3\n",[55,1127,1128],{"class":57,"line":166},[55,1129,139],{},[55,1131,1132],{"class":57,"line":171},[55,1133,1134],{},"    Q3 -->|Yes\u003Cbr/>>500KB| UseNPM\n",[55,1136,1137],{"class":57,"line":177},[55,1138,1139],{},"    Q3 -->|No| Q4\n",[55,1141,1142],{"class":57,"line":183},[55,1143,139],{},[55,1145,1146],{"class":57,"line":188},[55,1147,1148],{},"    Q4 -->|Yes| UseNPM\n",[55,1150,1151],{"class":57,"line":193},[55,1152,1153],{},"    Q4 -->|No| Consider\n",[55,1155,1156],{"class":57,"line":199},[55,1157,139],{},[55,1159,1160],{"class":57,"line":205},[55,1161,1162],{},"    Q5 -->|Yes| UseCDN\n",[55,1164,1165],{"class":57,"line":211},[55,1166,1167],{},"    Q5 -->|No| Q2\n",[55,1169,1170],{"class":57,"line":216},[55,1171,139],{},[55,1173,1174],{"class":57,"line":222},[55,1175,1176],{},"    style UseNPM fill:#90EE90\n",[55,1178,1179],{"class":57,"line":228},[55,1180,1181],{},"    style UseCDN fill:#FFB6C1\n",[55,1183,1184],{"class":57,"line":234},[55,1185,1186],{},"    style Consider fill:#FFE69C\n",[14,1188,1189],{"id":1189},"具体的な判断基準",[242,1191,1192],{"id":1192},"npm方式を選ぶべきケース",[1194,1195,1196,1209],"table",{},[1197,1198,1199],"thead",{},[1200,1201,1202,1206],"tr",{},[1203,1204,1205],"th",{},"条件",[1203,1207,1208],{},"理由",[1210,1211,1212,1221,1229,1237,1245],"tbody",{},[1200,1213,1214,1218],{},[1215,1216,1217],"td",{},"本番環境のプロジェクト",[1215,1219,1220],{},"安定性・セキュリティが重要",[1200,1222,1223,1226],{},[1215,1224,1225],{},"TypeScriptプロジェクト",[1215,1227,1228],{},"型定義で開発効率アップ",[1200,1230,1231,1234],{},[1215,1232,1233],{},"大規模なライブラリ",[1215,1235,1236],{},"Tree Shakingでサイズ削減",[1200,1238,1239,1242],{},[1215,1240,1241],{},"チーム開発",[1215,1243,1244],{},"バージョン管理が明確",[1200,1246,1247,1250],{},[1215,1248,1249],{},"複数ライブラリの連携",[1215,1251,1252],{},"ビルド時に最適化",[18,1254,1255],{},[28,1256,1257],{},"例:",[45,1259,1261],{"className":297,"code":1260,"language":299,"meta":50,"style":50},"// HyperFormulaの場合\nimport { HyperFormula } from 'hyperformula'  // ✓ 型定義あり\nconst hf = HyperFormula.buildEmpty()         // ✓ 補完効く\n",[52,1262,1263,1268,1289],{"__ignoreMap":50},[55,1264,1265],{"class":57,"line":58},[55,1266,1267],{"class":256},"// HyperFormulaの場合\n",[55,1269,1270,1272,1274,1276,1278,1280,1282,1284,1286],{"class":57,"line":64},[55,1271,312],{"class":311},[55,1273,316],{"class":315},[55,1275,320],{"class":319},[55,1277,323],{"class":315},[55,1279,326],{"class":311},[55,1281,330],{"class":329},[55,1283,333],{"class":266},[55,1285,644],{"class":329},[55,1287,1288],{"class":256},"  // ✓ 型定義あり\n",[55,1290,1291,1293,1295,1297,1299,1301,1303,1306],{"class":57,"line":70},[55,1292,351],{"class":350},[55,1294,354],{"class":319},[55,1296,357],{"class":315},[55,1298,320],{"class":319},[55,1300,362],{"class":315},[55,1302,365],{"class":262},[55,1304,1305],{"class":315},"()",[55,1307,1308],{"class":256},"         // ✓ 補完効く\n",[242,1310,1312],{"id":1311},"cdn方式を選ぶべきケース","CDN方式を選ぶべきケース",[1194,1314,1315,1323],{},[1197,1316,1317],{},[1200,1318,1319,1321],{},[1203,1320,1205],{},[1203,1322,1208],{},[1210,1324,1325,1333,1341,1349,1357],{},[1200,1326,1327,1330],{},[1215,1328,1329],{},"プロトタイプ・デモ",[1215,1331,1332],{},"素早く動作確認したい",[1200,1334,1335,1338],{},[1215,1336,1337],{},"簡単なWebページ",[1215,1339,1340],{},"ビルド環境不要",[1200,1342,1343,1346],{},[1215,1344,1345],{},"CDNキャッシュ活用",[1215,1347,1348],{},"読み込み高速化",[1200,1350,1351,1354],{},[1215,1352,1353],{},"古いライブラリ",[1215,1355,1356],{},"npmパッケージがない",[1200,1358,1359,1362],{},[1215,1360,1361],{},"一時的な検証",[1215,1363,1364],{},"インストール不要",[18,1366,1367],{},[28,1368,1257],{},[45,1370,1372],{"className":297,"code":1371,"language":299,"meta":50,"style":50},"// XLSXの場合\nconst XLSX = (window as any).XLSX  // ✗ 型なし\n// ただし、プロトタイプには十分\n",[52,1373,1374,1379,1402],{"__ignoreMap":50},[55,1375,1376],{"class":57,"line":58},[55,1377,1378],{"class":256},"// XLSXの場合\n",[55,1380,1381,1383,1385,1387,1389,1391,1393,1395,1397,1399],{"class":57,"line":64},[55,1382,351],{"class":350},[55,1384,698],{"class":319},[55,1386,357],{"class":315},[55,1388,703],{"class":315},[55,1390,706],{"class":319},[55,1392,709],{"class":311},[55,1394,713],{"class":712},[55,1396,716],{"class":315},[55,1398,698],{"class":319},[55,1400,1401],{"class":256},"  // ✗ 型なし\n",[55,1403,1404],{"class":57,"line":70},[55,1405,1406],{"class":256},"// ただし、プロトタイプには十分\n",[14,1408,1409],{"id":1409},"実際のプロジェクトでの使い分け例",[242,1411,1413],{"id":1412},"excel-viewer-appswebapppagesexcel-viewervue","Excel Viewer (apps/web/app/pages/excel-viewer.vue)",[45,1415,1417],{"className":297,"code":1416,"language":299,"meta":50,"style":50},"// HyperFormula - npm方式\nimport { HyperFormula } from 'hyperformula'\n// 理由: 型定義が必要、本番環境、頻繁に使用\n\n// XLSX - CDN方式\nuseHead({\n  script: [{\n    src: 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js'\n  }]\n})\n// 理由: ファイルサイズ大きい、型定義なしでも問題ない、\n//       ページビュー専用機能\n",[52,1418,1419,1424,1442,1447,1451,1456,1462,1469,1482,1487,1491,1496],{"__ignoreMap":50},[55,1420,1421],{"class":57,"line":58},[55,1422,1423],{"class":256},"// HyperFormula - npm方式\n",[55,1425,1426,1428,1430,1432,1434,1436,1438,1440],{"class":57,"line":64},[55,1427,312],{"class":311},[55,1429,316],{"class":315},[55,1431,320],{"class":319},[55,1433,323],{"class":315},[55,1435,326],{"class":311},[55,1437,330],{"class":329},[55,1439,333],{"class":266},[55,1441,336],{"class":329},[55,1443,1444],{"class":57,"line":70},[55,1445,1446],{"class":256},"// 理由: 型定義が必要、本番環境、頻繁に使用\n",[55,1448,1449],{"class":57,"line":76},[55,1450,276],{"emptyLinePlaceholder":275},[55,1452,1453],{"class":57,"line":82},[55,1454,1455],{"class":256},"// XLSX - CDN方式\n",[55,1457,1458,1460],{"class":57,"line":88},[55,1459,606],{"class":262},[55,1461,619],{"class":315},[55,1463,1464,1466],{"class":57,"line":94},[55,1465,625],{"class":624},[55,1467,1468],{"class":315},": [{\n",[55,1470,1471,1474,1476,1478,1480],{"class":57,"line":100},[55,1472,1473],{"class":624},"    src",[55,1475,641],{"class":315},[55,1477,644],{"class":329},[55,1479,589],{"class":266},[55,1481,336],{"class":329},[55,1483,1484],{"class":57,"line":106},[55,1485,1486],{"class":315},"  }]\n",[55,1488,1489],{"class":57,"line":112},[55,1490,678],{"class":315},[55,1492,1493],{"class":57,"line":118},[55,1494,1495],{"class":256},"// 理由: ファイルサイズ大きい、型定義なしでも問題ない、\n",[55,1497,1498],{"class":57,"line":124},[55,1499,1500],{"class":256},"//       ページビュー専用機能\n",[242,1502,1503],{"id":1503},"判断の経緯",[45,1505,1507],{"className":47,"code":1506,"language":49,"meta":50,"style":50},"graph LR\n    subgraph \"HyperFormula\"\n        H1[計算エンジン]\n        H2[頻繁に使用]\n        H3[型定義重要]\n        H4[→ npm]\n    end\n    \n    subgraph \"XLSX\"\n        X1[ファイル読み込み]\n        X2[1回だけ使用]\n        X3[型なしでOK]\n        X4[→ CDN]\n    end\n    \n    H1 --> H2\n    H2 --> H3\n    H3 --> H4\n    \n    X1 --> X2\n    X2 --> X3\n    X3 --> X4\n    \n    style H4 fill:#90EE90\n    style X4 fill:#FFB6C1\n",[52,1508,1509,1514,1519,1524,1529,1534,1539,1543,1547,1552,1557,1562,1567,1572,1576,1580,1585,1590,1595,1599,1604,1609,1614,1618,1623],{"__ignoreMap":50},[55,1510,1511],{"class":57,"line":58},[55,1512,1513],{},"graph LR\n",[55,1515,1516],{"class":57,"line":64},[55,1517,1518],{},"    subgraph \"HyperFormula\"\n",[55,1520,1521],{"class":57,"line":70},[55,1522,1523],{},"        H1[計算エンジン]\n",[55,1525,1526],{"class":57,"line":76},[55,1527,1528],{},"        H2[頻繁に使用]\n",[55,1530,1531],{"class":57,"line":82},[55,1532,1533],{},"        H3[型定義重要]\n",[55,1535,1536],{"class":57,"line":88},[55,1537,1538],{},"        H4[→ npm]\n",[55,1540,1541],{"class":57,"line":94},[55,1542,133],{},[55,1544,1545],{"class":57,"line":100},[55,1546,139],{},[55,1548,1549],{"class":57,"line":106},[55,1550,1551],{},"    subgraph \"XLSX\"\n",[55,1553,1554],{"class":57,"line":112},[55,1555,1556],{},"        X1[ファイル読み込み]\n",[55,1558,1559],{"class":57,"line":118},[55,1560,1561],{},"        X2[1回だけ使用]\n",[55,1563,1564],{"class":57,"line":124},[55,1565,1566],{},"        X3[型なしでOK]\n",[55,1568,1569],{"class":57,"line":130},[55,1570,1571],{},"        X4[→ CDN]\n",[55,1573,1574],{"class":57,"line":136},[55,1575,133],{},[55,1577,1578],{"class":57,"line":142},[55,1579,139],{},[55,1581,1582],{"class":57,"line":148},[55,1583,1584],{},"    H1 --> H2\n",[55,1586,1587],{"class":57,"line":154},[55,1588,1589],{},"    H2 --> H3\n",[55,1591,1592],{"class":57,"line":160},[55,1593,1594],{},"    H3 --> H4\n",[55,1596,1597],{"class":57,"line":166},[55,1598,139],{},[55,1600,1601],{"class":57,"line":171},[55,1602,1603],{},"    X1 --> X2\n",[55,1605,1606],{"class":57,"line":177},[55,1607,1608],{},"    X2 --> X3\n",[55,1610,1611],{"class":57,"line":183},[55,1612,1613],{},"    X3 --> X4\n",[55,1615,1616],{"class":57,"line":188},[55,1617,139],{},[55,1619,1620],{"class":57,"line":193},[55,1621,1622],{},"    style H4 fill:#90EE90\n",[55,1624,1625],{"class":57,"line":199},[55,1626,1627],{},"    style X4 fill:#FFB6C1\n",[14,1629,1630],{"id":1630},"併用パターン",[18,1632,1633],{},"両方を組み合わせることも可能です。",[45,1635,1637],{"className":297,"code":1636,"language":299,"meta":50,"style":50},"// コアライブラリ - npm\nimport { HyperFormula } from 'hyperformula'\nimport axios from 'axios'\nimport { ref, computed } from 'vue'\n\n// 補助ライブラリ - CDN\nuseHead({\n  script: [\n    { src: 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js' },\n    { src: 'https://cdn.jsdelivr.net/npm/chart.js@4.0.0/dist/chart.umd.js' }\n  ]\n})\n",[52,1638,1639,1644,1662,1678,1704,1708,1713,1719,1725,1744,1762,1766],{"__ignoreMap":50},[55,1640,1641],{"class":57,"line":58},[55,1642,1643],{"class":256},"// コアライブラリ - npm\n",[55,1645,1646,1648,1650,1652,1654,1656,1658,1660],{"class":57,"line":64},[55,1647,312],{"class":311},[55,1649,316],{"class":315},[55,1651,320],{"class":319},[55,1653,323],{"class":315},[55,1655,326],{"class":311},[55,1657,330],{"class":329},[55,1659,333],{"class":266},[55,1661,336],{"class":329},[55,1663,1664,1666,1669,1671,1673,1676],{"class":57,"line":70},[55,1665,312],{"class":311},[55,1667,1668],{"class":319}," axios",[55,1670,326],{"class":311},[55,1672,330],{"class":329},[55,1674,1675],{"class":266},"axios",[55,1677,336],{"class":329},[55,1679,1680,1682,1684,1687,1690,1693,1695,1697,1699,1702],{"class":57,"line":76},[55,1681,312],{"class":311},[55,1683,316],{"class":315},[55,1685,1686],{"class":319}," ref",[55,1688,1689],{"class":315},",",[55,1691,1692],{"class":319}," computed",[55,1694,323],{"class":315},[55,1696,326],{"class":311},[55,1698,330],{"class":329},[55,1700,1701],{"class":266},"vue",[55,1703,336],{"class":329},[55,1705,1706],{"class":57,"line":82},[55,1707,276],{"emptyLinePlaceholder":275},[55,1709,1710],{"class":57,"line":88},[55,1711,1712],{"class":256},"// 補助ライブラリ - CDN\n",[55,1714,1715,1717],{"class":57,"line":94},[55,1716,606],{"class":262},[55,1718,619],{"class":315},[55,1720,1721,1723],{"class":57,"line":100},[55,1722,625],{"class":624},[55,1724,628],{"class":315},[55,1726,1727,1730,1733,1735,1737,1739,1741],{"class":57,"line":106},[55,1728,1729],{"class":315},"    { ",[55,1731,1732],{"class":624},"src",[55,1734,641],{"class":315},[55,1736,644],{"class":329},[55,1738,589],{"class":266},[55,1740,644],{"class":329},[55,1742,1743],{"class":315}," },\n",[55,1745,1746,1748,1750,1752,1754,1757,1759],{"class":57,"line":112},[55,1747,1729],{"class":315},[55,1749,1732],{"class":624},[55,1751,641],{"class":315},[55,1753,644],{"class":329},[55,1755,1756],{"class":266},"https://cdn.jsdelivr.net/npm/chart.js@4.0.0/dist/chart.umd.js",[55,1758,644],{"class":329},[55,1760,1761],{"class":315}," }\n",[55,1763,1764],{"class":57,"line":118},[55,1765,673],{"class":315},[55,1767,1768],{"class":57,"line":124},[55,1769,678],{"class":315},[18,1771,1772],{},[28,1773,1774],{},"判断基準:",[1776,1777,1778,1781],"ul",{},[25,1779,1780],{},"頻繁に使う・型が必要 → npm",[25,1782,1783],{},"たまに使う・型不要 → CDN",[14,1785,1786],{"id":1786},"よくある質問",[242,1788,1790],{"id":1789},"q1-cdnの方がバンドルサイズが小さくなる","Q1: CDNの方がバンドルサイズが小さくなる？",[18,1792,1793,1796],{},[28,1794,1795],{},"A:"," 必ずしもそうではありません。",[45,1798,1800],{"className":47,"code":1799,"language":49,"meta":50,"style":50},"graph TB\n    subgraph \"npm方式\"\n        N1[Tree Shaking]\n        N2[必要な部分のみ]\n        N3[100KB]\n    end\n    \n    subgraph \"CDN方式\"\n        C1[ライブラリ全体]\n        C2[未使用コードも含む]\n        C3[500KB]\n    end\n    \n    Compare{比較}\n    \n    N3 --> Compare\n    C3 --> Compare\n    Compare --> Result[npmの方が小さい場合も]\n    \n    style N3 fill:#90EE90\n    style C3 fill:#FFB6C1\n",[52,1801,1802,1806,1810,1815,1820,1825,1829,1833,1837,1842,1847,1852,1856,1860,1865,1869,1874,1879,1884,1888,1893],{"__ignoreMap":50},[55,1803,1804],{"class":57,"line":58},[55,1805,61],{},[55,1807,1808],{"class":57,"line":64},[55,1809,67],{},[55,1811,1812],{"class":57,"line":70},[55,1813,1814],{},"        N1[Tree Shaking]\n",[55,1816,1817],{"class":57,"line":76},[55,1818,1819],{},"        N2[必要な部分のみ]\n",[55,1821,1822],{"class":57,"line":82},[55,1823,1824],{},"        N3[100KB]\n",[55,1826,1827],{"class":57,"line":88},[55,1828,133],{},[55,1830,1831],{"class":57,"line":94},[55,1832,139],{},[55,1834,1835],{"class":57,"line":100},[55,1836,145],{},[55,1838,1839],{"class":57,"line":106},[55,1840,1841],{},"        C1[ライブラリ全体]\n",[55,1843,1844],{"class":57,"line":112},[55,1845,1846],{},"        C2[未使用コードも含む]\n",[55,1848,1849],{"class":57,"line":118},[55,1850,1851],{},"        C3[500KB]\n",[55,1853,1854],{"class":57,"line":124},[55,1855,133],{},[55,1857,1858],{"class":57,"line":130},[55,1859,139],{},[55,1861,1862],{"class":57,"line":136},[55,1863,1864],{},"    Compare{比較}\n",[55,1866,1867],{"class":57,"line":142},[55,1868,139],{},[55,1870,1871],{"class":57,"line":148},[55,1872,1873],{},"    N3 --> Compare\n",[55,1875,1876],{"class":57,"line":154},[55,1877,1878],{},"    C3 --> Compare\n",[55,1880,1881],{"class":57,"line":160},[55,1882,1883],{},"    Compare --> Result[npmの方が小さい場合も]\n",[55,1885,1886],{"class":57,"line":166},[55,1887,139],{},[55,1889,1890],{"class":57,"line":171},[55,1891,1892],{},"    style N3 fill:#90EE90\n",[55,1894,1895],{"class":57,"line":177},[55,1896,1897],{},"    style C3 fill:#FFB6C1\n",[242,1899,1901],{"id":1900},"q2-cdnは速い","Q2: CDNは速い？",[18,1903,1904,1906],{},[28,1905,1795],{}," キャッシュヒット時は速いが、初回は遅い可能性あり",[45,1908,1911],{"className":1909,"code":1910,"language":548},[546],"初回アクセス:\n  npm: bundle.js (自サーバー) → 速い\n  CDN: 外部サーバー → 遅い可能性\n\n2回目以降（キャッシュヒット）:\n  npm: bundle.js → 速い\n  CDN: キャッシュ → 非常に速い\n",[52,1912,1910],{"__ignoreMap":50},[242,1914,1916],{"id":1915},"q3-どちらが主流","Q3: どちらが主流？",[18,1918,1919,1921],{},[28,1920,1795],{}," モダンなプロジェクトではnpmが主流",[45,1923,1925],{"className":47,"code":1924,"language":49,"meta":50,"style":50},"pie title モダンWeb開発での使用比率\n    \"npm/pnpm/yarn\" : 85\n    \"CDN\" : 10\n    \"その他\" : 5\n",[52,1926,1927,1932,1937,1942],{"__ignoreMap":50},[55,1928,1929],{"class":57,"line":58},[55,1930,1931],{},"pie title モダンWeb開発での使用比率\n",[55,1933,1934],{"class":57,"line":64},[55,1935,1936],{},"    \"npm/pnpm/yarn\" : 85\n",[55,1938,1939],{"class":57,"line":70},[55,1940,1941],{},"    \"CDN\" : 10\n",[55,1943,1944],{"class":57,"line":76},[55,1945,1946],{},"    \"その他\" : 5\n",[14,1948,1949],{"id":1949},"移行パターン",[242,1951,1953],{"id":1952},"cdn-npm-への移行","CDN → npm への移行",[45,1955,1957],{"className":247,"code":1956,"language":249,"meta":50,"style":50},"# 1. パッケージをインストール\nnpm install xlsx\n\n# 2. コードを変更\n# Before (CDN)\nconst XLSX = (window as any).XLSX\n\n# After (npm)\nimport * as XLSX from 'xlsx'\n\n# 3. scriptタグを削除\n",[52,1958,1959,1964,1973,1977,1982,1987,2009,2013,2018,2039,2043],{"__ignoreMap":50},[55,1960,1961],{"class":57,"line":58},[55,1962,1963],{"class":256},"# 1. パッケージをインストール\n",[55,1965,1966,1968,1970],{"class":57,"line":64},[55,1967,263],{"class":262},[55,1969,267],{"class":266},[55,1971,1972],{"class":266}," xlsx\n",[55,1974,1975],{"class":57,"line":70},[55,1976,276],{"emptyLinePlaceholder":275},[55,1978,1979],{"class":57,"line":76},[55,1980,1981],{"class":256},"# 2. コードを変更\n",[55,1983,1984],{"class":57,"line":82},[55,1985,1986],{"class":256},"# Before (CDN)\n",[55,1988,1989,1992,1995,1997,2001,2004,2006],{"class":57,"line":88},[55,1990,1991],{"class":262},"const",[55,1993,1994],{"class":266}," XLSX",[55,1996,357],{"class":266},[55,1998,2000],{"class":1999},"sG7-3"," (window ",[55,2002,2003],{"class":266},"as",[55,2005,713],{"class":266},[55,2007,2008],{"class":1999},").XLSX\n",[55,2010,2011],{"class":57,"line":94},[55,2012,276],{"emptyLinePlaceholder":275},[55,2014,2015],{"class":57,"line":100},[55,2016,2017],{"class":256},"# After (npm)\n",[55,2019,2020,2022,2026,2028,2030,2032,2034,2037],{"class":57,"line":106},[55,2021,312],{"class":262},[55,2023,2025],{"class":2024},"snbK4"," *",[55,2027,709],{"class":266},[55,2029,1994],{"class":266},[55,2031,326],{"class":266},[55,2033,330],{"class":329},[55,2035,2036],{"class":266},"xlsx",[55,2038,336],{"class":329},[55,2040,2041],{"class":57,"line":112},[55,2042,276],{"emptyLinePlaceholder":275},[55,2044,2045],{"class":57,"line":118},[55,2046,2047],{"class":256},"# 3. scriptタグを削除\n",[242,2049,2051],{"id":2050},"npm-cdn-への移行","npm → CDN への移行",[45,2053,2055],{"className":247,"code":2054,"language":249,"meta":50,"style":50},"# 1. パッケージを削除\nnpm uninstall xlsx\n\n# 2. コードを変更\n# Before (npm)\nimport * as XLSX from 'xlsx'\n\n# After (CDN)\nuseHead({\n  script: [{ src: 'https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js' }]\n})\nconst XLSX = (window as any).XLSX\n",[52,2056,2057,2062,2071,2075,2079,2084,2102,2106,2111,2119,2139,2143],{"__ignoreMap":50},[55,2058,2059],{"class":57,"line":58},[55,2060,2061],{"class":256},"# 1. パッケージを削除\n",[55,2063,2064,2066,2069],{"class":57,"line":64},[55,2065,263],{"class":262},[55,2067,2068],{"class":266}," uninstall",[55,2070,1972],{"class":266},[55,2072,2073],{"class":57,"line":70},[55,2074,276],{"emptyLinePlaceholder":275},[55,2076,2077],{"class":57,"line":76},[55,2078,1981],{"class":256},[55,2080,2081],{"class":57,"line":82},[55,2082,2083],{"class":256},"# Before (npm)\n",[55,2085,2086,2088,2090,2092,2094,2096,2098,2100],{"class":57,"line":88},[55,2087,312],{"class":262},[55,2089,2025],{"class":2024},[55,2091,709],{"class":266},[55,2093,1994],{"class":266},[55,2095,326],{"class":266},[55,2097,330],{"class":329},[55,2099,2036],{"class":266},[55,2101,336],{"class":329},[55,2103,2104],{"class":57,"line":94},[55,2105,276],{"emptyLinePlaceholder":275},[55,2107,2108],{"class":57,"line":100},[55,2109,2110],{"class":256},"# After (CDN)\n",[55,2112,2113,2116],{"class":57,"line":106},[55,2114,2115],{"class":262},"useHead(",[55,2117,2118],{"class":266},"{\n",[55,2120,2121,2124,2127,2130,2132,2134,2136],{"class":57,"line":112},[55,2122,2123],{"class":262},"  script:",[55,2125,2126],{"class":1999}," [{ ",[55,2128,2129],{"class":262},"src:",[55,2131,330],{"class":329},[55,2133,589],{"class":266},[55,2135,644],{"class":329},[55,2137,2138],{"class":266}," }]\n",[55,2140,2141],{"class":57,"line":118},[55,2142,678],{"class":1999},[55,2144,2145,2147,2149,2151,2153,2155,2157],{"class":57,"line":124},[55,2146,1991],{"class":262},[55,2148,1994],{"class":266},[55,2150,357],{"class":266},[55,2152,2000],{"class":1999},[55,2154,2003],{"class":266},[55,2156,713],{"class":266},[55,2158,2008],{"class":1999},[14,2160,2161],{"id":2161},"まとめ",[242,2163,2164],{"id":2164},"選択マトリックス",[1194,2166,2167,2178],{},[1197,2168,2169],{},[1200,2170,2171,2173,2175],{},[1203,2172],{},[1203,2174,263],{},[1203,2176,2177],{},"CDN",[1210,2179,2180,2193,2204,2216,2226,2239,2250],{},[1200,2181,2182,2187,2190],{},[1215,2183,2184],{},[28,2185,2186],{},"本番環境",[1215,2188,2189],{},"⭐⭐⭐⭐⭐",[1215,2191,2192],{},"⭐⭐",[1200,2194,2195,2200,2202],{},[1215,2196,2197],{},[28,2198,2199],{},"プロトタイプ",[1215,2201,2192],{},[1215,2203,2189],{},[1200,2205,2206,2211,2213],{},[1215,2207,2208],{},[28,2209,2210],{},"型定義",[1215,2212,2189],{},[1215,2214,2215],{},"⭐",[1200,2217,2218,2222,2224],{},[1215,2219,2220],{},[28,2221,948],{},[1215,2223,2192],{},[1215,2225,2189],{},[1200,2227,2228,2233,2236],{},[1215,2229,2230],{},[28,2231,2232],{},"バンドルサイズ",[1215,2234,2235],{},"⭐⭐⭐⭐",[1215,2237,2238],{},"⭐⭐⭐",[1200,2240,2241,2246,2248],{},[1215,2242,2243],{},[28,2244,2245],{},"セキュリティ",[1215,2247,2189],{},[1215,2249,2238],{},[1200,2251,2252,2257,2259],{},[1215,2253,2254],{},[28,2255,2256],{},"オフライン開発",[1215,2258,2189],{},[1215,2260,2215],{},[242,2262,2263],{"id":2263},"推奨方針",[45,2265,2267],{"className":47,"code":2266,"language":49,"meta":50,"style":50},"graph LR\n    Default[デフォルト]\n    Prototype[プロトタイプのみ]\n    \n    Default --> NPM[npm方式]\n    Prototype --> CDN[CDN方式]\n    \n    NPM --> Reason1[型定義・安定性\u003Cbr/>バージョン管理]\n    CDN --> Reason2[素早い検証\u003Cbr/>一時的な用途]\n    \n    style NPM fill:#90EE90\n    style CDN fill:#FFB6C1\n",[52,2268,2269,2273,2278,2283,2287,2292,2297,2301,2306,2311,2315,2320],{"__ignoreMap":50},[55,2270,2271],{"class":57,"line":58},[55,2272,1513],{},[55,2274,2275],{"class":57,"line":64},[55,2276,2277],{},"    Default[デフォルト]\n",[55,2279,2280],{"class":57,"line":70},[55,2281,2282],{},"    Prototype[プロトタイプのみ]\n",[55,2284,2285],{"class":57,"line":76},[55,2286,139],{},[55,2288,2289],{"class":57,"line":82},[55,2290,2291],{},"    Default --> NPM[npm方式]\n",[55,2293,2294],{"class":57,"line":88},[55,2295,2296],{},"    Prototype --> CDN[CDN方式]\n",[55,2298,2299],{"class":57,"line":94},[55,2300,139],{},[55,2302,2303],{"class":57,"line":100},[55,2304,2305],{},"    NPM --> Reason1[型定義・安定性\u003Cbr/>バージョン管理]\n",[55,2307,2308],{"class":57,"line":106},[55,2309,2310],{},"    CDN --> Reason2[素早い検証\u003Cbr/>一時的な用途]\n",[55,2312,2313],{"class":57,"line":112},[55,2314,139],{},[55,2316,2317],{"class":57,"line":118},[55,2318,2319],{},"    style NPM fill:#90EE90\n",[55,2321,2322],{"class":57,"line":124},[55,2323,2324],{},"    style CDN fill:#FFB6C1\n",[18,2326,2327],{},[28,2328,2329],{},"基本原則:",[1776,2331,2332,2338,2344],{},[25,2333,2334,2335,2337],{},"迷ったら ",[28,2336,263],{}," を選ぶ",[25,2339,2340,2341,2343],{},"プロトタイプ・検証段階なら ",[28,2342,2177],{}," も可",[25,2345,2346,2347,2349],{},"本番に近づいたら ",[28,2348,263],{}," に移行",[14,2351,2352],{"id":2352},"参考リンク",[1776,2354,2355,2364,2371,2378],{},[25,2356,2357],{},[2358,2359,2363],"a",{"href":2360,"rel":2361},"https://docs.npmjs.com/",[2362],"nofollow","npm公式ドキュメント",[25,2365,2366],{},[2358,2367,2370],{"href":2368,"rel":2369},"https://www.jsdelivr.com/",[2362],"jsDelivr CDN",[25,2372,2373],{},[2358,2374,2377],{"href":2375,"rel":2376},"https://unpkg.com/",[2362],"unpkg CDN",[25,2379,2380],{},[2358,2381,2384],{"href":2382,"rel":2383},"https://vitejs.dev/",[2362],"Vite ビルドツール",[2386,2387,2388],"style",{},"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 .sxvE3, html code.shiki .sxvE3{--shiki-default:#A0ADA0;--shiki-dark:#A0ADA0}html pre.shiki code .senZ8, html code.shiki .senZ8{--shiki-default:#59873A;--shiki-dark:#59873A}html pre.shiki code .sdGka, html code.shiki .sdGka{--shiki-default:#B56959;--shiki-dark:#B56959}html pre.shiki code .sHkkW, html code.shiki .sHkkW{--shiki-default:#1E754F;--shiki-dark:#1E754F}html pre.shiki code .shFtX, html code.shiki .shFtX{--shiki-default:#999999;--shiki-dark:#999999}html pre.shiki code .s4oTP, html code.shiki .s4oTP{--shiki-default:#B07D48;--shiki-dark:#B07D48}html pre.shiki code .sMJiu, html code.shiki .sMJiu{--shiki-default:#B5695977;--shiki-dark:#B5695977}html pre.shiki code .stQ0i, html code.shiki .stQ0i{--shiki-default:#AB5959;--shiki-dark:#AB5959}html pre.shiki code .sz8Xr, html code.shiki .sz8Xr{--shiki-default:#998418;--shiki-dark:#998418}html pre.shiki code .sSkh3, html code.shiki .sSkh3{--shiki-default:#2E8F82;--shiki-dark:#2E8F82}html pre.shiki code .sM54T, html code.shiki .sM54T{--shiki-default:#2F798A;--shiki-dark:#2F798A}html pre.shiki code .sG7-3, html code.shiki .sG7-3{--shiki-default:#393A34;--shiki-dark:#393A34}html pre.shiki code .snbK4, html code.shiki .snbK4{--shiki-default:#A65E2B;--shiki-dark:#A65E2B}",{"title":50,"searchDepth":64,"depth":64,"links":2390},[2391,2392,2393,2401,2409,2410,2414,2418,2419,2424,2428,2432],{"id":16,"depth":64,"text":16},{"id":43,"depth":64,"text":43},{"id":240,"depth":64,"text":240,"children":2394},[2395,2396,2397,2398,2399,2400],{"id":244,"depth":70,"text":244},{"id":294,"depth":70,"text":294},{"id":371,"depth":70,"text":371},{"id":476,"depth":70,"text":476},{"id":518,"depth":70,"text":518},{"id":542,"depth":70,"text":542},{"id":553,"depth":64,"text":554,"children":2402},[2403,2404,2405,2406,2407,2408],{"id":557,"depth":70,"text":557},{"id":681,"depth":70,"text":294},{"id":838,"depth":70,"text":371},{"id":941,"depth":70,"text":476},{"id":976,"depth":70,"text":518},{"id":1024,"depth":70,"text":542},{"id":1033,"depth":64,"text":1033},{"id":1189,"depth":64,"text":1189,"children":2411},[2412,2413],{"id":1192,"depth":70,"text":1192},{"id":1311,"depth":70,"text":1312},{"id":1409,"depth":64,"text":1409,"children":2415},[2416,2417],{"id":1412,"depth":70,"text":1413},{"id":1503,"depth":70,"text":1503},{"id":1630,"depth":64,"text":1630},{"id":1786,"depth":64,"text":1786,"children":2420},[2421,2422,2423],{"id":1789,"depth":70,"text":1790},{"id":1900,"depth":70,"text":1901},{"id":1915,"depth":70,"text":1916},{"id":1949,"depth":64,"text":1949,"children":2425},[2426,2427],{"id":1952,"depth":70,"text":1953},{"id":2050,"depth":70,"text":2051},{"id":2161,"depth":64,"text":2161,"children":2429},[2430,2431],{"id":2164,"depth":70,"text":2164},{"id":2263,"depth":70,"text":2263},{"id":2352,"depth":64,"text":2352},null,"npmインストールとCDN読み込みの違い、メリット・デメリット、使い分けの基準を図解で解説","md",{},"/npm-vs-cdn-guide",false,"2025-11-12T00:00:00.000Z",{"title":5,"description":2434},"2025-11/2025-11-12/npm-vs-cdn-guide",[263,2443,2444,2445,2446,2447],"cdn","javascript","build","webpack","vite","00qBwdE0Otq5RugXH8tXsOF1_aLiirnO7_-JMEIzuKc",[],[2451,2455,2459,2463,2467],{"title":2452,"path":2453,"publishedAt":2454},"pnpm build vs npm run build の違い","/pnpm-vs-npm-build-commands","2025-11-14T00:00:00.000Z",{"title":2456,"path":2457,"publishedAt":2458},"Claude Codeの自動メモリ棚卸しとccusageトークン使用量確認 ― 運用メンテナンスの一日","/claude-code-memory-inventory","2026-07-03T00:00:00.000Z",{"title":2460,"path":2461,"publishedAt":2462},"会計ソフトA内部APIハンズオン3記事のスタイル統一と実機検証","/mf-internal-api-handson-live-verification","2026-06-21T00:00:00.000Z",{"title":2464,"path":2465,"publishedAt":2466},"IIFE（即時実行関数式）とは何か ― なぜ昔は使われ、今ES Modules時代に減ったのか","/iife-immediately-invoked-function-expression","2026-06-09T00:00:00.000Z",{"title":2468,"path":2469,"publishedAt":2466},"Number.isFinite と isFinite の違い ― JavaScript で「有限の数か」を判定する正しい書き方","/number-isfinite-explained","https://log.eurekapu.com/og/blog/npm-vs-cdn-guide.png?v=2025-11-12T00%3A00%3A00.000Z&title=npm%20vs%20CDN%20-%20JavaScript%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E6%96%B9%E6%B3%95%E3%81%AE%E9%81%95%E3%81%84%E3%81%A8%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91&author=Kei%20Komatsu&sig=9acbb4232236c260",1785654660081]