✨

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

に公開
JSON
app
ios開発
decodable
tech

はじめに

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で動的に画像を生成・表示する基本的な流れです。ぜひプロジェクトに取り入れてみてください！

Discussion