基礎から学ぶNode.js

第3回 Express.jsを使ったWebアプリケーションを構築

この記事を読むのに必要な時間:およそ 3 分

アプリケーションの実装

本連載では,最終的に簡単なミニブログを作ってみたいと思います。データベースの利用は,次回からとし,今回はソースにそのまま定義したデータを返し,登録処理で受け取った情報をコンソールに出力してみます。

まずroutes/main.jsを次のように書き換えます。リクエスト「GET /」では,itemsの中身をEJSを使ってレンダ(表示)しています。

var items = [
    { "text": "1st Post." }
  , { "text": "2nd Post." }
];

exports.index = function(req, res){
  res.render('index', { title: 'Entry List', items: items })
};

具体的にはresを通して,レスポンスを処理します。renderメソッドの第1引数にはviews内のindex.ejsを利用するように指定しています(拡張子.ejsは省略⁠⁠。さらに第2引数に渡したJSONのKey-ValueがEJSファイル内でそのままキーがグローバル変数名となり,Valueが参照できます。

では,対象テンプレートのviews/index.ejs を書き換えます。

<h1><%= title %></h1>
<p><a href="/form">New Entry</a></p>
<ul>
<% items.forEach(function(item){ %>
  <li><%= item.text %></li>
<% }) %>
</ul>

「<%= title %>」は,title変数の中身をそのまま出力することを示します。さらに「<%~%>」を使って,そのままJavaScriptで処理を書くことができます。itemsの中身をforEachでループして,リストに展開しています。

登録フォームの実装

先のページ内で「New Entry」リンクで呼び出す「GET /form」で表示するフォームページを作成します。views/form.ejsを次の内容で作成します。

<form method="POST" action="/create">
 <fieldset>
  <p><label>text</label><input type="text" name="text"></p>
 </fieldset>
 <input type="submit" value="Post">
</form>

フォームページの表示処理と,⁠POST /create」で受け取った値をコンソールに書き出す処理を,routes/main.jsに追記します。

exports.form = function(req, res){
  res.render('form', { title: 'New Entry' })
};

exports.create = function(req, res){
  console.log(req.body.text);
  res.redirect('/');
};

リクエストの情報にはreqを通してアクセスします。req.bodyには,jsonやx-www-form-urlencodedタイプのデータをパースしたものが入っているため,パラメータtextは,req.body.textで参照できます。また,クエリは,⁠/path?text=example」がreq.query.textとして値「example」を参照できます。投稿内容を受け取った後は,インデックスページにリダイレクトしています。

以上,フォームページ表示とcreateリクエストのバインドをapp.jsに定義します。

app.get('/form', routes.form);
app.post('/create', routes.create);

ここまでできたら,nodeを起動して再びブラウザから確認してみましょう。

図1 インデックスページ

図1 インデックスページ

インデックスページのNew Entryリンクをクリックします。

図2 フォーム画面

図2 フォーム画面

フォーム画面が表示されます。textフィールドに入力した値は,Postするとコンソールに表示されます。画面はインデックスページに戻ります(本来はここで投稿した内容が反映されます⁠⁠。

最後に

今回は,Expressを使ったWebアプリケーションの作成について,セットアップから基本動作まで説明しました。次回は,データベースにMongoDBを使い,具体的なモデルの実装を進めていきます。

著者プロフィール

高橋俊光(たかはしとしみつ)

ティルフィン合同会社 代表。

メーカー企業でパッケージソフト開発などに携わった後,ティルフィン合同会社を設立しフリーエンジニアとして,RIAやスマートモバイルアプリとサーバーサイドと広い分野で開発に従事。iOSアプリ トレンドトピック,Newstrushをリリースしている。