【SwiftUI】JSONで取得したものをList表示する方法【tutorial】

今回作成するアプリ

はじめに

今回は初めてSwiftUIでAPIを叩いてJSONを取得し、List表示する方法をご紹介したいと思います。
よってこの記事は、SwiftUIは触ったことがあるが、APIやJSONは初めてと言う方向けの記事です。
尚、APIやJSONはなんぞやと言うことについては、様々な良記事が沢山ありますのでそちらを参照下さい。

環境

・ /macOS Big Sur 11.3
・ Xcode : 12.4

サンプルJSON

今回は初めてJSONを取得し、Listで表示させる為、オーソドックスな天気APIとかではなく、様々なJSONのサンプルが用意されているjsonplaceholderを使用してきます。
またなぜこの様なサンプルを使用するかと言うと、筆者がお天気APIなどのtutorialではなかなか使用の仕方が理解できず、こちらのサンプルを使用することにより、理解を深めることができたのでその様な方もいるのでは無いかと思い、今回はこちらのサンプルを使用した使用方法を紹介していきたいと思い書いている所存です。

jsonplaceholder

まず初めにこちらのリンクをクリックするとこの様な画面が表示されます。
今回はこちらのサイトでは様々なJSONサンプルが用意されているのでこちらの/postsを使用してList表示していきます。

jsonplaceholderを使用していく

jsonplaceholderは/posts、/comments、/albums、/photos、/todos、/usersに分かれており、それぞれに適したデータが用意されており、postならテキスト、その他には画像や人の写真などが用意されている。今回はテキストを抽出したいのでpostを使用していく。使用方法は下記の動画の通り進んでいき、postのURLを取得していきます。

まず初めにpostsではuserid,id,title,bodyがあり、今回id,title,bodyを使用していく為以下の構造体を作ります。

struct Post: Codable, Identifiable {
    var id = UUID()
    var title: String
    var body: String
}

次にApiのClassを作ります。

class Api {
    func getPosts(completion: @escaping ([Post]) -> ()) {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else { return }
        URLSession.shared.dataTask(with: url) { (data, _, _) in
            let posts = try! JSONDecoder().decode([Post].self, from: data!)
            DispatchQueue.main.async {
                completion(posts)
            }
        }
        .resume()
    }
}

最後にViewを以下のように作ります。

struct JsonTestView: View {
    @State var posts: [Post] = []
    var body: some View {
        List(posts) { post in
            VStack(alignment: .leading) {
                Text(post.title)
                    .font(.system(.title, design: .rounded)).bold()
                Text(post.body)
            }
        }.onAppear{
                Api().getPosts { (posts) in
                    self.posts = posts
                }
            }
        }
    }

以上で取得できます！

まとめ

とりあえず入門的な記事になれば良いかなと思ったので小難しいところは端折りましたが、是非ここからimageをurlで取得して表示するにはどうしたらいいのだろうか？とか自分でDB立てて、API叩くにはどうしたらいいのだろう？などに繋げていくきっかけになって頂けたらと思います！