Node.js入門⑤ルーティングの基本をマスターしよう

前回の記事でEJSを使ってindex.ejsをレンダリングして表示するということを勉強しました

しかし、前回のやり方だとサーバーにアクセスしたら必ずindex.htmlしか表示されません

CSSファイルすら別にすることができませんでした

そこで、今回はクライアントがアクセスしたアドレスによって表示する内容を変えるということ

「ルーティング」について勉強していきましょう

ルーティングとは

我々がWebページにアクセスする際は、その知りたい情報によってアドレスをかえてサーバーにアクセスしています

といったように、クライアントがアクセスしたアドレスによってサーバーはどういったコンテンツを表示するか定義しなければなりません

URLによって表示を分岐する必要があります

URLモジュールを利用する

URLを利用するには、サーバーがURLを見てアドレスを知る必要があります

URLには決まった書き方がありますが、それを解析して処理を分岐する必要があります

それを簡単に処理するためのモジュールがURLモジュールです

次はURLモジュールの説明をするためのサンプルコードです

これを実行すると、URLモジュールによってURLからどのような情報が解析されているかがよくわかると思います

2行目で適当なlocalhost:3000のURLを書いていますが

実行した結果がこちらです

ホスト名：localhost:3000

pathname：/user

query：?country=Japan&city=Tokyo

queryのcontry：Japan

queryのcity：Tokyo

と、URLがバラバラにされて解析されているのがわかると思います

これをパース処理とよびます

URLモジュールをつかうことで簡単にURLをパース処理して、パス名を抽出したり

query（クエリ）を抽出したりすることができるのです

ちなみに、queryはご存じですか？

requestのURLによって処理を分岐させる

あとは、URLによって処理を分岐するだけです

以下が今回のサンプルコードです

上からindex.ejs、app.js、sample.ejs、stylesheet.cssです

サーバーにアクセスしたときの処理をする関数がapp.jsの

function getFromClient(req,res){…}

の部分です

このreqの部分にURLが入っています

それをURLモジュールでパース処理しています

var url_parts = url.parse(req.url);　その内容をオブジェクト型の配列で変数に格納しています

パス名によって分岐をしますので

switch(url_parts.pathname){分岐処理}

switchを使い条件分岐をしています

パス名によってレンダリングするファイルを変更しています

CSSファイルもこうすることで読み込まれて反映されています

実は、この処理をしないとCSSファイルをリンクさせてもアクセスしないので、CSSは反映されません

今回はURLモジュールを使ったルーティングの基礎を勉強しました

YouTubeもよろしくお願いします！

※url.parseは非推奨とでると思います。現在はWHATWG URL APIを使用するようにと表示されていましたのでそのコードもサンプルとしてここに置いておきます。よかったら参考にしてください。

動画も作りましたのでこちらもぜひ参考になさってください。