🔥

React開発者がAngularを最短で理解する：よく使う機能で比較するAngular入門（具体snippet付き）

に公開
React
Angular
tech

Reactに慣れた開発者がAngularを学び始めるとき、最大の壁は「概念と責務の分散」です。

Reactでは「JS/TSの中にUI・状態・副作用が集約」されやすいのに対し、Angularは**フレームワークとしての完成度が高い代わりに、設計が“最初から決まっている”**という特徴があります。

この記事では、React開発でよく使う機能を軸に、

  • Reactではどう書くか
  • Angularではどう書くか
  • 何が違うのか（思想・責務・設計）

を 具体スニペットで比較しながら、React開発者がAngularを理解できるように整理します。

対象読者

  • React（Hooks・状態管理・Routing）には慣れている
  • Angularは「難しそう」「DecoratorやModuleで詰まる」という印象がある
  • 実務でAngularを触る必要が出てきた

1. コンポーネント定義：JSX vs Template + Decorator

✅ React（JSXで宣言）

export function UserCard({ name }: { name: string }) {
  return <div className="card">{name}</div>;
}

✅ Angular（Decorator + HTMLテンプレート）

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

@Component({
  selector: 'app-user-card',
  template: `<div class="card">{{ name }}</div>`,
})
export class UserCardComponent {
  @Input() name!: string;
}

🔍 React開発者向け理解ポイント

観点 React Angular
UI定義 JSX Template（HTML）
Props 引数で受ける @Input()
コンポーネント識別 importで使う selectorで使う

Angularは JSXの代わりに Template が標準です。
（もちろん、Angularでも「Inline Template」「Templateファイル分離」も可能）

2. 条件分岐 / リスト表示：三項演算子 vs *ngIf / *ngFor

✅ React

{isAdmin ? <AdminPanel /> : <UserPanel />}

<ul>
  {users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>

✅ Angular

<app-admin-panel *ngIf="isAdmin; else userPanel"></app-admin-panel>

<ng-template #userPanel>
  <app-user-panel></app-user-panel>
</ng-template>

<ul>
  <li *ngFor="let u of users; trackBy: trackById">{{ u.name }}</li>
</ul>

trackById(index: number, user: any) {
  return user.id;
}

🔍 React開発者向け理解ポイント

AngularはTemplateで構造を操作するために、

  • *ngIf
  • *ngFor

のような 構造ディレクティブが用意されています。
Reactの map と key の発想はほぼ同じですが、Angularでは trackBy を使います。

3. イベントとフォーム：onChange vs (click) / [(ngModel)] / Reactive Forms

✅ React（Controlled Form）

const [name, setName] = useState("");

<input value={name} onChange={e => setName(e.target.value)} />

✅ Angular（Template-driven）

<input [(ngModel)]="name" />
<p>{{ name }}</p>

name = "";

✅ Angular（Reactive Forms：実務ではこちらが多い）

import { FormControl } from '@angular/forms';

name = new FormControl('');

<input [formControl]="name" />
<p>{{ name.value }}</p>

🔍 React開発者向け理解ポイント

Angularフォームは2系統あります：

  • Template-driven（簡単だが拡張性弱め）
  • Reactive Forms（拡張しやすく実務向き）

Reactのフォームは基本的に自作ですが、Angularは フォームがフレームワーク機能として強いです。

4. 状態管理：useState vs Component State / Service + RxJS

✅ React（useState）

const [count, setCount] = useState(0);

✅ Angular（Component内 state）

count = 0;

increment() {
  this.count++;
}

✅ Angular（複数コンポーネントで共有：Service）

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class CounterService {
  private count$ = new BehaviorSubject<number>(0);
  countObservable$ = this.count$.asObservable();

  increment() {
    this.count$.next(this.count$.value + 1);
  }
}

constructor(public counter: CounterService) {}

<p>{{ counter.countObservable$ | async }}</p>
<button (click)="counter.increment()">+</button>

🔍 React開発者向け理解ポイント

Angularの状態共有は Service + RxJSがベーシックです。

Reactでいう

  • Context
  • Redux
  • Zustand

のような役割を、Angularは「標準のDI + RxJS」で自然に解決します。

5. 副作用：useEffect vs Lifecycle Hook

✅ React

useEffect(() => {
  fetchUsers();
}, []);

✅ Angular

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

export class UserListComponent implements OnInit {
  ngOnInit() {
    this.fetchUsers();
  }

  fetchUsers() {}
}

🔍 React開発者向け理解ポイント

Reactは useEffect に集約されますが、Angularは目的別にLifecycleがあります。

  • ngOnInit（初期化）
  • ngOnDestroy（破棄）
  • ngOnChanges（Input変化）

Angular側の設計は「Hookが細かい」＝「責務が分かれている」イメージです。

6. ルーティング：React Router vs Angular Router

✅ React（react-router-dom）

<Routes>
  <Route path="/users" element={<Users />} />
  <Route path="/users/:id" element={<UserDetail />} />
</Routes>

✅ Angular（app-routing.module.ts）

const routes: Routes = [
  { path: 'users', component: UsersComponent },
  { path: 'users/:id', component: UserDetailComponent },
];

<a routerLink="/users">Users</a>
<router-outlet></router-outlet>

🔍 React開発者向け理解ポイント

Reactの element={<Component />} に当たるのが Angular の component: ComponentClass。

<router-outlet> が React Router の <Routes> に相当します。

7. DI（依存性注入）：Reactには“ない”、Angularは“核”

ReactにはDIが標準ではありませんが、AngularはDIが中心です。

✅ Angular DI（Service注入）

constructor(private userService: UserService) {}

Service側：

@Injectable({ providedIn: 'root' })
export class UserService {
  getUsers() { ... }
}

🔍 React開発者向け理解ポイント

Reactだと「useUserService()」のようにHookやContextで注入しますが、Angularはクラスのコンストラクタに注入します。

これにより

  • テスタブル
  • モジュール単位で制御可能
  • グローバル依存を減らせる

という利点があります。

8. 型安全・スケール：Reactは“選べる”、Angularは“最初から揃ってる”

Reactは柔軟ですが、実務では次を自分で選びます：

  • Router（React Router）
  • Form（React Hook Form）
  • Validation（Zod, Yup）
  • State（Redux, Zustand）
  • HTTP（axios, fetch）

Angularは最初から揃っていて、「選択の自由」より「統一された設計」を優先します。

結論：React開発者がAngularを理解する最短ルート

React開発者がAngularを最短で理解するには、こう捉えるとスムーズです：

✅ Angularは “React + Router + Form + DI + RxJS + 規約” が一体化したフルスタックUIフレームワーク

学び始めにおすすめのロードマップ（React脳向け）

  1. Component + Template（JSXとの差分に慣れる）
  2. Input / Output（propsとイベントの移植）
  3. Angular Router（ルーティングの作法）
  4. Service + DI（状態・ロジックの分離）
  5. RxJS（最低限）（async pipe / BehaviorSubject）
  6. Reactive Forms（現場で最も効く）

おまけ：React→Angularの変換メモ（チートシート）

React Angular
JSX Template
props @Input()
callback props @Output() + EventEmitter
useState Component state / RxJS
useEffect ngOnInit/ngOnDestroy
Context Service + DI
React Router Angular Router
fetch/axios HttpClient

最後に

Angularは「最初は重く見える」のですが、慣れると

  • 大規模開発に強い
  • 設計統一がしやすい
  • 保守性が高い
  • DIでテストがしやすい

という特性が見えてきます。

Discussion