Angular をはじめる

Angular は、TypeScript でビルドする開発プラットフォームです。 Angular には次のものが含まれます。

• スケーラブルなウェブアプリケーションを構築するためのコンポーネントベースのフレームワーク
• ルーティング、フォーム管理、クライアント/サーバー通信など、さまざまな機能をカバーする、十分に統合されたライブラリーのコレクション
• コードの開発、ビルド、テスト、更新を支援する一連の開発者ツール

Angular を使用してアプリケーションを構築する場合、単一の開発者プロジェクトからエンタープライズレベルのアプリケーションまで拡張できるプラットフォームを利用しています。 Angular は、更新を可能な限り簡単にするように設計されているため、最小限の労力で最新の開発を利用できます。 何よりも、 Angular エコシステムは、170 万人を超える開発者、ライブラリー作成者、コンテンツ作成者からなる多様なグループで構成されています。

Angular プラットフォームの探索を開始する前に、 Angular CLI について知っておく必要があります。 Angular CLI は、Angular アプリケーションを開発するための最も速く、最も簡単で、推奨される方法です。 Angular CLI を使用すると、多くのタスクを簡単に実行できます。 ここではいくつかの例を示します。

Angular CLI は、アプリケーションを構築するための大事なツールであることがわかります。

このチュートリアルシリーズでは、 to-do list アプリケーションの作成について説明します。 このアプリケーションを介して、Angular を使用してアイテムを管理、編集、追加、削除、およびフィルタリングする方法を学習します。

ローカルシステムに Angular をインストールするには、次のものが必要です。

• Node.js

  Angular には、Node.js の現在のアクティブな LTS、またはメンテナンス LTS バージョンが必要です。特定のバージョン要件については、package.json ファイルのenginesキーを参照してください。 Node.js のインストールの詳細については、nodejs.org を参照してください。 システムで実行されている Node.js のバージョンがわからない場合は、ターミナルウィンドウで、 node-v を実行してください。

• npm パッケージマネージャー

  Angular、Angular CLI、および Angular アプリケーションは、多くの機能をnpm パッケージに依存しています。 npm パッケージをダウンロードしてインストールするには、npm パッケージマネージャーが必要です。 このガイドでは、npm client コマンドラインインターフェイスを使用します。このコマンドラインインターフェイスは、デフォルトで Node.js とともにインストールされます。 npm クライアントがインストールされていることを確認するには、ターミナルウィンドウで npm-v を実行します。

Angular CLI を使用して、Angular アプリケーションを生成、構築、テスト、およびデプロイするためのコマンドをターミナルで実行できます。 Angular CLI をインストールするには、ターミナルで次のコマンドを実行します。

npm install -g @angular/cli

Angular CLI コマンドはすべて ng で始まり、その後に CLI で実行する操作が続きます。 デスクトップディレクトリーで、次の ng new コマンドを使用して、todoと いう名前の新しいアプリケーションを作成します。

ng new todo --routing=false --style=css

ng new コマンドは、デスクトップ上に最小限のスターター Angular アプリケーションを作成します。 追加のフラグ --routing と --style は、アプリケーションでナビゲーションとスタイルを処理する方法を定義します。 このチュートリアルでは、これらの機能について後で詳しく説明します。

より厳密なタイプチェックを実施するように求められた場合は、yes で応答できます。

次の cd コマンドを使用して新しいプロジェクトに移動します。

cd todo

todo アプリケーションを実行するには、ng serve を使用します。

ng serve

CLI が analytics についてプロンプトを表示したら、no と答えます。

ブラウザーで、 http://localhost:4200/ に移動して、新しいスターターアプリケーションを表示します。 ソースファイルのいずれかを変更すると、アプリケーションは自動的にリロードされます。

ng serve の実行中に、コマンドを実行するために 2 番目のターミナルタブまたはウィンドウを開くことができます。 アプリケーションの実行を停止したい場合は、ターミナルで Ctrl+c を押してください。

このチュートリアルで焦点を当てているアプリケーションソースファイルは、 src/app にあります。 CLI が自動的に生成するキーファイルには、次のものが含まれます。

1. app.module.ts: アプリケーションが使用するファイルを指定します。 このファイルは、アプリケーション内の他のファイルの中央ハブとして機能します。
2. app.component.ts: クラスとも呼ばれ、アプリケーションのメインページのロジックが含まれています。
3. app.component.html: AppComponent の HTML が含まれています。 このファイルの内容は、テンプレートとも呼ばれます。 テンプレートは、ブラウザーに表示されるビューまたは内容を決定します。
4. app.component.css: AppComponent のスタイルが含まれています。 このファイルは、アプリケーション全体ではなく、特定のコンポーネントにのみ適用されるスタイルを定義する場合に使用します。

