JavaScriptの基礎 - パッケージ管理のソースを表示

== 概要 ==
npm (Node Package Manager) は、Node.js に同梱される標準のパッケージマネージャーである。<br>
<br>
npm Registryという世界最大級のソフトウェアレジストリを管理しており、250万以上のパッケージが公開されている。<br>
JavaScriptおよびNode.jsのエコシステムにおいて、ライブラリや開発ツールの配布・管理の中心的な役割を担っている。<br>
<br>
npmを利用することで、以下に示すことが可能になる。<br>
<br>
<center>
{| class="wikitable"
|+ npmで可能なこと
! 項目 !! 説明
|-
| プロジェクトの依存パッケージの管理 || package.jsonファイルに依存関係を記録して、チーム間で環境を統一する。
|-
| パッケージのインストール・更新・削除 || コマンド1つで外部ライブラリの導入や管理ができる。
|-
| スクリプトの実行 || ビルド、テスト、起動等の作業コマンドを定義して実行できる。
|-
| バージョン管理 || セマンティックバージョニングにより、依存パッケージのバージョンを制御できる。
|}
</center>
<br><br>

== npmの基本 ==
==== npmとは ====
npmは、Node.jsに標準同梱されるパッケージマネージャーであり、Node.jsをインストールすると自動的に利用可能になる。<br>
<br>
npmの主な構成要素を以下に示す。<br>
<br>
<center>
{| class="wikitable"
|+ npmの構成要素
! 構成要素 !! 説明
|-
| npm CLI || コマンドラインから操作するツール<br>パッケージのインストール、スクリプトの実行等を行う。
|-
| npm Registry || パッケージが公開されるオンラインリポジトリ<br>デフォルトは、https://registry.npmjs.org
|-
| package.json || プロジェクトのメタデータと依存関係を定義するファイル
|}
</center>
<br>
npmのバージョンを確認する。<br>
 npm --version
<br>
Node.jsとともに最新版を使用することが推奨される。<br>
<br>
==== npmの初期化 ====
新しいプロジェクトでnpmを使用する場合、まず <code>npm init</code> コマンドでプロジェクトを初期化する。<br>
<br>
初期化方法は以下に示す2通りがある。<br>
<br>
* 対話的に初期化する方法
*: プロジェクト名、バージョン、説明等を対話的に入力して、package.jsonファイルを生成する。
*: <pre>npm init</pre>
*: <br>
* デフォルト値で自動生成する方法
*: 全ての項目にデフォルト値を使用して、package.jsonを生成する。
*: nameはディレクトリ名、versionは1.0.0となる。
*: <pre>npm init -y</pre>
<br>
初期化後、プロジェクトのルートディレクトリにpackage.jsonファイルが生成される。<br>
<br><br>

== package.json ==
==== 基本構造 ====
package.jsonファイルは、JSON形式のファイルであり、プロジェクトの設定・依存関係の管理に使用する。<br>
package.jsonには、<code>name</code> と <code>version</code> のみが必要である。<br>
<br>
 <syntaxhighlight lang="json">
 {
    "name": "my-project",
    "version": "1.0.0",
    "description": "プロジェクトの説明",
    "main": "index.js",
    "scripts": {
       "start": "node index.js",
       "test": "jest"
    },
    "dependencies": {
       "express": "^4.18.2"
    },
    "devDependencies": {
       "jest": "^29.0.0"
    }
 }
 </syntaxhighlight>
