LESSON 03 / 03 約5分
サーバーに情報を取りに行く
まずは仕組みをつかもう。細かい書き方は覚えなくて大丈夫。
01 これは何？
fetch＊1はサーバーと通信する機能です。API＊2からJSON＊3で投稿を受け取り、画面に並べることができます。通信には時間がかかるので、非同期処理＊4として、返事を待つ間も画面の操作を続けられます。
＊1 fetch：通信を始める機能。
＊2 API：プログラムが情報をやり取りする窓口。
＊3 JSON：名前と値で情報を表す形式。
＊4 非同期処理：時間のかかる仕事の完了を待ちながら、ほかの処理を進める方法。
02 なぜ必要？
ページ全体を開き直さず、最新の投稿だけを読み込むときに使います。通信は必ず成功するとは限らないので、読み込み中や失敗の案内も必要です。受け取った情報が予想どおりの形かを確認してから表示しましょう。
03 最小限のコード・図
// /api/posts は別途サーバー側に作る窓口です。
async function loadPosts() {
try {
const response = await fetch('/api/posts');
if (!response.ok) throw new Error('取得失敗');
const posts = await response.json();
if (!Array.isArray(posts)) throw new Error('形式が違います');
for (const post of posts) console.log(post.title);
} catch {
console.log('読み込めませんでした。もう一度お試しください。');
}
}
loadPosts();04 ここだけ理解する
- awaitは結果を受け取ってから次へ進むための指定。
- HTTPエラーはresponse.okで確かめる。
- 繰り返しを使うと、複数の投稿を順番に扱える。
05 覚えなくていいこと
通信機能を全部覚える必要はありません。どこから何を受け取りたいかを伝えましょう。
ASK AI
06 AIに聞いてみよう
質問文をコピーして、ChatGPTやCodexなどに貼り付けてみましょう。
投稿一覧を返すAPIからfetchでJSONを受け取り、画面に表示する例を作ってください。APIはまだ未実装と明記し、通信失敗、予想外のデータ、空の一覧を扱ってください。表示にtextContentを使い、非同期処理を説明してください。
07 AIの回答を見るポイント
- 失敗時に利用者へ案内が出るか。
- APIの住所と受け取るデータの形が、サーバー側と一致するか。
08 だいたい分かったら、次へ
「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。