Express Generatorを使ってみた

直近で、結構Expressフレームワークについて記事にしてきたので、今回はExpressフレームワークを使ってるなら使わな損！って代物を使ってみました！

ExpressGenerator！です！

Expressを個別でインストールしてWebアプリを作った人はわかると思うんやけど、ExpressってWebアプリを作るのにもちろん便利なんやけど、body-parserやったりejsやったり個別でモジュールをインストールせなあかんからインストール忘れたら動かんかったりする

そんなもんを全てひっくるめてパッとWebアプリの雛形を作ってくれるんが、ExpressGeneratorっちゅうやつです！

何はともあれ、やってみよう！

まずは、ExpressGeneratorのソフトウェアをインストールします！これはグローバル環境にインストールします

nom install -g express-generator

この-gがグローバルにインストールしまっせーのオプションです

※ちなみに、カレントディレクトリにインストールする場合は「–save」です。ハイフンは２ついるんで注意！

インストールが完了したら、ExpressGeneratorを使ってアプリを作成！

express -e sample-app

「-e」はテンプレートエンジンに「ejs」を使いますよーって意味のオプション。つけんかったらテンプレートエンジンに「pug」っていうのが使われるらしい。pugについて詳しく知りたいって人はググってください！

作成できたら、「sample-app」っていうディレクトリが作られているはず！

この中に入ると色々すでに揃ってますね！

必要なモジュールなんかは、まだインストールされてないんで、

npm install

を実行するんですが、その前にpackage.jsonの中身を見てみましょう！

{
  "name": "sample-app",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1"
  }
}

{

"name": "sample-app",

"version": "0.0.0",

"private": true,

"scripts": {

"start": "node ./bin/www"

"dependencies": {

"cookie-parser": "~1.4.4",

"debug": "~2.6.9",

"ejs": "~2.6.1",

"express": "~4.16.1",

"http-errors": "~1.6.3",

"morgan": "~1.9.1"

}

すでにdependenciesにいっぱいモジュールが記述されてますねー

これらを「npm install」でインストールするわけです！

もちろん、個別でモジュールを追加したければ、今まで通りインストールできまーす。その際は、このdependenciesに都度モジュール名が自動で追記されていくわけですね。

では、「npm install」を実行！

無事にインストールが完了したら、アプリを実行してみよう！

ExpressGeneratorを使ってなかったときは「node 〇〇.js」ってコマンドでアプリを実行させていましたが、ExpressGeneratorの場合は「npm start」で実行できる！

そして、「http://localhost:3000」にブラウザでアクセスするとこんな画面が表示される

簡単やねーーーーー

一旦ここで、作成したアプリのファイル構成を確認しておきます

ファイルの中身には、こんなけのものが入っている

app.js			package-lock.json	routes
bin			package.json		views
node_modules		public

app.js package-lock.json routes

bin package.json views

node_modules public

「bin」：アプリケーションを実行するためのコマンドファイルが保管される場所

npm startコマンドでアプリ実行した時に気づいたかもやけど、これ実はこのbinディレクトリ内のwwwっていうコマンドファイルを実行してたんです。

「public」：公開ディレクトリ。静的コンテンツファイルの配置場所

「images」「javascripts」「stylesheets」ディレクトリにそれぞれ「画像」「JSファイル」「CSSファイル」を保管する

「routes」：ルートごとの処理用スクリプトファイルを保管する場所。用意するページのアドレスごとにスクリプトファイルを作成しルーティングを追加していく

「views」：テンプレートファイルをまとめておく場所

「node_modules」：Node.jsのモジュール類がまとめて保管される場所

「app.js」：これがメインプログラム！

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 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);

// 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;

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 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);

// 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;

Expressを個別でインストールしてWebアプリを作ってた身としては、

これを一個一個書かなくて済むのは、めちゃくちゃありがたい！！

ざっとソースを追っていきましょう！

まず最初にモジュールのロードを行なっています

http-error：Expressのエラーに関するもの

express：Express本体

path：ファイルパスを扱うためのモジュール

morgan：HTTPリクエストのログ出力に関するモジュール

cookie-parser：Cookieのパースに関するモジュール

次にルート用スクリプトのロードを行なっている

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

1 2	var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users');

routesフォルダ内にあったスクリプトをロードしている

例えば、/indexというパスでアクセスしてきたときはroutes/index.jsを呼ぶ

というように、アドレスごとに実行するスクリプトファイルを用意するのだ！

こうすることで、１つのスクリプトファイルに記述するのに比べ改修がしやすくなったり、バグが見つかった時にどのパスにリクエストがあった時にバグが起きるかを特定することで、修正対象のファイルを簡単に見つけることができる

その次に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);

// 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でアプリケーションで利用する関数を設定する。これはrequireで読み込んだモジュールの機能を組み込んでいるということ。これらを組み込むことで、Webページにアクセスした際の基本的な処置が行われるようになる