<br>
==== 主要フィールド ====
下表に、package.jsonファイルで使用できる主要フィールドを示す。<br>
<br>
<center>
{| class="wikitable"
|+ package.json 主要フィールド一覧
! フィールド !! 必須 !! 用途 !! 説明
|-
| <code>name</code> || 必須 || プロジェクト識別 || パッケージ名<br>小文字・ハイフン区切りを推奨
|-
| <code>version</code> || 必須 || バージョン管理 || semver形式 (例: 1.0.0)
|-
| <code>description</code> || 省略可 || メタデータ || パッケージの簡潔な説明
|-
| <code>main</code> || 省略可 || エントリーポイント || CommonJS形式のメインファイル
|-
| <code>module</code> || 省略可 || ESM対応 || ESM形式のメインファイル
|-
| <code>type</code> || 省略可 || モジュール形式 || "module" または "commonjs" を指定
|-
| <code>exports</code> || 省略可 || エクスポート設定 || 条件付きエクスポートの定義
|-
| <code>scripts</code> || 省略可 || コマンド定義 || 開発・テスト等のコマンドを定義
|-
| <code>dependencies</code> || 省略可 || 本番依存 || 本番環境で必要なパッケージ
|-
| <code>devDependencies</code> || 省略可 || 開発依存 || 開発時のみ必要なパッケージ
|-
| <code>peerDependencies</code> || 省略可 || ピア依存 || ホスト側が提供すべきパッケージ
|-
| <code>engines</code> || 省略可 || 実行環境 || 必要なNode.jsバージョンの指定
|-
| <code>license</code> || 省略可 || ライセンス || MIT<br>Apache-2.0 等
|-
| <code>repository</code> || 省略可 || リポジトリ || ソースコード管理の場所
|}
</center>
<br>
==== scriptsフィールド ====
<code>scripts</code> フィールドには、プロジェクトで使用するコマンドを定義する。<br>
定義したスクリプトは <code>npm run <スクリプト名></code> で実行できる。<br>
<br>
 <syntaxhighlight lang="json">
 {
    "scripts": {
       "start": "node index.js",
       "test": "jest",
       "build": "webpack --mode production",
       "dev": "webpack --mode development --watch",
       "prebuild": "rimraf dist",
       "postbuild": "echo 'ビルド完了'"
    }
 }
 </syntaxhighlight>
<br>
下表に、スクリプトの実行方法と特殊なスクリプト名を示す。<br>
<br>
<center>
{| class="wikitable"
|+ スクリプトの実行方法と特殊なスクリプト名
! コマンド !! 説明
|-
| npm start || <code>start</code> スクリプトを実行する。<br><code>run</code> プレフィックスが不要
|-
| npm test || <code>test</code> スクリプトを実行する。<br><code>run</code> プレフィックスが不要
|-
| npm run build || <code>build</code> スクリプトを実行する。<br><code>run</code> プレフィックスが必要
|-
| npm run dev || <code>dev</code> スクリプトを実行する。
|}
</center>
<br>
pre / post スクリプトについて以下に示す。<br>
スクリプト名に <code>pre</code> または <code>post</code> プレフィックスを付けると、自動的に前後に実行される。<br>
例えば、<code>build</code> を実行した場合、<code>prebuild</code> -> <code>build</code> -> <code>postbuild</code> の順に自動実行される。<br>
<br><br>

== 依存関係の管理 ==
==== dependencies ====
<code>dependencies</code> は本番環境で動作するために必要なパッケージを定義するフィールドである。<br>
<br>
パッケージを <code>dependencies</code> に追加するには以下のコマンドを使用する。<br>
<br>
 npm install express
 npm install express axios
<br>
インストール後、package.jsonファイルの <code>dependencies</code> に自動で追加される。<br>
<br>
 <syntaxhighlight lang="json">
 {
    "dependencies": {
       "axios": "^1.6.0",
       "express": "^4.18.2"
    }
 }
 </syntaxhighlight>
<br>
<code>dependencies</code> の代表的なパッケージを以下に示す。<br>
* express
*: Node.jsのWeb フレームワーク
* axios
*: HTTPクライアントライブラリ
* react
*: UIライブラリ
<br>
==== devDependencies ====
<code>devDependencies</code> は開発時のみ必要なパッケージを定義するフィールドである。<br>
テストフレームワーク、リンター、バンドラー等、本番環境には含めないパッケージを管理する。<br>
<br>
パッケージを <code>devDependencies</code> に追加するには以下のコマンドを使用する。<br>
 npm install --save-dev jest
 npm install -D jest eslint webpack
<br>
本番環境でのみ依存関係をインストールする場合は以下のコマンドを使用する。<br>
 npm install --production
