コンポーネントによる構築 • Angular 日本語版

コンポーネントは、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>User profile</h1>
<p>This is the user profile page</p>

/* user-profile.css */
h1 {
  font-size: 3em;
}

コンポーネントの使用

アプリケーションは複数のコンポーネントを組み合わせて構築します。例えば、ユーザーのプロファイルページを作成する場合、次のようにページをいくつかのコンポーネントに分割できます。

ここで、UserProfileコンポーネントは他のいくつかのコンポーネントを使用して最終的なページを作成します。

コンポーネントをインポートして使用するには、次の手順が必要です。

コンポーネントのTypeScriptファイルに、使用するコンポーネントのimport文を追加します。
@Componentデコレーターのimports配列に、使用するコンポーネントのエントリを追加します。
コンポーネントのテンプレートに、使用するコンポーネントのセレクターと一致する要素を追加します。

ProfilePhotoコンポーネントをインポートするUserProfileコンポーネントの例を次に示します。

// user-profile.ts
import {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でのコンポーネントの動作が分かったところで、アプリケーションに動的なデータをどのように追加して管理するかを学ぶ時です。