Node.js だけでは 実践向きではないので、 Express と EJS を組み合わせてもう少し実践で使えるようなサンプルを作ってみました。 Express は Node.js 向けの Webアプリケーション開発フレームワーク で、ミドルウェアのような存在です。 EJS は テンプレートエンジン で、Java で言うところの JSP に近い コーディング ができます。 今回はさらにフロントエンドでよく使われる jQuery、 Bootstrap を組み込んで実装しています。

実用…となるとまだまだ足りない部分がありますが、初心者向けのサンプルとしてはある程度網羅できたものになっているかと思います。

概要

本記事では単純な index ページを返却する Webアプリケーションを作成します。 開発環境は サーバーサイドを Node.js + Express + EJS 、クライアントサイドを jQuery、 Bootstrap が使える環境とするので、 Webアプリケーション開発の雛型になるかと思います。

利用するフレームワークおよびライブラリ

• パッケージ管理
  • npm
  • Bower
• サーバーサイド
  • Node.js
  • Express
  • EJS
• クライアントサイド
• jQuery
• Bootstrap

作成する Webアプリケーション は、「単純な画像入りトップページを表示するもの」です。 出来上がった Webアプリケーション へアクセスした際のイメージは以下のようなものです。

また、今回のプロジェクトで作成するフォルダおよびファイルの全体像は以下の通りです。

前提条件

以下のアプリがインストールされた Windows 環境

• Node.js / npm
• Bower
• Git

環境は Windows で開発を行います。 Node.js に関連する上に記載のアプリは事前にインストール済みである前提で進めます。 まだインストールしていない場合は先にインストールをお願いいたします。 それぞれのインストール方法や手順については以下の記事を参考にしていただければと思います。

• Node.js / npm の インストール (Windows)
• Bower の インストール (Windows)
• Git for Windows の インストール
• GitHub for windows の インストール と 設定

なお、エディタは IDE (Visual Studio や Eclipse) を利用して開発してもよいのですが…裏側で実装されたもろもろが何を示しているのか分からないのでテキストエディタで進めます。

環境作成

開発に必要なディレクトリ、パッケージを準備します。 パッケージは依存関係があるのでバージョンには注意します。

1. プロジェクトディレクトリを作成。

   ここでは「sample」をルートディレクトリとして作成します。 作成する場所はローカルPCの好きな場所で問題ありません…が、後でコマンド叩くとき日本語があると不便なので英語のパスになるような場所に作成することをオススメします。 なお、以下のサンプルは D:\Work\sample へ作成しているのを前提で進めます。

2. デフォルトのディレクトリ構成として以下のフォルダ構成を準備します。

   ディレクトリ構成

   sample
     │
     ├─public
     │  ├─images
     │  ├─javascripts
     │  ├─stylesheets
     │  └─third_party
     │
     ├─routes
     │
     └─views
   

3. npm init で package.json を作成。

   プロジェクトルート D:\Work\sample でコマンドプロンプトを立ち上げ、 npm init を実行します。

   基本的にはすべての質問を Enter で回答すれば完成します。 以下のサンプルでは一部でデフォルト以外の回答をして作成しています。

   package.json

   {
     "name": "sample",
     "version": "1.0.0",
     "description": "",
     "main": "app.js",
     "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1"
     },
     "author": "garafu",
     "license": "MIT"
   }
   

4. 以下のパッケージを npm でインストール。

   • express
   • ejs

   具体的なインストール手順はそれぞれ以下の通りです。 （といっても、npm install パッケージ名 --save をコマンドで叩くだけなのですが…）

   1. express のインストール

      npm install express --save
      

   2. ejs のインストール

      npm install ejs --save
      

5. bower init で bower.json を作成。

   package.json の作成と同じく、基本的にはすべての質問を Enter で回答すれば完成します。 以下のサンプルでは一部でデフォルト以外の回答をして作成しています。

   bower.json

   {
     "name": "sample",
     "description": "",
     "main": "app.js",
     "authors": [
       "garafu"
     ],
     "license": "MIT",
     "homepage": "",
     "ignore": [
       "**/.*",
       "node_modules",
       "bower_components",
       "test",
       "tests"
     ]
   }
   

