APIを呼び出して返されたJSONデータをオブジェクトに変換し、状態管理を用いてUIに反映させる方法を解説します。ここでは、トップページでバナースライダーを表示するケースを例に説明します。

レスポンス構造の定義

まず、APIが返すJSON形式をもとに、対応するモデルクラスを定義します。想定されるレスポンスは以下の通りです：

{
  "code": 0,
  "data": [
    {
      "id": 1,
      "url": "https://example.com/banner1.jpg",
      "title": "プロモーションバナー"
    }
  ]
}

この構造に基づき、次のように2つのクラスを作成します：

export class BannerResponse {
  code: number = 0;
  data: BannerItem[] = [];
}

@ObservedV2
export class BannerItem {
  id: number = 0;
  url: string = "";
  title: string = "";
}

スライダーUIの実装

次に、Swiperコンポーネントを使用してバナー画像を表示するUIを構築します。ForEachを使ってリストを動的にレンダリングします。

@Entry
@ComponentV2
struct HomeView {
  private controller: SwiperController = new SwiperController();
  @Local bannerItems: BannerItem[] = [];

  build() {
    Swiper(this.controller) {
      ForEach(this.bannerItems, (banner: BannerItem) => {
        Image(banner.url)
          .width('100%')
          .height(200)
          .objectFit(ImageFit.Cover)
      }, item => item.id.toString())
    }
    .interval(3000)
    .indicator(false)
    .loop(true)
    .padding(16)
  }
}

API呼び出しとデータバインディング

最後に、コンポーネントが表示されるタイミングでAPIを呼び出し、取得したデータを状態に反映させます。aboutToAppearライフサイクルフック内で非同期処理を実行します。

async aboutToAppear() {
  await this.fetchBanners();
}

private async fetchBanners() {
  const client = http.createHttp();
  try {
    const response = await client.request(
      'https://api.example.com/v1/banners',
      {
        method: http.RequestMethod.GET,
        header: { 'Accept': 'application/json' }
      }
    );

    if (response.resultCode !== 200 || !response.result) return;

    const payload: BannerResponse = JSON.parse(response.result.toString());
    if (payload.code === 0) {
      this.bannerItems = [...payload.data];
    }
  } catch (error) {
    console.error('Failed to load banners:', error);
  } finally {
    client.destroy();
  }
}

この実装では、@ObservedV2デコレータと@Localステートを利用して、データ更新時に自動的にUIが再描画されるようになっています。APIレスポンスのパース後、新しい配列を直接代入することで、リアクティブな更新を実現しています。