1. HOME
  2. ブログ
  3. IT技術
  4. 【Swift】Moyaを使ってAPI通信をしてみた
【Swift】Moyaを使ってAPI通信をしてみた

【Swift】Moyaを使ってAPI通信をしてみた

はじめに

今回はAPI通信のコードを簡単にカプセル化できるライブラリMoyaを使ってAPI通信をしてみます。

SwiftでAPI通信のライブラリといえばAlamofireをよく聞くと思うんですが、MoyaはそのAlamofireを使用してAPI通信を行うライブラリです。

MoyaがAlamofireを使用しているため、Alamofireのことも知っておかなければダメかと思ったんですが、そのようなことはなく簡単にAPI通信を実装することができました。

本記事では、OpenWeatherMapのAPIで天気情報を取得して画面に表示するところまで実装しています。

本記事がMoyaを使用する方のお役に立てば幸いです。

Moyaについて

MoyaはAlamofireを使用してAPI通信を行うライブラリです。

Alamofireを直接呼び出すことを十分にカプセル化して、API通信の実装をすることができます。

Moyaの特徴

  • Swiftのコンパイラを使用して、正しいAPIエンドポイントアクセスのチェックをする
  • Enum型を使用して、エンドポイントを明確に定義する
  • テストスタブの作成が容易なため、ユニットテストが簡単に書ける

Moyaを使用した時のレイヤーイメージ

図1 Moyaを使用した時のレイヤーイメージ(MoyaのReadme.mdから引用)

APIの準備

Moyaで叩くAPIの準備をしていきます。

今回私が使用するAPIはOpenWeatherMapのAPIです。

さっそくですが、OpenWeatherMapのAPIの準備をしていきます。

まず、OpenWeatherMapのサイトに移動し、アカウントを作成します。

APIを叩く際にはパラメータとしてAPIkeyが必要になりますので、アカウント作成後にアカウントページのAPIkeysのタブを選択しAPIkeyを確認しておいてください。

OpenWeatherMapのAPIには数多くの種類がありますが、今回はCurrentWeatherDataというAPIを使用していきます。

CurrentWeatherDataは緯度・経度で指定された場所の天気を取得できるAPIです。

緯度・経度を指定するといっても、難しいのでジオコーティングAPIという都市名を緯度・経度に変換してくれるAPIを使用します。

実際に使用するAPI
api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}&units=metric&lang=ja

パラメータ要否概要
q必須市名、州コード、国コードをカンマで割ったもの
appid必須取得したAPIkey
modeオプション応答形式。xmlとhtmlに変更可能でデフォルトではjson
unitsオプション温度を華氏、摂氏、ケルビン単位で指定できる
langオプション言語指定

今回は摂氏での温度を取得したいため「units=metric」、

言語は日本語で取得したいため「lang=ja」にパラメータを設定しています。

Moyaの導入

APIの準備ができたので、次は実際にMoyaをプロジェクトに導入していきたいと思います。

Moyaの導入方法はいくつかありますが、今回はCocoaPodsを使用してMoyaを導入していきます。

CocoaPodsでの導入手順

  1. ターミナルを起動して、Moyaを導入するプロジェクトに移動
  2. pod init で Podfile を作成
  3. Podfile に pod 'Moya', '~> 15.0' を追加
  4. pod install でMoyaを導入

$ cd {プロジェクトのディレクトリ} # Moyaを導入するプロジェクトに移動
$ pod init # Podfile を作成
# Podfile に pod 'Moya', '~> 15.0' を追加
$ pod install # Moyaを導入

pod install でインストールが完了し、.xcworkspaceが作成されたらOKです。

レスポンスデータのModelを実装

APIを叩いた際のレスポンスデータはjsonなので、デコードするためのModelを実装していきます。

まずはレスポンスデータがどのようになっているか確認するためPostmanを使用してレスポンスデータを確認します。

実際にPostmanを使用して確認したレスポンスデータは以下の通りです。

レスポンスデータが確認できたので、Modelを実装していきたいと思います。

全てのレスポンスデータを使用するわけではないので、使用するデータの分だけModelを実装していきます。

