直近で、結構Expressフレームワークについて記事にしてきたので、今回はExpressフレームワークを使ってるなら使わな損!って代物を使ってみました!
ExpressGenerator!です!
Expressを個別でインストールしてWebアプリを作った人はわかると思うんやけど、ExpressってWebアプリを作るのにもちろん便利なんやけど、body-parserやったりejsやったり個別でモジュールをインストールせなあかんからインストール忘れたら動かんかったりする
そんなもんを全てひっくるめてパッとWebアプリの雛形を作ってくれるんが、ExpressGeneratorっちゅうやつです!
何はともあれ、やってみよう!
まずは、ExpressGeneratorのソフトウェアをインストールします!これはグローバル環境にインストールします
nom install -g express-generator
この-gがグローバルにインストールしまっせーのオプションです
※ちなみに、カレントディレクトリにインストールする場合は「–save」です。ハイフンは2ついるんで注意!
インストールが完了したら、ExpressGeneratorを使ってアプリを作成!
express -e sample-app
「-e」はテンプレートエンジンに「ejs」を使いますよーって意味のオプション。つけんかったらテンプレートエンジンに「pug」っていうのが使われるらしい。pugについて詳しく知りたいって人はググってください!
作成できたら、「sample-app」っていうディレクトリが作られているはず!
この中に入ると色々すでに揃ってますね!
必要なモジュールなんかは、まだインストールされてないんで、
npm install
を実行するんですが、その前にpackage.jsonの中身を見てみましょう!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "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」にブラウザでアクセスするとこんな画面が表示される

簡単やねーーーーー
一旦ここで、作成したアプリのファイル構成を確認しておきます
ファイルの中身には、こんなけのものが入っている
1 2 3 |
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」:これがメインプログラム!
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 |
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のパースに関するモジュール
次にルート用スクリプトのロードを行なっている
1 2 |
var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); |
routesフォルダ内にあったスクリプトをロードしている
例えば、/indexというパスでアクセスしてきたときはroutes/index.jsを呼ぶ
というように、アドレスごとに実行するスクリプトファイルを用意するのだ!
こうすることで、1つのスクリプトファイルに記述するのに比べ改修がしやすくなったり、バグが見つかった時にどのパスにリクエストがあった時にバグが起きるかを特定することで、修正対象のファイルを簡単に見つけることができる
その次にExpressオブジェクトの基本設定をしている
1 2 3 4 5 6 7 8 9 10 11 12 |
// 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ページにアクセスした際の基本的な処置が行われるようになる
下2行はルーティング情報の設定となり、特定のアドレスにアクセスした時に、起動するスクリプトファイルを設定する
で、エラー関連の処理はここ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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についてみてみよう
1 2 3 4 5 6 7 8 9 10 |
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ファイルを設定し、第二引数で引き渡す情報を設定している
ま、簡単やね
ではでは、実際に新しい画面を作ってそこルーティング情報の設定を行い実際に画面遷移させてみよう!
手順はこう
1:ejsの作成
2:ルーティング用スクリプトの作成
3:app.jsへの組み込み
はい、やってきます。
1:ejsの作成
まずは画面の作成。viewsディレクトリ内に「hello.ejs」として作成。こんな感じ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="/stylesheets/style.css"> <title>Hello ejs</title> </head> <body> <head> <h1><%= title%></h1> </head> <div role="main"> <p><%- content%></p> </div> </body> </html> |
何の変哲も無い画面です。強いて説明する箇所があるとするとCSSの読み込みに静的コンテンツ内のstylesheetsというディレクトリ内のstyle.cssを読み込んでいるということぐらいかな。静的コンテンツはapp.jsにあるこのコードの部分で設定している
1 |
app.use(express.static(path.join(__dirname, 'public'))); |
これでpublicディレクトリ配下は全て静的コンテンツと扱うように設定しているのだ。
2:ルーティング用スクリプトの作成
次に「/hello」でアクセスされた時にこの画面が呼び出されるように、ルーティング用のスクリプトを作成します。
routesディレクトリ内に、hello.jsとしてこんな感じで作成
1 2 3 4 5 6 7 8 9 10 11 12 |
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%>部それぞれにデータを引き渡すことができる仕組みだね。
3:app.jsへの組み込み
さあ、最後に作成したルーティング用スクリプトをapp.jsに組み込もう!
こんな感じ
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 |
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'); //ポイント1 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); //ポイント2 // 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; |
追記したのはポイント1と2の部分
では、npm startで起動して、「hello」にアクセスしてみよう!

はい、オッケー!!
ExpressGeneratorいいですねー
ルーティング情報なんかの設定にファイルを分けれるため、画面が多くなってきた際の保守性も高いし可読性も上がりますなー
今後Node.jsで Webアプリを作るってなったら、このExpressGeneratorを使っていきたいと思いまーす!
では、この辺で今回は終わりにします BYE!
コメント