Angular をはじめる

今度は、Google の Angular フレームワークを見てみましょう。これは、よく目にするもう 1 つの人気のあるオプションです。 この記事では、Angular が提供するものを確認し、前提条件をインストールしてサンプルアプリをセットアップし、Angular の基本的なアーキテクチャを確認します。

前提条件:

HTMLCSSJavaScript に精通していること、 ターミナル/コマンドラインに関する知識があること。

目的:

ローカルの Angular 開発環境をセットアップするには、スターターアプリを作成し、 そしてそれがどのように機能するかの基本を理解します。

Angular とはなんですか ?

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

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

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

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

ng build Angular アプリを出力ディレクトリーにコンパイルします。
ng serve アプリケーションのビルド・起動をして、ファイルの変更時に再構築します。
ng generate セマンティックに基づいてファイルを生成または変更します。
ng test 対象のプロジェクトで単体テストを実行します。
ng e2e Angular アプリケーションをビルドして提供し、end to end のテストを実行します。

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 をインストールするには、ターミナルで次のコマンドを実行します。

js
npm install -g @angular/cli

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

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

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

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

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

js
cd todo

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

js
ng serve

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

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

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

Angular アプリケーションに慣れてください

このチュートリアルで焦点を当てているアプリケーションソースファイルは、 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.tsapp.component.html 、および app.component.css は一緒に AppComponent を構成します。 この構造により、ロジック、ビュー、およびスタイルが分離され、アプリケーションの保守性と拡張性が向上します。

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

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

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

Angular アプリケーションの構造

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

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

クラス

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

js
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 テンプレートがあります。 このテンプレートは、インラインまたはファイルパスで定義できます。

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

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

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

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

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

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

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

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

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

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

html
<h1>To do application</h1>

スタイル

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

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

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

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

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

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

まとめ

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