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.jsonpackage.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.3npmスクリプト
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 packagenpm と 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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ES モジュール:import・export・dynamic import
- npm と package.json:dependencies・scripts
- Vite:開発サーバーとビルド
- バンドルの概念:tree shaking・コード分割