はじめに
Angularでプロジェクトを新しく立ち上げるとき、ルーティング設定、モジュール構成、コンポーネントの雛形…と、書き始める前にやることが多くて手が止まった経験はないでしょうか。ファイル名の付け方ひとつとっても、チームやプロジェクトによって微妙に流儀が違ったりします。
Angular CLIは、そうした「毎回同じことで悩む」問題を解消してくれる公式コマンドラインツールです。ng new一発でプロジェクトの雛形が立ち上がり、ng generateでコンポーネントやサービスを規約に沿って量産できます。この記事では、Angular CLIの特徴からインストール、実践的な使い方まで解説します。
Angular CLIとは
Angular CLIは、Googleが開発・メンテナンスしているAngular公式のコマンドラインインターフェースです。npmパッケージ名は@angular/cli、コマンドはngとして提供されています。GitHubリポジトリangular/angular-cliは27,000以上のスターを獲得しており、npmでの週間ダウンロード数は540万回を超える、Angularエコシステムの中核ツールです。
プロジェクトの新規作成からコード生成、開発サーバーの起動、本番ビルド、テスト実行まで、Angular開発のライフサイクル全体をひとつのコマンド体系でカバーしているのが特徴です。
主な特徴
- プロジェクトスキャフォールディング -
ng newだけで、ルーティング・テスト環境まで含んだ動くプロジェクトが手に入る - Schematicsによるコード生成 -
ng generateでコンポーネント、サービス、モジュールなどを規約通りに自動生成 - 統合ビルドシステム - 内部で
@angular/build（esbuildベース）を使い、開発サーバーからプロダクションビルドまで面倒を見てくれる - ビルトインのテスト・Lint連携 -
ng test、ng lintで構成済みのテストランナーやLinterをすぐ実行できる - ng updateによるバージョン移行支援 - 依存関係の更新とマイグレーションスクリプトの適用を自動化
インストール
Angular CLIはプロジェクトごとにローカルインストールするか、コマンドを都度実行する形で使うのが推奨されています。
# npx経由で最新版を都度実行(推奨)
npx @angular/cli new my-app
# グローバルインストールする場合
npm install -g @angular/cli
# yarn
yarn global add @angular/cli
執筆時点の最新版は22.1.3です。Node.jsは22.22.3系・24.15.0系、または26.0.0以上のいずれかが必要になるので、事前にバージョンを確認しておきましょう。
node --version
ng version
基本的な使い方
プロジェクトの作成
ng newにプロジェクト名を渡すと、対話形式でルーティングの要否やスタイルシート形式を選べます。
ng new my-app
cd my-app
生成されるディレクトリ構成はおおよそ次の通りです。
my-app/
├── src/
│ ├── app/
│ │ ├── app.component.ts
│ │ ├── app.config.ts
│ │ └── app.routes.ts
│ ├── index.html
│ └── main.ts
├── angular.json
├── package.json
└── tsconfig.json
開発サーバーの起動
ng serve
http://localhost:4200でホットリロード付きの開発サーバーが起動します。ソースコードを保存するたびに、ブラウザが自動でリロードされます。
実践的なユースケース
コンポーネント・サービスの生成
Angular CLIの真骨頂は、ng generate（省略形ng g）によるコード生成です。手作業でファイルを作り、モジュールへの登録を忘れる…といったミスを防げます。
# コンポーネントを生成
ng generate component features/user-profile
# サービスを生成
ng generate service core/services/auth
# 省略形でも同じ
ng g c features/user-profile
ng g s core/services/auth
ng generate componentを実行すると、.ts・.html・.css・スペックファイル（.spec.ts）の4点セットが命名規約に沿って作成され、テストの雛形まで用意された状態でコーディングを始められます。
本番ビルドとバンドル最適化
ng buildはデフォルトで本番向け設定（Ahead-of-Timeコンパイル、Tree Shaking、ミニファイ）を適用します。
# 本番ビルド
ng build
# バンドルサイズの内訳を確認しながらビルド
ng build --stats-json
出力先はdist/配下で、angular.jsonのbudgets設定でバンドルサイズの上限を決めておくと、CIで肥大化にすぐ気づけます。
"budgets": [
{ "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }
]
ng updateによるバージョンアップ
Angularはメジャーバージョンの更新頻度が高いフレームワークですが、ng updateが依存関係の更新とコードの自動書き換え（マイグレーション）をまとめて行ってくれます。
# 更新可能なパッケージを確認
ng update
# Angular本体とCLIを一括更新
ng update @angular/core @angular/cli
破壊的変更があるバージョンでは、内部のSchematicsが該当箇所のコードを自動修正してくれるため、手作業での置換漏れを減らせます。
まとめ
Angular CLIは、プロジェクトの雛形作成からコード生成、ビルド、バージョン更新までをひとつのコマンド体系にまとめた、Angular開発に欠かせないツールです。ng generateで規約に沿ったコードを量産し、ng build・ng updateで運用フェーズも支えてくれます。Angularを使うなら、まずAngular CLIの主要コマンドから覚えていくのが近道です。