フロントエンドの技術選定で React 以外の選択肢を検討してみる ― Angular 編

Posted at 2026-11-01

はじめに

最近のフロントエンド開発では、React が選択されるケースが多いと思います。ただ、中には React 以外が適切なケースも存在すると思います。また、採用できる選択肢が React だけの場合、React の方針変更がプロジェクトの方針に沿わない場合もそのまま受け入れざるを得ません。

この記事では、最近のフロントエンド開発において React が多く選ばれている理由とその他の選択肢の一例として Angular に適したケースを記載します。

対象バージョン

2026年9月時点の最新版を対象にしています。

対象	バージョン
React	19.3.0（2026年9月9日）
Angular	22.1.7（v22.0.0 は 2026年6月3日）

React の利用状況

Stack Overflow Developer Survey 2025 の数値です。Web フレームワーク部門から抜き出しています。

回答者の区分	React	Angular	Next.js（React ベース）
全回答者	44.7%	18.2%	20.8%
プロの開発者	46.9%	19.8%	21.5%
学習中の人	43.5%	9.5%	21.3%

プロ開発者の利用率を比べると、React は Angular の約2.4倍です。学習中の人に絞ると、差は約4.6倍まで広がります。新しく入ってくる開発者の多くは React を学んでいる、という状況です。

また、React には Next.js など React を土台にしたフレームワークもあります。React Native を使えば、モバイルアプリも同じ書き方で作れます。

選定時に決める項目

React は UI の描画だけを担うライブラリです。ルーティングや HTTP 通信は、プロジェクトごとに別のライブラリを選びます。一方、Angular はこれらを @angular/ 配下の公式パッケージとして提供します。

決める項目	React での選択肢の例	Angular
アプリの土台	Next.js、React Router、Vite で React 単体	Angular CLI
ルーティング	React Router、TanStack Router、Next.js のルーター	`@angular/router`
サーバーからのデータ取得	`fetch`、TanStack Query、SWR	`HttpClient`、`httpResource`
フォーム	React 19 の `<form action>`、React Hook Form	Signal Forms、Reactive Forms
画面をまたぐ状態の管理	Context、Zustand、Redux Toolkit	サービスと依存性注入（DI）
テスト	Vitest、Jest と Testing Library	Angular CLI が Vitest を設定

React の公式ドキュメントは、フレームワークでの新規アプリ作成を推奨しています。フレームワークを選ぶと、表の「アプリの土台」「ルーティング」「サーバーからのデータ取得」も決まります。

https://react.dev/learn/creating-a-react-app

レンダリング形式

両者とも CSR、SSR、SSG の3つの形式に対応しています。違うのは、SSR と SSG を使うときの準備です。

形式	React	Angular
CSR（Client-Side Rendering）	React 単体（Vite など）で対応	既定の形式
SSR（Server-Side Rendering）	Next.js などのフレームワークを使う（単体で実装する場合はサーバー処理を自作）	`@angular/ssr` を追加し、`RenderMode.Server` を指定
SSG（Static Site Generation）	Next.js などのフレームワークを使う	`@angular/ssr` を追加し、`RenderMode.Prerender` を指定
ルートごとの切り替え	選んだフレームワークの機能で指定する	`RenderMode` でルートごとに指定する

React で SSR や SSG を使う場合、フレームワークの選択が必要です。これは「選定時に決める項目」の「アプリの土台」にあたります。Angular では、ほかの公式パッケージと同じく Angular チームが提供します。

バージョンアップの計画

項目	React	Angular
メジャーリリースの間隔	決まっていない（19.0 は 2024年12月）	約6か月（v20 は2025年5月、v21 は2025年11月、v22 は2026年6月）
サポート期間	期間を定めた方針は公開していない	メジャーごとに18か月（通常サポート6か月、続けて LTS（Long-Term Support）12か月）

React は 2026年7月、19.0.8、19.1.9、19.2.8 を同時に公開しています。古いマイナー系列にも修正が出ています。ただし、提供期限は明示されていません。

Angular は公式サイトで、メジャーごとのサポート終了日を公開しています。

LTS の期間に提供されるのは、重大な不具合の修正とセキュリティ修正だけです。保守契約の期間やバージョンアップ作業の時期を、公開された終了日から決められます。ただし、メジャーは半年ごとに出ます。18か月以内に、少なくとも1回はメジャーを上げる作業が必要です。

状態の書き方と再描画の範囲

ボタンを押すと数値が1増えるカウンターの実装例です。

React

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Angular

import { Component, signal } from "@angular/core";

@Component({
  selector: "app-counter",
  template: `<button (click)="count.set(count() + 1)">{{ count() }}</button>`,
})
export class Counter {
  protected readonly count = signal(0);
}

以前の Angular は、NgModule の宣言などが必要でした。そのため、記述量が多いという評価をよく目にしました。現在は NgModule が不要になりました。状態はシグナルで書きます。上記のとおり、記述量は React と大きく変わりません。

シグナルは、Angular で状態を保持するための関数です。コード例の count は、signal(0) で作成したシグナルです。count() を呼び出すと、現在の値が返ります。更新には count.set() を使います。

テンプレートで count() を読むと、Angular はその読み取り箇所を記録します。値の更新時は、そのコンポーネントが再描画の対象になります。

https://angular.dev/essentials/signals

状態が変わったときに再描画される範囲は、両者で異なります。

項目	React	Angular
状態が変わったときの処理	そのコンポーネントの関数を再実行し、子コンポーネントも既定で再実行する	変わったシグナルを読んでいるコンポーネントを検査対象にする
不要な再計算の自動抑制	React Compiler がビルド時にメモ化を挿入する	`OnPush` が新規コンポーネントの既定になり、検査対象を絞る（v22 から）
再描画の範囲を調べるツール	React DevTools の Profiler	Angular DevTools のシグナルグラフ

Angular に適したケース

ここまでの5節の比較を踏まえると、以下のようなケースが Angular に適していると考えられます。

複数のプロジェクトを長く保守し、ライブラリ構成も統一したい
フォーム入力と API 通信が画面の大半を占める
保守契約の期間に合わせて、バージョンアップの時期を決めたい

まとめ

この記事では、React と Angular を比較しました。React は利用率で Angular を上回り、Next.js や React Native などの周辺技術もあります。一方、Angular は、技術選定時に決める要素が少なく、サポート期限も公開されています。そのため、複数のプロジェクトを長く保守し、ライブラリ構成も統一したいケースなどに適していると思います。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up