みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
今回はREST APIとfetchについて学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- REST APIがなにかわかる
- fetch関数を使えるようになる
- データ取得処理をとりあえず動かせる
- 本番で使えるコードがコピペできる
REST APIを叩こう！
APIとは
超～～～ざっくりいうと、誰かが作ったなにかしらの機能のまとまりです。
例えばですが、OpenWeatherMapという天気予報サイトが
公開しているAPIを実行すると、お天気情報が取得出来たり
Yahoo！が公開しているAPIを実行すると
ヤフーニュースの情報が取得出来たりします。
サンプル用API
今回は以下のサンプルサイトのAPIを叩きます
https://jsonplaceholder.typicode.com/users?id=1REST APIとは
一言でいうと、URLを指定して実行するAPIです。
Web APIとほぼ同義なのですが、
インターネット上に公開されているので
HTTP通信を行うことで実行が可能となります。
詳しくは後述しますが、URLに対して以下のリクエストを送信し、
レスポンスをjson形式もしくはXML形式で受け取ります。
■主なリクエストの種類
- GET データ取得
- POST データ送信
- PUT データ送信(更新)
- PATCH データ更新
- DELETE データ削除
ちなみに先ほど記述したサイトの以下のURLをブラウザで開くと、
何やらデータが表示されたと思います。
https://jsonplaceholder.typicode.com/users?id=1この行為がまさに、REST APIを叩く！ということです。
ちなみにこれは”ウェブサイトを開いた”ではなく、
URLを指定することでREST APIを叩き、データをブラウザに表示した!
という認識が正しいです。
このデータをブラウザではなく、
JavaScriptで取得するのが今回の目標です。
fetch関数を使ってREST APIを叩こう
fetch関数とは
fetch関数とは、API等を叩いてデータを取得する非同期関数です。
■構文
fetch(REST APIのURL, {methods: リクエストの種類})非同期処理について復習したいかたはこちらを!!
fetch関数の実際の使い方
fetch関数は非同期通信なので、
使用する上で一定のお作法があります。
■構文
async 非同期処理を含む関数名等 = () => {
// awaitを使ってfetchの完了を待つ
const response = await fetch(REST APIのURL, {methods: リクエストの種類});
}このように記述します。
ここはややこしいですが、こういうものだ、と覚えましょう。
asyncとawaitについて復習したい方はこちらを見よう！
実際に処理を作ろう
ここでは以下の処理を作っていきます
- fetch関数でREST APIを叩く
- fetchが完了するまで処理を待機
- 戻り値をjson形式に変換する
これまでの知識を生かして、
fetch関数を同期処理にして叩き、
取得したデータをjson形式に変換してみましょう！
※今回のサンプルはPaizaIOでは動かないので、
自身の環境で動かすか、CodePenにて動作させてみてください。
// 今回叩くAPI
const MY_API = "https://jsonplaceholder.typicode.com/users?id=1";
// awaitを含む関数なので、asyncを付与
async function getData() {
// MY_APIのGETメソッドを実行
// awaitを使ってfetchの完了を待つ
const response = await fetch(MY_API, { methods: "GET" });
// json型に変換する
const jsonData = await response.json();
console.log(jsonData);
};
getData();【出力結果】
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
}
]このように、以下のサンプルAPIをブラウザ上で開いた時と
同じデータを表示できれば成功です！
https://jsonplaceholder.typicode.com/users?id=1
理屈はすごーーーーくややこしくて、一度で理解はできないと思いますが、
いざ記述してみるとそんなに難しくないことがわかります。
きちんと理解するのは本当に大変なので、なんとなく動かせるかな？
という状態を作ることが大切です。
今回は難しかったですね、本当にお疲れさまっ！！
本番環境で使えるデータ取得処理！！ コピペ用
頑張った皆さんへ、現場で使えるレベルの汎用性が高いコードを
作っておいたのでよければ使ってみてください。
fetchのエラーチェックもはいっているので非常に使いやすいと思います。
const MY_API = "https://jsonplaceholder.typicode.com/users?id=1";
/**
* データ取得用関数
* @param {String} api APIのURL、またはパス
* @return {Array} 取得データ
*/
const getData = async (api) => {
console.log("データ取得開始");
// awaitを使ってfetchの完了を待つ
const response = await fetch(api, { methods: "GET" });
// fetch関数が正常終了したかの確認
if (response.ok) {
console.log("データ取得完了");
// json型に変換
const jsonData = await response.json();
// データをリターン
return jsonData;
} else {
alert("データ取得失敗");
// 場合によっては response.statusText でもよい
throw new Error("エラーステータス: " + response.status);
}
};
// メインの処理
(async () => {
const myData = await getData(MY_API);
// ここから任意の処理をつくってください！
console.log("↓↓↓↓↓↓↓↓myData↓↓↓↓↓↓↓↓");
console.log(myData);
})();
まとめ
- APIとは、他のシステムの情報を取得するWeb上の関数のようなもの
- REST APIとは、URLを指定して実行するAPI
- fetch関数とは、API等を叩いてデータを取得する非同期関数
- fetch(REST APIのURL, {methods: リクエストの種類})
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
