プログラミングをしていると
ライブラリ / パッケージ / モジュール という単語に多くの諸学者が悩まされがちです。
（自分も例外ではありません…）
そこで今回は、自分なりに整理して理解できた内容を、React を例にしながら解説していこうと思います。
1. 定義
ライブラリ
- 便利な機能をまとめたコード集
- パッケージをいくつかまとめてインストールできるようにしたものです。
例えで言うなら、「箱」 - 単独でも使えるが、多くは他のアプリやプロジェクトで利用される前提
- 例：
React、Lodash
パッケージ
- ライブラリやアプリを配布可能な形にまとめたもの
- モジュールの集まったものがパッケージとなります。
-
package.jsonを持つ - npm や yarn などのパッケージマネージャーでインストールできる
- 例：
reactパッケージ（npm に公開されている React）
モジュール
- 1つのファイル単位のコード
- 例えで言うなら「部品」や「歯車」
具体的に言うと拡張子が「.jsx」や「.js」のファイルは全てモジュールとなります。 - 他のファイルから
import/exportで読み込める - 例：
react/index.jsやreact/jsx-runtime.js
少しまとめてそれぞれ一言で言ってみると
- モジュール → 最小単位（ファイル1つ）
- パッケージ → モジュールをまとめたもの（配布できる形）
- ライブラリ → パッケージやモジュールをまとめた「機能集」という概念的な呼び方
よって ライブラリ > パッケージ > モジュール
の包含関係になっています!
2. 階層イメージ
npm レジストリ
└── react（パッケージ）
├── index.js（モジュール）
├── jsx-runtime.js（モジュール）
└── ...
- npm レジストリ … 世界中のパッケージが登録されている倉庫
- パッケージ … 1つのライブラリを配布するための箱
- モジュール … 実際の中身（JSファイル）
モジュール（部品）
↓ 複数集まる
パッケージ（部品箱）
↓ 機能として利用
ライブラリ（便利な道具セット）みたいなイメージですかね?
3. React の import 例
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
-
'react' や 'react-dom/client' は パッケージ名
-
その中の StrictMode や createRoot は モジュールで書かれた機能
4. 終わりに
今回はreactを例にして、ライブラリ、パッケージ、モジュールを解説しました。
もし内容に誤りや補足があれば、ぜひコメントで教えていただけると嬉しいです。
自分自身まだ学習中なので、フィードバックをもとに記事も改善していきます。