fetchとは

XMLHttpRequest と同様に HTTPリクエストを行う API のことです。

つまりは、指定した URL を用いてHTTPリクエスト＝「この URL にある情報をちょうだい～」と WEBサーバーに送信をします。

それに対して、WEBサーバーは「あいよ～」と URL先にある「情報」を返してくれます。

その「情報」というものが例えば蔵書の一覧であったり商品の一覧であったりと何かの記録や一覧などの場合が多いです。

つまりはローカルの環境で作るのがめんどくさいじゃないですか？なんかの一覧を作るとか、、、

その面倒をかけずに「これを使ったらいいよ」みたいな形で優しい人たちがネット上に置いてくれているのが WEB API です。

なので、fetch はJavaScriptを使ってネット上にある WEB API たる情報や一覧を持ってきて利用するための技術の一つです。

さきほども上げた XMLHttpRequest よりも fetch のほうがシンプルで使い勝手が良いため使用される率が高いです。

書き方

const fetchFunction = () => {
  fetch("URLはココ", {
    method: "GET",
  }).then(res => res.json());
  .then(data => {
    console.log(data);
  })
};

書き方はいたってシンプルです。

今回は fetchFunction とテキトーな関数で囲っていますが、重要なのはその中身です。

fetch でまずは WEB API の URL を記載します。

それを HTTPリクエストするため、GET方式で取得します。

そして、取得した URLの情報を JSON形式で表示すると使い勝手が良いことが多いので、res.json() としています。

また、ここでは処理の順番を正確に行う必要があるので、.then を使用したメソッドチェーンで非同期処理をしています。

res.json() で JSON形式に変換された res を今度は data で取得すると見やすい形で API を出力することが出来るでしょう。

関連記事:

WebページでJavaScriptが動かない場合の解決法 オブジェクトとオブジェクトをマージしてコピーする方法 配列から要素をコピーする方法（slice、splice） 変数内の要素が配列かどうか確認する方法