この講座はYouTubeで動画形式でも用意しています。合わせてご覧ください。

目的

Expressのルーティング機能を理解する。

HTTPのおさらい

https://developer.mozilla.org/ja/docs/Web/HTTP/Overview

HTTPはWebでデータをやり取りする際の標準的な通信プロトコルです。HTTPはリクエストとレスポンスがあり、クライアントからはサーバへリクエストを送り、サーバはクライアントへのレスポンスを返すのが基本的な流れです。

HTTPのフロー

HTTP通信の流れをより詳しく解説していきます。

1.TCPコネクションを開く

TCPとはHTTPよりも低レイヤーの通信プロトコルです。インターネットの通信は、1つの通信プロトコルだけでなく複数のレイヤーに分かれていて、各レイヤーを経由して最終的な通信のやり取りがされる仕組みになっています。
ここではHTTP通信の前段階としてTCPでの通信が行われていると認識してください。

なお先ほどの複数レイヤーによる通信の仕組みは、OSI参照モデルと呼ばれ、重要な概念になるのでぜひ学んで起きましょう。

https://thinkit.co.jp/story/2015/04/28/5799

2.HTTPリクエストを送信する

ここからHTTP通信の話になります。
まず最も基本となるのは、HTTPメソッドとパスを指定してリクエストを送ることです。

GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Language: ja

この例では、HTTPメソッドが GET 、パスが / となっていることがわかります。

3.サーバーから送信されたHTTPレスポンスを読み取る

レスポンスの内容です。レスポンスの場合には下にHTMLやJSON文字列が書かれます。

HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html

<!DOCTYPE html... (ここに、リクエストした 29769 バイトのウェブページがある)

4.次のリクエストのために、コネクションを閉じるか再使用する

というのが、HTTP通信の基本の流れになります。

基本的なルーティング

HTTPを踏まえた上で、expressの基本的なルーティングの書き方を見ていきます。

https://expressjs.com/en/starter/basic-routing.html

前回説明したコードでは、パスが / で、HTTPメソッドとして GET が指定されている事がわかります。この場合はパスが/のみですが、これを増やすことでさまざまなページを作ることができます。

app.get('/', (req, res) => {
  res.send('Hello World!')
})

例えば/userなどのパスを追加してあげると、リクエストに対応するレスポンスを返すことができます。

app.get('/user', (req, res) => {
  res.send('user')
})

HTTPメソッドのPOSTは、登録系のリクエストをする際に用いられる事が多いです。下の例ではパスはGETと同じですが、メソッドを変えてあげることで処理内容を分岐できます。

app.post('/', (req, res) => {
  res.send('Got a POST request')
})

他にもPUT、DELETEなどのメソッドがあり更新や削除で使用されます。

より複雑なルーティング

より高度なルーティングについて見ていきます。解説ページも参考にしてみてください。

https://expressjs.com/en/guide/routing.html

b?は任意という意味でabcd、acdのどちらでもパスが通ります。

app.get("/ab?cd", (req, res) => {
  res.send("ab?cd");
});

b+はbが1個以上ある場合パスを通すため、abcd、abbcd、abbbcdでパスが通ります。

app.get("/ab+cd", (req, res) => {
  res.send("ab+cd");
});

ab*cdでは*の部分は何度も大丈夫で前後にab,cdがあればパスが通ります。例としてはabhogehogecd,ab123cdなどでもパスが通ります。

app.get("/ab*cd", (req, res) => {
  res.send("ab*cd");
});

()が付くとカッコ内のcd?が任意という意味でabcde、abeでパスが通ります。

app.get("/ab(cd)?e", (req, res) => {
  res.send("/ab(cd)?e");
});

/a/は正規表現に合致したら通す方法で、この場合はaが入っていれば良いです。

app.get(/a/, function (req, res) => {
  res.send('/a/';
});

これも正規表現です。この場合は~~flyで終わればパスが通ります。例としてはbutterfly、dragonflyなどはパスが通りますが、butterflyman、dragonflymanでは通りません。

app.get(/.*fly$/, (req, res) => {
  res.send("/.*fly$/");
});

Route parameters

Route parametersとはパスの中に動的にIDなどを含める事ができる書き方です。

以下は、図書管理アプリなどでおいて、ユーザーIDが34のユーザーの図書IDが8989で登録されている本を参照するような場合の例です。

Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }

34、8989の部分に当たる :userId や :bookId などのユーザーや本によって変わる数字を動的に指定したりできる。

app.get('/users/:userId/books/:bookId', (req, res) => {
  res.send(req.params)
})

まとめ

今回はExpressのルーティング機能について見ていきました。次回はExpressのミドルウェアについて解説していきます。

現役エンジニアがNode.jsを解説！〜Expressのルーティング〜

目的