• #npm
  • #cdn
  • #javascript
  • #build
  • #webpack
  • #vite
未分類

npm vs CDN - JavaScriptライブラリの読み込み方法の違いと使い分け

概要

JavaScriptのライブラリを使う方法は大きく分けて2つあります:

  1. npm（Node Package Manager）でインストール - ビルド時にバンドル
  2. CDN（Content Delivery Network）で読み込み - ブラウザから直接読み込み

このドキュメントでは、それぞれの違い、メリット・デメリット、使い分けの基準を解説します。

基本的な違い

npm方式の詳細

インストール方法

# package.jsonに追加してインストール
npm install hyperformula

# または
pnpm add hyperformula

コード内での使用

// トップレベルでimport
import { HyperFormula } from 'hyperformula'

// 使用
const hf = HyperFormula.buildEmpty()

処理フロー

メリット

  1. ✅ 型定義が使える - TypeScriptの補完・型チェック
  2. ✅ Tree Shaking - 使わない部分は削除（ファイルサイズ削減）
  3. ✅ バージョン固定 - package.jsonで管理
  4. ✅ オフライン開発可能 - インターネット不要
  5. ✅ ビルド時エラー検出 - 事前に問題を発見
  6. ✅ モジュール統合 - 他のコードと一緒にバンドル

デメリット

  1. ❌ ビルドが必要 - 開発時に時間がかかる
  2. ❌ node_modules肥大化 - ディスク容量を消費
  3. ❌ セットアップが複雑 - ビルドツールの設定が必要

ファイル構造

project/
├── package.json              # 依存関係定義
├── node_modules/
│   └── hyperformula/        # インストールされたパッケージ
│       ├── dist/
│       ├── types/           # 型定義ファイル
│       └── package.json
├── src/
│   └── app.ts               # import文で使用
└── dist/
    └── bundle.js            # ビルド後（HyperFormulaを含む）

CDN方式の詳細

読み込み方法

方法1: HTMLで直接読み込み

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>

方法2: VueのuseHeadで読み込み

useHead({
  script: [
    {
      src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js',
      async: true,
    }
  ]
})

コード内での使用

// グローバル変数としてアクセス
const XLSX = (window as any).XLSX

// 読み込み待機が必要
onMounted(() => {
  const checkXLSX = setInterval(() => {
    if (typeof (window as any).XLSX !== 'undefined') {
      clearInterval(checkXLSX)
      // ここで使用開始
    }
  }, 100)
})

処理フロー

メリット

  1. ✅ セットアップ簡単 - scriptタグ1行で完了
  2. ✅ ビルド不要 - すぐに使える
  3. ✅ キャッシュ活用 - 他サイトで使っていればキャッシュヒット
  4. ✅ バンドルサイズ削減 - アプリのbundle.jsに含まれない
  5. ✅ 素早いプロトタイピング - 検証段階で便利

デメリット

  1. ❌ 型定義がない - TypeScript補完なし（any型で扱う）
  2. ❌ 読み込み待機が必要 - windowオブジェクトに追加されるタイミングが不確定
  3. ❌ ネットワーク依存 - CDNがダウンすると動かない
  4. ❌ バージョン管理が困難 - URLを手動で管理
  5. ❌ Tree Shakingなし - ライブラリ全体を読み込む
  6. ❌ セキュリティリスク - CDN改ざんのリスク

ファイル構造

project/
├── src/
│   └── app.vue              # (window as any).XLSXで使用
└── dist/
    └── bundle.js            # XLSXは含まれない

# ブラウザで実行時
https://cdn.jsdelivr.net/   # CDNから直接読み込み

使い分けフローチャート

具体的な判断基準

npm方式を選ぶべきケース

条件理由
本番環境のプロジェクト安定性・セキュリティが重要
TypeScriptプロジェクト型定義で開発効率アップ
大規模なライブラリTree Shakingでサイズ削減
チーム開発バージョン管理が明確
複数ライブラリの連携ビルド時に最適化

例:

// HyperFormulaの場合
import { HyperFormula } from 'hyperformula'  // ✓ 型定義あり
const hf = HyperFormula.buildEmpty()         // ✓ 補完効く

CDN方式を選ぶべきケース

条件理由
プロトタイプ・デモ素早く動作確認したい
簡単なWebページビルド環境不要
CDNキャッシュ活用読み込み高速化
古いライブラリnpmパッケージがない
一時的な検証インストール不要

例:

// XLSXの場合
const XLSX = (window as any).XLSX  // ✗ 型なし
// ただし、プロトタイプには十分

実際のプロジェクトでの使い分け例

Excel Viewer (apps/web/app/pages/excel-viewer.vue)

// HyperFormula - npm方式
import { HyperFormula } from 'hyperformula'
// 理由: 型定義が必要、本番環境、頻繁に使用

// XLSX - CDN方式
useHead({
  script: [{
    src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js'
  }]
})
// 理由: ファイルサイズ大きい、型定義なしでも問題ない、
//       ページビュー専用機能

判断の経緯

併用パターン

両方を組み合わせることも可能です。

// コアライブラリ - npm
import { HyperFormula } from 'hyperformula'
import axios from 'axios'
import { ref, computed } from 'vue'

// 補助ライブラリ - CDN
useHead({
  script: [
    { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js' },
    { src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js' }
  ]
})

判断基準:

  • 頻繁に使う・型が必要 → npm
  • たまに使う・型不要 → CDN

よくある質問

Q1: CDNの方がバンドルサイズが小さくなる？

A: 必ずしもそうではありません。

Q2: CDNは速い？

A: キャッシュヒット時は速いが、初回は遅い可能性あり

初回アクセス:
  npm: bundle.js (自サーバー) → 速い
  CDN: 外部サーバー → 遅い可能性

2回目以降（キャッシュヒット）:
  npm: bundle.js → 速い
  CDN: キャッシュ → 非常に速い

Q3: どちらが主流？

A: モダンなプロジェクトではnpmが主流

移行パターン

CDN → npm への移行

# 1. パッケージをインストール
npm install xlsx

# 2. コードを変更
# Before (CDN)
const XLSX = (window as any).XLSX

# After (npm)
import * as XLSX from 'xlsx'

# 3. scriptタグを削除

npm → CDN への移行

# 1. パッケージを削除
npm uninstall xlsx

# 2. コードを変更
# Before (npm)
import * as XLSX from 'xlsx'

# After (CDN)
useHead({
  script: [{ src: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js' }]
})
const XLSX = (window as any).XLSX

まとめ

選択マトリックス

npmCDN
本番環境⭐⭐⭐⭐⭐⭐⭐
プロトタイプ⭐⭐⭐⭐⭐⭐⭐
型定義⭐⭐⭐⭐⭐⭐
セットアップ簡単⭐⭐⭐⭐⭐⭐⭐
バンドルサイズ⭐⭐⭐⭐⭐⭐⭐
セキュリティ⭐⭐⭐⭐⭐⭐⭐⭐
オフライン開発⭐⭐⭐⭐⭐⭐

推奨方針

基本原則:

  • 迷ったら npm を選ぶ
  • プロトタイプ・検証段階なら CDN も可
  • 本番に近づいたら npm に移行

参考リンク