0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@itstar_lab(ヒロキ)

Angularフレームワーク入門：TypeScriptベースのフルスタックフロントエンドフレームワークを理解する

0
Last updated at Posted at 2026-10-03

はじめに

フロントエンドフレームワークというと、まずReactやVue.jsが名前に挙がることが多いですが、AngularもGoogleが開発・保守する主要なフレームワークの1つとして、大規模なエンタープライズ開発を中心に根強い人気を保っています。

本記事では、Angularがどのようなフレームワークなのか、基本的な構成要素とサンプルコードを交えて整理します。

Angularとは

Angularは、Googleが開発・メンテナンスしているオープンソースのフロントエンドフレームワークです。

React・Vue.jsが「UIを構築するためのライブラリ」という色合いが強いのに対し、Angularはルーティング・フォームバリデーション・HTTP通信・状態管理・依存性注入(DI)・テストツールまでを標準で内包した、フルスタックのフレームワークという位置づけが大きな特徴です。

2026年9月時点の最新安定版はAngular 22(2026年6月リリース)で、Angularは概ね6ヶ月ごとにメジャーバージョンをリリースするサイクルを継続しています。

かつての「AngularJS(1系)」とは設計思想が大きく異なる別物であり、2016年にリリースされた「Angular 2」以降を指して単に「Angular」と呼ぶのが一般的です。

image.png

主な特徴

TypeScriptがファーストクラス

AngularはTypeScriptを前提に設計されたフレームワークです。

JavaScriptでも書けなくはありませんが、公式ドキュメント・CLI・エコシステムのすべてがTypeScriptを標準としており、型安全性を活かした開発がしやすい点が特徴です。

コンポーネントベースの設計

UIを「コンポーネント」という再利用可能な単位に分割して構築する点は、React・Vue.jsと共通しています。

Angularのコンポーネントは、TypeScriptクラスに@Componentデコレータを付与して定義します。

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

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>カウント: {{ count() }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = signal(0); // Signalによる状態管理

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

スタンドアロンコンポーネント

かつてのAngularは、コンポーネントをNgModuleという単位でグループ化して管理する設計が必須でした。

しかしAngular 14以降で導入されたスタンドアロンコンポーネントが現在はデフォルトの構成となっており、NgModuleの宣言が不要になっています。

これにより、ボイラープレートコードが大幅に削減され、コンポーネント単位でのツリーシェイキング(未使用コードの除去)も効きやすくなりました。

上記のサンプルコードでstandalone: trueとしている(Angular 19以降はデフォルトで省略可)のがこれにあたります。

Signals(シグナル)によるリアクティブな状態管理

Angular 17以降で導入され、Angular 20で安定版となったSignalsは、値の変化を細やかに追跡できるリアクティブな状態管理の仕組みです。

従来Angularの変更検知は「Zone.js」というライブラリによるアプリ全体監視に依存していましたが、Signalsを使うことで、実際に値が変化したコンポーネントだけを効率よく再描画できるようになります。

上記のカウンターの例で使っているsignal()・update()がこれにあたります。

Angular 22時点では、フォームの状態をSignalsで扱うSignal Formsも安定版として利用できます。

image.png

依存性注入(DI)が標準搭載

Angularは、フレームワークレベルで本格的なDI(Dependency Injection)コンテナを持っています。

サービスクラスに@Injectableを付与するだけで、コンポーネント側はコンストラクタで受け取るだけで利用できます。

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

@Injectable({ providedIn: 'root' }) // アプリ全体でシングルトンとして提供
export class UserService {
  getUserName(): string {
    return 'たろう';
  }
}

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `<p>こんにちは、{{ userName }}さん</p>`,
})
export class GreetingComponent {
  private userService = inject(UserService); // DIコンテナから注入
  userName = this.userService.getUserName();
}

image.png

この仕組みにより、デザインパターンの解説シリーズで解説したSingletonパターンのようなインスタンス管理を、フレームワーク側に任せることができます。

providedIn: 'root'と指定するだけで、そのサービスはアプリ全体でシングルトンとして扱われます。

ルーティング・フォーム・HTTP通信も標準搭載

React・Vue.jsではルーティング(React Router等)やHTTP通信(Axios等)を別途ライブラリとして追加するのが一般的ですが、Angularは@angular/router・@angular/forms・HttpClientとして、これらの機能をフレームワーク本体に含んでいます。

「何を組み合わせて使うか」という選択に悩む場面が少なく、プロジェクト間でのアーキテクチャの差異が生まれにくいという特徴があります。

RxJSとの深い統合

AngularのHttpClientをはじめとする非同期処理の多くは、以前解説したRxJavaのJavaScript版にあたるRxJSのObservableをベースに設計されています。

import { Component, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-users',
  standalone: true,
  template: `<p *ngFor="let name of userNames">{{ name }}</p>`,
})
export class UsersComponent {
  private http = inject(HttpClient);
  userNames: string[] = [];

  constructor() {
    this.http.get<string[]>('/api/users').subscribe(names => {
      this.userNames = names;
    });
  }
}

Signalsの登場により、単純な状態管理はRxJSからSignalsへ置き換えが進んでいますが、HTTP通信やイベントストリームのような非同期処理では、依然としてRxJSが中心的な役割を担っています。

Angular CLIによる統一された開発体験

Angularはngコマンド(Angular CLI)による開発フローが強力に整備されています。

# 新規プロジェクトの作成
ng new my-app

# コンポーネント・サービスの雛形を自動生成
ng generate component counter
ng generate service user

# 開発サーバーの起動
ng serve

# 本番用ビルド
ng build

プロジェクトの作成からコンポーネント生成、テスト、ビルドまでを一貫したコマンド体系で行えるため、チーム間でのプロジェクト構成のばらつきが少なくなる点もAngularの特徴です。

Reactとの違い

観点 Angular React
位置づけ フルスタックフレームワーク UI構築ライブラリ
言語 TypeScript前提 JavaScript/TypeScriptどちらも可
ルーティング・HTTP・フォーム 標準搭載 別途ライブラリを選定
状態管理 Signals(標準)、RxJS useState等のHooks、外部ライブラリ(Redux等)
学習コスト やや高め(概念・機能が多い) 比較的低め(小さく始めやすい)
主な採用領域 エンタープライズ・大規模SPA 幅広い規模のプロジェクト

「何を使うか自分たちで組み合わせて決めたい」ならReact、「フレームワークが提示する標準的な構成に乗って、チーム間の差異を抑えたい」ならAngular、という選び方をされることが多い傾向にあります。

使用場面

  • 複数チームが並行して開発する、大規模なエンタープライズ向けSPA(社内システム、業務システムなど)
  • ルーティング・フォーム・DI・HTTP通信など、必要な機能一式をフレームワーク側で統一したいプロジェクト
  • TypeScriptによる型安全性を重視する開発チーム
  • 長期間保守されることが前提の、大規模かつ複雑な業務アプリケーション

まとめ

項目 内容
Angularとは Googleが開発する、TypeScriptベースのフルスタックフロントエンドフレームワーク
最新版(2026年9月時点) Angular 22(2026年6月リリース)
主な特徴 スタンドアロンコンポーネント、Signalsによるリアクティブな状態管理、標準搭載のDI・ルーティング・HTTP通信
Reactとの違い Angularはフルスタック志向、Reactは組み合わせ自由度の高いライブラリ志向
向いている場面 大規模・長期保守が前提のエンタープライズ向けSPA

学習に使った書籍

本記事を書くにあたって、Angularの学習で実際に手に取った書籍を紹介します。

※上記リンクはアフィリエイトリンクを含みます。

参考

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?