JavaScriptエコシステムに関するワードについて調べてまとめてみた

JavaScriptの文法は一通り学んだので、JavaScriptがブラウザで動く裏側の世界に目を向けてみます。

パッケージ管理

モジュール

• 説明: モジュールとは、独立した機能を持つコードの集合体。コードを論理的に分割し、再利用を容易にする。
• 背景: 昔のJavaScriptは、名前空間（変数のようなもの）が分けられていなかったため、複数人で大きなファイルで作業する際に、変数名や関数名が衝突しやすく、バグの温床になっていた。
• 代表例:
  • ES Modules (import/export)
  • CommonJS (require/module.exports)

パッケージ

• 説明: パッケージとは、機能毎に分割されたファイルやフォルダの単位。
• 背景: コードを機能毎に分割することで、管理のしやすさと再利用性が向上する。
• 解決できる課題: パッケージを使うことで、機能毎にコードを整理し、再利用しやすくなる。また、依存関係を明確にすることで、コードのメンテナンスが容易になる。
• 代表例:
  • React、Expressなどのライブラリ

パッケージ管理システム

• 説明: パッケージ管理システムとは、共通化されたパッケージを中央集権的に管理するシステム。
• 背景: 無数にあるパッケージの依存関係を手動で管理するのは困難で、これを解決するためにパッケージ管理システムが開発された。
• 解決できる課題: パッケージ管理システムを使うことで、依存関係やバージョン管理を自動化し、一貫した環境を保つことができる。プロジェクトのセットアップが簡単になり、必要なパッケージを迅速にインストールできる。
• 代表例:
  • npm
  • Yarn

コードファイル

package.json

• 説明: package.jsonとは、プロジェクトで使用するパッケージ名やバージョン、スクリプトを管理するファイル。
• 背景: プロジェクトの依存関係や設定を一元管理するためのファイル。
• 解決できる課題: 上記で説明したパッケージの情報を明示的に定義している。いわば設計書のようなもので、この設計書をもとにnpm installやyarn installを実行すると、package.jsonに記載されているパッケージをインストールできる。

package-lock.json

• 説明: インストールされたパッケージの具体的なバージョンと依存関係を記録するファイル。
• 背景: 複数人で開発を行う際に、依存関係のバージョンが異なる問題を防ぐために作成される。
• 解決できる課題: 開発者間で依存関係の整合性を保ち、同じバージョンのパッケージをインストールすることを保証する。

package.json ファイル内の dependencies と devDependencies の違い

• 説明: dependenciesはアプリケーションが動作するために必要な依存パッケージ、devDependenciesは開発中のみ必要なパッケージを示す。
• 背景: アプリを作ってnpmに公開する側として、開発時にしか使わないパッケージを利用者にインストールさせないために区別される。
• 解決できる課題: アプリを利用する側が不要なパッケージをインストールしないようにすることで、パッケージの肥大化を防ぐ。

.binフォルダ

• 説明: npmでインストールされたパッケージの実行ファイルのシンボリックリンクが入っているフォルダ。
• 背景: npm install でインストールされた実行ファイルのシンボリックリンクを格納するためのフォルダ。
• 解決できる課題: このフォルダにより、どこにいてもnpx ファイル名でそのファイルを実行できる。
• 詳細:
  • ルートの .binフォルダに入っているものと、各packageの .binに入っているファイルはリンクしていて、どちらかを操作すると同期される。
  • **node_modules/.bin**ディレクトリにはnpmパッケージに含まれる実行可能なファイルへのシンボリックリンクが保存される。これにより、ローカルに保存されたコマンドを実行できる。

コードの変換やビルドプロセス

コンパイル

• 説明: コンパイルとは、ブラウザで対応していない言語や新しい記法を、対応する言語に事前に変換すること。
• 背景: JavaScriptが発展する中で、ES6などの新しい仕様が導入されたが、すべてのブラウザがこれに対応しているわけではなかった。
• 解決できる課題: 最新の記法で書かれたコードを全てのブラウザで動作する形に変換することで、互換性の問題を解決する。
• 代表例:
  • Babel

トランスパイラー

• 説明: トランスパイラーとは、TypeScriptやJSXで書かれたファイルをJavaScript形式に変換するツール。
• 背景: TypeScriptやJSXはそのままではブラウザで動作しないため、JavaScriptに変換する必要がある。
• 解決できる課題: TypeScriptやJSXをJavaScriptに変換することで、最新の言語機能や記法を使用しながら、ブラウザで動作させることができる。
• 代表例:
  • TypeScriptコンパイラ、Babel

バンドル

• 説明: バンドルとは、複数のモジュールを一つにまとめ、ブラウザで読み込めるようにする処理。
• 背景: 開発では複数のモジュールで開発を行うが、ブラウザは一度に一つのファイルしか読み込めないため、複数ファイルを一つにまとめる必要がある。
• 解決できる課題: バンドルすることで複数ファイルを一つにまとめ、依存関係を解決し、ブラウザで効率的に読み込むことができる。
• 代表例:
  • Webpack

ビルド

• 説明: ビルドとは、手元のファイルをバンドルし、コンパイルやトランスパイルを行い、ブラウザ上で動かせるようにするプロセス全体を指す。
• 背景: 開発環境で使っている最新の記法やモジュール構造を、本番環境で動作する形に変換する必要がある。
• 解決できる課題: 開発環境で使っている最新の記法やモジュール構造を、本番環境で動作する形に変換し、効率的に動作させることができる。
• 代表例:
  • Webpack、Parcel

実行環境

Node.js

• 説明: JavaScriptのランタイムで、主にサーバーサイドで使用される。
• 背景: JavaScriptをブラウザの外でも実行できるようにするために開発された。
• 解決できる課題: JavaScriptをサーバーサイドでも利用可能にし、統一された言語でフルスタック開発を行うことができる。

CommonJS

• 説明: Node.jsが採用したモジュール仕様。
• 背景: Node.jsが登場する前、JavaScriptには標準的なモジュールシステムがありませんでした。
• 解決できる課題: サーバーサイドJavaScriptの標準的なモジュールシステムとして、モジュール間の依存関係を管理する。
• 代表例:
  • require、module.exports