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

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

参考　Angularとは？

Angularが何か？を何となく理解していること、およびAngular CLIのインストール・Angularプロジェクトの作成が完了していることを前提としています。以下のページでAngularのプロジェクト作成までをコマンド付き・画像付きでご説明しておりますので、まずはそちらをご覧ください。

参考　Angular：ローカル環境構築手順４ステップ

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

Angularのコンポーネントとは画面を構成する１つの部品のようなものです。家を建てるとき、多くの部品（部屋、ドア、窓など）が必要ですが、この部屋やドア・窓といった部品がコンポーネントです。

Angularのアプリケーションは多くのコンポーネントから成り立っています。コンポーネントはアプリケーションの一部分で、独自の役割や責任を持っていて、例えばユーザープロフィールを表示するコンポーネント、コメントを投稿するフォームのコンポーネントなどが存在します。

それぞれのコンポーネントは3つの主要な部分から成り立っています。

1. クラス (TypeScript): コンポーネントの「脳」のようなもの。データや関数（コンポーネントが何をすべきかの指示）を持っています。
2. テンプレート (HTML): コンポーネントの「顔」のようなもの。ユーザーに表示される部分（UI）です。HTMLを使ってどのように見えるかを定義します。
3. スタイル (CSS): コンポーネントの「服」のようなもので、テンプレートの見た目（色、配置など）を整えます。

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

早速コンポーネントの作成を行ってみましょう。

npm install -g @angular/cli

ng new プロジェクト名

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

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

ng generate component コンポーネント名

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

ng g c コンポーネント名

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

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>

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