Menu
CoddyTech

JSONレスポンス

CoddyのNode.jsジャーニー「Expressの基礎」セクションの一部。レッスン 6/20。

サーバーを呼び出すプログラムには、文章ではなく、読み取れるデータが必要です。

app.get('/api/weather', (req, res) => {
    res.json({ city: 'Oslo', temp: 4, rain: true });
});

JSONは、オブジェクトや配列のためのテキスト形式です。res.json(value)は値をJSONに変換し、Content-Typeヘッダーをapplication/jsonに設定します。ヘッダーとは、レスポンスとともに送信される名前付きの行で、このヘッダーは後に続く本文の種類を示します。クライアントは{"city":"Oslo","temp":4,"rain":true}を受け取り、tempを数値として読み取ります。

文字列を指定してres.sendを使うとtext/htmlが送信されるため、プログラムはその内容を解析しなければなりません。プログラム用のルートは通常/apiで始まり、ページとデータが同じパスを共有しないようにします。

challenge icon

チャレンジ

簡単
  • GET /api/recipesは、recipes配列をJSONとして返します。
  • GET /api/recipes/:idは、1つのレシピをJSONとして返します。不明なidの場合は404を返します。

GET /api/recipes、GET /api/recipes/2、GET /api/recipes/99を送信してください。ヘッダーをGET /recipesと比較してください。

自分で試してみよう

import express from 'express';
import { recipes } from './data.js';

const app = express();

app.get('/', (req, res) => {
    res.send('Welcome to Recipe Box');
});

// type('text') はプレーンテキストを送信するため、各タイトルがそれぞれ別の行に表示されます。
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

app.listen(3000, () => {
    console.log('Recipe Box is running on port 3000');
});
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

Expressの基礎のすべてのレッスン