ng new Angular - 新しいAngularプロジェクトを作成する方法
初心者向けガイド：ng newコマンドの使い方
このガイドでは、Angular CLIを使用して新しいAngularプロジェクトを作成するための基本的な手順を解説します。 ng newコマンドを利用することで、必要なファイルとディレクトリ構造が自動的に生成されます。 開発環境を整えるための推奨設定や、オプションの引数についても詳しく説明しますので、これからAngularを始めたい方にとって役立つ情報が満載です。
ng newコマンドの基本的な使い方
Angularプロジェクトを作成するには、以下のコマンドをターミナルで実行します。
ng new my-angular-app
上記のコマンドは、「my-angular-app」という名前の新しいプロジェクトを作成します。新しいディレクトリが作成され、その中に必要なファイルとフォルダが自動的に生成されます。
オプション引数の使用
ng newコマンドにはいくつかのオプション引数があります。以下の表は、一般的なオプション引数とその説明を示しています。
| オプション | 説明 |
|---|---|
| --routing | ルーティング機能を追加します。 |
| --style | スタイルシートの種類（css, scss, sass, less）を指定します。 |
| --skip-install | 依存関係のインストールをスキップします。 |
推奨設定
プロジェクトを作成する際には、以下の推奨設定を考慮してください。
- 最新のAngularバージョンを常に使用すること。
- プロジェクトに必要な依存関係を明確に定義すること。
- 優れたディレクトリ構造を維持するために、コンポーネントやサービスを適切に配置すること。
Angular CLIとは
Angularの環境構築において、「Angular CLI」は欠かせないツールです。Angularを他のJavaScriptフレームワークではなく選択する理由として、以下のような点が挙げられます。
- デザイナーとの協業がしやすい
- 公式ドキュメントが充実しており、困った時に公式リソースに頼ることができる
- コンポーネント、サービス、ルーティング、モジュール、パイプ、http通信など、アプリケーション構築に必要な機能が揃っており、サードパーティ製のライブラリを使う必要がない
- 命名規則やディレクトリ構成が決まっているため、プロジェクトごとにドキュメントを用意する必要がなく、コードの保守性が高い
- 環境構築に時間をかけずに、すぐにコードを書き始めることができる
これらの特徴のうち、4点目と5点目は「Angular CLI」によって保証されています。このツールライブラリを使うことで、コマンド一つで環境構築を行うことができ、必要なライブラリのインストール、プロジェクトの基本的なディレクトリ構造の設定、webpackを使ったビルドやテストなどの基本的な設定が完了します。
実現手順
Angular CLIのインストール
以下のコマンドでAngular CLIをインストールします。
npm install -g @angular/cli
バージョンを指定する場合は、以下のコマンドを使用します。
npm install -g @angular/[email protected]
追記（2020年6月）：このバージョンでは、Angular CLIはGoogleのAngularチームと使用状況データを共有するかどうかを尋ねます。
旧バージョンのAngular CLIがインストールされている場合
以前のバージョンがインストールされている場合は、アンインストールしてから再インストールする必要があります。
npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
プロジェクトの作成
ng newコマンドでプロジェクトを作成します。
ng new MyApp
コマンドを実行すると、Angularルーティングを追加するかどうかと、スタイルシートの形式を選択するかどうかを尋ねられます。必要に応じて選択してください。
ng serveでプロジェクトが正常に動作するか確認する
以下のコマンドでローカルサーバーを起動し、http://localhost:4200/にアクセスします。
cd MyApp
ng serve
指定したページが表示されれば、プロジェクトは正常に構築されています。
よく使うngコマンド
以下は、よく使うngコマンドです。
ng serve: ローカル環境で実行し、自動リロードをサポートします。ng build --prod: 本番環境用のビルドを生成し、圧縮と事前コンパイルを行います。ng test: ユニットテストを実行します。ng update: プロジェクトの依存関係を更新します。ng add: Angularの機能やライブラリを追加します。
ng generateコマンド
ng g component my-new-component: コンポーネントを作成します。ng g module my-module: モジュールを作成します。ng g service my-new-service: サービスを作成します。ng g library my-new-library: カスタムライブラリを作成します。
ng updateとng add
ng updateコマンドはAngular 6で導入され、依存ライブラリの更新とプロジェクトの最適化に使用されます。
ng addコマンドは、初期プロジェクトに含まれていない@angular/pwaなどのライブラリを追加し、同時にその依存関係をインストールすることができます。
プロジェクト構造
プロジェクトの基本構造は以下のようになります。
├── .editorconfig.json
├── angular.json
├── src
│ ├── app
│ ├── assets
│ ├── environments
参照記事
より詳細な情報が必要な場合は、以下の記事を参考にしてください。
Q&A
Q1: ng newとは何ですか？
A1: ng newは、Angular CLIを使用して新しいAngularプロジェクトを作成するためのコマンドです。
Q2: どのようにプロジェクトを起動しますか？
A2: プロジェクトを作成した後、ターミナルでng serveコマンドを実行することで、プロジェクトを起動できます。
Q3: ルーティングの追加はどのように行いますか？
A3: プロジェクトを作成する際に--routingオプションを指定することで、ルーティング機能を追加できます。