node.jsとexpressのロゴ

Node.jsについて

Node.jsはJavascriptで構築できるサーバーサイド環境のことです。

近年、AWSなど、クラウドのサーバー環境が充実してきたことにより、サーバーレスなシステム(厳密にはサーバーは構築されている)が人気です。

その筆頭となるのがこのNode.jsで、RubyやPHPなどのいわゆるサーバーサイド言語を使わなくても、Javascriptだけでサーバー構築を行うことができます。

Node.jsについての詳しい解説や、開発環境の構築方法については、以下の記事を参考にしてください。

※この記事では、簡易なWebサイトの開発を通して、Node.jsの使い方を学んでいきます。Javascriptの知識がある方を対象に書いていますので、予めご了承ください。

Expressのインストール

Node.jsには様々なフレームワークが存在しますが、ここでは、広く利用されているExpressを使います。

フレームワークの使い方を学ぶことで、これまで自分で実装してきた面倒な処理から開放されます。

それでは早速インストールをしてみましょう。

expresstestディレクトリを作成し、移動してください。

前回と同じようにnpm initコマンドを使用します。(手順はejsのインストールと同じなので、詳細は割愛させていただきます。)

インストールも同じくnpm installコマンドを使うのですが、今回はオプションも利用します。

次のようにコマンドを入力してください。

$ npm install express --save
//--saveオプションを使うと、インストール対象のバージョン情報がpackage.jsonに記録されます。

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN expresstest@1.0.0 No description
npm WARN expresstest@1.0.0 No repository field.

+ express@4.16.3
added 50 packages from 47 contributors and audited 119 packages in 3.098s
found 0 vulnerabilities

これでExpressがインストールできました。なお、今回はejsも使用するので、npm install ejs –saveでインストールしておいてください。

※追記されたpackage.jsonがこちらです。

{
  "name": "expresstest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  //パッケージのバージョンが記述されています
  "dependencies": {
    "ejs": "^2.6.1",
    "express": "^4.16.3"
  }
}

Expressの使い方

Hello Expressの出力

それではまず、最初に行ったHello World!の出力をExpressを使ってやってみましょう。

hello.jsファイルを作成します。

hello.js

//Expressのオブジェクトを生成
var express = require('express');
//Expressオブジェクトのexpressメソッドで、
//アプリケーションとしての役割を担うオブジェクトを生成
var app = express();

//アプリケーションオブジェクトのgetメソッドでgetリクエストの登録
app.get('/', function(req, res) {
  res.send('Hello Express');
});

//アプリケーションオブジェクトのlistenメソッドで、
//ポート番号とコールバック関数を指定して待受状態に
var server = app.listen(1234, function() {
  console.log('サーバを起動しました');
});

※実行結果は割愛します。

最初に作ったHello World!を出力するプログラムよりも、スタイリッシュなコードになりました。

特に、多様なリクエストに応じた処理を実装する場合、このような簡単な記述で処理が行えるのは嬉しいですよね。

Express上でEJSを使用

それでは次に、Express上でejsを扱う方法について説明します。

temp.ejs、app.jsの2つのファイルを用意してください。

temp.ejs

<!DOCTYPEJ html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Express&EJS</title>
  </head>
  <body>
    <%- contents %>
  </body>
</html>

app.js

var express = require('express');
var ejs = require('ejs');
var app = express();

//テンプレートエンジンの指定
app.engine('ejs', ejs.renderFile);

app.get('/', function(req, res) {
//テンプレート(temp.ejs)へのレンダリング処理
res.render('temp.ejs', {
contents: '<p>hoge</p>'
});
});

var server = app.listen(1234, function() {
console.log('サーバを起動しました');
});

テンプレートファイルは、アプリケーションディレクトリ内に、「views」というディレクトリを用意して、全てその中に配置するルールとなります。※これらは設定で変更可能

最初にフレームワークを使わず実装したときと比べて、非常にシンプルな実装で済むことがわかりますね。

Express上で送信データの処理

前回にデータの送信を行ったとき、POST送信ではparamsオブジェクトを生成するまで、非常に煩雑なプログラムになってしまっていました。

Expressの使い方を学ぶことで、シンプルなコードに落とし込むことが出来るので、順を追ってみていきましょう。

