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

7 件のコメント

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) を利用して開発してもよいのですが…裏側で実装されたもろもろが何を示しているのか分からないのでテキストエディタで進めます。

環境作成

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

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

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

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

    ディレクトリ構成

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    sample
      
      ├─public
      │  ├─images
      │  ├─javascripts
      │  ├─stylesheets
      │  └─third_party
      
      ├─routes
      
      └─views
  3. npm initpackage.json を作成。

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

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

    package.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {
      "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 のインストール
      1
      npm install express --save
    2. ejs のインストール
      1
      npm install ejs --save
  5. bower initbower.json を作成。

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

    bower.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    {
      "name": "sample",
      "description": "",
      "main": "app.js",
      "authors": [
        "garafu"
      ],
      "license": "MIT",
      "homepage": "",
      "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
      ]
    }
  6. .bowerrc を作成。

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

    .bowerrc

    1
    2
    3
    {
      "directory": "public/third_party"
    }
  7. 以下のパッケージを bower でインストール。

    • jQuery
    • Bootstrap

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

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

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

      1
      bower install jquery#2 --save
    2. Bootstrap を以下のコマンドでインストール。

      1
      bower install bootstrap --save

実装

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

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

  • ./public/images/neko.jpg

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

./app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!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

1
2
3
4
5
6
7
8
9
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

1
2
3
4
5
6
7
body {
  padding-top: 50px;
}
.starter-template {
  padding: 40px 15px;
  text-align: center;
}

テスト

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

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

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


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

参考記事

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

 

  1. チュートリアルありがとうございます。neko.jpg が ./views/index.ejs 内だと neko.png になっていました。

    返信削除
    返信
    1. teyaさん

      誤植失礼しました。
      ご指摘ありがとうございます。
      該当箇所(./views/index.ejs)を修正いたしました。

      また何かありましたらご連絡いただけると嬉しいです。

      今後ともよろしくお願いいたします。

      削除
    2. 手順に従った所、jQueryが機能しないのですが何か分かりますでしょうか?.bowerrcの作成に失敗したのかもしれませんが...。Google上のjQueryを使用した所、機能しました。可能でしたら、ご確認のほどお願いします。

      削除
    3. あと、./public/javascripts/index.js の $('img') が $('#img') になっていました。

      削除
    4. コメントの編集ができないため連投すみません。私の環境だと、.bowerrcという拡張子であればよいのかと思い「myBowerrc.bowerrc」というファイルにしています。ちなみに、私の環境ではファイル名を無名には出来ませんでした。もしかしたら、このあたりが関係あるのかもしれません。

      削除
    5. teya さん

      ご連絡ありがとうございます。

      > 手順に従った所、jQueryが機能しないのですが何か分かりますでしょうか?
      jQueryの保存先が「/public/third_party/jquery/dist/jquery.min.js」になっていれば
      「.bowerrc」は正しく作成されているので、別の原因と思います…が、
      コメントで「myBowerrc.bowerrc」とされているようですので、おそらくここが誤っているものと思います。

      以下に .bowerrc に関する記載があります。
       https://bower.io/docs/config/

      上記の通り、「.bowerrc」は固定名のようなので、この通りの名称でファイルを作成いただき、
      再度「bower install」を行うと、正しい位置(/public/third_party配下)に jQuery が保存されると思いますので、
      一度お試しいただけますでしょうか。

      > ./public/javascripts/index.js の $('img') が $('#img') になっていました。
      ご指摘ありがとうございます。
      こちらは img タグに id を付与するよう記事を修正しました。

      今回、いろいろとご質問をいただき、
      チュートリアルでサンプルコードないのもどうかと思い、
      GitHub にサンプルコードを作成しました。
      ダウンロードリンクを記事上部に追加しましたので、参考にしていただければと思います。

      よろしくお願いいたします。

      削除
  2. 一連の記事ありがとうございます
    Web作成未経験から作成できそうです

    返信削除