SwiftUIでシンプルな非同期GET REST API呼び出しを実装する方法【初心者向け】

このチュートリアルでは、初心者向けにSwiftUIを使ったAPI呼び出しの基本を、人気の「Internet Chuck Norris DataBase（ICNDB）」を例に解説します。SwiftとSwiftUIを使えば、ジョーク（冗談）を素早く簡単に画面に表示できます。

クロスプラットフォームフレームワークであるSwiftUIの大きな魅力は、まったく同じコードをiOS、iPadOS、macOS、watchOS、App Clips、tvOSでそのまま利用できる点です。従来の手法では実現が非常に困難だったことです。

さらに、Swift 5.5で導入されたasync-awaitを使用します。これはiOS 15.0以降を搭載したiPhoneなど、比較的新しいOSで動作します。async-awaitのおかげで、ボタンをタップした際にUIスレッドをフリーズさせることなく、非同期でネットワーク通信を行う処理が格段にシンプルになりました。

本記事では、まず必要なコードの変更点を紹介し、続くセクションでコードの簡単な解説を行います。初心者の方でも何が起きているのか理解できるよう構成しています。

SwiftとSwiftUIでAPI呼び出しを行う方法

まず、XcodeをインストールするためのMacが必要です。Xcodeをインストールしたら起動して新規プロジェクトを作成し、iOS、macOS、tvOS、watchOSのいずれかのプラットフォーム向けに「App」を選択してください。

ContentViewの実装

既存のContentView SwiftUIファイルを更新し、Buttonを追加しましょう。そして@State変数を使うことで、ICNDB APIからジョークが返ってきたタイミングで表示テキストを自動的に更新できます。

import Foundation
import SwiftUI
struct ContentView: View {
    @State private var joke: String = ""
    var body: some View {
        Text(joke)
        Button {
            Task {
                let (data, _) = try await URLSession.shared.data(from: URL(string:"https://api.chucknorris.io/jokes/random")!)
                let decodedResponse = try? JSONDecoder().decode(Joke.self, from: data)
                joke = decodedResponse?.value ?? ""
            }
        } label: {
            Text("Fetch Joke")
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
struct Joke: Codable {
    let value: String
}

ジョークを取得してみよう！

ビルド／実行ボタンを押すと、先ほど選択したプラットフォーム向けにアプリがビルドされます。

コード解説

ランダムジョークのURLにブラウザでアクセスすると、データがJSON形式で返されていることがわかります。そのレスポンスをコピーしてJSON Linterなどで構造を確認すれば、Jokeオブジェクトのどのプロパティが必要かを判断できます。

それをもとに、上記のようなコードを書きます。Codableプロトコル（いわゆるインターフェースに相当）を使うことで、JSONデータオブジェクトから実際のSwiftクラスや構造体へ変換でき、保存したいデータ（今回の場合はvalue）に対応するプロパティを定義します。

JSONDecoderは、Codableオブジェクトを使ってJSON文字列をパースするのに役立ちます。この仕組みはプラットフォームに関係なく動作します。なぜなら、アプリ起動時に読み込まれるビューは、どのプラットフォームでも同じ名前のContentViewだからです。

App Clipsについて

App Clipsは、「App Clip Code」を使ってネイティブアプリの機能を、App Storeからアプリ本体をダウンロードすることなく利用できる、Appleの最新の仕組みです。

App ClipsはiOSアプリとほぼ同じように動作します。唯一の違いは、新しいApp Clipプロジェクトをゼロから作成する必要がないという点です。既存のiOSアプリをXcodeで開いた状態で、File → New → Target → iOS → App Clip を選択するだけで、既存アプリにターゲットとして追加できます。

iPhone/iPadのウィジェットについてはどうでしょうか？ ウィジェットはアニメーションに対応していないため、ボタンをタップすると対応するアプリが開くだけで、外部API経由でテキストを独立して更新することはできません。

まとめ

この記事では、SwiftUIからRESTful GET APIを呼び出す、最もシンプルな方法を学びました。

質問がある場合は、お気軽にお問い合わせください。筆者自身も別の記事を参考にこの方法を見つけ、さらに簡略化できないかと考えました。より詳細な情報や、このコードを発展させる方法については、以下の記事をご覧ください。

参考記事：「async/await in SwiftUI」— Audrey Tam（raywenderlich.com）
SwiftUIアプリを新しいSwift Concurrencyへ移行し、その華やかな表面の下で何が起こっているのかを詳しく解説した内容です。