JSONデータからSwiftUIのImageを動的に生成する方法

---

はじめに

SwiftUIでリスト表示やAPI連携を行う際、JSONに含まれる文字列をもとに画像を動的に読み込むことがあります。この記事では、JSONのimageNameフィールドをSwiftのモデルで受け取り、Imageビューとして表示する方法を解説します。

---

前提

1. XcodeのプロジェクトにAssetsカタログがあり、画像アセットが登録されている
2. JSONデータに以下のような形式でimageNameキーが含まれている

[
  { "id": 1, "imageName": "dog" },
  { "id": 2, "imageName": "cat" }
]

---

モデル定義：DecodableとIdentifiable

struct Item: Decodable, Identifiable {
  let id: Int
  let imageName: String   // JSONの'imageName'を受け取る

  // 計算プロパティでSwiftUIのImageを返す
  var image: Image {
    Image(imageName)
  }
}

• let imageName: String でJSONの文字列を格納
• var image: Image でImage(imageName)を返す計算プロパティ

---

JSONの読み込み

JSONDecoderを用いて配列としてデコードします：

let jsonData: Data = /* APIやファイルから取得したData */
let items = try JSONDecoder().decode([Item].self, from: jsonData)

• itemsは[Item]型の配列
• 各要素のimageNameにはJSONの値がセットされる

---

SwiftUIでの表示例

配列のインデックスやForEachを使って、任意の要素を表示します：

List(items) { item in
  HStack {
    item.image           // JSONに応じたImageビュー
      .resizable()
      .scaledToFit()
      .frame(width: 50, height: 50)
    Text("ID: \(item.id)")
  }
}

• items[0].image → Image("dog")
• items[1].image → Image("cat")

---

ポイントまとめ

• JSONはキー:値でデータを表現するフォーマットで、言語固有のlet/varは不要
• SwiftのモデルでDecodableを採用し、let imageName: Stringで受け取る
• 計算プロパティvar image: Image { Image(imageName) }でビューを生成
• 表示時に配列のインデックスやForEachで要素を選択し、それぞれに応じた画像を表示できる

---

以上が、JSONのimageNameを使ってSwiftUIで動的に画像を生成・表示する基本的な流れです。ぜひプロジェクトに取り入れてみてください！