<style>
h1.title {
font-size:7rem;
color: orange;
margin-bottom:7rem;
}
div.list li{
margin-bottom:2rem;
}
</style>
## 「小学生でもわかるWebAPI」を勉強してみた
[この動画教材](https://youtu.be/6_zIN-bByB4)でWebAPIを学んだことのメモです。
<iframe width="560" height="315" src="https://www.youtube.com/embed/6_zIN-bByB4?clip=UgkxiaZGURa4uSV87wetH5ZUEIZmND_S5OTe&clipt=EKoFGJiKAQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
---
## WebApiとは
- Webサービスを利用できるようにする仕組み
<iframe width="560" height="315" src="https://www.youtube.com/embed/6_zIN-bByB4?clip=UgkxJZGbZJcp1MeDXlM8iCmqxTydeEql6-bt&clipt=ELmyEBiY9xI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
[つづきをYoutubeでみる](https://youtu.be/6_zIN-bByB4?t=310)
---
## インターネット通信のながれ（HTTP）
- HTTPの仕組み
- 何に対して = URL
- 何をするか = HTTPメソッド（GET,POST,etc)
- 例：GET https://api.twitter.com/user_timeline
---
## WebAPIの例
- GET https://api.twitter.com/follwers/list
- パラメーター screen_name:yamaura
https://api.twitter.com/followers/list?screen_name=yamaura
- レスポンス {"users":[
{user-object},
{user-object}
]}
---
<h1 class="title">WebAPIをつくるには</h1>
<div class="list">
<ol>
<li>画面遷移図をつくる</li>
<li>APIの機能を列挙する</li>
<li>URLとHTTPメソッドを設定する</li>
<li>リクエストパラメーターを設計する</li>
<li>レスポンスを設計する</li>
</ol>
</div>
---
<h1 class="title">１．画面遷移図をつくる</h1>
1. 画面遷移図をつくる
---
<h1 class="title">２．APIの機能を列挙する</h1>
2. APIの機能を列挙する
---
#
<h1 class="title">３．URLとHTTPメソッドを設定する</h1>
3. URLとHTTPメソッドを設定する
---
<h1 class="title">4. リクエストパラメーターを設計する</h1>
4. リクエストパラメーターを設計する
---
<h1 class="title">5. レスポンスを設計する</h1>
5. レスポンスを設計する
---
{"metaMigratedAt":"2023-06-18T00:30:38.075Z","metaMigratedFrom":"YAML","title":"「小学生でもわかるWebAPI」を勉強してみた","breaks":true,"contributors":"[{\"id\":\"2f922fe8-833b-4ea8-a311-39664f725374\",\"add\":2278,\"del\":279}]"}