PR

Angular:コンポーネントの基本:作成方法を3分で解説

TypeScript

このページでは、Angular初心者向けにコンポーネントの基本とコンポーネントの作成方法、およびコンポーネントの利用方法を1からわかりやすく解説します。

Angularとは何か?を概要レベルで理解していることを前提に解説します。

スポンサーリンク

Angularのコンポーネントとは?

Angularのアプリケーションは、コンポーネント(Component)という単位を組み合わせて構築されます。コンポーネントは、以下の3つの要素から構成されるのが基本です。

  1. テンプレート (template): UI (HTML) を定義する部分
  2. クラス (class): ビジネスロジックや状態(プロパティ、メソッド)を定義する部分
  3. メタデータ (metadata): デコレーター @Component({...}) によってコンポーネントの設定を行う部分

このように、見た目と振る舞いをひとまとめにした構造がコンポーネントです。HTML・CSS・TypeScriptで作られるコンポーネントを必要に応じて組み合わせていくことで、大規模なアプリケーションでもスケーラブルかつ保守しやすい設計が可能になります。

コンポーネントの本質を日常の例で考えると・・・

コンポーネントは、LEGOブロックのようなものだと考えてみてください。

  • LEGOブロックは、それぞれに機能があり、複数のブロックを組み合わせると最終的に1つのおもちゃを完成させることができます。
  • Angularアプリにおいても、コンポーネント(LEGOのパーツ)をいくつも用意して、それらを組み合わせることで最終的なWEBアプリが完成します。

Legoブロックとの共通点

  • 再利用できる: 一度作ったコンポーネントを、いろいろな画面や機能で使い回すことができる
  • 組み合わせが自由: 必要に応じて順番や配置を変えて、UI(見た目)や機能(ロジック)を組み合わせられる
  • 単体で役割を持つ: それぞれのコンポーネントが「カードの表示役」「ボタンの管理」「プロフィールの表示」など、明確な役割を持つ

これらのコンポーネントを組み合わせて1つのアプリケーションを構築します。各コンポーネントは独立しているため、必要に応じて簡単に追加、削除、または再利用することができます。家を建てるときに部屋を追加したり、デザインを変更したりするのと似ています。

まずは早速コンポーネントの作成を行ってみましょう。(参考 Angular開発環境構築手順

前提事項1 Angular CLIのインストール

Angular CLI(Command Line Interface)は、Angularアプリケーションの開発を助けるツールです。まだインストールしていない場合は、以下のコマンドを使用してインストールできます。

npm install -g @angular/cli

前提事項2 Angularプロジェクトの作成

Angular CLIを使用して新しいプロジェクトを作成します。以下のコマンドを実行し、プロンプトに従ってプロジェクト名を入力します。

ng new プロジェクト名

ステップ1: コンポーネントの生成

プロジェクトディレクトリ内で、Angular CLIのgenerate componentコマンドを使用して新しいコンポーネントを生成します。ターミナルやコマンドプロンプトを開き、次のコマンドを実行してください。

ng generate component コンポーネント名

以下のように短縮形を使用することもできます。

ng g c コンポーネント名

このコマンドは、指定したコンポーネント名で新しいディレクトリを作成し、その中にコンポーネントのクラスファイル(.ts)、テンプレートファイル(.html)、スタイルシートファイル(.scssまたは.css)、テストファイル(.spec.ts)を生成します。

Q
コンポーネントの作成はルートディレクトリではなく、その配下にディレクトリを作成&コンポーネント作成を行うこともできますか?
A

可能です。実際の開発現場では、Angularプロジェクトにおいてはコンポーネントを整理し、管理しやすくするために、プロジェクトのルートディレクトリではなく、その配下にディレクトリを作成してコンポーネントを分類することが一般的なプラクティスです。

たとえば、usersディレクトリ内にuser-profileコンポーネントを生成したい場合、以下のようにコマンドを実行します:

ng generate component users/user-profile

ステップ2: コンポーネントの編集

生成されたファイル(コンポーネントを構成する基本的なソースコードが生成されています)を編集して、コンポーネントのビジネスロジック、表示内容、スタイルを定義します。

ここでは、簡単なコンポーネントの例を通して、これらのファイルが初期状態でどのようになっているか、そしてどのように編集するかを見ていきましょう。

事例 ユーザープロフィールコンポーネント

初期のコード user-profile.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

コンポーネントを作成すると上記のようなコードが生成されています。基本的には、このクラスの中のロジックを開発していくことになります。

ここではわかりやすい例としてユーザー名と説明をコンポーネントクラスのプロパティとして追加します。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.css']
})
export class UserProfileComponent implements OnInit {
  userName: string = 'John Doe';
  userDescription: string = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

