追跡番号を入れたあと
通販で買った荷物の追跡番号を、スマホのアプリに入れます。1秒もしないうちに「配達中」と表示されます。
その1秒の間に、アプリはインターネットの向こうのサーバーに質問を送っています。サーバーの中で、その質問を受け取って答えを作る部分がバックエンドです。今日は、その中で何が起きているかを見ます。
このレッスンのゴール
メモ
バックエンドがリクエストを受けてから返すまでに何をするかを説明できます。
キーワード
| ことば | いみ | れい |
|---|---|---|
| バックエンド | サーバーでリクエストに答えるプログラムです。 | |
| リクエスト | アプリからサーバーへの質問です。 | GET /parcels/1001 |
| ルート | メソッドとパスの組み合わせです。 | POST /inquiries |
| ハンドラー | 一つのルートを処理する関数です。 | getParcel |
| レスポンス | サーバーからの答えです。 | |
| ステータスコード | 結果を表す3けたの数です。 | 200, 404 |
学生が入力するセルは、このプレビューでは空白です。
ルートがハンドラーを選ぶ
リクエストが届くと、バックエンドはまずメソッドとパスを見ます。この組み合わせがルートです。
GET /parcels/1001 なら、荷物を探すハンドラーに渡します。どのルートにも当てはまらなければ、404を返します。
下のコードはネットワークを使いません。リクエストを表す値で、handle を直接呼んでいます。
実行: 三つのリクエスト
// 大阪の物流会社の、荷物を追跡する小さなバックエンドです。
const parcels = {
'1001': { status: '配達中', area: '大阪市北区' },
'1002': { status: '配達済み', area: '堺市' },
};
function getParcel(id) {
if (!(id in parcels)) {
return { status: 404, body: { error: 'その荷物は見つかりません' } };
}
return { status: 200, body: parcels[id] };
}
// ルート: メソッドとパスを見て、どのハンドラーに渡すかを決めます。
function handle(request) {
if (request.method === 'GET' && request.path.startsWith('/parcels/')) {
return getParcel(request.path.slice('/parcels/'.length));
}
return { status: 404, body: { error: 'そのパスはありません' } };
}
console.log(handle({ method: 'GET', path: '/parcels/1001' }));
console.log(handle({ method: 'GET', path: '/parcels/9999' }));
console.log(handle({ method: 'GET', path: '/drivers' }));
ハンドラーは確かめて使って返す
ハンドラーのすることは、だいたい三つの段階に分かれます。
まず、届いた値を確かめます。内容が足りなければ400を返します。次に、データを読んだり保存したりします。最後に、ステータスコードと本文をつけてレスポンスを返します。
新しく作ったときは201、読めたときは200を返すのが決まりです。
よくある誤解
注意
「アプリの画面で確かめているから、バックエンドでは確かめなくてよい」と考える人は多いです。リクエストは、画面を通らずに直接送ることもできます。だから、届いた値はバックエンドで必ず確かめます。足りなければ400を返します。
練習: ルートを足す
// コールセンターの問い合わせを受け付けるバックエンドです。
const inquiries = [];
function createInquiry(body) {
if (!body.message) {
return { status: 400, body: { error: '問い合わせの内容がありません' } };
}
inquiries.push(body.message);
return { status: 201, body: { id: inquiries.length } };
}
function handle(request) {
if (request.method === 'POST' && request.path === '/inquiries') {
return createInquiry(request.body);
}
// ここにルートを足してください: GET /inquiries は200と一覧を返します。
return { status: 404, body: { error: 'そのパスはありません' } };
}
console.log(handle({ method: 'POST', path: '/inquiries', body: { message: '荷物が届きません' } }));
console.log(handle({ method: 'POST', path: '/inquiries', body: {} }));
console.log(handle({ method: 'GET', path: '/inquiries' }));