Angularコンポーネントの基礎

Angularアプリケーションはコンポーネントの集合体で構成されます。
本章では、コンポーネントの役割や構造、作成方法、そして基本的なデータ・イベントバインディングについて詳しく解説します。

1. コンポーネントの役割と構造

コンポーネントは、AngularアプリのUIとロジックをまとめた再利用可能な部品です。
画面の見た目（テンプレート）、動作（クラス）、スタイル（CSS）を1つの単位で管理できます。

■ コンポーネント構造のイメージ

 my-app/ 
└── src/ 
└── app/ 
└── hello/ 
     ├── hello.component.ts ← ロジック (TypeScript) 
     ├── hello.component.html ← テンプレート (HTML) 
     ├── hello.component.css ← スタイル (CSS) 
     └── hello.component.spec.ts ← テストコード 

■ hello.component.ts の例

import { Component } from '@angular/core'; 
@Component({ 
　selector: 'app-hello', templateUrl: './hello.component.html', 
　styleUrls: ['./hello.component.css'] 
}) 
export class HelloComponent { 
　message = 'こんにちは、Angular！'; 
} 

■ hello.component.html の例

<h2>{{ message }}</h2>

上記のように、コンポーネントは selector を使ってHTML上で呼び出すことができます。

2. コンポーネントの作成：ng generate component

Angular CLIを使えば、コマンド一発でコンポーネント一式を作成できます。

ng generate component hello

このコマンドで以下が自動生成されます：

• hello.component.ts
• hello.component.html
• hello.component.css
• hello.component.spec.ts

また、AppModuleに自動で登録されるため、すぐに使用可能です。

3. データバインディングの基本

Angularでは、データバインディングによってテンプレートとクラスのデータを簡単に同期できます。
主なバインディング方法は以下の4つです。

種類	構文	用途
Interpolation	{{ data }}	変数を表示する
Property Binding	[src]="imageUrl"	プロパティに値を渡す
Attribute Binding	[attr.role]="role"	HTML属性を制御
Class/Style Binding	[class.active]="isActive"	クラスやスタイルを切り替え

■ Interpolationの例

<p>こんにちは、{{ name }}さん！</p>

4. イベントバインディング：ユーザー操作に反応する

イベントバインディングを使えば、ユーザーの操作（クリック、入力など）に応じて処理を実行できます。
構文は(event)="method()"のように書きます。

■ 基本のクリックイベント

// hello.component.ts 
export class HelloComponent { 
　count = 0; 
　increment() { 
　　this.count++; 
　} 
} 

<button (click)="increment()">カウントアップ</button>
<p>現在のカウント: {{ count }}</p> 

まとめ

Angularのコンポーネントは、HTML・TypeScript・CSSの三位一体で構成され、アプリの見た目と動作を1つの単位として管理します。
CLIを使えば簡単に作成でき、データやイベントのバインディングを駆使することで、インタラクティブなUIが実現可能です。

次章では、コンポーネント間のデータの受け渡し（Input/Output）や、ルーティングを使った画面遷移について詳しく解説します。