angular チュートリアル

Angular チュートリアル - 初心者から上級者までの完全ガイド

 

Angular をはじめる

今度は、Google の Angular フレームワークを見てみましょう。これは、よく目にするもう 1 つの人気のあるオプションです。 この記事では、Angular が提供するものを確認し、前提条件をインストールしてサンプルアプリをセットアップし、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 をインストールするには、ターミナルで次のコマンドを実行します。

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 を押してください。

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

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

  • app.module.ts: アプリケーションが使用するファイルを指定します。 このファイルは、アプリケーション内の他のファイルの中央ハブとして機能します。
  • app.component.ts: クラスとも呼ばれ、アプリケーションのメインページのロジックが含まれています。
  • app.component.html: AppComponent の HTML が含まれています。 このファイルの内容は、テンプレートとも呼ばれます。 テンプレートは、ブラウザーに表示されるビューまたは内容を決定します。
  • 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 アプリケーションの構造

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

外部 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のデータバインディングの多様な手法を理解し、ユーザーインターフェースの反応性を高める方法について解説します。

バインディングの種類 説明
Interpolation 式の値をHTMLに埋め込む方法
Property Binding コンポーネントのプロパティに値をバインディング
Event Binding ユーザーの入力を聞き取り、メソッドを呼び出す方法

HTTPクライアントの使用

外部APIとの通信方法やデータの取得方法について詳しく解説し、実用的なアプリケーションの構築に役立てます。


import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

fetchData() {
  this.http.get('/api/data').subscribe(data => {
    console.log(data);
  });
}

参考文献

よくある質問 (FAQ)

Q1: Angularを始めるには何が必要ですか？
A1: Node.jsとAngular CLIをインストールし、基本的なJavaScriptとHTMLの知識があると良いでしょう。
Q2: コンポーネントとは何ですか？
A2: コンポーネント는 全てのUI要素をカプセル化し、再利用可能なコードを作成するための基本的なBuilding Blockです。
Q3: Angularのデータバインディングにはどのような種類がありますか？
A3: 主にInterpolation, Property Binding, Event Bindingの3つがあります。