ReactとAngularの違い：比較と選び方

Reactはユーザーインターフェースを作るためのJavaScriptライブラリで、AngularはWebアプリケーションを作るための完全なフレームワークです。Reactではコンポーネントを、JSXを返す関数として書き、ルーティング、フォーム、データには別の道具を選びます。Angularでは、HTMLテンプレートを持つTypeScriptのクラスを書き、ルーティング、フォーム、HTTPクライアント、依存性の注入が最初から入っています。次は同じカウンターを両方で書いたものです。

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            Clicked {count} times
        </button>
    );
}

そのコンポーネントのAngular版：

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

@Component({
    selector: 'app-counter',
    template: `
        <button (click)="increment()">Clicked {{ count() }} times</button>
    `,
})
export class CounterComponent {
    count = signal(0);

    increment() {
        this.count.update((n) => n + 1);
    }
}

考え方は1対1で対応しています。Reactの useState(0) はAngularの signal(0)、onClick={...} は (click)="..."、{count} は {{ count() }} です。違いはコードの置き場所で、Reactではマークアップを返す1つの関数、Angularではクラスとテンプレート文字列です。

ライブラリとフレームワーク

これがほかのほとんどの違いを生む違いです。Reactが扱うのは描画とコンポーネントのstateで、それ以外はすべて自分で選びます。

• ルーティング：React Router、TanStack Router、またはフレームワークのファイルベースのルート。
• データ取得：エフェクトの中の fetch、TanStack Query、またはフレームワークのローダーやサーバーコンポーネント。
• フォーム：素の制御された入力、React 19のフォームアクション、またはReact Hook Form。
• グローバルなstate：コンテキスト、Zustand、Redux Toolkit、Jotai。

多くのチームは、ルーティング、データ読み込み、サーバーレンダリングをまとめて持つNext.jsやフレームワークモードのReact RouterのようなReactのフレームワークから始めることで、こうした選択のほとんどを省いています。

Angularはこれらを代わりに選んでくれます。@angular/router、リアクティブフォームとテンプレート駆動フォーム、HttpClient、依存性の注入、テストの環境、そしてコンポーネントやサービスを生成する ng CLIです。どのAngularのプロジェクトもだいたい同じ見た目になり、これが大きな組織がAngularを選ぶよくある理由です。代償は、学ぶべき範囲が広く、部品を差し替える自由が少ないことです。

JSXとテンプレート

Reactのコンポーネントが返すJSXはJavaScriptです。条件は && か三項演算子、リストは .map() で、JavaScriptでできることはすべてマークアップの中でもできます。AngularのテンプレートはHTMLに独自の構文を加えたもので、@if、track 付きの @for、[property] バインディング、(event) バインディング、{{ }} による埋め込みがあります。テンプレートはマークアップとロジックを目に見える形で分け、JSXはそれらを1か所にまとめて言語のすべてを使えるようにします。比べる2つ目の機能として、フィルターしたリストを見てみましょう。

import { useState } from 'react';

const fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];

