[JavaScript講座] 周辺ツール

2025年11月25日

当ページのリンクには広告が含まれています。

全体を3つのレイヤーに分けて説明します。

ビルドシステム・ツールチェーン
フレームワーク（フロントエンド／バックエンド）
ライブラリ群（ユーティリティ・状態管理・テストなど）

ビルドシステム・ツールチェーン

なぜビルドシステムが必要か

昔の JS：

1ファイルにベタ書き
<script src="app.js"> で読み込むだけ

今の JS：

import/export でファイル分割
TypeScript / JSX / SASS など「そのままではブラウザが読めない」コード
React/Vue などのコンポーネント単位での開発
本番では
- できるだけ少ない・小さいファイルにしたい
- 古いブラウザも動かしたい

⇒ これをまとめて面倒見てくれるのがビルドツール／バンドラです。

バンドラ（bundler）

バンドラとは、複数の JS/CSS/画像などを依存関係ごとに解析して、本番向けのバンドルファイルにまとめるツールのことです。

代表例：

ツール名	機能/特徴
webpck	・かなり歴史が長い・超高機能・プラグイン豊富・大規模案件でも使われる・そのぶん設定はやや難しめ／重くなりがち
Rollup	・ライブラリ配布向けに人気・Tree Shaking（未使用コードの削除）が得意・Vite の本番ビルド裏側でも使われる
Parcel	・「設定ほぼ不要」が売り・ファイルを指定するだけでそれっぽく動く
esbuild	・Go製でとにかく高速・単体でもバンドラとして使えるが、最近は他ツール（Vite など）の「中身」としてよく使われる
Vite	・最近のフロントエンド開発のデファクトに近い存在・開発時：ネイティブESM＋esbuildで爆速Devサーバ＋HMR ・本番ビルド：中で Rollup を使ってバンドル・React, Vue, Svelte 等向けのテンプレートが用意されている

トランスパイラ／コンパイラ

トランスパイラ／コンパイラとは、ビルドの中で使われる「コード変換器」のことです。

ツール名	機能/特徴
Babel	・新しいJS構文（ES202x） → 古い環境でも動くJS に変換・React の JSX → JS に変換など
TypeScript コンパイラ（`tsc`）	・TS → JS に変換・型チェックも兼ねる
SWC / esbuild	・Rust/Go製の超高速コンパイラ・「Babel互換のことをもっと速くやる」用途で使われることが多い

これらは単独でも使えるし、webpack / Vite などに組み込まれて動くこともあります。

タスクランナー

昔は Gulp / Grunt などが流行していました。

JS のミニファイ
Sass コンパイル
画像圧縮
ファイル監視

などを「タスク」として定義し、順番に流す仕組み。

最近は、こういう処理の多くをバンドラ＋npm scripts が引き受けるようになり、純粋なタスクランナーの出番はかなり減っています。

周辺ツール（リンター・フォーマッタなど）

ビルドとは別枠ですが、開発にはほぼ必須のツールもあります。

ツール名	機能/特徴
ESLint	・JS/TS の静的解析・コード規約チェック・「バグっぽい書き方」「アンチパターン」などを検出
Prettier	・コード整形ツール（フォーマッタ）・セミコロンの有無やインデントを自動統一

これらは npm scripts やエディタ連携で自動実行するのが一般的です。

フレームワーク

フレームワークは、以下の3つに分類して説明します。

フロントエンド UI フレームワーク
メタフレームワーク（SSR/フルスタック系）
バックエンド（Node.js）フレームワーク

フロントエンド UI フレームワーク

フレームワーク名	機能/特徴	関連ライブラリ
React	・Meta（Facebook）社発・コンセプト：UI = state の関数・JSX でコンポーネントを定義し、仮想DOMで更新差分を適用・いわゆる「フレームワーク」ではなく UIライブラリを名乗っているが、実質エコシステムとしてフレームワーク級になっている	・React Router（ルーティング）・Redux / Zustand / Recoil（状態管理）・Next.js / Remix など（メタフレームワーク・SSG/SSR）
Vue.js	・Evan You 氏発・「段階的導入」がコンセプト：単一ページに `<script>` 一枚差すだけの軽い使い方から、SPAフル開発までスケール可能・`.vue` ファイル（SFC: Single File Component）でtemplate / script / style を1ファイルにまとめて書ける・Composition API で React Hooks に近い書き方も可能	・Vue Router（ルーティング）・Pinia（状態管理）・Nuxt（SSR/メタフレームワーク）
Angular	・Google製のフルスタックSPAフレームワーク・TypeScript前提・DIコンテナ内蔵・公式のCLI・ルータ・フォーム・HTTPクライアントなど一式入り・企業向け大規模開発でよく採用される系統	–
Svelte	・「コンパイル時フレームワーク」・React/Vueのように「ランタイムで仮想DOMを持たない」・コンパイル時に、より直接的な DOM 操作コードに変換する思想・小さく・速いバンドルが作りやすい	–

このあたりは「どれを学ぶか」よりも、コンポーネント指向・宣言的UIという考え方になれることがゴールになります。

メタフレームワーク（SSR / SSG / フルスタック）

メタフレームワークは、UIフレームワークの上に乗って、

ルーティング
SSR（サーバサイドレンダリング）
SSG（静的サイト生成）
APIルート・データフェッチ

などをまとめて提供します。

