💡 記事の下にエディタを用意しています。壊してもOK！
更新日: 2025年3月1日
JavaScriptのfetchでデータを取得する方法
📌
結論
fetch() でAPIからデータを取得できます
📝 実際のコードはこちら
const res = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await res.json();
console.log(data);fetchの流れ
| ステップ | やること |
|---|---|
| 1. リクエスト | fetch(URL) |
| 2. レスポンス確認 | res.ok をチェック |
| 3. JSONパース | res.json() |
| 4. データ使用 | 取得したデータを表示 |
まとめ
・fetch() はHTTPリクエストを送る
・await res.json() でJSONをパース
・非同期関数（async）の中で使う
演習で試してみよう
fetchでAPIからデータを取得してみましょう。🧪 ここで試せます ─ 壊しても大丈夫！
下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。
■ 演習
https://jsonplaceholder.typicode.com/posts/1 からデータをfetchし、titleをconsole.logで出力してください。
詰まったらヒント
const res = await fetch(url); const data = await res.json();