JavaScriptの基盤となるツールの概要
はじめに
本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。
書籍に記載されている内容を順序立ててまとめるというよりは、整理しておきたい周辺の知識と深ぼった内容を雑多に書いています。
パッケージマネージャー
ソフトウェア開発プロジェクトで使用される依存関係の管理とパッケージのインストールを容易にするツールです。
npmやYarnを使用することでJavaScriptのパッケージの管理を簡単に行うことができます。
メリット
- パッケージマネージャーは依存関係の管理を自動化してくれるため、開発者は手動でパッケージをダウンロードしたり依存関係を解決する必要がない
- 一つのコマンドでパッケージの検索、インストール、アップデート、削除などの操作が行えるため、簡単かつ効率的にパッケージの管理ができる
- 必要なパッケージがプロジェクト内にあるかどうかを確認し、なければ自動的にダウンロードしてインストールされるため管理が容易
- 依存関係も解析されるため必要なパッケージを適切に管理できる
node_modules
Node.jsプロジェクトで使用されるパッケージやモジュールが格納されるディレクトリです。
概念的には、プロジェクトの依存関係を管理するための場所です。
yarn add や npm installを行うと自動的にnode_modulesの中にパッケージの中身が展開されます。
モジュールバンドラー
モジュールバンドラーの代表的なツール
WebpackやParcelなどがあります。
これらのツールは、JavaScriptのモジュールバンドリングにおいて広く利用されており、さまざまな機能や設定オプションを提供しています。
モジュールバンドラーが活用される背景
従来のJavaScriptでは、単一のJavaScriptファイル内にすべてのコードを記述していました。
JavaScriptコードを複数のモジュールに分割し、必要な部分を必要なタイミングでインポートすることができるようになりました。
ただし、本番環境で実行する際はファイルをまとめたほうが読み込み回数が減るためパフォーマンスが良いです。
そこで開発環境ではファイルを分けて、本番ではビルド時に１つのファイルにまとめようという思想を実現するためにJavaScriptファイルやCSSファイルをまとめてくれるモジュールバンドラーが作られました。
モジュールバンドラーの役割
モジュールバンドラーは、複数のモジュールファイルを結合し、最適化された単一のバンドルファイルを生成します。
依存関係の解決・・・モジュール間の依存関係を分析し、正しい順序でモジュールを結合することで、読み込み順序に関する問題を回避し、正しく動作するバンドルを生成できるバンドルサイズの最適化・・・ モジュールバンドラーは、未使用のコードや重複するコードを特定し、削除や統合を行うことでバンドルサイズを最小化できる。ローダーの拡張・・・ モジュールバンドラーは、さまざまな種類のファイル（CSS、画像、フォントなど）をモジュールとして扱えるようにするローダーの機能もある
トランスパイラ
トランスパイラ（Transpiler）は、一つのプログラミング言語で書かれたコードを別のプログラミング言語に変換するツールです。
ここでいうとJavaScriptの記法をブラウザで実行できる形に変換するものです。
トランスパイラを仕様すると新しい記法で書かれたJavaScriptでも多くのブラウザで実行できる形に変換してくれます。
Reactのコードもjsxからjs、またはtsxからtsに自動変換されます。
参考
続く…
コメント
本記事の内容は以上になります！
書籍の続きのアウトプットも随時更新したいと思います。
プログラミングスクールのご紹介 (卒業生より)
お世話になったプログラミングスクールであるRUNTEQです♪
こちらのリンクを経由すると１万円引きになります。
RUNTEQを通じて開発学習の末、受託開発企業をご紹介いただき、現在も双方とご縁があります。
もし、興味がありましたらお気軽にコメントか、TwitterのDMでお声掛けください。