6. .bowerrc を作成。

   作成用のコマンドは存在しないので テキストエディタ を使って作成します。 ファイル保存は念のため UTF-8 で保存しておきます。

   .bowerrc

   {
     "directory": "public/third_party"
   }
   

7. 以下のパッケージを bower でインストール。

   • jQuery
   • Bootstrap

   具体的なインストール手順はそれぞれ以下の通りです。 （こちらも npm と似ていて bower install パッケージ名 --save をコマンドで叩くだけです）

   1. jQuery を以下のコマンドでインストール。

      jQuery は Bootstrap との依存関係があるため バージョン 2.x.x 以前を指定してインストールします。

      bower install jquery#2 --save
      

   2. Bootstrap を以下のコマンドでインストール。

      bower install bootstrap --save
      

実装

実際に作成するのは以下のファイルです。

• ./app.js
• ./routes/index.js
• ./views/index.ejs
• ./public/javascripts/index.js
• ./public/stylesheets/index.css

また、以下の場所に任意の画像を置いてください。

• ./public/images/neko.jpg

ちなみに今回は PAKUTASO に公開されている 獲物を狙ってるメス猫（スコティッシュフォールド） のフリー素材をお借りしました。

./app.js

var express = require('express');

// express の実態 Application を生成
var app = express();

// テンプレートエンジンを EJS に設定
app.set('views', './views');
app.set('view engine', 'ejs');

// 静的ファイルは無条件に公開
app.use('/public', express.static('public'));

// ルーティング設定
app.use('/', require('./routes/index.js'));

// サーバーをポート 3000 で起動
app.listen(3000);

// アプリケーション開始ログ
console.log('Server running at http://localhost:3000');

./routes/index.js

var express = require('express');
var router = express.Router();

// デフォルトルーティング
router.get('/', function (request, response) {
    response.render('index', { title: 'Sample Node.js', message: 'Hello there!' });
});

module.exports = router;

第2引数で渡されたオブジェクトはテンプレートエンジン（ EJS ）に渡されます。

./views/index.ejs

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= title %></title>
    <link rel="stylesheet" href="/public/third_party/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="/public/stylesheets/index.css" />
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">
      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
        <p><img id="img" src="/public/images/neko.jpg" class="img-thumbnail"></p>
        <p><%= message %></p>
      </div>
    </div>

    <script type="text/javascript" src="/public/third_party/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/public/third_party/bootstrap/dist/js/bootstrap.js"></script>
 <script type="text/javascript" src="/public/javascripts/index.js"></script>
  </body>
</html>

渡されたオブジェクトは <%= プロパティ名%> で呼び出すことができます。 JSP 同様、条件判定 や ループ処理 もありますが…、今回はただ表示するだけのサンプルとしています。

./public/javascripts/index.js

var image_onclick = function (event) {
    window.alert('Hello World !');
};

var document_onready = function (event) {
    $('#img').on('click', image_onclick);
};

$(document).ready(document_onready);

./public/stylesheets/index.css

body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

テスト

実装まで終わりましたので、実際に動かして動作することを確認します。

1. コマンドプロンプトを起動
2. プロジェクトルートディレクトリへ移動

   cd /d "D:\Work\sample"
   

3. 以下のコマンドを実行して Webアプリケーション を起動

   node app.js
   

4. ブラウザからアクセス

   任意のブラウザから http://localhost:3000/ へアクセスします。 正常に動作していれば、以下のような画面が表示されるハズです。

   

---

以上でサンプル実装は完了となります。 多数あるパッケージやフレームワークをどのように組み合わせていけばよいかが理解できたかと思います。 これをベースに Node.js で実践的な Webアプリケーション が作られるといいな、と思っています。

参考記事

• Express