HTMLページ

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

Recipe Boxでは、HTML文字列とエスケープの練習をページにできるようになりました。レシピごとにリンクを1つ作成します。リンクのhrefで移動先を指定し、タグの間のテキストが読者に表示されるラベルになります。

const link = `<a href="/books/${book.id}">${escapeHtml(book.title)}</a>`;

ヘルパーはhtml.jsで提供されています。独自のリンクタグはマークアップとして保ちながら、各タイトルに適用します。mapでリンクを作成し、joinで1つの文字列に結合します。配列をそのままテンプレート文字列の中に入れると、リンクの間にカンマが入ります。res.sendは完成したページをブラウザーに送信します。

<ul>はリストを囲み、<li>は各項目を囲みます。エスケープされていないマークアップはページを変更したり、訪問者のブラウザーでスクリプトを実行したりする可能性があります。自分のデータファイルにあるタイトルであっても、必ずエスケープしてください。

チャレンジ

簡単

このステップでは、Status Codes（server.jsを含む）のプロジェクトファイルではなく、コースで用意されたRecipe Boxプロジェクトを開きます。これまでの作業は、それぞれのレッスンに残っています。server.jsを編集する前に、用意されたファイルを読んでください。このコピーにはRecipe Boxのルート、ステータスコード、共有のhtml.jsヘルパーが含まれています。

ホームページを実際のページにします。すべてのレシピを一覧にし、それぞれのレシピ専用ページへのリンクを付けます。

server.jsで、用意されたescapeHtmlヘルパーを./html.jsからインポートします。
/ルートを変更し、ウェルカムテキストではなくHTMLページを送信するようにします。ページには、各レシピのページへ移動し、そのタイトルを表示するリンクを1つずつ配置します。レシピ2の場合は、次のようになります。<a href="/recipes/2">Pancakes</a>。リストにするとよいでしょう。それぞれのリンクを<li>項目に入れ、それらすべてを1つの<ul>の中に配置します。見出しから始めてもかまいません。<h1>Recipe Box</h1>。
各タイトルをページに入れる前に、escapeHtmlに渡します。するとFish & ChipsはFish & Chipsとしてページに渡され、ブラウザーにはFish & Chipsと表示されます。
mapを使って項目を作り、空文字列で結合します。配列をそのままテンプレート文字列に入れると、項目の間にコンマが表示されます。

試してみましょう：「実行」を押して、/にリクエストを送ります。レスポンスは4つのリンクがあるページとして表示されます。Fish & Chipsをクリックすると、/recipes/4のページが開き、Fish & Chipsと表示されます。

自分で試してみよう

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('/api/recipes', (req, res) => {
    res.json(recipes);
});

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

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

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