  constructor() { }

  ngOnInit(): void {
  }

}

初期のコード user-profile.component.html

<p>user-profile works!</p>

HTMLは上記の通りの状態で生成されます。

ここでは、ユーザー名と説明を表示するようにしたいので、Angularのデータバインディングを使用して、コンポーネントクラスのプロパティをテンプレートにバインドします。

<div class="user-profile">
  <h2>{{ userName }}</h2>
  <p>{{ userDescription }}</p>
</div>

参考 divタグ / h2タグ /pタグ

初期のコード user-profile.component.css

/* ここにスタイルを追加します */

CSSファイルには上記のように何も書かれていないのが初期状態です。ユーザープロフィールの見た目を整えるために以下のように編集します。

.user-profile {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 8px;
}

h2 {
  color: #333;
}

p {
  color: #666;
}

これで、UserProfileComponentはユーザー名と説明を表示する簡単なUIを持つようになりました。コンポーネントクラスでデータを管理し、それをテンプレートにバインドして表示し、CSSでスタイリングを行う基本的なフローを理解することができました。

このプロセスは、Angularアプリケーションのほぼすべてのコンポーネントで共通していますので、あなたが作成したい機能に応じてコードを書き替えてください。

最後に、作成したコンポーネントを利用する方法です。

ステップ3: コンポーネントの使用

新しく生成したコンポーネントは、他のコンポーネントのテンプレート内で使用できます。コンポーネントのセレクター(@Componentデコレーター内で定義されている)をHTMLタグとして追加することで、そのコンポーネントを呼び出せます。

例えば、app-my-new-componentというセレクターを持つコンポーネントがある場合、別のコンポーネントのテンプレート内で以下のように使用できます。

<app-my-new-component></app-my-new-component>

これで、アプリケーションに新しい機能や要素を追加するためのコンポーネントを簡単に生成・統合することができます。効果的なコンポーネント設計には、再利用可能で責任範囲が明確なコンポーネントを作成することが重要です。

まとめ Angularのコンポーネントとは?

  • コンポーネントはAngularアプリケーションの基本的な構築ブロックであり、UI(ユーザーインターフェース)の一部分をカプセル化し管理します。
  • それぞれのコンポーネントには、テンプレート(HTML)、スタイル(CSS)、およびビジネスロジック(TypeScript)が含まれます。
  • コンポーネントはデータバインディングと依存性注入を利用してアプリケーション内の他の部品とやり取りします。

まとめ Angularのコンポーネントの作成方法

  • ステップ1: Angular CLI(コマンドラインインターフェース)を使用してコンポーネントを生成します。例:ng generate component my-new-component または短縮形 ng g c my-new-component
  • ステップ2: コンポーネントクラス(.tsファイル)にビジネスロジック(データとメソッド)を追加します。ここで、コンポーネントの振る舞いを定義します。
  • ステップ3: テンプレートファイル(.html)を編集してUIを定義します。Angularのデータバインディングやディレクティブを利用して、動的なコンテンツを表示します。
  • ステップ4: スタイルファイル(.cssまたは.scss)でコンポーネントの見た目をカスタマイズします。
タイトルとURLをコピーしました