フレームワーク名	機能/特徴
Next.js（Reactベース）	・React の「事実上の公式フルスタックフレームワーク」的存在・ファイルベースルーティング（`app/` または `pages/` ディレクトリ）・SSR / SSG / ISR（インクリメンタル静的再生成）・API Routes（簡易なバックエンドAPIを同じプロジェクトで書ける）・画像最適化・フォント最適化なども内蔵
Nuxt（Vueベース）	・Vue版Next.js のような位置付け・ファイルベースルーティング（`pages/` ディレクトリ）・SSR / SSG ・Vuex / Pinia との連携・Vue でフルスタックWebアプリを作るなら筆頭候補
SvelteKit（Svelteベース）	・Svelte向けのフルスタックフレームワーク・ルーティングやデータロード・SSRを一式提供
Remix	・Reactベース、Web標準（フォーム・HTTP）を前面に出したフレームワーク・Loader/Action という概念で「データロード」＋「フォーム送信」周りを整理
Astro	・「コンテンツ主導」「アイランドアーキテクチャ」・React/Vue/Svelte などを部分的に埋めつつ、基本は静的なHTMLを生成することに強い

バックエンド（Node.js）フレームワーク

Node.js 上で動くサーバサイドのフレームワークについて。

フレームワーク名	機能/特徴
Express	・有名な軽量Webフレームワーク・ルーティング＆ミドルウェアを組み合わせるシンプルなスタイル・コアが小さく、自由度が高い・逆に「設計は自分でちゃんと決める」必要がある
Fastify	・高速・型連携がしやすい設計・JSONスキーマベースでバリデーション・型推論を行えたりする
Koa	・Express作者による次世代フレームワーク・async/await 前提のミドルウェア設計
NestJS	・Angular風のアーキテクチャを持つ Node.js フレームワーク・DIコンテナ、モジュール、デコレータベースの宣言的API ・Express/Fastify 上に構築されている（アダプタで切り替え可能）・大規模バックエンド向け

ライブラリ

DOM / Ajax 系

jQuery
- CSSセレクタでの要素取得：$(".item")
- チェーン操作：$(".item").addClass("active").hide()
- イベント：$("#btn").on("click", fn)
- Ajax：$.get, $.post, $.ajax
- 簡易アニメーション：fadeIn, slideUp など
- 歴史的背景：
  - IE全盛期、ブラウザごとにDOMやイベントの挙動がバラバラだった頃に「差異を吸収しつつ短く書ける」救世主として普及
  - 一時期は「JSを書く＝jQueryを書く」状態
- 現在の立ち位置：
  - モダンブラウザでは
    - querySelectorAll, addEventListener, classList
    - fetch + Promise
    - React / Vue の宣言的UI
      が標準化・普及したため、新規開発の主役ではないことが多い
  - ただし：
    - 既存の業務システム・企業サイト・WPテーマなどに大量に残っている
    - レガシーコード改修や既存プラグイン利用では避けて通れない
  - 実務感としては
    「積極的に新規採用するというより、“読めて・少し書けると強いレガシー資産対応スキル”」というポジション
jQuery ライクな軽量ライブラリ
- Zepto
  - モバイル向け軽量jQuery互換風
- Cash
  - $(...) 互換のラッパ

⇒ いずれも「素のDOM API + モダンフレームワーク」が主流化した現在では、レガシー置き換え or 特殊用途以外であまり新規採用は見ないイメージ。

■ モダンな代替

DOM操作：原則ネイティブAPI（document.querySelector, Element API）
Ajax：fetch ＋ Promise / async/await
UI更新：React/Vue/Svelteなどに任せる（自分でDOMを直接触らない）

ユーティリティ系

Lodash
- 配列・オブジェクト・文字列などの便利関数詰め合わせ
- 今は「ES標準と組み合わせて、足りないところだけ使う」感じが多い
date-fns / Day.js
- 日付・時間の操作
- new Date() 周りの貧弱さを補う人気ライブラリ

HTTP クライアント

Axios
- PromiseベースのHTTPクライアント
- ブラウザとNode両対応
- fetch 以前からの定番
（最近は）ブラウザなら基本 fetch を素で使い、差分が欲しい場合だけ軽量ラッパを使うパターンも増えています。

状態管理

React/Vue のようなコンポーネントフレームワークでは、
コンポーネントをまたいだ状態（グローバル状態）をどう管理するかがテーマになります。

React系：
- Redux / Redux Toolkit
- Zustand
- MobX
- Recoil
Vue系：
- Vuex（旧）
- Pinia（新世代）

規模や好みによって選択が分かれますが、
最近のトレンドとしては「まずはフレームワーク標準＋軽量ライブラリで最小限」という流れが強いです。

ルーティング

SPAではURLと画面の対応を取るルータが必要です。

React Router
Vue Router

Next.js / Nuxt などのメタフレームワークはルータを内蔵しているので、
別途ライブラリは不要なことが多いです。

UI コンポーネント・スタイリング

UIコンポーネント集
- MUI（旧 Material-UI）
- Chakra UI
- Ant Design
- Headless UI（スタイルレスのUIコンポーネント）
スタイリング系
- Tailwind CSS（ユーティリティクラスベース）
- styled-components / emotion（CSS-in-JS）

「デザイン苦手だけど見た目それなりにしたい」場合は、
コンポーネントライブラリ＋Tailwind どちらかに乗ると楽です。