皆さん、こんにちは。
今回は【Angular 13 におけるコンポーネント開発】について紹介させていただきます。
はじめに
Angular は Google が開発・メンテナンスしているフロントエンドフレームワークで、エンタープライズ向けアプリケーションから個人開発まで幅広く利用されています。この記事では Angular 13 をベースに、コンポーネント開発の基本から実践までを紹介します。
コンポーネントとは？
Angular アプリケーションは「コンポーネント」の集合体で成り立っています。コンポーネントは画面の UI とロジックをまとめた再利用可能な単位です。
コンポーネントの構成要素
- TypeScript クラス – コンポーネントのロジックを記述
- HTML テンプレート – UI を定義
- CSS / SCSS – スタイルを定義
-
デコレーター
@Component– メタデータを設定
コンポーネントの作成
Angular CLI を利用すれば簡単にコンポーネントを生成できます。
ng generate component sample
実行すると以下のファイルが作成されます：
src/app/sample/sample.component.ts
src/app/sample/sample.component.html
src/app/sample/sample.component.css
src/app/sample/sample.component.spec.ts
コンポーネントの基本コード
sample.component.ts の中身は以下のようになります。
import { Component } from '@angular/core';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.css']
})
export class SampleComponent {
title = 'Angular 13 コンポーネント例';
}
HTML テンプレート (sample.component.html):
<h2>{{ title }}</h2>
<p>これはサンプルコンポーネントです。</p>
コンポーネント間のデータ受け渡し
Angular では Input と Output を使って親子コンポーネント間のデータをやり取りできます。
@Input の例
子コンポーネントで受け取る：
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `<p>子コンポーネント: {{ message }}</p>`
})
export class ChildComponent {
@Input() message!: string;
}
親コンポーネントで利用する：
<app-child [message]="'こんにちは Angular 13!'" ></app-child>
@Output の例
子コンポーネントでイベントを発火：
import { Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child-btn',
template: `<button (click)="notifyParent()">クリック</button>`
})
export class ChildBtnComponent {
@Output() clicked = new EventEmitter<string>();
notifyParent() {
this.clicked.emit('子からの通知');
}
}
親コンポーネントで受け取る：
<app-child-btn (clicked)="onChildClicked($event)"></app-child-btn>
onChildClicked(message: string) {
console.log(message);
}
Angular 13 での変更点（コンポーネント関連）
- Ivy がデフォルトレンダラーとして安定化
- Angular Package Format (APF) の更新
- TypeScript 4.4 サポート
これらにより、ビルド速度や開発体験が改善されました。特にコンポーネント単位でのツリーシェイキングがより効率的になっています。
まとめ
本記事では Angular 13 におけるコンポーネント開発の基本を解説しました：
- コンポーネントの構造
- CLI を使った生成方法
- 親子間のデータ受け渡し
- Angular 13 での改善点
Angular のコンポーネントアーキテクチャは大規模開発にも適しており、理解しておくとプロジェクトの生産性が大きく向上します。次はサービスや DI（依存性注入）と組み合わせた開発に挑戦してみましょう。
参考リンク
今日は以上です。
ありがとうございました。
よろしくお願いいたします。