API連携

概要

詳細解説

実践手順

1. 1
   ダミーAPIからデータを取得してみる 3分

   JSONPlaceholderという学習用の無料APIを叩いて、ダミーデータを受信します。

   • fetch 関数にURLを渡す
   • await を使ってレスポンスを待つ
   • res.json() でJSで扱える形式に変換する

   
                             <script>
   const url = 'https://jsonplaceholder.typicode.com/users/1';
   
   async function getData() {
     const res = await fetch(url);
     const data = await res.json();
     console.log('取得したデータ:', data);
   }
   
   // 関数を実行
   getData();
   </script>
                           

2. 2
   取得したデータをHTMLに表示する 5分

   裏側で取得したデータを、実際に画面（DOM）に反映させます。

   • 表示用のdiv要素を用意し、idを振る
   • 取得した data のプロパティ（data.name など）を textContent に代入する

   
                             <div id="profile">
     読み込み中...
   </div>
   
   <script>
   const url = 'https://jsonplaceholder.typicode.com/users/1';
   
   async function renderData() {
     const res = await fetch(url);
     const data = await res.json();
     
     const profileDiv = document.getElementById('profile');
     // バッククォートで文字列に埋め込む
     profileDiv.textContent = `名前: ${data.name} (メール: ${data.email})`;
   }
   renderData();
   </script>
                           

3. 3
   意図的にエラーを起こしてハンドリングする 3分

   URLをわざと間違えて、エラー時の処理（try-catch）が動くことを確認します。

   • 存在しないURLにする
   • try { ... } catch (e) { ... } で囲む
   • if (!res.ok) で例外を投げる（throw）

   
                             <div id="profile">読み込み中...</div>
   
   <script>
   // わざと存在しないURL
   const url = 'https://jsonplaceholder.typicode.com/users/99999999';
   
   async function renderData() {
     const profileDiv = document.getElementById('profile');
     try {
       const res = await fetch(url);
       if (!res.ok) {
         throw new Error(`HTTPエラー: ${res.status}`);
       }
       const data = await res.json();
       profileDiv.textContent = `名前: ${data.name}`;
     } catch (error) {
       profileDiv.textContent = 'データの取得に失敗しました。';
       profileDiv.style.color = 'red';
       console.error(error);
     }
   }
   renderData();
   </script>
                           

よくある質問

無料で叩ける練習用のAPIってなんかある？

JSONPlaceholder（ダミーデータ）、GitHub API（公開情報）、PokéAPI（ポケモン図鑑！）あたりが有名です。最初はPokéAPIを叩いて画面にピカチュウを召喚するのがテンション上がっておすすめ。（知らんけど）

API叩いたら赤い文字でCORSエラーって出て死んだ…

フロントエンド開発者の登竜門ですね！ブラウザが「見ず知らずの他人のサーバーから勝手にデータ引っこ抜くな」って激怒してる状態です。大抵はAPI側で設定してもらうか、自分で中継サーバー立てないと解決しないっていう絶望ルールになってます。

fetchじゃなくてAxiosってやつの方がいいって先輩が言ってた！

実務だとAxiosの方がJSONに自動で直してくれたりして便利なんですが、最近の標準 fetch 君もだいぶ優秀になってきて、「余計なライブラリ入れたくないから全部 fetch でいこうぜ！」ってプロジェクトも増えてます。まずは基本のfetchでOK！

APIのパスワード（Secret Key）ってそのままJSに書いていいの？

絶対に！！！！ダメです！！！フロントのJSはブラウザの検証ツールから世界中の誰でも丸見えなので、一瞬でキー引っこ抜かれて数百万のクラウド破産するリスクがあります。キーが必要なAPIは絶対自作のバックエンド経由で叩いてください！