【5分でわかる】Angular CLIのgenerateコマンドの基本と応用

こんにちは！

Angularでの開発を進めている中で、こんな悩みはありませんか？

コンポーネントやサービスを作るのに毎回同じコードを書くのが面倒…

Angularのファイル構造ってどうやって作るのが正解なの？

Angular CLIのgenerateコマンドをもっと活用したいけど、使い方がよくわからない…

もしかすると、そんな不安や疑問を抱えているかもしれませんね。

この記事では、Angular開発の強力な味方「Angular CLI generate」コマンドについて、基本的な使い方から応用テクニック、開発時間を短縮するためのポイントまでを詳しく解説していきます。

この記事は、以下のような方におすすめです。

この記事はこんな人におすすめ！

Angularを使い始めたばかりで、効率的な開発方法を知りたい方
Angular CLIのgenerateコマンドの使い方をマスターしたい方
コード生成を自動化して開発時間を短縮したい方
Angularプロジェクトの構造をきれいに保ちたい方

この記事を読めば、Angular CLIのgenerateコマンドを使いこなせるようになるだけでなく、開発効率が大幅にアップし、より品質の高いAngularアプリケーションを短時間で作れるようになります。さらに、チーム開発でも役立つTipsも余すことなくお伝えします。

「Angularの開発をもっと効率的にしたい！」「コード生成を自動化して時間を節約したい！」と少しでも考えているあなたは、ぜひ最後まで読んでください。

それでは、順を追って詳しく見ていきましょう！

Contents

Angular CLIとは？

まず、Angular CLIとは何か、そしてなぜAngular開発で重要なのかを見ていきましょう。

Angular CLIの基本概念

Angular CLI（Command Line Interface）は、Angularアプリケーションの開発をサポートするためのコマンドラインツールです。プロジェクトの作成、コンポーネントやサービスなどの生成、ビルド、テスト、デプロイなど、Angular開発のあらゆる側面をサポートします。

Angular CLIを使うことで、手作業でのファイル作成やボイラープレートコードの記述が不要になり、開発作業が大幅に効率化されます。また、Angularのベストプラクティスに沿ったファイル構造やコードが自動生成されるため、品質の高いアプリケーション開発が可能になります。

Angular CLIのインストール方法

Angular CLIを使うには、まずグローバルにインストールする必要があります。以下のnpmコマンドを実行しましょう。

npm install -g @angular/cli

インストールが完了すると、ngコマンドが使えるようになります。バージョンを確認して、正しくインストールされたか確認しましょう。

ng version

これでAngular CLIの準備が整いました。

Angular CLI generateコマンドの基本

ここからは、今回のメインテーマである「generate」コマンドについて詳しく見ていきましょう。

generateコマンドとは

ng generate（短縮形：ng g）は、Angular CLIの中でも特に頻繁に使用するコマンドの一つです。このコマンドを使うと、コンポーネント、サービス、モジュール、パイプなど、Angularアプリケーションを構成する様々な要素を自動生成できます。

generateコマンドの基本構文は以下の通りです。

ng generate <スキーマ> <名前> [オプション]

項目	説明
<スキーマ>	生成するものの種類（例: component, service, module など）
<名前>	生成するファイルの名前
[オプション]	追加の設定（任意）

例えば、userという名前のコンポーネントを生成するには以下のコマンドを実行します。

ng generate component user

または、短縮形を使って以下のようにも書けます。

ng g c user

生成できる主な要素

Angular CLI generateコマンドで生成できる主な要素は以下の通りです。

