このページでは、Angular初心者向けにコンポーネントの基本とコンポーネントの作成方法、およびコンポーネントの利用方法を1からわかりやすく解説します。
Angularとは何か?を概要レベルで理解していることを前提に解説します。
Angularのコンポーネントとは?
Angularのアプリケーションは、コンポーネント(Component)という単位を組み合わせて構築されます。コンポーネントは、以下の3つの要素から構成されるのが基本です。
- テンプレート (template): UI (HTML) を定義する部分
- クラス (class): ビジネスロジックや状態(プロパティ、メソッド)を定義する部分
- メタデータ (metadata): デコレーター
@Component({...})
によってコンポーネントの設定を行う部分
このように、見た目と振る舞いをひとまとめにした構造がコンポーネントです。HTML・CSS・TypeScriptで作られるコンポーネントを必要に応じて組み合わせていくことで、大規模なアプリケーションでもスケーラブルかつ保守しやすい設計が可能になります。
これらのコンポーネントを組み合わせて1つのアプリケーションを構築します。各コンポーネントは独立しているため、必要に応じて簡単に追加、削除、または再利用することができます。家を建てるときに部屋を追加したり、デザインを変更したりするのと似ています。
まずは早速コンポーネントの作成を行ってみましょう。(参考 Angular開発環境構築手順)
ステップ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>
初期のコード 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>
これで、アプリケーションに新しい機能や要素を追加するためのコンポーネントを簡単に生成・統合することができます。効果的なコンポーネント設計には、再利用可能で責任範囲が明確なコンポーネントを作成することが重要です。