Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

今回作成するアプリ

1.gif

はじめに

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

環境

・ /macOS Big Sur 11.3
・ SwiftUI : 2.0
・ Xcode : 12.4

サンプルJSON

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

jsonplaceholder

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

jsonplaceholderを使用していく

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

まず初めに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
                }
            }
        }
    }

以上で取得できます!
1.gif

まとめ

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

yuujioka
とりあえずコツコツ作っていきます😁
engineerlife
技術力をベースに人生を謳歌する人たちのコミュニティです。
https://community.camp-fire.jp/projects/view/280040
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away