1. 導入：なぜFetch APIが重要なのか
Webサイトを作っていると「外部のデータを表示したい」「サーバーから最新の情報を取得したい」という場面によく出会います。例えば、天気予報を表示したり、最新のニュースを読み込んだりする場合です。かつては複雑な記述が必要でしたが、現代のJavaScriptではFetch APIを使うことで、非常にシンプルにデータを取得できるようになりました。これが使えるようになると、あなたのWebサイトは「ただ表示されるだけのページ」から「リアルタイムに変化するアプリ」へと進化します。
2. 基礎知識：Fetch APIとは何か
Fetch APIは、ネットワーク越しにリソース（データ）を取得するための仕組みです。
ポイントは「非同期処理」という考え方です。ブラウザがサーバーに「データをください」とお願いしてから、データが届くまでの間、Webサイトが止まってしまうと困りますよね？Fetch APIは「データが届いたらこの処理を実行してね」と予約しておく仕組み（Promiseといいます）を使っているため、画面を止めずに裏側で通信を行うことができます。
3. 実装/解決策：基本的な流れ
Fetch APIを使う手順は、たったの3ステップです。
1. fetch関数でURLを指定する。
2. 届いたデータをプログラムで扱いやすいJSON形式に変換する。
3. 変換したデータを使って、画面を表示するなどの処理を行う。
このとき、.then()というメソッドを使って、順番に処理をつなげていくのがお決まりの書き方です。
4. サンプルプログラム
以下のコードは、jsonplaceholderというテスト用サイトから、ダミーのユーザー情報を取得してコンソールに表示する例です。そのままコピーしてブラウザのコンソールに貼り付けて試してみてください。
// 1. 指定したURLからデータを取得する
fetch('https://jsonplaceholder.typicode.com/users/1')
.then((response) => {
// 2. サーバーからの返答（レスポンス）をJSON形式に変換する
return response.json();
})
.then((data) => {
// 3. 変換されたデータを使って処理を行う
console.log('取得したユーザー名:', data.name);
console.log('取得したメールアドレス:', data.email);
})
.catch((error) => {
// 通信エラーなどが発生した場合の処理
console.error('エラーが発生しました:', error);
});
5. 応用・注意点：現場で役立つポイント
最後に、実務で使う際の注意点を2つ紹介します。
・エラーハンドリングを忘れない
fetchは「サーバーと通信できたか」だけで成功とみなします。「404 Not Found」のようなエラーであっても、コード上では成功（then）に流れてしまうことがあります。実務ではresponse.okというプロパティを使って、通信が正常だったかを確認する癖をつけましょう。
・async/awaitを使ってみる
最近の現場では、.then()をつなげる書き方よりも、async/awaitという書き方が主流です。これを使うと、まるで普通のプログラムを書くように、上から下へ順番に処理を記述できるため、可読性がぐっと上がります。ぜひ「JavaScript async await」でも検索して、ステップアップしてみてくださいね。