下２行はルーティング情報の設定となり、特定のアドレスにアクセスした時に、起動するスクリプトファイルを設定する

で、エラー関連の処理はここ

// 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');
});

// 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」を記述し、外部のファイルからappというキーでExpressオブジェクトを参照できるようにしている

ほいじゃあ、次はroutesディレクトリ内のindex.jsについてみてみよう

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

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

module.exports = router;

var express = require('express');

var router = express.Router();

/* GET home page. */

router.get('/', function(req, res, next) {

res.render('index', { title: 'Express' });

});

module.exports = router;

このファイルは、app.jsで確認した通り「/」のアドレスにアクセスしたら実行されるスクリプトになる

ExpressGeneratorではアドレスのマッピングをrouterオブジェクト各メソッドで行うところがポイント

この例では、「router.get」の部分。

で、renderメソッドの第一引数で使用するejsファイルを設定し、第二引数で引き渡す情報を設定している

ま、簡単やね

ではでは、実際に新しい画面を作ってそこルーティング情報の設定を行い実際に画面遷移させてみよう！

手順はこう

１：ejsの作成

２：ルーティング用スクリプトの作成

３：app.jsへの組み込み

はい、やってきます。

１：ejsの作成

まずは画面の作成。viewsディレクトリ内に「hello.ejs」として作成。こんな感じ

&lt;!DOCTYPE html>
&lt;html lang="ja">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge">
    &lt;link rel="stylesheet" href="/stylesheets/style.css">
    &lt;title>Hello ejs&lt;/title>
&lt;/head>
&lt;body>
    &lt;head>
        &lt;h1>&lt;%= title%>&lt;/h1>
    &lt;/head>
    &lt;div role="main">
        &lt;p>&lt;%- content%>&lt;/p>
    &lt;/div>
&lt;/body>
&lt;/html>

<!DOCTYPE html>

<head>

<title>Hello ejs</title>

</head>

<body>

<head>

</head>

</div>

</body>

</html>

何の変哲も無い画面です。強いて説明する箇所があるとするとCSSの読み込みに静的コンテンツ内のstylesheetsというディレクトリ内のstyle.cssを読み込んでいるということぐらいかな。静的コンテンツはapp.jsにあるこのコードの部分で設定している

app.use(express.static(path.join(__dirname, 'public')));

1	app.use(express.static(path.join(__dirname, 'public')));

これでpublicディレクトリ配下は全て静的コンテンツと扱うように設定しているのだ。

２：ルーティング用スクリプトの作成

次に「/hello」でアクセスされた時にこの画面が呼び出されるように、ルーティング用のスクリプトを作成します。

routesディレクトリ内に、hello.jsとしてこんな感じで作成

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

router.get('/', (req, res, next) => {
    let data = {
        title : 'Hello!',
        content : 'This is Hello.ejs you just made'
    };
    res.render('hello', data);
});

module.exports = router;

var express = require('express');

var router = express.Router();

router.get('/', (req, res, next) => {

let data = {

title : 'Hello!',

content : 'This is Hello.ejs you just made'

};

res.render('hello', data);

});

module.exports = router;

ポイントはgetの第一引数にアドレスを指定するのだが、ここは「/」と指定すること！

というのものちにapp.jsにこのルーティング用スクリプトを組み込む際にどのアドレスにアクセスがあった時にこのスクリプトファイルを読み込むか設定するからだ！

例えば、app.jsに「/hello」というアドレスでアクセスされた時にこのhello.jsファイルを呼び出すように設定しているのに、router.getメソッドの第一引数に再度「/hello」と指定してしまった場合、「/hello/hello」というアドレスにアクセスがあった時に第二引数の処理が行われるといった設定になってしまうのだ！

ふむふむ、ここ注意すべきだね

で、第二引数の処理内容では、renderメソッドの第一引数に読み込むejsファイルを指定し、第二引数に引き渡す情報を設定している。これで、hello.ejs内の<%= title%>部と<%- content%>部それぞれにデータを引き渡すことができる仕組みだね。

３：app.jsへの組み込み

さあ、最後に作成したルーティング用スクリプトをapp.jsに組み込もう！

こんな感じ

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 helloRouter = require('./routes/hello'); //ポイント１

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('/hello', helloRouter); //ポイント２

// 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;

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 helloRouter = require('./routes/hello'); //ポイント１

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('/hello', helloRouter); //ポイント２

// 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;

追記したのはポイント１と２の部分

では、npm startで起動して、「hello」にアクセスしてみよう！

はい、オッケー！！

ExpressGeneratorいいですねー

ルーティング情報なんかの設定にファイルを分けれるため、画面が多くなってきた際の保守性も高いし可読性も上がりますなー

今後Node.jsで Webアプリを作るってなったら、このExpressGeneratorを使っていきたいと思いまーす！

では、この辺で今回は終わりにします　BYE!