Framework · 2016年公開

Angular

Angular は Google が主導する TypeScript ベースの Web フレームワークで、ルーティング・フォーム・HTTP 通信を標準で備え、大規模なアプリ開発に向いています。

Angular は TypeScript で Web アプリケーションを作るためのフロントエンドフレームワークです。2016 年に最初に公開され、Google の Angular チームがオープンソースで開発しています。名前は似ていますが、2010 年に登場した AngularJS とは別のフレームワークです。画面はテンプレートと TypeScript クラスからなるコンポーネントに分け、変化する状態はシグナルで追跡し、共通の処理は依存性注入(DI)で提供されるサービスにまとめて共有します。

ルーター、フォーム、HttpClient、国際化、テスト用ユーティリティまで公式パッケージとして提供されるため、複数のチームが長期間保守する大規模な業務アプリや管理画面でよく使われます。決まった構成とコード生成ツールのおかげでプロジェクトごとの差が小さく、新しく加わった開発者もすぐにコードを読めます。サーバーサイドレンダリング(SSR)と静的サイト生成(SSG)も同じツールで扱えます。

始めるには、Node.js をインストールし、Angular CLI でプロジェクトを作って ng serve で開発サーバーを起動するのが最短です。公式サイト angular.dev には、ブラウザ上で試せる対話型チュートリアルとトピック別の詳しいガイドがそろっています。Angular のコードはクラス、型、デコレーターで構成されるので、先に TypeScript の基本を押さえておくと理解が早まります。

特徴

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

各コンポーネントが使うコンポーネントやディレクティブを imports で直接読み込むため、余分なモジュールなしで画面を小さな独立した部品に分けられます。

シグナルによるリアクティビティ

signal、computed、effect で状態と派生値を宣言すると、Angular が変化した値を正確に追跡し、影響する部分だけを更新します。

必要な機能がそろった公式パッケージ

ルーター、リアクティブフォーム、HttpClient、国際化、サーバーレンダリングが公式パッケージとして提供され、基本ライブラリ選びに迷いません。

強力な CLI

Angular CLI ひとつで、プロジェクト作成、コード生成、開発サーバー、テスト、最適化された本番ビルドまで一貫した手順で行えます。

主な用途

大規模な業務用 Web アプリケーション
管理画面と社内ダッシュボード
フォームの多いシングルページアプリケーション
サーバーレンダリング・プリレンダリングのサイト

インストール

1
Node.js の準備
Angular CLI は Node.js 上で動きます。nodejs.org から LTS 版をインストールし、node と npm のバージョンが表示されることを確認します。対応する Node.js のバージョンは angular.dev の互換性表で確認できます。
```
node --version && npm --version
```
2
Angular CLI のインストール
npm で Angular CLI をグローバルにインストールします。これで ng コマンドが使えるようになり、ng version でインストールされたバージョンを確認できます。
```
npm install -g @angular/cli
```
3
プロジェクトの作成と実行
ng new で新しいプロジェクトを作り、開発サーバーを起動します。スタイルシートの形式と SSR の有無についての質問に答えると、ブラウザで http://localhost:4200 が開きます。
```
ng new my-app && cd my-app && ng serve --open
```

はじめてのプログラム

最初のコンポーネント

@Component デコレーターはクラスを画面の部品であるコンポーネントにします。selector は HTML で使うタグ名で、テンプレートの {{ }} は値を表示し、(click) はイベントをメソッドに結び付けます。signal は関数のように呼び出して読み取り、update で変更します。値が変わると Angular が自動的に画面を更新します。

src/app/app.ts

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

@Component({
  selector: 'app-root',
  template: `
    <h1>Hello, {{ name() }}!</h1>
    <button (click)="increment()">Clicked {{ count() }} times</button>
  `,
})
export class App {
  protected readonly name = signal('Angular');
  protected readonly count = signal(0);

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

npm install -g @angular/cli
ng new hello-angular
cd hello-angular
ng serve --open

よく使うツール

Angular CLI: 公式のコマンドラインツールです。ng コマンドでプロジェクト作成、コンポーネントやサービスの生成、開発サーバーとテストの実行、本番ビルドを行います。
Angular Language Service: エディターでテンプレートの補完、エラー表示、定義へのジャンプを提供します。VS Code の拡張機能として入手でき、他の IDE にも組み込まれています。
Angular DevTools: Chrome と Firefox 向けのブラウザ拡張機能で、コンポーネントツリーと状態を調べたり、変更検知のパフォーマンスを分析したりできます。
Angular Material: Angular チームが開発する UI コンポーネントライブラリです。マテリアルデザインのボタン、テーブル、ダイアログと、アクセシビリティ向けの CDK を提供します。

ステップごとのガイド

インストールから Angular の中心となる考え方まで、6 章で順を追って学びます。

公式ドキュメント・参考資料

使用する言語

TypeScriptTypeScript は JavaScript に静的型を加えた言語で、実行前にエラーを見つけ、大規模なコードベースの保守を容易にします。

ディスカッション

ディスカッションを始める

Angular について質問し、経験を共有し、意見を交わす場所です。

まだディスカッションはありません。最初の話題を始めましょう。

特徴