INTERMEDIATE
1.5 hours•4 chapters
Data Management & APIs
Learn how to effectively handle data and integrate external APIs in your vibe coding projects.
Progress: 0%In progress
What You'll Learn
JSON・配列・オブジェクトでデータをモデリングする
async/await で REST API からデータを取得する
ローディング、エラー、認証、レート制限に対処する
データを保存・キャッシュ・変換・表示する
Description
あなたが作るどんなアプリも、実はデータを運ぶパイプラインです。データは API から JSON として届き、取得され、検証され、整形され、最終的に画面に表示されます。このチュートリアルでは、JSONPlaceholder や Open-Meteo のような無料の公開 API を相手に、実際に動くコードを使ってそのパイプライン全体を端から端まで歩きます — おもちゃのような例は使いません。
まず、すべてのデータが取る 3 つの形(オブジェクト、配列、JSON)から始め、次にローディング状態とエラー状態を処理しながら async/await でライブデータを取得します。そこから、本番環境の API が投げてくる課題 — サーバー側に安全に保管する API キー、ページネーション、429 のレート制限、キャッシュ — に取り組み、最後に結果を保存・フィルタリング・ソート・レンダリングします。
各章では、解説付きの実例と短いプロンプト作成の演習を組み合わせています。学び終える頃には、欲しいものを正確に記述して信頼できるコードを受け取れるようになり、それを検証するための理解も身につきます。
What's Inside
About 1.5 hours • 4 chapters
- 1.データの形と JSON — オブジェクト、配列、parse/stringify
- 2.API からの取得 — async/await、ローディングとエラーの状態
- 3.認証・制限・キャッシュ — キー、ページネーション、429、TTL キャッシュ
- 4.保存と表示 — localStorage とデータベースの使い分け、フィルタ/ソート/レンダリング
"By the end you'll wire up a real API and show live data on screen. Let's start in Chapter 1!"