コンポーネントは、Angularアプリケーションの主要な構成要素です。各コンポーネントは、より大きなウェブページの一部を表します。アプリケーションをコンポーネントに整理することで、プロジェクトに構造が与えられ、コードが特定の部分に明確に分割されるため、保守と拡張が容易になります。
コンポーネントの定義
すべてのコンポーネントには、いくつかの主要な部分があります。
- Angularによって使用されるいくつかの設定を含む
@Componentデコレーター。 - DOMにレンダリングされる内容を制御するHTMLテンプレート。
- HTMLでコンポーネントがどのように使用されるかを定義するCSSセレクター。
- ユーザー入力の処理やサーバーへのリクエストの実行など、動作を定義するTypeScriptクラス。
UserProfileコンポーネントの簡略化された例を以下に示します。
// user-profile.ts@Component({ selector: 'user-profile', template: ` <h1>User profile</h1> <p>This is the user profile page</p> `,})export class UserProfile { /* Your component code goes here */ }
@Componentデコレーターは、テンプレートに適用するCSSを指定するために、オプションでstylesプロパティも受け付けます。
// user-profile.ts@Component({ selector: 'user-profile', template: ` <h1>User profile</h1> <p>This is the user profile page</p> `, styles: `h1 { font-size: 3em; } `,})export class UserProfile { /* Your component code goes here */ }
HTMLとCSSを別々のファイルに分離する
templateUrlとstyleUrlを使用して、コンポーネントのHTMLとCSSを別々のファイルで定義できます。
// user-profile.ts@Component({ selector: 'user-profile', templateUrl: 'user-profile.html', styleUrl: 'user-profile.css',})export class UserProfile { // コンポーネントの動作はここに定義されます}
<!-- user-profile.html --><h1>Use profile</h1><p>This is the user profile page</p>
/* user-profile.css */h1 { font-size: 3em;}
コンポーネントの使用
複数のコンポーネントを組み合わせてアプリケーションを構築します。例えば、ユーザープロフィールページを構築する場合、ページを次のような複数のコンポーネントに分割できます。
ここでは、UserProfileコンポーネントは他のいくつかのコンポーネントを使用して最終的なページを作成します。
コンポーネントをインポートして使用するには、次の手順が必要です。
- コンポーネントのTypeScriptファイルで、使用するコンポーネントの
import文を追加します。 @Componentデコレーターで、使用するコンポーネントのimports配列にエントリを追加します。- コンポーネントのテンプレートで、使用するコンポーネントのセレクターと一致する要素を追加します。
UserProfileコンポーネントがProfilePhotoコンポーネントをインポートする例を以下に示します。
// user-profile.tsimport {ProfilePhoto} from 'profile-photo.ts';@Component({ selector: 'user-profile', imports: [ProfilePhoto], template: ` <h1>User profile</h1> <profile-photo /> <p>This is the user profile page</p> `,})export class UserProfile { // コンポーネントの動作はここに定義されます}
Tip: Angularコンポーネントについてもっと知りたいですか？ 詳細については、詳細なコンポーネントガイドを参照してください。
次の手順
Angularでのコンポーネントの動作が分かったところで、アプリケーションに動的なデータをどのように追加して管理するかを学ぶ時です。