今回は以下のようにWeatherDataというModelを実装しました。

ポイントとしては、jsonからWeatherDataにデコードする必要があるためDecodableプロトコルに準拠していることです。

Moyaを使用してAPI通信を実装

次にMoyaを使用してAPI通信を実装していきたいと思います。

APIターゲットを設定

まずはenumでMyServiceを作成し、使用するAPIを列挙していきます。

今回は天気情報を取得するAPIを使用するので、enumに case getWeather(city:String) を追加しました。

enumに使用するAPIを列挙することができたら、extensionでMyServiceをTargetTypeプロトコルに準拠させてリクエストの詳細を設定していきます。

実際に実装したものが以下になります。

var baseURL: URL

APIのベースとなるURLを設定します。

var path: String

ベースURLに続くpathをStringで設定します。

var method: Moya.Method

HTTPメソッドを設定します。

今回はGETメソッドでAPIを叩くため.getをreturnしています。

var task: Task

リクエストする時のDataやパラメータを設定します。

今回はURLでパラメータを送信するため、.requestParameters(parameters: ["q": city, "appid": appId, "units": unit, "lang": lang], encoding: URLEncoding.queryString)をreturnしています。

var headers: [String : String]?

HTTPヘッダを設定します。

今回はリクエストの本文の形式がjsonのため、["Content-type": "application/json"]をreturnしています。

Moyaでリクエストする

APIターゲットの設定ができたので、次にリクエストを実行するコードを書いていきます。

今回はリポジトリパターンを意識して、WeatherRepositoryクラスを作成しました。

Moyaを使用してリクエストする方法ですが、まずMoyaProviderを生成します。そして生成したMoyaProviderのrequestメソッドでリクエストを送り、クロージャーで結果を受け取ります。

実際に実装したものが以下になります。

実装について簡単に説明します。

まず定数providerでMoyaProviderを生成して保持します。MoyaProviderは作成したMyServiceを指定して、さらにオプションでNetworkLoggerPlugin()を指定しています。NetworkLoggerPluginはリクエストの内容をログに表示するプラグインです。他にもプラグインが用意されているので、気になる方は調べてみてください。

次にgetWeathreDataメソッドです。このメソッドではproviderのrequestメソッドでリクエストをしています。そして、リクエストの結果をcompletionで返すようにしています。

最後にdecodeResponseToWeatherDataメソッドです。このメソッドはレスポンスを引数として受け取って、WeatherDataに変換できた場合はWeatherDataを返して、変換できなかった場合はMoyaErrorを返します。

UIに取得した天気情報を表示

UIを作成

レスポンスをUIに表示するため、storyboardでUIを作成していきます。

天気情報を表示するためのラベルとイメージビュー、都市を入力するためのテキストフィールドとボタンを配置します。

実際に作成したstoryboardが以下です。

UIを作成

UIViewControllerを実装

storyboardでUIを作成することができたので、次はUIViewControllerを作成していきます。

先ほど作成したstoryboardとWeatherViewControllerを紐づけて、ボタンが押された時にテキストフィールドに入力されている都市名でリクエストを送り、その後レスポンスデータを画面に表示するように実装しました。

実際に実装したものが以下になります。

以上で実装の方は終わりになります。

シミュレータを起動して、テキストフィールドにTokyoと入力後、ボタンを押すと天気情報が表示されることを確認できると思います。

シミュレータ起動後の画面

天気の画像はOpenWeatherのサイトにありますので、同じものを表示させる場合はこちらからダウンロードしてください。

さいごに

今回、簡単ではありますがMoyaを使用して天気APIを叩き、実際に画面に表示するところまで実装してみました。

本記事がMoyaを使用する方のお役に立てば幸いです。

ご覧いただき、ありがとうございました。

書いた人はこんな人

今村(社員)
今村(社員)
未経験から2021年1月に株式会社ライトコード入社し、iOSエンジニアとして働かせていただいています。
まだまだ分からないことだらけで、日々分からないことと戦いながら仕事をしている初心者です。
ブログ記事は暖かい目で見ていただけるとありがたいです。

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア