HTTP と REST の読みかた

解説

このレッスンで分かること

• ブラウザとサーバーのやりとりを、リクエストとレスポンスに分けて読めます
• 返ってきた 3 桁の数字から、次にやるべきことが決まります

データを手で書き換え続けるのは無理がある

ここまで、作品の一覧は自分のファイルの中にありました。works という配列を手で書いて、それを描画していたわけです。作品が増えるたびにファイルを開いて書き足し、また公開し直す。これが成り立つのは、自分ひとりの小さなページだけです。

これから扱うのは、自分のファイルには無いデータです。どこか別のコンピューターに置いてあるものを、その場でもらってきて画面に出します。このもらいかたを決めているのが HTTP です。仕組みはとても単純で、こちらから 1 つ送ると、あちらから 1 つ返ってきます。送るほうをリクエスト、返ってくるほうをレスポンスと呼びます。

// ブラウザが送るもの (リクエスト)
// GET /course-api/works.json HTTP/1.1
// Host: yumesaku.tech

// サーバーが返すもの (レスポンス)
// HTTP/1.1 200 OK
// Content-Type: application/json
//
// {"count":5,"works":[ ... ]}

読むのは 2 か所だけです。リクエストの 1 行目にある動詞と場所、レスポンスの 1 行目にある 3 桁の数字。ここさえ読めれば、たいていのやりとりは追えます。Content-Type が application/json なら、本文は JSON の文字列だという意味です。

URL は名詞、メソッドは動詞

リクエストの先頭にある GET や POST をメソッドと呼びます。そのデータに対して何をする気か、を表す動詞です。一方の URL は名詞で、/works は作品たち、/works/3 は 3 番の作品を指します。

動詞を URL に入れません。同じ URL に対してどのメソッドを送るかで区別する。この決めかたを REST と呼びます。

// REST らしくない形。動詞が URL に入り込んでいる
// GET /getAllWorks
// GET /deleteWorkById?id=3

REST は法律ではないので、世の中には動詞入りの URL も存在します。ただ、そろえておくと URL を見ただけで中身が想像できるので、読む側の負担が減ります。このコースで使う練習用の口も、この形にそろえてあります。

3 桁の数字が、次の一手を決める

レスポンスの先頭にある 3 桁の数字をステータスコードと呼びます。全部覚える必要はありません。百の位だけ見れば意味が取れます。

• 200 は、うまくいったという返事です
• 404 は、その場所には何も無いという返事です。URL の綴りか、指定した番号を疑います
• 500 は、サーバーの中で壊れたという返事です。こちらが何度送り直しても同じです

4 で始まるものは、こちらの送りかたを直せば解決します。5 で始まるものは、時間を置くか、そのサーバーの持ち主に伝えるしかありません。うまくいかないと報告するときは、この 3 桁を必ず添えてください。404 と 500 では、次にやるべきことが正反対になります。

URL の後ろに ? を付けると、そこから先は「どう返してほしいか」の細かい注文になります。これをクエリ文字列と呼び、名前=値 の形で書きます。練習用の口には次の 3 つを用意してあります。

// 800 ミリ秒だけ遅れて返る。待ちの表示を確かめられる
// https://yumesaku.tech/course-api/works.json?delay=800

// 500 が返る。失敗の道を通せる
// https://yumesaku.tech/course-api/works.json?status=500

// 一覧が 0 件で返る。空のときの表示を確かめられる
// https://yumesaku.tech/course-api/works.json?empty=1

通信が絡む画面は、うまくいったときだけ試しても完成しません。遅いとき、失敗したとき、中身が空のとき。この 3 つは自分の手で起こせるようにしてあります。

解説

ここまでの話は、ブラウザの開発者ツールのネットワークタブでそのまま観察できます。1 往復が 1 行として並び、行を選べばメソッド、URL、ステータスコード、本文が全部見えます。コードを疑う前に、実際に何を送って何が返ってきたかを見る。この順番を身につけておくと、詰まる時間がかなり短くなります。