今回、body-parserというライブラリを使うので、事前にnpmコマンド(npm i body-parser –save)でインストールしておいてください。

では、カレントディレクトリにapp.js、viewsディレクトリにtemp.ejsを作成していきましょう。

temp.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Express&EJS</title>
  </head>
  <body>
    <a href="/?name=hoge&age=20">GET</a>
    <form action="/" method="post">
      <button type="submit">POST</button>
      <input type="text" name="name" value="fuga">
      <input type="text" name="age" value="30">
    </form>
  </body>
</html>

app.js

var express = require('express');
var ejs = require('ejs');
var bodyParser = require('body-parser');
var app = express();

app.engine('ejs', ejs.renderFile);
app.use(bodyParser.urlencoded({
  extended: true
}));

app.get('/', function(req, res) {
  console.log('---GET Request---');
  console.log('nameは' + req.query.name);
  console.log('ageは' + req.query.age);
  res.render('temp.ejs', {});
  });

app.post('/', function(req, res) {
  console.log('---POST Request---');
  console.log('nameは' + req.body.name);
  console.log('ageは' + req.body.age);
  res.render('temp.ejs', {});
});

var server = app.listen(1234, function() {
  console.log('サーバを起動しました!');
});

※ここでも実行結果は割愛します。

ここでは、アプリケーションオブジェクトによるpostメソッドが使えるようになっています。

特に注目していただきたいのが、「req.body.~」でPOST送信された値を取得している点です。

POSTパラメータがリクエストオブジェクトのbodyプロパティにまとめられるため、このように使用することができます。

Cookieの利用

cookie-parserというライブラリを使うことで、簡単にCokkieの操作が行えるようになります。

npm install cookie-parser –save でライブラリをインストールしましょう。

temp.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cookie</title>
  </head>
  <body>
    ただいまのアクセス回数:<%= cnt %>回
  </body>
</html>

app.js

var express = require('express');
var app = express();
var ejs = require('ejs');
var cookieParser = require('cookie-parser');

app.engine('ejs', ejs.renderFile);
app.use(cookieParser());

app.get('/', function(req, res) {
  var cnt = req.cookies.cnt == undefined ? 0 : req.cookies.cnt;
  cnt++
  //cookieへの書き込み
  //第一引数にはcookieのキー名、第二引数には値、第三引数にはオプションの連想配列を指定
  res.cookie('cnt', cnt, {maxAge: 5000});

  res.render('temp.ejs', {
    cnt: cnt
  });
});

var server = app.listen(1234, function() {
  console.log('サーバを起動しました!');
});

cookie-parserを使うことで簡単にcookieを操作することができました!

同じ要領で、express-sessionというライブラリを使うことで、sessionを操作することができます。

これらのライブラリは、ユーザーのログイン情報の処理を行うときなどに活躍してくれそうですね。

Ajaxの実装

temp.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ajax</title>
  </head>
  <body>
    <form>
      <div id="msg"></div>
      <button id="btn" type="button">Send</button>
    </form>
    <!--- 今回、Ajaxの処理はここに書きます。 -->
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('btn').addEventListener('click', function() {
          var msg = document.getElementById('msg');
          var xhr = new XMLHttpRequest();

          xhr.addEventListener('loadstart', function() {
            msg.textContent = '通信中,,,';
          }, false);

          xhr.addEventListener('load', function() {
            msg.textContent = JSON.parse(xhr.responseText).msg; 
          }, false);

          xhr.addEventListener('error', function() {
            msg.textContent = 'サーバーエラーが発生しました';
          }, false);

          xhr.open('POST', 'ajax', true);
          xhr.send(null);
        }, false);
      });
    </script>
  </body>
</html>

app.js

var express = require('express');
var ejs = require('ejs');
var app = express();

var msg='';

app.use(express.static('public'));

app.get('/', function(req, res) {
  res.render('temp.ejs', {});
});

app.post('/ajax', function(req, res) {
  msg += 'hoge' 
  //レスポンシブオブジェクトのjsonメソッドに返却する値の連想配列を渡す
  res.json({
    msg: msg
  });
});

var server = app.listen(1234, function(){
  console.log('サーバを起動しました');
});

※実行結果は割愛します。

postリクエスト(/ajax)を受けた際、レスポンシブオブジェクトのjsonメソッドに返却する値の連想配列を渡しています。

