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

Angular でコンポーネントを作成する方法について、完全かつ包括的なガイドを日本語でご紹介します。Angularは、モジュール化されたフレームワークであり、コンポーネントはその中心的な役割を担っています。コンポーネントは、アプリケーションのUI部分を定義するために使われ、HTML、CSS、TypeScriptの3つの主要なファイルで構成されます。以下に、Angularコンポーネントの作成方法を詳細に説明します。

1. Angularプロジェクトの作成

まず、Angularプロジェクトを作成する必要があります。Angular CLI（コマンドラインインターフェース）を使用することで、プロジェクトの作成から開発環境の設定までを簡単に行うことができます。

Angular CLIのインストール

もしまだAngular CLIをインストールしていない場合、以下のコマンドでインストールします。

bash
CopyEdit
npm install -g @angular/cli

インストール後、新しいプロジェクトを作成します。

bash
CopyEdit
ng new my-angular-app
cd my-angular-app

これで、Angularの基本的なプロジェクトが作成されました。

2. コンポーネントの作成

コンポーネントを作成するためには、Angular CLIのng generate component（またはその短縮形ng g c）コマンドを使用します。このコマンドは、指定された名前のコンポーネントを生成し、必要なファイル（TypeScript、HTML、CSS、テストファイル）を作成します。

例えば、headerというコンポーネントを作成する場合は、以下のコマンドを実行します。

bash
CopyEdit
ng generate component header

もしくは、短縮形で次のようにも書けます。

bash
CopyEdit
ng g c header

これにより、次のファイルが作成されます：

• header.component.ts（TypeScriptファイル）
• header.component.html（HTMLテンプレート）
• header.component.css（CSSスタイル）
• header.component.spec.ts（テストファイル）

3. コンポーネントの構造

コンポーネントには、主に次の4つの部分があります。

1. TypeScript（コンポーネントのロジック）

コンポーネントのロジックは、header.component.tsの中に記述します。通常、@Componentデコレーターが使われて、コンポーネントが宣言されます。

typescript
CopyEdit
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  title = 'Angularアプリケーション';
}

• selector: コンポーネントのタグ名。これによりHTML内でコンポーネントを呼び出すことができます。
• templateUrl: コンポーネントのHTMLファイルのパス。
• styleUrls: コンポーネントに関連付けられたCSSファイルのパス。

2. HTML（テンプレート）

header.component.htmlでは、コンポーネントのビュー（表示内容）を定義します。Angularでは、データバインディングを使用して、TypeScriptファイルのデータをHTMLに埋め込むことができます。

html
CopyEdit
<header>
  <h1>{{ title }}h1>
header>

ここで{{ title }}は、TypeScriptファイルで定義したtitle変数を表示するデータバインディングです。

3. CSS（スタイル）

header.component.cssでは、コンポーネントのスタイルを定義します。これにより、コンポーネント内のHTMLに適用されるスタイルを指定できます。

css
CopyEdit
header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  text-align: center;
}

このスタイルは、headerタグに適用されます。

4. テスト（テストファイル）

Angularでは、コンポーネントに関連するテストファイルも自動で作成されます。header.component.spec.tsでは、コンポーネントが正しく動作するかをテストできます。

typescript
CopyEdit
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { HeaderComponent } from './header.component';

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ HeaderComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(HeaderComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

4. コンポーネントの使用

作成したコンポーネントを他のコンポーネントで使用するためには、まずapp.module.tsファイルでコンポーネントをインポートし、declarations配列に追加する必要があります。ng generate componentコマンドを使用した場合、これが自動で行われます。

次に、コンポーネントをHTMLで使用するには、selectorで指定したタグを使います。

html
CopyEdit

<app-header>app-header>

これにより、HeaderComponentがAppComponent内に表示されます。

5. コンポーネント間でデータをやり取りする

Angularでは、親コンポーネントと子コンポーネント間でデータをやり取りするために、@Inputと**@Output**デコレーターを使用します。

親から子へデータを渡す（@Input）

親コンポーネントから子コンポーネントへデータを渡すには、子コンポーネントで@Inputデコレーターを使用します。

親コンポーネントのHTML：

html
CopyEdit
<app-header [title]="appTitle">app-header>

親コンポーネントのTypeScript：

typescript
CopyEdit
export class AppComponent {
  appTitle = 'Angularアプリケーション';
}

子コンポーネントのTypeScript：

typescript
CopyEdit
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @Input() title: string;
}

子から親へデータを渡す（@Output）

子コンポーネントから親コンポーネントへイベントを通知するには、@Outputデコレーターを使用します。

子コンポーネントのTypeScript：

typescript
CopyEdit
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {
  @Output() notify = new EventEmitter<string>();

  onClick() {
    this.notify.emit('ボタンがクリックされました');
  }
}

親コンポーネントのHTML：

html
CopyEdit
<app-header (notify)="handleNotification($event)">app-header>

親コンポーネントのTypeScript：

typescript
CopyEdit
export class AppComponent {
  handleNotification(message: string) {
    console.log(message);
  }
}

まとめ

Angularのコンポーネントは、アプリケーションのUIを構築するための基本的な要素です。ng generate componentコマンドを使用することで、簡単にコンポーネントを作成し、必要なファイルや設定が自動で行われます。コンポーネント間でデータをやり取りするための方法も豊富に用意されており、Angularでの開発を効率的に進めることができます。