並べ替え

CoddyのNode.jsジャーニー「REST API」セクションの一部。レッスン 16/25。

クライアントが新しいタスクを先に表示したい場合や、リストを A から Z の順に並べたい場合があります。一般的な規約では ?sort=field を使い、逆順にするには前に - を付けます。

// GET /api/books?sort=-year
const field = sort.startsWith('-') ? sort.slice(1) : sort;   // 'year'
const direction = sort.startsWith('-') ? -1 : 1;
list = list.toSorted((a, b) => (a[field] - b[field]) * direction);

まず field が許可したフィールドのいずれかであることを確認し、それ以外の場合は 400 を返してください。書籍に存在しないフィールドでは、役に立つ順序で並べられないためです。toSorted は並べ替えたコピーを返します。sort は配列自体を並べ替えます。フィルターによってコピーが作られていない場合、その配列はストアそのものなので、以降のリクエストでは新しい順序が使われます。この例では減算を使っていますが、これは数値にしか使えません。2 つの文字列を比較するには、a.localeCompare(b) を使います。減算と同様に、負の数、0、または正の数を返します。ISO 形式の日付は、時間順に並べ替えられる文字列です。

チャレンジ

簡単

「Sorting Text」で作成したタイトルのみの並べ替えを、以下のフィールドと方向の処理に置き換えてください。

クライアントは、新しいタスクを先に表示したり、リストをAからZの順に表示したりしたいと考えています。?sort=を使って、リストを並べ替えられるようにしましょう。

routes/tasks.jsのリストルートで、req.queryからsortを読み取ります。指定がなければ、リストは保存された順序のままです。
?sort=titleはタイトルをAからZの順に並べ替えます。?sort=createdAtは作成時刻の古い順に並べ替えます。先頭に-を付けると順序が逆になります。つまり、?sort=-titleはZからAの順、?sort=-createdAtは新しい順になります。
どちらのフィールドもテキストです。createdAtは"2026-03-03T10:30:00.000Z"のようなISO形式の日付で、テキストとして正しく並べ替えられます。そのため、減算ではなくlocaleCompareで比較してください。

?sort=colorのように、ほかのフィールドを指定するとステータス400になります。

{ "error": { "code": "invalid_query", "message": "sort must be title or createdAt, with - in front to reverse" } }

フィルターを適用した後に並べ替えます。そのため、?done=false&sort=-titleは未完了のタスクをZからAの順に返します。
toSortedを使ってコピーを並べ替えます。sortは保存された配列自体の順序を変えるため、その後のリクエストはすべて変更後の順序を参照してしまいます。

試してみましょう：GET /api/tasks?sort=titleはタスク2、3、1（"Book...", "Send...", "Write..."）を返します。GET /api/tasks?sort=-createdAtは3、2、1を返します。その後、通常のGET /api/tasksは再び1、2、3を返します。GET /api/tasks?sort=colorは、コードinvalid_queryとともに400を返します。

自分で試してみよう

import { Router } from 'express';
import { z } from 'zod';
import { sendError, sendInvalid } from '../errors.js';
import { nextId, tasks } from '../store.js';

const router = Router();

// PUT で送信されるタスク全体。.strict() は定義されていないフィールドを受け付けません。
const Task = z
    .object({
        title: z.string().trim().min(1).max(100),
        done: z.boolean(),
    })
    .strict();
const NewTask = Task.partial({ done: true });
const TaskChanges = Task.partial();

// 大文字と小文字を区別せず、別のタスクがすでにこのタイトルを持っている場合は True。
const titleTaken = (title, exceptId) =>
    tasks.some((t) => t.id !== exceptId && t.title.toLowerCase() === title.toLowerCase());

router.get('/', (req, res) => {
    const { done, q } = req.query;
    let list = tasks;
    if (done !== undefined) {
        if (done !== 'true' && done !== 'false') {
            return sendError(res, 400, 'invalid_query', 'done must be true or false');
        }
        list = list.filter((t) => t.done === (done === 'true'));
    }
    if (q !== undefined) {
        const words = String(q).toLowerCase();
        list = list.filter((t) => t.title.toLowerCase().includes(words));
    }
    if (req.query.sort === 'title') {
        list = list.toSorted((a, b) => a.title.localeCompare(b.title));
    }
    res.json(list);
});

router.get('/:id', (req, res) => {
    const task = tasks.find((t) => t.id === Number(req.params.id));
    if (!task) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    res.json(task);
});

router.post('/', (req, res) => {
    const result = NewTask.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    const { title, done = false } = result.data;
    if (titleTaken(title)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    const task = { id: nextId(), title, done, createdAt: new Date().toISOString() };
    tasks.push(task);
    res.status(201).location(`/api/tasks/${task.id}`).json(task);
});

router.patch('/:id', (req, res) => {
    const task = tasks.find((t) => t.id === Number(req.params.id));
    if (!task) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    const result = TaskChanges.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    if (result.data.title !== undefined && titleTaken(result.data.title, task.id)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    Object.assign(task, result.data);
    res.json(task);
});

router.put('/:id', (req, res) => {
    const index = tasks.findIndex((t) => t.id === Number(req.params.id));
    if (index === -1) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    const result = Task.safeParse(req.body);
    if (!result.success) {
        return sendInvalid(res, result.error);
    }
    const { id, createdAt } = tasks[index];
    if (titleTaken(result.data.title, id)) {
        return sendError(res, 409, 'conflict', 'A task with this title already exists');
    }
    tasks[index] = { id, ...result.data, createdAt };
    res.json(tasks[index]);
});

router.delete('/:id', (req, res) => {
    const index = tasks.findIndex((t) => t.id === Number(req.params.id));
    if (index === -1) {
        return sendError(res, 404, 'not_found', 'Task not found');
    }
    tasks.splice(index, 1);
    res.status(204).end();
});

export default router;