まだAPIで消耗しているの？[Part1]

#**はじめに**

今回は意外と理解に時間がかかったAPIについて書きました。

####<font color="Red">**これで、初心者でも、APIを使用できるようになるでしょう（僕も初心者です笑）**</font>

iOS開発者以外の人にも、APIについて何か共有できることがあればと思い、APIの実装と理解について記事を分けたので是非参考になればと思います。

もし、不十分な所があれば、ご指摘頂けますと幸いです👍



●この記事で得れるモノ：<font color="Red">**APIを叩く方法とAPI周りの知識**</font>

●対象者：APIがなにかわからない人,自由にAPIをたたけない人

●３回の記事に別れた構成になっています

**[開発言語問わない]**
**Part1**:APIとは、用語、APIを使用する時の開発順序
**Part2**:APIを叩くときの便利ツールの紹介

**[Swift限定]**
**Part3**:実際にプロジェクトを作ってAPIを叩いて見る</font>
→YouTubeのAPIとHotpepperのAPIを使用します

<font color="Red">**※実装に関してはSwiftのみとなっております！**


#完成形イメージ
まずはこの記事で作れる完成形を見せましょう

①YouTubeのApiを使用して、検索して、動画のサムネイルを取得しています
![youtube.mp4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/0cea75c7-399c-38b7-d33c-46c99e8e9112.gif)

②ホットペッパーのAPIを使用して、西宮周辺のお店を検索して取得しています

![ezgif.com-video-to-gif (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/89566ad0-5c9f-a140-7fc6-13ddb98f4123.gif)




##API概要

まず、APIとはなんなのかということに関して以下の記事をスラット目を通してください！
http://bit.ly/2GumfdV
http://bit.ly/2UqamJM

要はAPIとは、<font color="Red">**他のサービスの機能・情報を利用することができる**</font>ということです


## APIの仕組み・流れ
APIを使うにあたってどういった流れで使用しているのかということを図を使用して確認していきます👍
①〜⑤の番号順に確かめて行きたいと思います。
<font color="Red">**この仕組み・流れを掴むことがなによりも重要です！！**</font>


![無題のプレゼンテーション (3).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/8d1fbd54-0644-7f56-266c-7017f7382fd7.jpeg)


###①クライアント(自分・使用側)
●用語説明：APIの情報を受取る、利用したい側を指します。

●役割：サーバー（APIを提供してくれるサービス）に対して、リクエストし、レスポンスを受け取る（リクエストとレスポンスは後々説明します）


###②リクエスト(指定のURLを送信する)
●用語説明：情報を要求すること。

●役割：サーバー（APIを提供してくれるサービス）に対して、指定のURLを送ることで情報を要求する。
ここで重要なのが、URLの文字列にクエリーの内容（検索したい内容）を含ませることで、具体的に欲しい情報をサーバーに要求することができる。

例）今、YouTubeのAPIを使用したい状況だとします。
まず、指定のURLを公式のドキュメントからみつけて来ます(このリンクにとんでもエラーが出ます。理由もあとで記載します)
→ ①https://www.googleapis.com/youtube/v3/search
このURLに、検索したい内容の文字列を含ませることで具体的な情報を要求することができます
→ ②https://www.googleapis.com/youtube/v3/search?key=apiKey&<font color="Red">**q=検索したい内容**</font>

**※リクエストの注意点**
●リクエストする際にはapiKeyが必要である(他人にもれないように大切に保管しましょう)
→殆どのサービスで、APIを使用する際には、認証情報として、URLにapiKeyを含ませてリクエストしなといけないことが多々あります。
このapiKeyは、各種サービスのDeveloperアカウントに登録した際に発行されるので、事前に登録を済ませて置く必要があります。
→ ②https://www.googleapis.com/youtube/v3/search?<font color="Red">**key=apiKey**</font>&q=検索したい内容

**URLにクエリーの内容を含めることで自由に欲しい情報を要求することができます！！！！**


他にも様々設定ができるので、よかったら見てみてください！
[YouTube Data API (v3)](http://bit.ly/2PgCxtR)

###③サーバー（サービス）
●用語説明：APIを提供するサービスを指します。

●役割：リクエストを受け取って、レスポンスをクライアントに返します。


###④レスポンス（データが返って来る）
●用語説明：そのままの意味ですね笑



●役割：サーバー（APIを提供してくれるサービス）からリクエストに基づいたデータをクライアントに返している。
ここで重要なことは、クライアントとサーバー間でデータをやり取りする際に、データは指定のフォーマットになっているということです。このフォーマットのデータは自分の使用している言語（僕ならばSwift）では直接データとして使用できないので、Swiftで使えるようにデータを分析しないといけません。だから、、、
→<font color="Red">**レスポンスのデータのフォーマットを理解することが超重要です**</font>

フォーマットの種類
<font color="Red">**JSON**</font> ←たいていレスポンスのデータのフォーマットとして使用されています！
XML

JSONが主流なので、JSONを完璧に理解できるようになりましょう！！
→[JSONってなんですかって人](https://www.sejuku.net/blog/34776)


下の形がJSONです！！　なんだかデータっぽく、ここまで来たらなにかできそうですね

```json:json
{
 "id": 1,
 "name": "hoge",
 "hobby": [
 {
 "name": "baseball",
 "startyear": 1980
 },
 {
 "name": "movie",
 "startyear": 2018
 }
 ]
}
```

### APIの仕組み・流れ　まとめ
このAPIの仕組み・流れをみて難しいと思う人もいるかもしれません。
しかし、まとめてみると意外と簡単に見えてきます

<font color="Red">**[流れ]**</font>
**①クライアントを用意する**
**②使用したいサービスのDeveloperアカウントでapiKeyを発行する**
**③使用したいサービスでURLを調べ、URLにクエリーの内容とapiKeyを含ませてサーバーに送信する**
**④データのフォーマットがなにか確かめる**
**⑤クライアントでデータを受け取って自分の言語で処理できるようにデータを分析する**

この流れが世に言う、<font color="Red">**APIを叩く**</font>ってやつです。


こんな感じにPart1は、APIの仕組みと流れを見て来ました。
これが理解できているかいないかでは大きな差が出てくると思うので、繰り返し見てみてください！！！

## 予告:Part2

次回は、APIを叩くときに使う、超便利ツールを紹介していきたいと思います！

●指定のURLをリクエストをすると、本当にレスポンスが返ってくるのか検証できるサービス

●指定のJSONを送ることで、自分の言語（僕ならSwift）のデータに分析できるcodeを自動生成するサービス


以上２つを紹介します！
使用することで開発スピードが一気に加速するでしょう。

乞うご期待、、、👍