JavaScriptまわりのライブラリやフレームワークが多すぎませんか？

## 初めに
JavaScriptまわりのライブラリやフレームワークが多すぎませんか？そんなことないですか？？JavaScriptやTypeScriptをキャッチアップするたびに、新しいライブラリやフレームワークが次々と登場している印象があります。なので、このあたりで一度、整理してみようと思います。

<br>

## 言語・拡張
### JavaScript
ベースとなる言語

### TypeScript
JavaScriptに静的型付けを加えた言語。コンパイル時に型エラーなどを検出でき、JavaScriptコードに変換されて実行される。

<br>

## フロントエンド寄り（UI側）
### React.js
・JavaScriptライブラリ
・再利用可能なコンポーネントベース
・仮想DOMの利用
・JSX構文
・設定や状態管理が複雑
・大規模アプリケーション向け
・単方向データバインディング(props)
・SPA（シングルページアプリケーション）に向いている


### Vue.js
・JavaScriptフレームワーク
・仮想DOMの利用
・テンプレート構文
・中〜大規模アプリにも対応できるが、設計上は小〜中規模の開発に特に向いている
・学習コストが低い
・双方向データバインディング
・軽量で高速

### Angular
・JavaScriptフレームワーク(ver2はTypeScriptベース)
・テンプレート構文
・大規模アプリケーション向け
・学習コストが高い
・双方向データバインディング
・独自のレンダリングエンジンを使用（仮想DOMは未使用）
・MVCアーキテクチャ

### Next.js
・Reactのフレームワーク
・サーバーサイドレンダリング（SSR）、サーバーでHTMLを生成
・静的サイト生成（SSG）、ビルド時にHTMLを生成
・クライアントサイドレンダリング（CSR）、ブラウザでレンダリング
・Node.js上で動作することが前提
・Reactはクライアントサイドのみをサポートするが、Next.jsはサーバサイド機能もサポート

### 特徴一覧
| 項目           | React.js                    | Vue.js                  | Next.js                     | Angular      |
| ------------ | --------------------------- | ----------------------- | --------------------------- | -------------------- |
| 種類           | UIライブラリ                     | フレームワーク                 | フロントエンド主導のフルスタック開発向け            | フレームワーク              |
| 言語基盤         | JavaScript + JSX            | JavaScript + HTMLテンプレート | JavaScript / TypeScript | JavaScript           |
| データバインディング   | 単方向                         | 双方向（v-model）            | 単方向               | 双方向（ng-model）        |
| コンポーネント      | 関数コンポーネント（Hooks対応）          | `.vue`ファイルで構築           | Reactコンポーネント                | コントローラー＋テンプレート       |
| ルーティング       | 別ライブラリ（React Router）        | Vue Router              | 内蔵（ファイルベースルーティング）           | ngRoute          |
| SSR / SSG 対応 | 外部ライブラリ使用（Next.jsなど）        | 外部ライブラリ使用（Nuxt.jsなど）    | SSR / SSG / ISR / API対応 内蔵  | 非対応（クライアントのみ）        |
| 状態管理         | Redux / Zustand / Recoil など | Pinia / Vuex            | React系の状態管理がそのまま使える         | \$scopeベース、独自DIあり    |
| テンプレート記法     | JSX（JavaScript内にHTML）       | HTMLテンプレート＋ディレクティブ      | JSX（Reactと同じ）               | HTMLテンプレート＋Angular記法 |


<br>

## バックエンド寄り（サーバー/API側）
JavaScript/TypeScriptを使ったバックエンド開発は、基本的にはNode.js上で動作することが前提
Node.jsは言語やフレームワークではなく、JavaScript をサーバーサイドで実行できるようにした オープンソースの<b>実行環境（ランタイム）</b>のこと

### Express.js
・Node.jsを使用するWebアプリケーションフレームワーク
・MVCアーキテクチャが可能
・フルスタックではないので、認証・ORMなどは組み合わせが必要
・軽量フレームワーク

### NestJS
・TypeScriptをベースにしたフルスタックフレームワーク
・機能ごとにモジュールを分割
・DIの利用
・学習コストが高い

### Next.js
・Reactをベースにしたフルスタックフレームワーク
・SSR、SSG対応
・ファイルベースのルーティング
・TypeScript対応


### Fastify
・Node.jsを使用するWebアプリケーションフレームワーク
・リクエスト・レスポンスのJSON構造をスキーマで定義
・プラグインアーキテクチャ
・高速

### 特徴一覧
| 項目                | Express                     | NestJS                              | Next.js                         | Fastify                      |
| ----------------- | --------------------------- | ----------------------------------- | ------------------------------- | ---------------------------- |
| **主な用途**          | Webサーバー、REST API            | 大規模バックエンド                           | フルスタックReactアプリ                  | 高速APIサーバー                    |
| **特徴**            | 軽量でシンプル。ルーティングやミドルウェアが簡単    | TypeScript標準対応。モジュール・DI・デコレーターで堅牢設計 | SSR、SSG対応。API RoutesでAPIも同時構築可能 | 高速、プラグインベース。JSONスキーマでバリデーション |
| **開発言語**          | JavaScript / TypeScript | TypeScript                          | JavaScript / TypeScript         | JavaScript / TypeScript      |
| **設計スタイル**        | ミニマル、ミドルウェア中心               | モジュールベース、依存性注入（DI）あり                | ファイルベースルーティング                   | プラグインベース                     |
| **サーバーサイドレンダリング** | 非対応（フロントエンドではない）            | 非対応（バックエンドフレームワーク）                  | あり（ReactのSSR対応）                 | 非対応                          |
| **API構築のしやすさ**    | 簡単            | 体系的で大規模開発向き                         | API Routesで簡単にAPI作成可能           | 簡単かつ高速                       |
| **学習コスト**         | 低い       | 中〜高                    | 低〜中           | 低〜中    |


<br>

## その他、ビルド・開発支援系
### Vite(ビルドツール)
・JavaScript/TypeScript開発のための超高速ビルドツール、開発サーバー
・TypeScriptサポート
・設定が簡単

### Webpack(モジュールバンドラー)
・JavaScriptアプリケーションのためのモジュールバンドラー
・複数のJSファイルやCSSなどのリソースをまとめてバンドル

### ESLint(静的解析ツール)
・JavaScript、TypeScriptの静的解析ツール

### Prettier(コードフォーマッタ)
・JavaScript、TypeScriptのフォーマッタ
・設定がシンプル

<br>

## 終わりに

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3942091/2aee64e7-5fd9-4ab6-bdfb-ca13b9ff4f63.png)
>引用：こちら葛飾区亀有公園前派出所


以下はメジャーなものだけ図にしてとAIに頼んだ図です
```
                   ┌──────────────┐
                   │  TypeScript  │ ← 言語拡張（型付きJS）
                   └────┬─────────┘
                        │
       ┌────────────────┼─────────────────┐
       ↓                ↓                 ↓
 ┌──────────┐      ┌────────────┐    ┌──────────────┐
 │ React.js │      │  Node.js   │    │  Build Tools │
 │ (UI)     │      │ (JS実行環境)│    │ Vite/Webpack │
 └────┬─────┘      └────┬───────┘    └────┬──────────┘
      ↓                 ↓                 ↓
┌──────────────┐   ┌────────────┐   ┌────────────────┐
│  Next.js     │   │  NestJS    │   │ Linter / Format│
│(React拡張SSR)│   │(API/Server)│   │ ESLint/Prettier │
└──────────────┘   └────────────┘   └────────────────┘
```