<br>
<code>devDependencies</code> の代表的なパッケージを以下に示す。<br>
* jest
*: JavaScriptテストフレームワーク
* eslint
*: コード品質チェックツール
* webpack
*: モジュールバンドラー
* typescript
*: TypeScriptコンパイラ
<br>
==== peerDependencies ====
<code>peerDependencies</code> は、プラグインやライブラリがホスト側に期待するパッケージを定義するフィールドである。<br>
<br>
ライブラリを開発する場合、利用者のプロジェクトに既にインストールされていることを前提とするパッケージを指定する。<br>
<br>
 <syntaxhighlight lang="json">
 {
    "peerDependencies": {
       "react": ">=17.0.0",
       "react-dom": ">=17.0.0"
    }
 }
 </syntaxhighlight>
<br>
npm v7以降では、<code>peerDependencies</code> に記載されたパッケージが自動的にインストールされる。<br>
npm v6以前では、警告が表示されるのみで自動インストールは行われなかった。<br>
<br>
==== dependenciesの使い分け ====
下表に、3種類の依存関係の使い分けを示す。<br>
<br>
<center>
{| class="wikitable"
|+ 依存関係の種別と使い分け
! 種別 !! インストールコマンド !! 本番環境 !! 使用例
|-
| <code>dependencies</code> || npm install <パッケージ名> || 含まれる || express, react, axios
|-
| <code>devDependencies</code> || npm install --save-dev <パッケージ名> || 含まれない || jest, eslint, webpack
|-
| <code>peerDependencies</code> || ホスト側が提供 || ホスト側管理 || フレームワーク依存のプラグイン
|}
</center>
<br><br>

== セマンティックバージョニング ==
==== バージョン番号の構造 ====
セマンティックバージョニング (Semantic Versioning / semver) は、バージョン番号の付け方に関する仕様である。<br>
npm パッケージのバージョン管理において標準的に使用される。<br>
<br>
バージョン番号は <code>MAJOR.MINOR.PATCH</code> の形式で表される。<br>
例: <u>1.2.3</u><br>
<br>
下表に、各番号の意味を示す。<br>
<br>
<center>
{| class="wikitable"
|+ セマンティックバージョニングの各バージョン番号の意味
! バージョン番号 !! 説明
|-
| MAJOR (メジャー) || 後方互換性のない破壊的変更が行われた場合にインクリメントする。<br>例: API の仕様変更、機能の削除
|-
| MINOR (マイナー) || 後方互換性を保ちながら新機能が追加された場合にインクリメントする。<br>例: 新しい関数やオプションの追加
|-
| PATCH (パッチ) || 後方互換性を保ちながらバグが修正された場合にインクリメントする。<br>例: バグ修正、セキュリティパッチ
|}
</center>
<br>
==== バージョン範囲指定 ====
package.jsonファイルでパッケージのバージョンを指定する時、範囲を指定する記号を使用できる。<br>
<br>
<center>
{| class="wikitable"
|+ バージョン範囲指定記号
! 記号 !! 例 !! 範囲 !! 説明
|-
| <code>^</code> (キャレット) || ^1.2.3 || 1.2.3〜2.0.0未満 || MINOR / PATCH の更新を許可 (npm install時のデフォルト)
|-
| <code>~</code> (チルダ) || ~1.2.3 || 1.2.3〜1.3.0未満 || PATCHの更新のみ許可
|-
| <code><nowiki>>=</nowiki></code> || >=1.2.3 || 1.2.3〜 || 指定バージョン以上の全バージョン
|-
| <code><nowiki><</nowiki></code> || <1.2.3 || 1.2.2以下 || 指定バージョン未満の全バージョン
|-
| <code>=</code> || =1.2.3 || 1.2.3のみ || 完全一致
|-
| <code>*</code> || * || 全バージョン || バージョンを限定しない
|}
</center>
<br>
==== package-lock.json ====
package-lock.jsonファイルは、プロジェクトの依存関係の正確なバージョンを記録するロックファイルである。<br>
<code>npm install</code> を実行するたびに自動生成・更新される。<br>
<br>
package-lock.jsonファイルの役割を以下に示す。<br>
<br>
<center>
{| class="wikitable"
|+ ロックファイルのメリット
! メリット !! 説明
|-
| 再現性の確保
|
* チームメンバーやCI/CD環境で全く同じバージョンの依存関係をインストールできる。
* package.jsonファイルのバージョン範囲指定 (^ や ~ 等) があっても、ロックファイルで固定される。
|-
| セキュリティ || 意図しないバージョンアップによる問題を防ぐことができる。
|-
| インストール速度の向上 || ロックファイルを参照することにより、バージョン解決の処理を省略できる。
|}
</center>
<br>
package-lock.jsonファイルは、gitリポジトリに含めて共有することが推奨される。<br>
node_modulesディレクトリは、gitの管理対象外 (.gitignoreファイルに追加) とする。<br>
<br><br>

