モックデータを利用する

Published by @SoNiceInfo at 6/24/2020

概要

json形式のモックデータを利用するとAPIの開発をしなくても作成したUIを確かめることができます。
せっかくなのでMVVMパターンに則って作り、APIを実装したらシームレスに移行できるようにします。
SwiftUI TutorialのBuilding Lists and Navigationを参考にします。
「APIのデータを利用する」ではAPIを使って表示する方法を紹介しています。

大まかな流れ

テレビ番組の一覧を表示するアプリを目指して作ります。 作成は以下の流れで作成します。
フォルダの構成は右のようになります。

• Modelを作成する(ProgramModel.swift)
• モックデータを作成する(ProgramData.json)
• モックデータをロードするヘルパーを作る(DataLoad.swift)
• ViewModelとViewを作成する(ProgramView.swift)

Modelを作成する(ProgramModel.swift)

Modelではデータの形を定義します。
struct型は入れ子にすることができます。
TV番組はid, name, summary, image(mediumサイズ)を持ちます。

//
//  ProgramModel.swift
//

import SwiftUI

struct Img: Hashable, Codable {
    var large: String?
    var medium: String?
    var small: String?
}

struct Program: Hashable, Codable {
    let id: Int
    let name: String
    let summary: String
    let image: Img
}

モックデータを作成する(ProgramData.json)

モックデータを用意します。
モックデータはjson形式で用意します。

[
    {"id": 0, "name": "あるぱか散歩", "summary": "あるぱかさんといっしょに街歩きをしましょう", "image": { "medium": "animal_arupaka"}},
    {"id": 1, "name": "ブタトーク", "summary": "MCぶったさんの独壇場",  "image": { "medium": "animal_buta"}},
    {"id": 2, "name": "とっとこはむはみー", "summary": "はむはみーが大冒険",  "image": { "medium": "animal_hamster"}},
    {"id": 3, "name": "ひよっと", "summary": "ひよっとちゃんがいろんなことに挑戦するよ",  "image": { "medium": "animal_hiyoko"}},
    {"id": 4, "name": "わんさんといっしょ", "summary": "わんさんといっしょに歌ったり踊ったりしよう",  "image": { "medium": "animal_inu"}}
]

TargetsのBuild PhasesのCopy Bundle Resourcesに作成したjsonファイルを登録します。

モックデータをロードするヘルパーを作る(DataLoad.swift)

モックデータをモデルの形にロードするヘルパーを作ります。
SwiftUI TutorialのBuilding Lists and Navigationを参考にします。
今回のProgram Model以外にも汎用的に使えると思います。

//
//  DataLoad.swift
//

import SwiftUI

func dataLoad<T: Decodable>(_ filename: String) -> T {
    let data: Data

    guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
        else {
            fatalError("Couldn't find \(filename) in main bundle.")
    }
    
    do {
        data = try Data(contentsOf: file)
    } catch {
        fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
    }
    
    do {
        let decoder = JSONDecoder()
        return try decoder.decode(T.self, from: data)
    } catch {
        fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
    }
}

ViewModelとViewを作成する(ProgramView.swift)

ProgramViewModelでヘルパーを使ってデータを呼び出します。
ObservableObjectの使い方についてはProperty Wrappersを理解するでも紹介しています。
最後にContentView.SwiftでProgramView.swiftを呼び出します。

//
//  ProgramView.swift
//

import SwiftUI

class ProgramViewModel: ObservableObject {
    @Published var data: [Program] = []

    init() {
        self.data = dataLoad("programData.json")
    }
}

struct ProgramView: View {
    @ObservedObject var programVM = ProgramViewModel()

    var body: some View {
        ScrollView(.vertical, showsIndicators: false) {
            VStack(spacing: 10) {
                // 順番にProgramを処理
                ForEach(programVM.data, id: \.id) { (program) in
                    ZStack(alignment: .bottom) {
                        Image(program.image.medium)
                            .resizable()
                            .scaledToFill()
                            .frame(width: UIScreen.main.bounds.width, height: 300)
                            .background(LinearGradient(gradient: Gradient(colors: [.yellow, .red, .purple]), startPoint: .bottomLeading, endPoint: .topTrailing))
                            .clipShape(RoundedRectangle(cornerRadius: 20))
                        VStack {
                            Text(program.name)
                                .font(.largeTitle)
                                .foregroundColor(.white)
                            Text(program.summary)
                                .foregroundColor(.white)
                        }
                    }
                }
            }
        }
    }
}

struct ProgramView_Previews: PreviewProvider {
    static var previews: some View {
        ProgramView()
    }
}

//
//  ContentView.swift
//

import SwiftUI

struct ContentView: View {

    var body: some View {
        ProgramView()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

参考

素材