【Node.js】Express入門

この記事ではNode.jsのフレームワークであるExpressの導入方法を解説します。
OSはMacを前提として進めていきます。

準備

まずPCにNode.jsとnpmをインストールしておいてください。

一先ずHello Worldしてみる

インストール

まずアプリケーションディレクトリを作成して、作成したディレクトリに移動します。
今回はsample-appというディレクトリを作成します。


mkdir sample-app
cd sample-app

次にnpm initpackage.jsonを作成します。


npm init

対話式で入力していきますが、ほとんどエンターでOKです。
メインファイルの名前を変更したい場合はentry pointで任意の名前を入力してエンターを押してください。
今回はapp.jsとしました。


entry point: (index.js) app.js

最後にこれで良いか聞かれますのでyesと入力し、エンターで完了します。


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


Is this OK? (yes) yes

最後にExpressをインストールします。


npm install express --save

メインファイルの作成

npm initentry pointで指定した名前(今回はapp.js)で以下のようにメインファイルを作成します。


const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => { 
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Hello World!`)
})

サーバーの起動

下記コマンドを実行するとポート3000番でローカルサーバーが立ち上がりますのでhttp://localhost:3000にアクセスします。


node app.js

Hello World!と画面に表示されていれば成功です。
停止する場合はCtrl+Cを入力します。

Express Generatorでアプリを作成する

Express Generatorを使うとアプリケーションに必要なルーティング・テンプレートエンジンの設定、ディレクトリの作成などを自動で行ってくれます。
Webアプリの作成は通常こちらを使うと良いでしょう。

Express Generatorのインストール

まずグローバルでExpress Generatorをインストールします。


npm install -g express-generator

-hオプションでコマンドオプションを確認できます。

express -h

  Usage: express [options] [dir]

  Options:

        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view   add view  support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
        --no-view        use static html instead of view engine
    -c, --css    add stylesheet  support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
    -h, --help           output usage information

アプリケーションの作成

先ほど作成したsample-appディレクトリの中身を一旦全て削除して、下記コマンドを実行します。
テンプレートエンジンはejsを指定しています。

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

最後にディレクトリ名を指定すると指定したディレクトリを作成し、その中に必要なファイルも作成されます。

express --view=ejs myapp

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

次にnpm installで必要なモジュールをインストールします。


npm install

added 54 packages, and audited 55 packages in 612ms

found 0 vulnerabilities

起動

下記コマンドでサーバーを起動します。


DEBUG=sample-app:* npm start

http://localhost:3000にアクセスして下記画像の画面が表示されれば成功です。

Express トップページ

新しいページを作成

デフォルトでは//usersページが作成されていますが、新しく/shopsというページを作成してみたいと思います。

まず/routes/index.jsを複製して同じ階層にshops.jsというファイルを作成します。
res.render()の第一引数にレンダリングするejsファイル名、第二引数に渡す値をjsonで記述します。


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

router.get('/', function (req, res, next) {
    res.render('shops', { title: 'Shops' });
});

module.exports = router;

次に/views/index.ejsを複製して同じ階層にshops.ejsを作成します。
中身はそのままでOKです。

最後にapp.jsに以下のハイライト部分(2行)を追記します。


var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
var shopsRouter = require("./routes/shops");

var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

app.use(logger("dev"));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));

app.use("/", indexRouter);
app.use("/users", usersRouter);
app.use("/shops", shopsRouter);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get("env") === "development" ? err : {};

    // render the error page
    res.status(err.status || 500);
    res.render("error");
});

module.exports = app;

これでファイルの編集は完了しましたのでCtrl+Cで一旦サーバーを停止して、DEBUG=sample-app:* npm startで再度サーバーを起動します。

http://localhost:3000/shopsにアクセスして/でExpressだった文字がShopに変わっていれば成功です。

Express Shopsページ

注意点

ファイルを変更してから反映するためには一度サーバーを停止してから再度起動して、ブラウザもリロードしなければいけません。
開発中にこの一連の作業を毎回するのは面倒ですがpm2とBrowsersyncを使用すると、この作業を自動化できます。
詳しくは下記記事をご覧ください。

参考