Angularは、シングルページアプリケーション（SPA）を効率的に開発するためのフレームワークです。このフレームワークは、モダンなウェブアプリケーションを開発するために必要なツールやライブラリを提供しており、その中でもAngular CLI（Command Line Interface）は、開発者にとって非常に便利なツールです。
Angular CLIは、プロジェクトの作成、コンポーネントの生成、ビルド、テスト、デプロイなどをコマンドラインで行えるツールですが、その中でも最も基本的で重要なコマンドのひとつが「ng new」です。このコマンドは、新しいAngularプロジェクトを作成するために使用します。
この記事では、「ng new」コマンドについて詳しく解説し、どのように使うのか、どのようなオプションがあるのか、そして「ng new」を使うメリットについて説明します。初心者から中級者まで、Angular開発者がこのコマンドを活用するための知識を身につけましょう。
1. 「ng new」とは？
「ng new」は、Angular CLIのコマンドの中でも最も基本的かつ重要なコマンドで、新しいAngularプロジェクトを作成するために使用されます。このコマンドを実行すると、指定した名前の新しいディレクトリが作成され、その中にAngularの必要なファイルと構成が自動的に生成されます。
新しいプロジェクトを手動で作成しようとすると、多くのセットアップ作業が必要ですが、「ng new」を使うことで、これらの作業をすべて自動化でき、すぐに開発を開始することができます。
具体的には、以下のような作業が自動で行われます。
- 新しいAngularプロジェクトのディレクトリの作成
- 必要な依存パッケージのインストール（Angular、RxJS、TypeScriptなど）
- 初期設定の作成（
angular.json、tsconfig.json、package.jsonなど） - 初期のサンプルコード（デフォルトのコンポーネントやサービス）の生成
これにより、プロジェクトのセットアップにかかる時間を大幅に短縮でき、開発者はすぐにコーディングを始めることができます。
2. 「ng new」を使うメリット
「ng new」を使うことによる最大のメリットは、手間を省いてプロジェクトを迅速に開始できることです。手動で設定を行う場合、以下の作業をすべて自分で行う必要があります。
- 必要なパッケージのインストール
- TypeScriptやWebpackの設定
- Angularの構成ファイルの生成
- プロジェクト内のファイルやフォルダ構成の設定
これらの作業はすべて「ng new」が自動で処理してくれるため、時間を節約し、プロジェクトにすぐに取りかかることができます。
また、「ng new」コマンドは、最新のAngularバージョンに基づいたプロジェクトを作成するため、最新の機能やベストプラクティスをすぐに利用することができます。
さらに、Angular CLIは、コンポーネント、サービス、モジュールなどの生成を簡単に行えるため、コードの生成を自動化することができ、プロジェクトの構造を標準的に保つことができます。
3. 「ng new」コマンドの基本的な使い方
「ng new」を使って新しいAngularプロジェクトを作成するには、コマンドラインで次のコマンドを実行します。
ng new プロジェクト名
例えば、「my-angular-app」という名前の新しいプロジェクトを作成したい場合は、次のように実行します。
ng new my-angular-app
このコマンドを実行すると、Angular CLIが以下のような処理を実行します。
- 新しいプロジェクトフォルダの作成
「my-angular-app」というディレクトリが作成され、その中にプロジェクトのファイルが配置されます。 - 依存パッケージのインストール
プロジェクトに必要な依存パッケージ（Angular、RxJS、TypeScript、Webpackなど）がインストールされます。 - 初期のコード生成
デフォルトのコンポーネント、モジュール、サービスなどのサンプルコードが生成されます。
4. 「ng new」のオプション詳細
「ng new」コマンドにはさまざまなオプションがあります。これらのオプションを活用することで、プロジェクトの初期設定をさらにカスタマイズできます。代表的なオプションは以下の通りです。
1. --routing
このオプションを使用すると、Angularのルーティング機能を有効にすることができます。SPA（シングルページアプリケーション）では、異なるページを表示するためにルーティングが必要です。
ng new my-angular-app --routing
このオプションを使うと、app-routing.module.tsというルーティング用のモジュールが自動で生成されます。
2. --style
このオプションを使うと、プロジェクトで使用するスタイルの種類（CSS、SCSS、SASS、Lessなど）を指定できます。例えば、SCSSを使いたい場合は次のように実行します。
ng new my-angular-app --style=scss
デフォルトでは、CSSが使用されますが、このオプションを使うことで、他のスタイルシートを簡単に設定できます。
3. --skip-install
このオプションを指定すると、依存パッケージのインストールをスキップすることができます。後で手動で依存パッケージをインストールしたい場合に便利です。
ng new my-angular-app --skip-install
4. --prefix
このオプションを使うと、コンポーネントやディレクティブなどのAngular要素のプレフィックスを指定できます。例えば、appではなくmyappをプレフィックスにしたい場合は次のように実行します。
ng new my-angular-app --prefix=myapp
これにより、生成されるコンポーネントやディレクティブの名前が、myapp-で始まるようになります。
5. 「ng new」を使ってプロジェクトを作成するステップ
「ng new」を使って新しいプロジェクトを作成する際の手順は以下の通りです。
ステップ1: コマンドラインで「ng new」を実行
まず、コマンドラインを開き、以下のコマンドを実行します。
ng new my-angular-app
必要に応じて、--routingや--styleオプションを付け加えてカスタマイズします。
ステップ2: プロジェクト作成の確認
コマンドを実行すると、プロジェクト作成が進行中です。インストールが完了するまで少し待ちます。完了すると、指定したディレクトリ（my-angular-app）が作成され、必要なファイルやフォルダが自動的にセットアップされます。
ステップ3: 開発サーバーを起動
プロジェクトが作成されたら、そのディレクトリに移動し、開発サーバーを起動して動作確認をします。
cd my-angular-app
ng serve
これで、http://localhost:4200でアプリケーションを確認することができます。
6. Angularプロジェクトのディレクトリ構成
「ng new」で作成されたプロジェクトは、一定のディレクトリ構造を持っています。例えば、以下のようなディレクトリ構成になります。
my-angular-app/ ├── e2e/ # エンドツーエンドテスト用のファイル ├── node_modules/ # インストールされた依存パッケージ ├── src/ # ソースコード │ ├── app/ # アプリケーションコード │ ├── assets/ # 静的ファイル（画像など） │ ├── environments/ # 環境設定ファイル │ ├── index.html # HTMLテンプレート │ └── main.ts # エントリーポイントとなるTypeScriptファイル ├── angular.json # Angularプロジェクトの設定ファイル ├── package.json # プロジェクトの依存関係とスクリプト設定 └── tsconfig.json # TypeScriptの設定ファイル
このように、Angular CLIは、開発に必要なファイルやフォルダを自動で生成し、プロジェクトの構造を整えてくれます。
---
## 7. まとめ
「ng new」コマンドは、Angularプロジェクトの初期設定を迅速に行える非常に強力なツールです。このコマンドを使うことで、手動で行うべき作業を自動化し、プロジェクトのセットアップを効率化できます。
また、「ng new」には多くのオプションがあり、プロジェクトを自分のニーズに合わせてカスタマイズすることも可能です。これにより、Angularアプリケーションの開発がさらにスムーズになり、開発者はアプリケーションの実装に集中できるようになります。
初心者から上級者まで、Angular CLIを活用して、効率的にAngularアプリケーションを開発していきましょう。
コメントを残す