JSON を返す(API を建てる)
サーバーにウェブの言葉を話させる
⏱ 想定 ~7 分
01 · 読む
ここまで、あなたのルートは res.send() でプレーンテキストを返してきました。シンプルなメッセージならそれで十分ですが、本物の API はプレーンテキストではなく JSON を返します。
Level 5 で JSON を覚えていますか？それはウェブの世界共通のデータフォーマットです。スマホが天気を取得したり、ウェブサイトがプロフィールを読み込んだり、アプリが新しい投稿を取りに行ったり — そういうデータはすべて JSON で送られます。
Express を使うと、これはとても簡単です。res.send() の代わりに res.json() を使い、JavaScript オブジェクトを渡します。Express が自動で JSON に変換し、正しい header を付けるので、ブラウザやアプリは読み方を理解できます。
ポイントまとめ
- res.send() はプレーンテキストを返します
- res.json() は JSON データを返します — API の標準です
- Express が JavaScript オブジェクトから JSON への変換を自動で処理します
- これがあなたが使ってきたあらゆる API の舞台裏の仕組みです
02 · 実機演習
app.js に新しい JSON ルートを追加しましょう。このルートは現在の時刻と日付を構造化データとして返します。他のルートと一緒に置きます(app.listen() の前)。
app.get('/api/time', (req, res) => {
res.json({
time: new Date().toLocaleTimeString(),
date: new Date().toLocaleDateString()
});
});03 · クイズ
res.send() と res.json() の違いは何ですか？
- res.send() は res.json() より速い
- res.json() は配列にしか使えない
- 違いはない
- res.send() はプレーンテキストを、res.json() は構造化された JSON データを返します
04 · 実機演習
Ctrl+C でサーバーを止めて再起動し、ブラウザで新しいルートにアクセスしましょう。 現在の時刻と日付を含む JSON データが見えるはずです — プレーンテキストではなく、中括弧とキーと値のペアを持つ構造化データです。
node app.js
http://localhost:3000/api/time
05 · 空欄補充
Express で JSON データを返すには、res.send() の代わりに res._____() を使います。
06 · 読む
サーバーが JSON を話す ようになりました — ウェブ上のあらゆる API と同じ言語です。
ページを何度かリロードしてみてください。リクエストごとに時刻が違うのに気づきましたか？それは、誰かが URL にアクセスするたびに、サーバーがコードを再実行しているからです。これは動的です — その瞬間に合わせてレスポンスを生成しています。
これが静的なウェブサイト(毎回同じ内容)と API(データ、時刻、ユーザー、その他なんでもで内容が変わる)の違いです。
Level 5 で学んだ API と JSON を覚えていますか？あなたは今、その会話の 反対側 にいます。API を使うだけでなく、API を作っているのです。
07 · クイズ
なぜ /api/time エンドポイントはリロードするたびに違う時刻を返すのですか？
- サーバーがリクエストのたびに new Date() を再実行するので、常に現在時刻を返す
- ブラウザがページの違うバージョンをキャッシュしている
- Express がレスポンスごとにランダムなタイムスタンプを生成している
- JSON 形式が自動でタイムスタンプを更新する
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。