export default function App() {
    const [query, setQuery] = useState('');

    const visible = fruits.filter((f) =>
        f.toLowerCase().includes(query.toLowerCase())
    );

    console.log('render, query =', JSON.stringify(query));

    return (
        <div>
            <input
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <ul>
                {visible.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
                {visible.length === 0 && <li>No match</li>}
            </ul>
        </div>
    );
}

入力欄に an と入力してコンソールを見てください。キーを押すたびに関数全体がもう一度実行され、visible はただ計算し直されます。Angularでの同じコンポーネントは、テンプレートを別のファイルに置きます。

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

@Component({
    selector: 'app-fruit-filter',
    templateUrl: './fruit-filter.component.html',
})
export class FruitFilterComponent {
    fruits = ['Apple', 'Banana', 'Cherry', 'Grape', 'Mango', 'Peach'];
    query = signal('');

    visible = computed(() =>
        this.fruits.filter((f) => f.toLowerCase().includes(this.query().toLowerCase()))
    );
}

<input #box [value]="query()" (input)="query.set(box.value)" placeholder="Filter fruit" />
<ul>
    @for (fruit of visible(); track fruit) {
        <li>{{ fruit }}</li>
    } @empty {
        <li>No match</li>
    }
</ul>

Angularでは、computed が visible は query に依存すると宣言するので、Angularはどのテンプレートがそれを読むかを知り、query が変わったときだけ visible を計算し直します。Reactには宣言がなく、コンポーネントが再実行されて計算し直します。Reactの key={fruit} とAngularの track fruit は同じ仕事をしていて、どのリストの項目がどれかをフレームワークに伝えます。

JavaScript優先とTypeScript優先

ReactはJSX付きの素のJavaScriptで、TypeScriptは追加する選択肢です（npm create vite@latest my-app -- --template react-ts）。新しいReactのプロジェクトのほとんどは追加しますが、型を知らなくてもReactは学べます。AngularはTypeScriptのために作られていて、デコレーター、依存性の注入、テンプレートの型チェッカーのすべてがそれを前提にしています。チームがすでに型付きのコードを書いているなら問題になりませんが、プログラミングが初めてなら、同時に学ぶものが1つ増えます。Reactの側で型付けがどう働くかは、ReactとTypeScriptのページで紹介しています。

データの流れと変更検知

どちらもデータは入力（Reactのprops、Angularの input() や @Input()）で下へ渡し、イベントはコールバック（Reactではpropとして渡す関数、Angularでは output() や @Output()）で上へ送ります。違いは、それぞれが変更にどう気づくかです。

Reactは、stateをイミュータブルなスナップショットとして扱います。新しい値でセッターを呼ぶと、Reactはコンポーネント関数を再実行し、新しいJSXを古いものと比べて、DOMを修正します。自動で追跡されるものは何もなく、描画関数そのものが依存関係のグラフです。考えるのは簡単ですが、作業を省くために memo、useMemo、useCallback を追加する（またはReact Compilerに追加させる）ことがあるのが代償です。

Angularは、以前はZone.jsであらゆる非同期のイベントを検知し、コンポーネントのツリーで変わったバインディングを確認していました。現代のAngularはシグナルに移行しつつあります。signal、computed、effect が各テンプレートがどの値を読むかを追跡するので、Angularはシグナルが変わったコンポーネントだけを確認し、最近のバージョンではZone.jsなしでも動かせます。Angularのテンプレートは、Reactのコンポーネントのように変更のたびに関数全体を再実行するわけではありません。

日々のコードでは、両者は仕組みから想像するより近く感じられます。stateを持ち、そこから値を導き、画面がそれに従うのです。

stateの管理

Reactでは、ローカルなstateは useState か useReducer、共有するstateは親に持ち上げるかコンテキストに入れ、アプリ全体のstateは小さなストアのライブラリに置くことがよくあります。Angularでは、ローカルなstateはコンポーネントのシグナルで、共有するstateはたいてい、必要な場所に注入されるサービスに置きます。依存性の注入は、「離れた2つのコンポーネントがどうデータを共有するか」へのAngularに組み込まれた答えです。ReduxのようなストアがほしいチームのためにNgRxもあります。Reactには依存性の注入の仕組みはなく、コンテキストが似た役割を果たします。

比較表

学習コスト

Reactのほうが早く始められます。JavaScriptを知っている初心者なら、コンポーネント、props、state、エフェクトを学べば本物の何かを作れますし、Reactとはのページは数分で全体像をつかめます。学ぶべきことは後に回ります。ルーター、データ取得の方法、フォームの戦略を選ばなければならず、Reactのコードベースによって選んでいるものが違います。

Angularは出だしが急です。TypeScript、デコレーター、テンプレート、シグナル、依存性の注入、ルーターとフォームのモジュール、そして一部のAPIではRxJSです。ただし一度身につければ、どのAngularのプロジェクトも同じ部品を同じ方法で使うので、プロジェクト間の移動は楽になります。

どちらを選ぶべきか

次のようなときはReactを選んでください。

• 小さな中核と、残りを選ぶ自由がほしいとき。またはサーバーレンダリングとファイルベースのルートのためにNext.jsのようなフレームワークを使いたいとき。
• モバイルアプリも作る予定で、React Nativeで同じコンポーネントの仕組みを再利用したいとき。
• チームが主にJavaScriptに慣れているとき。またはフロントエンド開発を学んでいて、動くアプリへの一番の近道がほしいとき。

次のようなときはAngularを選んでください。

• 大きなチームが、多くのプロジェクトにまたがる1つの標準的な構造を必要とし、議論すべき設計上の判断を減らしたいとき。
• フォーム、HTTP、ルーティング、依存性の注入を1つのチームがまとめて保守し、CLIでまとめてアップグレードしてほしいとき。
• チームがすでにTypeScriptを書いていて、クラスベースのサービスと、テンプレートとロジックの明確な分離を好むとき。

どちらも成熟していて、本番で広く使われ、キャリアにも役立ちます。スキルも移せます。コンポーネント、一方向のデータの流れ、導出されたstate、リアクティブな更新は、どちらでも同じ考え方です。