スキーマ	短縮形	説明	生成されるファイル（例）
component	c	UIの一部を構成するコンポーネント	user.component.ts, user.component.html, user.component.css, user.component.spec.ts
service	s	データ操作やロジックを提供するサービス	user.service.ts, user.service.spec.ts
module	m	関連する機能をまとめるモジュール	user.module.ts
directive	d	DOM要素の動作を拡張するディレクティブ	highlight.directive.ts, highlight.directive.spec.ts
pipe	p	データ表示形式を変換するパイプ	format-date.pipe.ts, format-date.pipe.spec.ts
guard	g	ルートへのアクセス制御を行うガード	auth.guard.ts, auth.guard.spec.ts
interface	i	型定義を提供するインターフェース	user.ts
enum	e	列挙型を定義するenum	status.ts
class	cl	一般的なクラス	user.ts

これらの要素を適切に組み合わせることで、効率的かつ保守性の高いAngularアプリケーションを構築できます。

コンポーネントの生成

Angularアプリケーション開発で最も頻繁に使うのが、コンポーネントの生成です。詳しく見ていきましょう。

基本的なコンポーネントの生成

コンポーネントを生成する基本的なコマンドは以下の通りです。

ng generate component user

このコマンドを実行すると、以下のファイルが生成されます。

ファイル	説明
`user.component.ts`	コンポーネントのTypeScriptファイル
`user.component.html`	HTMLテンプレート
`user.component.css`	スタイルシート
`user.component.spec.ts`	テストファイル

また、生成されたコンポーネントは自動的にAppModuleに登録されます。

コンポーネント生成のオプション

コンポーネント生成時には、様々なオプションを指定できます。主なものを紹介します。

オプション	説明
`--inline-template` (`-t`)	インラインテンプレートを使用する（HTMLファイルを別に生成しない）
`--inline-style` (`-s`)	インラインスタイルを使用する（CSSファイルを別に生成しない）
`--prefix` (`-p`)	コンポーネントのセレクタのプレフィックスを指定する
`--change-detection`	変更検出の方法を指定する（Default/OnPush）
`--skip-tests`	テストファイルを生成しない
`--export`	親モジュールのexportsに追加する

例えば、テストファイルなしでOnPush変更検出を使用するコンポーネントを生成する場合は以下のようになります。

ng g c user --skip-tests --change-detection=OnPush

入れ子のコンポーネント構造

コンポーネントは階層構造を持たせることができます。例えば、userフォルダ内にprofileコンポーネントを作りたい場合は以下のようにします。

ng g c user/profile

これにより、以下のような構造が作られます。

src/app/
└── user/
    ├── user.component.ts
    ├── user.component.html
    ├── user.component.css
    ├── user.component.spec.ts
    └── profile/
        ├── profile.component.ts
        ├── profile.component.html
        ├── profile.component.css
        └── profile.component.spec.ts

このように、関連するコンポーネントを整理することで、アプリケーションの構造が明確になり、メンテナンスが容易になります。

サービスとモジュールの生成

コンポーネントと並んで重要なのが、サービスとモジュールです。

サービスの生成

サービスはビジネスロジックやデータアクセスのコードをカプセル化するのに使います。生成するには以下のコマンドを使用します。

ng generate service user

または

ng g s user

このコマンドを実行すると、以下のファイルが生成されます。

ファイル名	説明
`user.service.ts`	サービスのコード
`user.service.spec.ts`	テストファイル

サービスはデフォルトではどのモジュールにも登録されません。モジュールのprovidersに登録するか、providedIn: 'root'を使ってルートレベルで提供するかを選択します。デフォルトではprovidedIn: 'root'が設定されます。

モジュールの生成

関連する機能をまとめるためのモジュールは以下のコマンドで生成できます。

ng generate module user

または

ng g m user

このコマンドにより、user.module.tsファイルが生成されます。

モジュール生成時によく使うオプションには以下があります。

オプション	説明
`--routing`	ルーティングモジュールも一緒に生成する
`--flat`	フォルダを作成せずにファイルを生成する

例えば、ルーティング機能を持つユーザーモジュールを生成するには以下のようにします。

ng g m user --routing

これにより、user.module.tsとuser-routing.module.tsが生成されます。

その他の要素の生成

Angular CLIでは、コンポーネント、サービス、モジュール以外にも様々な要素を生成できます。

