複数ページのルーティングとフォームのPOST送信 (1/4)
作成:2013-04-27 08:37
更新:2013-04-27 08:37
更新:2013-04-27 08:37
■複数ページのルーティングの考え方
Node.jsで簡単なページが表示できるようになった、では次に何を覚えればいいんだろう？とここで考えてしまう人はけっこう多いようです。１ページだけの表示ができても、実用にはなりません。通常のWebではもっとさまざまなリクエストに応える処理をしなければいけません。
まずは、「複数のページ」から考えていきましょう。普通、Webというのは複数のページがあるものです。Node.jsで複数ページを表示させるにはどうすればいいんでしょう？
ここでは、前回使ったEJSというテンプレートエンジンを使って考えることにしましょう（使わなくても考え方は同じですが……）。基本的な考え方はとてもシンプルです。複数のページを利用する場合、まずそれらのページをあらかじめ読み込んでおき、リクエストに応じてどのページをレンダリングして表示するかを決めればいいわけです。
では、「どのページを表示するか」をクライアントからどうやって伝えるのか？ 普通のWebサイトでは、URLによってそれは伝えられます。http://○○/indexならindexのページを、http://○○/heloならheloページを……というような具合ですね。
通常のWebサーバーでは、自動的に対応するHTMLページを読み込み送り返しますが、Node.jsの場合、プログラムの中でそうした処理を考えてやらなければいけません。送られてきたURLからドメインより後の部分を取り出し、その値によって表示するページを変える、といった処理を考えればよいわけですね。
では、実際にやってみましょう。まず、下準備として、表示に使用するEJSのテンプレートファイルを用意しておきましょう。ここではページ全体のレイアウトとなる「template.ejs」（前回まで、hello.ejsというファイル名で使ってたやつです）と、実際に表示されるコンテンツとなる「content1.ejs」「content2.ejs」の計３つのテンプレートファイルを用意することにしました。
これらを使って、２つのページを表示するスクリプトを作成します。
まずは、「複数のページ」から考えていきましょう。普通、Webというのは複数のページがあるものです。Node.jsで複数ページを表示させるにはどうすればいいんでしょう？
ここでは、前回使ったEJSというテンプレートエンジンを使って考えることにしましょう（使わなくても考え方は同じですが……）。基本的な考え方はとてもシンプルです。複数のページを利用する場合、まずそれらのページをあらかじめ読み込んでおき、リクエストに応じてどのページをレンダリングして表示するかを決めればいいわけです。
では、「どのページを表示するか」をクライアントからどうやって伝えるのか？ 普通のWebサイトでは、URLによってそれは伝えられます。http://○○/indexならindexのページを、http://○○/heloならheloページを……というような具合ですね。
通常のWebサーバーでは、自動的に対応するHTMLページを読み込み送り返しますが、Node.jsの場合、プログラムの中でそうした処理を考えてやらなければいけません。送られてきたURLからドメインより後の部分を取り出し、その値によって表示するページを変える、といった処理を考えればよいわけですね。
では、実際にやってみましょう。まず、下準備として、表示に使用するEJSのテンプレートファイルを用意しておきましょう。ここではページ全体のレイアウトとなる「template.ejs」（前回まで、hello.ejsというファイル名で使ってたやつです）と、実際に表示されるコンテンツとなる「content1.ejs」「content2.ejs」の計３つのテンプレートファイルを用意することにしました。
これらを使って、２つのページを表示するスクリプトを作成します。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※template.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title><%=title %></title>
<style>
body { font-size:12pt; color:#006666; }
h1 { font-size:18pt; background-color:#AAFFFF; }
pre { background-color:#EEEEEE; }
</style>
</head>
<body>
<header>
<h1 id="h1"><%=title %></h1>
</header>
<div role="main">
<p><%-content %></p>
</div>
</body>
</html>
※content1.ejs
<h2>※サンプルで作ったコンテンツです。</h2>
<p><%= message %></p>
<hr>
<p><a href="/other">other pageへ</a></p>
※content2.ejs
<p>※別のページのコンテンツです。</p>
<p><%= message %></p>
<p> </p>
<p><a href="/">戻る</a></p>
※関連コンテンツ