0Pricing
Frontend Academy · レッスン

npm と package.json:dependencies・scripts

npm init でプロジェクトを初期化し、実行時依存関係と開発依存関係を追加し、再利用可能な npm スクリプトを書き、semver を理解します。

「npm と package.json:dependencies・scripts」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

npmとは

npm(Node Package Manager)は、プロジェクトの依存関係とスクリプトを管理します。インストールするものを把握するために package.json を読み込み、正確なバージョンを記録するために package-lock.json を書き込みます。npmレジストリには200万以上のパッケージが公開されています。

プロジェクトの初期化

npm init -y は、デフォルト値を設定した package.json を作成します。-y フラグを指定すると、確認なしですべてのデフォルト値を受け入れます。

mkdir my-project && cd my-project
npm init -y
# Creates package.json

package.json ファイル

主なフィールドは、name、version、description、main(エントリーポイント)、scripts、dependencies、devDependencies です。

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "jest"
  },
  "dependencies": {
    "react": "^18.3.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

パッケージのインストール

npm install package は依存関係に追加します。npm install -D package はdevDependenciesに追加します(本番環境では不要です)。引数なしの npm install は、package.jsonに記載されたすべてのパッケージをインストールします。

npm install react react-dom      # production dep
npm install -D vite jest eslint  # dev deps only
npm install                      # install all from package.json

セマンティックバージョニング

npmはsemverを使用します: major.minor.patch。^ プレフィックスは、互換性のある更新(同じmajor)を許可します。~ プレフィックスは、パッチ更新だけを許可します。正確なバージョンにはプレフィックスを付けません。

"react": "^18.3.0"  // 18.3.0 to < 19.0.0 (compatible)
"lodash": "~4.17.21" // 4.17.21 to < 4.18.0 (patch only)
"fixed": "1.2.3"     // exactly 1.2.3

npmスクリプト

scripts フィールドにコマンドを定義します。npm run scriptname で実行します。組み込みスクリプト(test、start)は、npm test または npm start で直接実行できます。

"scripts": {
  "dev": "vite",
  "build": "tsc && vite build",
  "preview": "vite preview",
  "test": "jest --coverage",
  "lint": "eslint src",
  "typecheck": "tsc --noEmit"
}

npm run と npx

npm run はpackage.jsonのスクリプトを実行します。npx はnode_modulesにあるパッケージを実行するか、パッケージを一時的にダウンロードして実行します。npx create-vite@latest のような単発のコマンドに便利です。

package-lock.json

package-lock.json は、インストールされたすべてのパッケージとその推移的な依存関係の正確なバージョンを記録します。すべての開発者とCIで同じバージョンを使用できるよう、コミットしてください。手動で編集してはいけません。

node_modules と .gitignore

node_modules は数百MBになることがあるため、決してコミットしないでください。必ず .gitignore に追加します。誰でも npm install で復元できます。

# .gitignore
node_modules/

パッケージの更新と削除

npm update は、semver の範囲内でパッケージを更新します。npm outdated は、更新可能なパッケージを表示します。npm uninstall package は、パッケージを削除します。

npm outdated                # show outdated packages
npm update react             # update to latest compatible
npm uninstall lodash         # remove package

npm と yarn と pnpm

npm の代替には、yarn(高速、ワークスペース、Plug'n'Play)や pnpm(ディスク効率のよいシンボリックリンクストア、厳格な依存関係管理、モノレポで最速)があります。基本的なコマンドは3つとも似ています。

# pnpm equivalents:
pnpm install
pnpm add react
pnpm add -D vite
pnpm run dev

確認問題

npm install -D jest を実行したとき、-D フラグは何をしますか?

まとめ:npm と package.json

npm init は package.json を作成します。npm install は依存関係を追加します。-D は devDependencies に追加するためのオプションです。semver の ^ は互換性のある更新を意味します。Scripts では npm run でコマンドを実行します。package-lock.json は正確なバージョンを記録するため、コミットしてください。node_modules は .gitignore に追加します。npx はパッケージのコマンドを一度だけ実行します。

よくある質問

「npm と package.json:dependencies・scripts」レッスンは無料ですか?

はい。「npm と package.json:dependencies・scripts」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「npm と package.json:dependencies・scripts」で何を学びますか?

npm init でプロジェクトを初期化し、実行時依存関係と開発依存関係を追加し、再利用可能な npm スクリプトを書き、semver を理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか?

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「npm と package.json:dependencies・scripts」レッスンにはどのくらい時間がかかりますか?

ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか?

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ES モジュール:import・export・dynamic import
  2. npm と package.json:dependencies・scripts
  3. Vite:開発サーバーとビルド
  4. バンドルの概念:tree shaking・コード分割
← Frontend Academyに戻る