Introducing Angular CLI の翻訳 - らいふうっどの閑話休題

f:id:ic_lifewood:20200105202945p:plain

この投稿では、 Angular CLI について学び、それを使用して新しい Angular プロジェクトを初期化する方法を説明します。

Angular CLIとは何ですか？

Angular CLI は、Angular プロジェクトを初期化して操作するための公式ツールです。 TypeScript や Webpack などの複雑な構成やビルドツールの手間を省くことができます。

Angular CLI をインストールしたら、1つのコマンドを実行してプロジェクトを生成し、別のコマンドを実行してローカル開発サーバーを使用してアプリケーションを実行する必要があります。

最近のほとんどのフロントエンドツールと同様に、 Angular CLI は Node.js の上に構築されています。

Node.js は、サーバーでJavaScriptを実行し、サーバー側の Web アプリケーションを構築できるサーバーテクノロジーです。ただし、 Angular はフロントエンドテクノロジーであるため、開発マシンに Node.js をインストールする必要がある場合でも、 CLI の実行専用です。

本番用にアプリを構築したら、最終的なバンドルは静的な HTML 、 CSS 、および JavaScript であり、任意のサーバーまたは CDN で提供できるため、 Node.js は必要ありません。

つまり、 Angular でフルスタック Web アプリケーションを構築している場合、フロントエンドとバックエンドに JavaScript を使用する場合、バックエンドパーツを作成するために Node.js が必要になることがあります。

MEAN スタックをチェックしてください。 MongoDB 、 Express （ Node.js 上に構築された Web サーバーと REST API フレームワーク）、 Angular を含むアーキテクチャです。ステップバイステップのチュートリアルを開始したい場合は、この記事を読むことができます。

この場合、 Node.js はアプリのバックエンド部分を構築するために使用され、 PHP 、 Ruby 、 Python などの必要なサーバーサイドテクノロジーに置き換えることができます。ただし、 Angular は、 CLI ツールと npm からのパッケージのインストールを除き、 Node.js に依存しません。

NPM は Node Package Manager の略です。 Node パッケージをホストするためのレジストリです。近年では、 Angular 、 React 、 Vue.js 、 Bootstrap などのフロントエンドパッケージやライブラリの公開にも使用されています。

注：Angular Book：Angularで最初のWebアプリを無料で構築できます。

Angular CLI のインストール

最初に、開発マシンに Node と npm をインストールする必要があります。次のような多くの方法があります。

システム内の node の複数のバージョンをインストールおよび操作するために NVM （Node Version Manager）を使用
オペレーティングシステムの公式 package manager を使用する
公式 Web サイトからインストールします。

シンプルに保ち、公式ウェブサイトを使用しましょう。ダウンロードページにアクセスして、 Windows 用のバイナリを取得し、セットアップウィザードに従ってください。

Node がインストールされているバージョンを表示するコマンドプロンプトで次のコマンドを実行することにより、 Node がシステムにインストールされていることを確認できます。

$ node -v

次に、以下のコマンドを実行して Angular CLI をインストールします。

$ npm install @angular/cli

この記事の執筆時点で、 Angular 8.3 がインストールされます。

Angular 9 をインストールする場合は、次のように次のタグを追加するだけです。

$ npm install @angular/cli@next

コマンドが正常に終了したら、 Angular CLI をインストールされているか確認する必要があります。

Angular CLI のクイックガイド

Angular CLI をインストールした後、多くのコマンドを実行できます。インストールされた CLI のバージョンを確認することから始めましょう。

$ ng version

実行する必要がある 2 番目のコマンドは、完全な使用法のヘルプを取得するための help コマンドです。

$ ng help

CLI は次のコマンドを紹介します。

add ：プロジェクトに外部ライブラリのサポートを追加します。

build (b) ： Angularアプリを、指定された出力パスにある dist/ という名前の出力ディレクトリにコンパイルします。ワークスペースディレクトリ内から実行する必要があります。

config ： Angular の設定値を取得または設定します。

doc (d) ：公式のAngularドキュメント（ angular.io ）をブラウザーで開き、特定のキーワードを検索します。

e2e (e) ： Angular アプリをビルドして提供し、Protractor を使用して end-to-end のテストを実行します。

generate (g) ： schematic に基づいてファイルを生成および/または変更します。

help ：使用可能なコマンドとその簡単な説明をリストします。

lint (l) ：特定のプロジェクトフォルダー内の Angular アプリコードで linting ツールを実行します。

new (n) ：新しいワークスペースと初期の Angular アプリを作成します。

run ：プロジェクトで定義されたカスタムターゲットを実行します。

serve (s) ：アプリをビルドして提供し、ファイルの変更時に再構築します。

test (t) ：プロジェクトで単体テストを実行します。

update ：アプリケーションとその依存関係を更新します。 https://update.angular.io/ を参照してください

version (v) ： Angular CLI バージョンを出力します。

xi18n ：ソースコードから i18n メッセージを抽出します。

プロジェクトの生成

Angular CLI を使用して、コマンドラインインターフェイスで次のコマンドを実行することにより、 Angular プロジェクトをすばやく生成できます。

$ ng new frontend

注： frontend はプロジェクトの名前です。もちろん、プロジェクトの有効な名前を選択できます。フルスタックアプリケーションを作成するため、フロントエンドアプリケーションの名前としてフロントエンドを使用しています。

前述のように、 CLI は、 Angular ルーティングを追加しますかと尋ねます。そして、 y （はい）または n （いいえ）を入力して答えることができます。これはデフォルトのオプションです。また、使用するスタイルシート形式（ CSS など）についても尋ねられます。オプションを選択し、 Enter を押して続行します。

f:id:ic_lifewood:20200105212013j:plain

その後、ディレクトリ構造と多数の構成とコードファイルを使用してプロジェクトを作成します。主に TypeScript および JSON 形式になります。各ファイルの役割を見てみましょう。

/e2e/ ： Webサイトの end-to-end （ユーザー動作のシミュレーション）テストが含まれています。
/node_modules/ ： npm install を使用して、すべてのサードパーティライブラリがこのフォルダーにインストールされます。
/src/ ：アプリケーションのソースコードが含まれています。ほとんどの作業はここで行われます。
/app/ ：モジュールとコンポーネントが含まれています。
/assets/ ：画像、アイコン、スタイルなどの静的アセットが含まれています。
/environments/ ：環境（本番および開発）固有の構成ファイルが含まれています。
browserslist ： CSS サポートに必要な autoprefixer
favicon.ico ： favicon
index.html ：メイン HTML ファイル
karma.conf.js ： Karma （テストツール）の構成ファイル
main.ts ： AppModule が bootstrap されるメインの開始ファイル
polyfills.ts ： Angular に必要なポリフィル
styles.css ：プロジェクトのグローバルスタイルシートファイル
test.ts ：これは Karma の構成ファイルです。
tsconfig.*.json ： TypeScript の構成ファイル
angular.json ： CLI の構成が含まれています。
package.json ：プロジェクトの基本情報（名前、説明、依存関係）が含まれます
README.md ：プロジェクトの説明を含むマークダウンファイル
tsconfig.json ： TypeScriptの構成ファイル
tslint.json ： TSlint （静的分析ツール）の構成ファイル

プロジェクトの起動

Angular CLI は、ローカルマシンでフロントエンドアプリを開発するための完全な tool-chain を提供します。そのため、プロジェクトにサービスを提供するためにローカルサーバーをインストールする必要はありません。ターミナルから ng serve コマンドを使用してプロジェクトをローカルにサービスすることができます。

まず、プロジェクトのフォルダー内を移動し、次のコマンドを実行します。