ExpressフレームワークでNode.jsでサーバー立ち上げ

日付 2020/11/11 タグ node.js カテゴリ node.js

目次

スタンダードなWebアプリケーションフレームワークExpress

Node.jsを勉強してすぐにサーバー立ち上げてみたいと思った時、一般的に使われるのがExpressらしいので、これを使ってサンプルを書いてみた。

Express は、Web アプリケーションとモバイル・アプリケーション向けの一連の堅固な機能を提供する最小限で柔軟な Node.js Web アプリケーション・フレームワークです。

RubyだとRailsとかあるんだけど、ExpressはかちっとしたMVCフレームワークというほどでもなく、結構自分の自由に書ける部分が多そうである。

Expressジェネレーターのインストール

簡単にExpressを利用できるようにExpressジェネーレーターをまずはインストール。

$ npm install express-generator -g

これでサンプルを作る準備ができたので、早速作成開始する。

ExpressコマンドでWebアプリに必要なファイルを生成

$ express -v ejs express-sample

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

   change directory:
     $ cd express-sample

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=express-sample:* npm start

-vオプションで今回はテンプレーエンジンはejsを指定したが、利用できるテンプレートエンジンは他にもある。（jade, handlebars, mustache等）

EJSがもっともシンプルでわかりやすいようなので、今回の例ではejsを利用した。
expressコマンドでWebアプリに必要なファイル群が一気に作られているので、続いて必要なモジュールのインストール

$ npm install

これだけで簡単なWebアプリが立ち上がる状態までになっている。あとは

$ npm start

> express-sample@0.0.0 start /Users/okeoke/express-sample
> node ./bin/www

デフォルトではPort番号3000で待ち受け状態

http://localhost:3000

を開くと、このような表示が出れば、Webアプリが立ち上がっているのが確認できる。

ここまではあっという間であった。

Expressでのルーティングとビューの設定

何もしていないのにルートパスにアクセスしてWebページに文字が表示されたのは、Expressが用意してくれた

express-sample/app.js

...
... 途中略
app.use('/', indexRouter);
...
...

express-sample/routes/index.js

...
... 途中略
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
...
...

これら２つの設定で、パス/にアクセスがあった場合は、title='Express'と変数設定した上で、以下のビューを読み込むようになっているのだ。

express-sample/views/index.ejs

...
... 途中略
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

これが読みこまれて、<%= title %>に先ほど指定したtitle='Express'が埋め込まれて表示されるのだ。
そのことを理解するために、最初から設定されている内容を少し変更してみる。

ルーティングとビューを変更してテスト

先ほどのindex.jsをちょっと変更してみる。

修正したexpress-sample/routes/index.js

...
... 途中略
/* GET home page. */
router.get('/hello', function(req, res, next) {
  res.render('hello', { title: 'MySite' });
});
...
...

これで/helloへアクセスがあった場合に、title='MySite'をセットした上で、 views/hello.ejsを読み込むようになるはず。

express-sample/views/hello.ejsを用意

...
... 途中略
<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>