Node.js + Express で作る Webアプリケーション開発入門

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 に関連する上に記載のアプリは事前にインストール済みである前提で進めます。まだインストールしていない場合は先にインストールをお願いいたします。それぞれのインストール方法や手順については以下の記事を参考にしていただければと思います。

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

環境作成

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

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

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

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

ディレクトリ構成

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

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"
}
```
以下のパッケージを npm でインストール。
- express
- ejs
具体的なインストール手順はそれぞれ以下の通りです。（といっても、npm install パッケージ名 --save をコマンドで叩くだけなのですが…）
1. express のインストール
```
npm install express --save
```
2. ejs のインストール
```
npm install ejs --save
```
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"
  ]
}
```
.bowerrc を作成。

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

.bowerrc
```
{
  "directory": "public/third_party"
}
```
以下のパッケージを 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;
}

テスト

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

コマンドプロンプトを起動
プロジェクトルートディレクトリへ移動
```
cd /d "D:\Work\sample"
```
以下のコマンドを実行して Webアプリケーションを起動
```
node app.js
```
ブラウザからアクセス

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

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

参考記事

Express

最後に… このブログに興味を持っていただけた方は、ぜひ「Facebookページにいいね！」または「Twitter のフォロー」お願いします！！

galife

Node.js + Express で作る Webアプリケーション開発入門

概要

前提条件

環境作成

実装

./app.js

./routes/index.js

./views/index.ejs

./public/javascripts/index.js

./public/stylesheets/index.css

テスト

Labels

Archives

Pages

Contact