== よく使用するコマンド ==
==== パッケージのインストール ====
パッケージのインストールに使用するコマンドを以下に示す。<br>
<br>
 # package.jsonファイルの依存関係を全てインストール
 npm install
 npm i
<br>
 # 特定のパッケージをインストール (dependenciesフィールドに追加)
 npm install <パッケージ名>
 npm i <パッケージ名>
<br>
 # devDependenciesにインストール
 npm install --save-dev <パッケージ名>
 npm i -D <パッケージ名>
<br>
 # グローバルにインストール
 npm install -g <パッケージ名>
<br>
 # 特定のバージョンを指定してインストール
 npm install <パッケージ名>@1.2.3
<br>
==== パッケージの更新と削除 ====
パッケージの更新・削除に使用するコマンドを以下に示す。<br>
<br>
 # 全パッケージを更新 (package.jsonファイルのバージョン範囲内で)
 npm update
<br>
 # 更新可能なパッケージを一覧表示
 npm outdated
<br>
 # パッケージをアンインストール
 npm uninstall <パッケージ名>
<br>
==== スクリプトの実行 ====
package.jsonファイルの <code>scripts</code> フィールドに定義したコマンドを実行する。<br>
<br>
 # startスクリプトを実行
 npm start
<br>
 # testスクリプトを実行
 npm test
<br>
 # 任意のスクリプトを実行
 npm run <スクリプト名>
<br>
 # 定義済みスクリプトの一覧を表示
 npm run
<br>
==== パッケージ情報の確認 ====
パッケージや依存関係の情報を確認するコマンドを以下に示す。<br>
<br>
 # インストール済みパッケージの一覧を表示
 npm list
 npm ls
<br>
 # パッケージの詳細情報を表示 (Registry に公開されている情報)
 npm info パッケージ名
<br>
 # セキュリティ脆弱性の確認
 npm audit
<br>
 # 脆弱性の自動修正
 npm audit fix
<br><br>

== npxコマンド ==
npxは、npm v5.2.0以降に同梱されるコマンド実行ツールである。<br>
パッケージをグローバルにインストールすることなく、一時的にパッケージを実行できる。<br>
<br>
npxの主な用途を以下に示す。<br>
<br>
* プロジェクトの雛型生成
*: グローバルインストールなしに、最新のプロジェクト生成ツールを実行できる。
*: <syntaxhighlight lang="text">
 npx create-react-app my-app
 npx create-next-app@latest my-next-app
 </syntaxhighlight>
*: <br>
* ローカルパッケージのコマンド実行
*: node_modules/.bin に存在するコマンドを実行できる。
*: <syntaxhighlight lang="text">
 npx eslint src/
 npx tsc --version
 </syntaxhighlight>
*: <br>
* 一時的なツールの実行
*: インストールせずにCLIツールを試したり、1度だけ使用したりできる。
*: <syntaxhighlight lang="text">
 npx http-server
 npx serve .
 </syntaxhighlight>
<br>
npxを使用することにより、グローバルのnode_modulesを汚染せずにツールを利用できる。<br>
また、常に最新バージョンのパッケージを実行する場合にも有用である。<br>
<br><br>

== 関連情報 ==
* [[JavaScriptの基礎 - ESモジュール]]
* [[JavaScriptの基礎 - エラーハンドリング]]
<br><br>


{{#seo:
|title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki
|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,電気回路,電子回路,基板,プリント基板
|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
|image=/resources/assets/MochiuLogo_Single_Blue.png
}}

__FORCETOC__
[[カテゴリ:Web]]