ディレクティブの生成

カスタムディレクティブを生成するには以下のコマンドを使用します。

ng generate directive highlight

または

ng g d highlight

これにより、highlight.directive.tsとhighlight.directive.spec.tsが生成されます。

パイプの生成

データの表示形式を変換するパイプは以下のように生成します。

ng generate pipe format-date

または

ng g p format-date

これにより、format-date.pipe.tsとformat-date.pipe.spec.tsが生成されます。

ガードの生成

ルートへのアクセスを制御するガードは以下のコマンドで生成できます。

ng generate guard auth

または

ng g g auth

生成時にはどのタイプのガードを作成するか選択できます（CanActivate, CanDeactivate, CanMatch など）。

generateコマンドの応用テクニック

基本的な使い方を押さえたところで、さらに効率を上げるための応用テクニックを見ていきましょう。

複数の要素を一度に生成する

複数の関連する要素を一度に生成することができます。例えば、ユーザー機能に関するコンポーネント、サービス、モジュールを一度に生成するには以下のようにします。

ng g m user --routing && ng g c user/user-list && ng g c user/user-detail && ng g s user/user

このコマンドを実行すると、ユーザーモジュールとルーティング、リストと詳細の2つのコンポーネント、そしてユーザーサービスが生成されます。これにより、関連する機能を効率的に作成できます。

設定の永続化

よく使うオプションをプロジェクトのangular.jsonファイルに記述することで、毎回コマンドラインで指定する手間を省けます。

"schematics": {
  "@schematics/angular:component": {
    "changeDetection": "OnPush",
    "style": "scss",
    "skipTests": true
  },
  "@schematics/angular:service": {
    "skipTests": true
  }
}

この設定により、毎回コマンドラインでオプションを指定しなくても、コンポーネント生成時にはOnPush変更検出、SCSSスタイル、テストスキップが適用されるようになります。チーム開発では、プロジェクト全体で一貫した設定を共有できる大きなメリットがあります。

ベストプラクティスと効率化のコツ

最後に、Angular CLI generateコマンドを使いこなすためのベストプラクティスと効率化のコツを紹介します。

命名規則の統一

チーム開発ではコードの一貫性が重要です。以下のような命名規則を統一することをおすすめします。

ケース	用途と例
パスカルケース	コンポーネント、サービス、ディレクティブなどのクラス名（UserComponent, AuthService）
ケバブケース	セレクタやファイル名（user-component.ts, auth-service.ts）
キャメルケース	プロパティやメソッド（getUserById, isLoggedIn）

Angular CLIは基本的にこれらの規則に従ってファイルを生成しますが、チームで認識を合わせておくことが大切です。

モジュール構造の計画

アプリケーションが大きくなってくると、モジュール構造が重要になります。以下のようなモジュール構造がよく使われます。

モジュールの種類	説明
コアモジュール	シングルトンサービスや、アプリケーション全体で1つだけ必要なコンポーネントを配置
共有モジュール	複数の機能モジュールで使われる共通コンポーネントやディレクティブを配置
機能モジュール	特定の機能に関連するコンポーネントやサービスをグループ化

これらのモジュールを生成する際も、Angular CLI generateコマンドが活躍します。

ng g m core
ng g m shared
ng g m features/user --routing

エイリアスパスの活用

大規模なプロジェクトでは、インポートパスが複雑になることがあります。tsconfig.jsonファイルでパスのエイリアスを設定すると、より簡潔で読みやすいインポート文が書けます。

"paths": {
  "@core/*": ["./src/app/core/*"],
  "@shared/*": ["./src/app/shared/*"],
  "@features/*": ["./src/app/features/*"],
  "@env/*": ["./src/environments/*"]
}

この設定により

import { UserService } from '../../../../core/services/user.service'

のような複雑なパスが

import { UserService } from '@core/services/user.service'

のように簡潔に書けるようになります。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業