概要
Angularを用いたWebシステム開発に必要な前提知識として、Angularの特徴、SPA、TypeScript、開発環境、ビルドの流れを整理する。
Angularは単に画面を作るためのライブラリではなく、コンポーネント、ルーティング、ビルド、依存関係管理を含むフロントエンド開発基盤として扱う。
ここでは、実際の環境構築に進む前に、各ツールがどの役割を持つのかを確認する。
この記事の構成
- 対象環境と利用上の注意
本文記載時の環境と現在そのまま利用できない箇所を確認。 - Angularの特徴
Angularとは、GoogleとAngularのユーザーコミュニティによって開発が進められているJavaScriptフレームワークで、次の特徴を持つ。 - 開発の必須環境
開発者は、プログラムコードを TypeScriptで記述し、 ビルド（※）によってJavaScriptに変換され、HTML、CSSと共にWebブラウザがその命令を実行する流れ。 - 開発の流れ
開発の流れを順にたどり、各処理の役割を整理。
対象環境と利用上の注意
- 本文記載時の環境
Angular CLI 13.2.0、Node.js 16.13.1、npm 8.3.2、TypeScript 4.5.5、Windows x64と、NgModuleベースの生成構成を前提とした説明。 - 確認時期
2026年8月。Angular・Node.js公式資料を照合して記載内容を見直した。
掲載した画面や手順は現行環境で再実行していない。 - 現在そのまま利用できない箇所
現在のAngular CLIはstandalone APIを使うアプリケーションを標準で生成する。
NgModule、生成ファイル、ビルドツール、Node.jsとの対応バージョンは、利用するAngularの版によって異なる。
Angularの特徴
Angularとは、GoogleとAngularのユーザーコミュニティによって開発が進められているJavaScriptフレームワークで、次の特徴を持つ。
-
コンポーネント指向 コンポーネント指向とは、機能を切り分けできる単位で分割して部品化(コンポーネント化)し、必要に応じて組み合わせる開発方針で、Angularでは、このコンポーネント指向を前提としたプログラム設計が基盤となる。
※ 部品の再利用により開発効率を向上しつつ、プログラム構成も簡潔にでき、不具合リスクも減らすことができる。 -
コンポーネントとデータバインディング
Angularは、画面をコンポーネントへ分割し、コンポーネントの状態とテンプレートをデータバインディングで結び付ける。MVVMの考え方と比較して説明される場合もあるが、Angular公式がアプリケーション全体をMVVMだけで定義しているわけではない。 -
TypeScriptの採用
Microsoft社製のJavaScriptを拡張したオープンソース言語TypeScriptの使用を推奨しており、Angular自体もこのTypeScriptをベースとして実装されている。TypeScriptは、開発効率の向上を目的とし、JavaScriptがサーバーサイドプログラムと似た思想で実装できるようクラスや型の概念を取り入れ、厳格な文法に改良されている。
-
モダン技術の積極採用
Angularは、TypeScriptやRxJSなどWeb開発の技術を組み合わせている。旧AngularではSystemJSを使う構成もあったが、Angular CLI 13の標準ビルドで開発者がSystemJSを直接設定する構成ではない。- RxJS
JavaScriptで非同期処理を扱いやすくする。 - Zone.js
非同期処理を追跡して変更検知を支援するライブラリ。現行AngularではZone.jsを使わないzoneless構成も選択できる。
- RxJS
-
SPA（Single Page Application） Angularは、ブラウザ上で表示内容を切り替えるSPAの構築に利用できる。SPAだけに限定されず、ルーティング、サーバーサイドレンダリング（SSR）、静的サイト生成（SSG）などの構成も扱える。
具体的には、ページ遷移毎に前ページのWebシステム全体の処理フロー（3）～（14）を実行するのではなく、初回のアクセス時に必要なHTML、CSS、JavaScriptをまとめて取得し、以降は、データ取得や更新処理など必要個所のみ、Ajax通信などの非同期通信を利用してWebシステム全体の処理フロー（3）～（14）を実行。
なお、必要最低限のサーバー通信となるため、画面表示が高速になり、初回のアクセスをダウンロードと位置付け、以降の通信はしない設計とすることでオフラインアプリも実現できる。
開発の必須環境
開発者は、プログラムコードをTypeScriptで記述し、ビルド（※）によってJavaScriptに変換され、HTML、CSSと共にWebブラウザがその命令を実行する流れとなる。
このため開発者は、プログラムコードを記述するコードエディターと、ビルドするための実行環境、動作確認するためのWebブラウザを用意する。
- ※ ビルド
ビルドとは、TypeScriptやテンプレートのコンパイル、モジュールの解決、ファイルの結合・最適化などを行い、ブラウザへ配信できる成果物を生成する工程。機械語への変換や本番環境へのデプロイを必ず含むわけではない。
以下、必須環境とその概要を整理する。
-
Visual Studio Code（コードエディター）
コードエディターに決まりはないが、TypeScriptと同じMicrosoftが提供し、拡張機能やターミナルを利用できるVisual Studio Codeをこのシリーズでは利用する。 -
TypeScript（開発言語／コンパイラ）
Angularプロジェクトは、対応するTypeScriptをプロジェクトの依存パッケージとして導入し、Angular CLIからコンパイラを実行する。TypeScriptのグローバルインストールは必須ではない。 -
Angular CLI（ビルド実行環境）
Angular CLI（※）をインストールすることで、ターミナルの操作周りでAngular開発に必要なプログラム・ライブラリ一式が構築される。
（下記Node.js上で動作。）開発時は、不足モジュールのインストールや仮想ローカルサーバーの起動などAngular CLIコマンドをVisual Studio Codeのターミナル上で実行し、環境カスタマイズ及び動作確認を行う。
なお、仮想サーバー周りの機能は、Angular CLIが下記Node.jsの機能を利用して実現している。
- ※ CLI（Command Line Interface）
CLIとは、キーボード入力によるコマンドラインで操作要求を受付け、応答を行うインターフェースを指す。
なお、マウスやタッチパネルなどグラフィカルなインターフェースは、GUI（Graphical User Interface）という。
- ※ CLI（Command Line Interface）
-
Node.js（ビルド実行環境／確認環境）
Node.js（※）をインストールすることで、上記TypeScriptとAngular CLIの実行環境（土台）が構築される。- ※ Node.js
Node.jsとは、ブラウザ外でJavaScriptを実行するためのランタイム環境を指す。Angular開発ではAngular CLI、ビルダー、パッケージ管理などの開発ツールを動かすために利用し、Angularの本番サーバーを必ずNode.jsで構築するという意味ではない。
- ※ Node.js
開発の流れ
前項 開発の必須環境で解説した各環境の役割と流れについて、下記フローにまとめる。
- Angular開発における各環境の役割と流れ
（1）〜（5）が一般ユーザーに公開する流れで、（1）〜（3）、（6）、（7）が開発者が動作確認する流れとなる。
- (1) VSCode（Visual Studio Code）からTypeScript、HTML、CSSで実装。
- (2) VSCodeからTypeScriptの実行環境とAngular CLIを利用して(1)をビルドする。
- (3) Webブラウザで実行されるプログラムとなるJavaScript、HTML、CSSが生成される。
- (4) 一般公開されているサーバーに（3）の成果物をデプロイする。
- (5) 一般ユーザーのWebブラウザから（3）の成果物が利用できる。
- (6) Node.js上で動くAngular CLIの開発サーバーが、開発用に生成した成果物を配信する。これは本番環境へのデプロイではない。
- (7) 開発者のWebブラウザから（3）の成果物の動作確認が可能となる。
まとめ
- AngularはJavaScriptやTypeScriptで動く、コンポーネント指向とSPAを前提にしたフロントエンドフレームワーク。
- TypeScriptや関連ファイルはビルドによって、ブラウザで実行できるJavaScriptなどの形式へ変換・集約される。
- Node.jsはAngularの開発環境として利用され、必ずしもNode.jsでサーバーを構築することを意味しない。
- Angular CLIはプロジェクト操作、Node.jsは開発ツールの実行基盤、VSCodeはコード編集を担当する。