Fetch API（フェッチ エーピーアイ）

Fetch API（フェッチ エーピーアイ）とは、ブラウザの中からサーバーへ通信を行うための、標準的な命令の仕組みのことです。ページを読み込み直さずにデータを取りに行く、いまの定番のやり方です。

現実世界に例えると、Fetch APIは店に電話して品物を取り寄せる手続きのようなものです。何をどこへ頼むかを伝え、届いたら受け取る。この一連の段取りが、決まった形で用意されています。

Fetch API図解

古い方式との違い

何をしてくれるのか

役割ははっきりしています。指定した場所へ要求を送り、返ってきた結果を受け取るところまでを担います。取ってきたデータを画面へどう反映するかは、こちらで書く部分です。通信そのものを引き受ける道具だと考えてください。

Promiseという受け取り方

特徴的なのがここです。結果はすぐには返らず、「あとで届く約束」という形で返されます。届いたときの処理を続けて書いていけるため、通信を何段階も重ねる場合でも、上から下へ読める形に整います。

失敗の判定に癖がある

最初につまずく点です。ページが見つからない、サーバーが落ちているといった応答は、通信としては成功したとみなされます。回線が切れたときだけが失敗の扱いです。応答の状態を自分で確かめる処理を、必ず書き添えてください。

受け取ったものを読み解く

もうひと手間が要ります。返ってきた応答から中身を取り出すには、JSONとして読むのか文字列として読むのかを指定します。ここを忘れると、中身ではなく応答そのものを扱おうとして、うまくいきません。

別のサイトへは制限がある

安全のための決まりがあります。自分のサイト以外へ通信する場合、相手側が許可を出していなければ、ブラウザが結果を渡してくれません。CORSと呼ばれる仕組みで、開発中によく行き当たる壁です。許可はサーバー側で設定します。

途中で止められる

実用的な機能もあります。入力のたびに検索を投げるような場面では、古い問い合わせを取り消す手立てが用意されています。使わないと、遅れて届いた古い結果が新しい表示を上書きしてしまいます。

ブラウザ以外でも使える

近年の変化です。もとはブラウザ向けの仕組みでしたが、サーバー側で動くNode.jsなどでも同じ書き方が使えるようになりました。画面側と裏側で同じ書き方が通用するため、覚える手間がひとつ減っています。

あわせて知っておきたい用語

• 非同期通信：
  画面を止めずに裏側で行う通信のやり方です。
• Ajax：
  非同期通信でページを部分的に更新する手法です。
• JSON：
  データをやり取りするための、軽量な記述形式です。
• API：
  ソフトウェア同士が機能をやり取りするための窓口です。