ExpressでWebアプリケーションを自動生成する (4/6)
作成:2013-05-12 10:17
更新:2015-08-13 11:00
更新:2015-08-13 11:00
■メインプログラム「app.js」について
では、作成されたWebアプリケーションを見ていきましょう。まずはマインプログラムである「app.js」からです。下のリスト欄に内容を掲載しておきました。結構な長さがありますね。ポイントをピックアップして説明していくことにしましょう。
1. ライブラリのロード
express――これがExpressオブジェクトの変数です。
path――Pathオブジェクトです。
serve-favicon――favicon(Webページに付けられるアイコンデータ)に関するものです。
morgan――ログ出力に関するオブジェクトです。
cookie-parser――クッキーの利用に関するオブジェクトです。
bodyParser――ボディ部分のパース処理に関するオブジェクトです。
routes――「routes」フォルダに設置してあるindex.js内のオブジェクトです。この内容は後で説明します。
user――「routes」フォルダに設置してあるuser.js内のオブジェクトです。これも後で触れます。
最後の2つは、モジュールではなくて、アプリケーション内に用意されているスクリプトファイルをロードするものです。requireで、こんな具合に他のスクリプトをロードできるのですね。
ずいぶん、いろいろなモジュールがロードされていますが、実はロードされているのはこれだけではありません。アプリケーションを起動するためのwwwには、以下のような文が書かれています。
2. express関数でApplicationを作成する
3. 各種のアプリケーション設定を行う
その後に、app.set~とかapp.use~とかいった文がずらっと並んでいますが、これは各種のアプリケーションの設定を行なっている部分です。これらは、とりあえずユーザーがあれこれ編集することはないでしょう。間違えて書き換えたりしないように注意してください。
4. getでルート設定をする
これらの変数をuseで設定することで、指定のアドレスにスクリプトを割りつけているのです。すなわち、'/'にアクセスがあったら「routes」内のindex.jsが、'/users'にアクセスがあったらusers.jsが、それぞれ実行されるようになるわけです。
5. エラー処理の設定
6. アプリケーションを設定する
途中、いきなり難しそうな処理がずらっと出てきたりもしましたが、すべて理解する必要はまったくありません。全体の流れとして、ごくざっと「こんな感じで処理がされているんだ」ということが把握できれば今は十分でしょう。
1. ライブラリのロード
var express = require('express');最初に行なっているのは、ライブラリのロードです。各種ライブラリをロードし、以下のような変数に保管しています。
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
express――これがExpressオブジェクトの変数です。
path――Pathオブジェクトです。
serve-favicon――favicon(Webページに付けられるアイコンデータ)に関するものです。
morgan――ログ出力に関するオブジェクトです。
cookie-parser――クッキーの利用に関するオブジェクトです。
bodyParser――ボディ部分のパース処理に関するオブジェクトです。
routes――「routes」フォルダに設置してあるindex.js内のオブジェクトです。この内容は後で説明します。
user――「routes」フォルダに設置してあるuser.js内のオブジェクトです。これも後で触れます。
最後の2つは、モジュールではなくて、アプリケーション内に用意されているスクリプトファイルをロードするものです。requireで、こんな具合に他のスクリプトをロードできるのですね。
ずいぶん、いろいろなモジュールがロードされていますが、実はロードされているのはこれだけではありません。アプリケーションを起動するためのwwwには、以下のような文が書かれています。
var app = require('../app');これで、このapp.jsスクリプトと、デバッグに関するオブジェクト、そしてhttpオブジェクトが用意されます。これらすべてが揃ってアプリケーションを構築しているのですね。
var debug = require('debug')('helloexpress:server');
var http = require('http');
2. express関数でApplicationを作成する
var app = express();express関数でApplicationオブジェクトを作成します。これは前回と同じですね。
3. 各種のアプリケーション設定を行う
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
その後に、app.set~とかapp.use~とかいった文がずらっと並んでいますが、これは各種のアプリケーションの設定を行なっている部分です。これらは、とりあえずユーザーがあれこれ編集することはないでしょう。間違えて書き換えたりしないように注意してください。
4. getでルート設定をする
app.use('/', routes);getで、'/'と'/users'のアドレスにそれぞれroutesとusersを設定しています。このroutesとusersは、さっき出てきましたね? 「routes」フォルダ内にあるindex.jsとusers.jsをそれぞれrequireでロードしたものをおさめた変数でした。
app.use('/users', users);
これらの変数をuseで設定することで、指定のアドレスにスクリプトを割りつけているのです。すなわち、'/'にアクセスがあったら「routes」内のindex.jsが、'/users'にアクセスがあったらusers.jsが、それぞれ実行されるようになるわけです。
5. エラー処理の設定
app.use(function(req, res, next) {app.use、if文、またapp.useと続きますが、これらはエラーに関する処理を行うためのものです。これらも、特にユーザーが触る部分ではありません。とりあえず忘れていい部分ですね。
var err = new Error('Not Found');
err.status = 404;
next(err);
});
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
6. アプリケーションを設定する
module.exports = app;最後に、作成したappオブジェクトを、module.exportsに代入します。これでアプリケーションが設定され動くようになります。
途中、いきなり難しそうな処理がずらっと出てきたりもしましたが、すべて理解する必要はまったくありません。全体の流れとして、ごくざっと「こんな感じで処理がされているんだ」ということが把握できれば今は十分でしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var routes = require('./routes/index'); var users = require('./routes/users'); var app = express(); // view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); // uncomment after placing your favicon in /public //app.use(favicon(__dirname + '/public/favicon.ico')); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public'))); app.use('/', routes); app.use('/users', users); // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); }); // error handlers // development error handler // will print stacktrace if (app.get('env') === 'development') { app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: err }); }); } // production error handler // no stacktraces leaked to user app.use(function(err, req, res, next) { res.status(err.status || 500); res.render('error', { message: err.message, error: {} }); }); module.exports = app;
※関連コンテンツ