JavaScript基礎｜パッケージ管理システム(NPM)、モジュール管理、ビルドの仕組み

🛠️パッケージ管理システム

パッケージ管理システムは、コードを使いやすく、効率的に管理するための仕組み。依存関係（dependency） の管理を簡単にするために重要。

多くのパッケージ（ライブラリ）は、他のパッケージに依存して動作している。
パッケージ管理システムがない場合、依存関係を自分でインストールや管理をすることになる。

例えば、AというパッケージがBとCに依存していた場合、npmはBとCも自動的にインストールしてくれる。これを手動でやるととても大変。

インストール漏れやバージョン衝突を防ぐために、パッケージ管理システムが不可欠となっている。

✅JavaScriptではNPM（Node Package Manager）、PHPではComposerがそれぞれパッケージ管理システムとして使用されている。

🧵バンドラー（Bundler）

JavaScriptで複数のモジュールを使用する場合、一つ一つを読み込んでいると不可がかかってしまう。
その他にも、a.jsのファイルの値や関数を元に、b.jsを作成していた場合、a.jsを書き換えるとb.jsにバグが出る。
また、ファイルは上から読み込まれているため、読み込む順番を変えてもとバグが生じてしまう。

そこで、複数のファイルを一つのファイルにまとめてくれるバンドラーを使用することに。依存関係を解決してブラウザへのリクエストを減らしてパフォーマンスを上げてくれる。

現在もっとも広く使われているJavaScriptのバンドルツールがWebpack。

Webpack

• ブラウザで読み込ませられない拡張子をバンドルしてブラウザで読み込めるようにする
• 依存関係を解消する
• JavaScriptだけでなく、.css, .scss, .png などもまとめて扱える

♻️コンパイル

便利な機能を使ってコーディングをした際に、書いたコードがブラウザで動かない。それをブラウザで動く形に変換することをコンパイルという。変換したコードはい通常通り、scriptタグで読み込める。
※ コンパイル（厳密には「トランスパイル」とも言う）とは、同じ言語間で書き換えること（例：新しいJS → 古いJS）

Babel

Es2015（新しいJavaScriptの文法）で書かれたコードを、従来の環境でも動くように古いJavaScriptに変換するコンパイラ。（例：let や async/await などの新しい文法を、古い書き方（var や コールバック）に変えるのもコンパイルの役割）

webpackと連携して動くのが一般的。

🧠ポイント

🔄 JavaScriptの世界では「モジュール化 → バンドル → コンパイル」が定番の流れになっている。
npmでWebpackやBabelなどのパッケージを管理して、Webpackがファイルをまとめて、Babelが古いブラウザにも対応するように書き換えている。

🔨ビルド

ビルドとは「異なる環境でも同じように動くようにするための事前準備」

JavaScriptの開発では、開発環境と本番環境でブラウザの仕様や挙動が違うことがある。そのため、どんな環境でも同じようにコードが動くようにするための事前準備が必要。この準備のことを「ビルド」と呼ぶ。

具体的なビルド

・npmで必要なツールやライブラリを管理
・webpackでモジュールやファイルをまとめる
・Babelで古いブラウザでも動くように変換（トランスパイル）する

→誰のブラウザでもちゃんと動くコードが完成🎉

書く時は快適コードで書く→ビルドする→ブラウザで動く

⭐️まとめ

moduleの誕生からJavaScriptは、不便さを改善させより安定した開発ができるように進化していったことが分かった。

フロントエンド開発は、「必要なものだけを最小構成で取り出す」ことが重要。
便利なツールに頼りすぎず、「なぜ必要か」を知ることが、良いコードを書く第一歩。