Swiftでアプリ。- WebAPIを使おう!

インターネット上でいろんなデータが公開されていてそのデータを利用することができます(WebAPI)。データはJson形式のデータを利用することが多いと思われるので、Json形式のデータをリストに表示させるようなものを作っていきたいと思います。

SwiftPlaygraoundsではWebAPIを取得する時にエラーが出てしまうようなので今回はXcodeを使って実行しながら確認します。

データが公開されてるサイトからJson形式のデータを取得してswiftで扱える形にする関数です。データは"qiita"のAPIを利用しています。

取得するデータのの構造体を作ります。JSONデータをswiftで扱えるようにするためのプロトコル"Decodable"をつけて宣言します。

struct QiitaArticle: Decodable, Identifiable {
    let id: String
    let title: String
}

JSONデータを変換して代入する変数を構造体の形に当てはめるように変数宣言します。

 @State private var articles = [QiitaArticle]()

これでswiftでデータを扱う下準備が揃います。

JSONデータをswiftで扱えるデータに変換していく関数を作ります。

   func getData() async {
        do {
            guard let url = URL(string: "https://qiita.com/api/v2/items?page=1") else { return }
            let (data, _) = try await URLSession.shared.data(from: url)
            articles = try JSONDecoder().decode([QiitaArticle].self, from: data)
        } catch {
            print("Error")
            articles = []
        }
    }

https://qiita.com/api/v2/items?page=1

このアドレスでQiitaのタイムラインのデータを取得できます。

データ自体は文字の羅列なのでちょっとわかりにくいです。ブラウザの機能で整理したものが

となり随分わかりやすくなりました。今回は"id"と"title"を指定して取り出して、変数articlesに入れていきます。

articles = try JSONDecoder().decode([QiitaArticle].self, from: data)

後は変数articlesのデータを取り出してリストに表示します。

   List(articles) { article in
            Text(article.title)
   }
    .task {
          await getData()
     }

データ表示のタイミングですが、

.task {wait getData()}

としてやることで起動時に関数を読み込むようにでき、そこでJSONデータの取得することになります。

後は取得したarticlesのデータをarticleとして一つずつ取り出して

List(articles) { article in
Text(article.title)
}

Text()を使って"article.title"を表示させます。

全体のコードは

import SwiftUI

struct QiitaArticle: Decodable, Identifiable {
    let id: String
    let title: String
}

struct ContentView: View {

    @State private var articles = [QiitaArticle]()

    var body: some View {
        NavigationStack {
            List(articles) { article in
                Text(article.title)
            }
            .navigationTitle("Qiita")
            .task {
                await getData()
            }
        }
    }
    
    func getData() async {
        do {
            guard let url = URL(string: "https://qiita.com/api/v2/items?page=1") else { return }
            let (data, _) = try await URLSession.shared.data(from: url)
            articles = try JSONDecoder().decode([QiitaArticle].self, from: data)
        } catch {
            print("Error")
            articles = []
        }
    }
}

参考サイト

【SwiftUI 3.0】.task プロパティの使い方 – .NET ゆる〜りワーク