なお、レスポンスをJSON形式ではなく、単なる値とする場合は、レスポンシブオブジェクトのsendメソッドを使います。

アプリの雛形を自動生成

express-generatorというライブラリを使って、Webアプリの雛形を作っていきます。

これをうまく使うことで、お決まりのフォルダなどを、いちいち自分で作る手間が省けます。

今回のプログラムは、expgengeというディレクトリに作成していきます。

express-generatorのインストール

もちろん、npmでインストールしていくのですが、今回は「-g」というオプションを利用します。

npm install express-generator -g、これは、グローバルオプションを使うためのオプションです。

ライブラリをNode.jsのグローバルな領域にインストールします。express-generatorはプログラム中で使用するものではないので、-gオプションを使います。

$ npm install express-generator -g
/Users/ユーザー名/.nodebrew/node/v10.9.0/bin/express ->
/Users/ユーザー名/.nodebrew/node/v10.9.0/lib/node_modules/express-generator/bin/express-cli.js
+ express-generator@4.16.0
added 10 packages from 13 contributors in 4.052s

インストールが完了しました!

雛形の生成

雛形はexpressコマンドで生成します。

カレントディレクトリをexpgeneに移動してから、次のコマンドを実行してください。

$ express --view=ejs

   create : public/
   create : public/javascripts/
   create : public/images/
   create : public/stylesheets/
   create : public/stylesheets/style.css
   create : routes/
   create : routes/index.js
   create : routes/users.js
   create : views/
   create : views/error.ejs
   create : views/index.ejs
   create : app.js
   create : package.json
   create : bin/
   create : bin/www

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=expgene:* npm start

※「–view=ejs」というオプションは、「テンプレートエンジンはejsを使うよ」という意味です。

このコマンドを実行すると、実行したディレクトリ内にいくつかのディレクトリやファイルが生成されています。

ライブラリの一括インストール

雛形を生成したら、そのままディレクトリを移動せず、「npm install」を実行します。

npmはpackege.jsonの「dependencies」に指定されているライブラリを一括でインストールする機能を持っています。

$ npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 56 packages from 49 contributors and audited 139 packages in 2.989s
found 0 vulnerabilities

動作の確認

雛形が完成したので、早速動作を確認してみましょう。

コマンドラインからプログラムのディレクトリで、「node ./bin/www」と実行して、ブラウザで「http://localhost:3000」にアクセスしてください。


サーバーを起動するためのnodeコマンドにはapp.jsではなくbinディレクトリ下のwwwを指定します。

ちなみに、サーバーの起動は、「npm start」でも行えます。

ページの追加方法

最後に、express-generatorで生成したアプリケーションに「Hello World画面」を追加してみましょう。

routesディレクトリ下にhello.jsを作成

hello.js

var express = require('express');
//ルーティングオブジェクトの生成
var router = express.Router();

//ルーティングオブジェクトに対してGETリクエストを登録
router.get('/', function(req, res, next) {
  res.render('hello', {
    msg: 'Hello World'
  });
});

//これでapp.js側でこのファイルを扱うことができる
module.exports = router;

viewsディレクトリ下にhello.ejsを作成

hello.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>自動生成</title>
  </head>
  <body>
    <%= msg %>
  </body>
</html>

app.jsの修正

app.js

//以下の2つの処理を追加
var hello = require('./routes/hello');
app.use('/hello', hello);

これで、Hello Worldページの追加は完了です。

サーバーを起動(npm start)して、http://localhost:3000/helloにアクセスしてみましょう。

Hello Worldページが追加できましたね!

おわりに

お疲れ様でした。ここまで全ての項目を読まれてきた皆さんは、Node.jsでWebアプリをつくる上で必要な基礎知識が身についたと思います。

実用的なアプリケーションを作るには、まだまだ身につけなければいけない知識がたくさんありますが、基礎は何よりも大切です。

先日、以下のエントリーが話題になっていました。「Webフレームワークを使わないほうがいい」というタイトルの記事です。

ここで言われているのは、「基礎を疎かにするな」ということです。

Webフレームワークの使い方に習熟することは、Webアプリケーションの基礎を身につけることとは違います。

HTTPリクエストの種類、SQLの書き方など、しっかりとした基礎を身につけた上で、フレームワークを使うことが大切です。

前編はこちら