Node.js

RailsでJavaScriptを処理・ビルドするために必要。

# 確認
node -v
# インストール方法
# Node.js は コマンドでなく、サイトからインストールする
# 公式サイト (https://nodejs.org/)

yarn

JavaScriptのパッケージマネージャー。
Webpackや他のライブラリをインストール・管理するために使用。

# 確認
yarn -v
# インストール方法
yarn install

npm（Node Package Manager）

Node.js標準のパッケージマネージャーで、yarnと同じようにパッケージのインストール・管理を行う。
yarnは一部機能が高速であるため、yarnが推奨されることが多い。

# 確認
npm -v
# インストール方法
npm install <パッケージ名>

webpack

JavaScriptの「モジュールバンドラー」。
複数のJavaScriptファイル・CSS・画像のリソースをまとめたり、最適な形でファイル分けして、読み込みを高速にする。
WebpackはYarn経由でインストールされ、yarn install実行時にpackage.jsonに記述された依存関係に基づいてWebpackが自動的にインストールされる。

# 確認
# npx は Node Package Executor の略
# Node.jsパッケージの実行を簡単にするツール 
npx webpack -v
# インストール方法
yarn install #実行時にwebpackも自動でインストールされる
# 下記でwebpackだけインストール
npx webpack -v

ビルドとは

開発環境で書かれたコードやリソースを、最適な形に変換・まとめて、実際に動作する環境に備える。
コンパイル ⇒ バンドル（まとめてブラウザが効率よく読み込めるようにする） ⇒ 圧縮・最適化 ⇒ モジュールの管理（依存関係の解決・最適な順序での読み込み）。

バンドラーとは

複数のリソース（JavaScript、CSS、画像など）をまとめるツール。
Webpackなどは「バンドル」という概念で、効率的にファイルをまとめて読み込みを高速化する。

アセットとは

Webページの見た目や動きを構成するファイル（JavaScript、CSS、画像など）。
フロントエンドアセットを管理・ビルドすることがアセット管理。