Angular のコンポーネントは、テンプレート、スタイル、クラスの 3 つの主要部分で構成されています。 たとえば、 app.component.ts 、 app.component.html 、および app.component.css は一緒に AppComponent を構成します。 この構造により、ロジック、ビュー、およびスタイルが分離され、アプリケーションの保守性と拡張性が向上します。

このようにして、最初からベストプラクティスを使用しています。

Angular CLI は app.component.spec.ts と呼ばれるコンポーネントテスト用のファイルも生成しますが、このチュートリアルではテストに入らないため、そのファイルは無視してかまいません。

コンポーネントを生成するたびに、CLI は指定した名前のディレクトリーにこれらの 4 つのファイルを作成します。

Angular は TypeScript で構築されています。 TypeScript は JavaScript のスーパーセットであり、有効な JavaScript が有効な TypeScript であることを意味します。 TypeScript は、単純な JavaScript よりもタイピングとより簡潔な構文を提供します。これにより、より保守しやすいコードを作成し、バグを最小限に抑えるためのツールが提供されます。

コンポーネントは、Angular アプリケーションの構成要素です。 コンポーネントには、 @Component() デコレータ、HTML テンプレート、およびスタイルを持つ TypeScript クラスが含まれます。

このクラスは、コンポーネントに必要なロジックを配置する場所です。 このコードには、関数、イベントリスナー、プロパティ、サービスへの参照などを含めることができます。 クラスは、 feature.component.ts などの名前のファイルにあります。ここで、feature はコンポーネントの名前です。 したがって、 header.component.ts 、signup.component.ts 、または feed.component.ts などの名前のファイルを作成できます。 HTML と CSS の場所を Angular に指示するメタデータを持つ @Component() デコレータを使用してコンポーネントを作成します。 一般的なコンポーネントは次のとおりです。

import { Component } from "@angular/core";

@Component({
  selector: "app-item",
  // the following metadata specifies the location of the other parts of the component
  templateUrl: "./item.component.html",
  styleUrls: ["./item.component.css"],
})
export class ItemComponent {
  // your code goes here
}

このコンポーネントは ItemComponent と呼ばれ、そのセレクターは app-item です。 セレクターは、他のテンプレート内に配置することで、通常の HTML タグと同じように使用できます。 セレクターがテンプレート内にある場合、ブラウザーはそのコンポーネントのテンプレートをレンダリングします。 このチュートリアルでは、2 つのコンポーネントを作成し、一方を他方のコンポーネント内で使用する方法について説明します。

Angular のコンポーネントモデルは、強力なカプセル化と直感的なアプリケーション構造を提供します。 コンポーネントを使用すると、アプリケーションの単体テストが容易になり、コードの全体的な可読性が向上します。

すべてのコンポーネントには、そのコンポーネントのレンダリング方法を宣言する HTML テンプレートがあります。 このテンプレートは、インラインまたはファイルパスで定義できます。

外部 HTML ファイルを参照するには、templateUrl プロパティを使用します。

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

インライン HTML を作成するには、 template プロパティを使用して、バッククォート内に HTML を作成します。

@Component({
  selector: "app-root",
  template: `<h1>Hi!</h1>`,
})
export class AppComponent {}

Angular は、コンポーネントから動的な値を挿入できる追加の構文で HTML を拡張します。 Angular は、コンポーネントの状態が変化すると、レンダリングされた DOM を自動的に更新します。 この機能の使用法の 1 つは、次の例に示すように、動的テキストを挿入することです。

<h1>{{ title }}</h1>

二重中括弧は、Angular にその中のコンテンツを補間するように指示します。 title の値は、コンポーネントクラスから取得されます。

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  title = "To do application";
}

アプリケーションがコンポーネントとそのテンプレートをロードすると、ブラウザーには次のように表示されます。

<h1>To do application</h1>

コンポーネントは、アプリケーションの styles.css ファイルからグローバルスタイルを継承し、それらを独自のスタイルで拡張またはオーバーライドできます。 コンポーネント固有のスタイルを @Component() デコレータに直接書き込むか、CSS ファイルへのパスを指定できます。

コンポーネントデコレータにスタイルを直接含めるには、styles プロパティを使用します。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['h1 { color: red; }']
})

通常、コンポーネントは、styleUrls プロパティを使用して別のファイルのスタイルを使用します。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

コンポーネント固有のスタイルを使用すると、CSS を整理して、保守と移植が容易になります。

Angular の最初の紹介は以上です。 この時点で、Angular アプリをセットアップして構築する準備ができており、Angular がどのように機能するかについての基本的な理解が必要です。 次の記事では、その知識を深め、やることリストアプリケーションの構造を構築し始めます。

• 前のページ
• Overview: クライアントサイドの JavaScript フレームワークを理解する
• 次のページ