インターフェースを作成する

このレッスンではインターフェースを作成し、アプリケーションのコンポーネントに組み込む方法を紹介します。

何を学ぶか

  • データ型として利用できる新しいインターフェースの作成
  • サンプルデータを持つ新しいインターフェースのインスタンスの作成

インターフェースのコンセプト概要

Interfacesはアプリケーションで使用するカスタムデータ型です

Angularは強い型付けのプログラミング環境で作業できるようにするためにTypeScriptを使用しています。 強力な型チェックにより、アプリケーション内のある要素が別の要素に誤った形式のデータを送る可能性を減らせます。 このような型の不一致によるエラーはTypeScriptコンパイラによって検出され、多くの場合IDEでも検出できます。

このレッスンでは、1つの住宅物件に関するデータを表すプロパティを定義するインターフェースを作成します。

  1. 新しいAngularインターフェースを作成する

    このステップではアプリケーションに新しいインターフェースを作成します。

    IDEのターミナルペインで、

    1. プロジェクトディレクトリ内の、first-appディレクトリに移動します。

    2. first-appディレクトリで、このコマンドを実行して新しいインターフェースを作成します。

      ng generate interface housinglocation

    3. ng serveを実行してアプリケーションをビルドし、http://localhost:4200で開発サーバーを起動します。

    4. ブラウザで、http://localhost:4200を開き、アプリケーションを表示します。

    5. アプリケーションがエラーなくビルドされていることを確認します。 次のステップに進む前に、エラーがあれば修正してください。

  2. 新しいインターフェースにプロパティを追加する

    このステップでは住宅物件を表すためにアプリケーションが必要とするプロパティをインターフェースに追加します。

    1. IDEのターミナルペインで、ng serveコマンドがまだ実行されていない場合は起動し、アプリケーションをビルドしてhttp://localhost:4200で開発サーバーを起動します。

    2. IDEの編集ペインで、src/app/housinglocation.tsを開きます。

    3. housinglocation.tsのデフォルトの内容を以下のコードと同じになるように置き換えて、新しいインターフェースを作成します。

      src/app/housinglocation.tsをこのコードに合わせて更新する

      export interface HousingLocationInfo {
  id: number;
  name: string;
  city: string;
  state: string;
  photo: string;
  availableUnits: number;
  wifi: boolean;
  laundry: boolean;
}

    4. 変更を保存し、アプリケーションがエラーを表示していないことを確認します。次のステップに進む前に、エラーがあれば修正してください。

    ここまでで、idとname、および場所情報を含む住宅物件データを表すインターフェースを定義しました。

  3. アプリケーション用のテスト用住宅データを作成する

    インターフェースは定義しましたが、まだ使用していません。

    このステップでは、インターフェースのインスタンスを作成し、サンプルデータを割り当てます。 このサンプルデータは、まだアプリケーションには表示されません。 これが表示されるようになるまでには、いくつかのレッスンを進める必要があります。

    1. IDEのターミナルペインで、ng serveコマンドがまだ実行されていない場合は起動し、アプリケーションをビルドしてhttp://localhost:4200で開発サーバーを起動します。

    2. IDEの編集ペインで、src/app/home/home.tsを開きます。

    3. src/app/home/home.tsで、Homeが新しいインターフェースを使えるように、既存のimport文の後にこのimport文を追加します。

      src/app/homse/home.tsでHomeをインポートする

      import {Component} from '@angular/core';
import {HousingLocation} from '../housing-location/housing-location';
import {HousingLocationInfo} from '../housinglocation';

@Component({
  selector: 'app-home',
  imports: [HousingLocation],
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
    <section class="results">
      <app-housing-location />
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {
  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';

  housingLocation: HousingLocationInfo = {
    id: 9999,
    name: 'Test Home',
    city: 'Test city',
    state: 'ST',
    photo: `${this.baseUrl}/example-house.jpg`,
    availableUnits: 99,
    wifi: true,
    laundry: false,
  };
}

    4. src/app/home/home.tsで、空のexport class Home {}の定義をコンポーネント内で新しいインターフェースの単一のインスタンスを作成する次のコードに置き換えてください。

      src/app/home/home.tsにサンプルデータを追加する

      import {Component} from '@angular/core';
import {HousingLocation} from '../housing-location/housing-location';
import {HousingLocationInfo} from '../housinglocation';

@Component({
  selector: 'app-home',
  imports: [HousingLocation],
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
    <section class="results">
      <app-housing-location />
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {
  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';

  housingLocation: HousingLocationInfo = {
    id: 9999,
    name: 'Test Home',
    city: 'Test city',
    state: 'ST',
    photo: `${this.baseUrl}/example-house.jpg`,
    availableUnits: 99,
    wifi: true,
    laundry: false,
  };
}

    5. home.tsファイルが次の例と一致していることを確認してください。

      src/app/home/home.ts

      import {Component} from '@angular/core';
import {HousingLocation} from '../housing-location/housing-location';
import {HousingLocationInfo} from '../housinglocation';

@Component({
  selector: 'app-home',
  imports: [HousingLocation],
  template: `
    <section>
      <form>
        <input type="text" placeholder="Filter by city" />
        <button class="primary" type="button">Search</button>
      </form>
    </section>
    <section class="results">
      <app-housing-location />
    </section>
  `,
  styleUrls: ['./home.css'],
})
export class Home {
  readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';

  housingLocation: HousingLocationInfo = {
    id: 9999,
    name: 'Test Home',
    city: 'Test city',
    state: 'ST',
    photo: `${this.baseUrl}/example-house.jpg`,
    availableUnits: 99,
    wifi: true,
    laundry: false,
  };
}

      HomeクラスにHousingLocation型のhousingLocationプロパティを追加することで、データがインターフェースの定義どおりであることを確認できます。もしデータがインターフェースの定義を満たしていなければ、IDEがその旨のエラーを表示して知らせてくれます。

    6. 変更を保存し、アプリケーションにエラーがないことを確認してください。ブラウザを開き、アプリケーションが引き続き"housing-location works!"というメッセージを表示していることを確認してください。

      ロゴ、フィルター用のテキスト入力ボックス、検索ボタン、そして'housing-location works!'というメッセージを表示しているhomes-appのブラウザフレーム

    7. 次のステップに進む前に、エラーがあれば修正してください。

SUMMARY: このレッスンでは、アプリケーションで新しいデータ型を定義するインターフェースを作成しました。 この新しいデータ型によって、HousingLocationデータが必要となる箇所を明確に指定できます。 また、この新しいデータ型で、IDEとTypeScriptコンパイラがHousingLocationデータが正しく使われているかどうかを検証できるようになります。

このレッスンで扱った内容の詳細については、次のページをご覧ください: