ページはテキスト
CoddyのNode.jsジャーニー「Expressの基礎」セクションの一部。レッスン 8/23。
ブラウザーはHTML文字列をページとして描画します。タグはテキストに構造を与えます。<h1>は見出し、<ul>はリスト、<li>は項目を表します。各部分は閉じタグで終わります。
const cities = ['Oslo', 'Lima'];
const rows = cities.map(city => `<li>${city}</li>`);
const page = `<h1>Places</h1><ul>${rows.join('')}</ul>`;テンプレート文字列では、バッククォートを使って値を挿入します。mapは項目文字列の配列を作成し、join('')はカンマを付けずにそれらを結合します。この練習では、サーバーがHTMLをJSON内で返すため、タグを正確に確認できます。用意された関数は見出しと項目の配列を受け取ります。次は挿入するテキストのエスケープです。
チャレンジ
簡単exercise.jsを編集してください。サーバーは、titleとitems配列を含むオブジェクトを渡します。htmlフィールドを1つ返してください。見出しの後にリストを続け、各文字列を1項目ずつ表示します。元の項目の順序を保ち、項目間にカンマを入れないでください。
{"html":"<h1>Recipe Box</h1><ul><li>Soup</li><li>Salad</li></ul>"}「実行」を試してください。指定されたGETの例では、上記のレスポンスが生成されます。見出しとリストを変えるには、GET /result?title=Lunch&item=Rice&item=Beansを送信してください。クエリの値が、関数に渡される入力になります。
サーバーは、titleとitems配列を使って演習関数を呼び出します。クエリでitem=を繰り返すと、複数の項目を指定できます。GETメソッドを選択したままにして、リクエスト欄にはパスだけを入力してください。
自分で試してみよう
export function exercise({ title, items }) {
return { html: title };
}
Expressの基礎のすべてのレッスン
自分で練習してみよう: Expressプレイグラウンド