Expressとは
Node.jsのMVCのWebアプリケーションフレームワーク。
ここでは、そのインストール方法と、簡単なアプリケーションの作成方法を説明する。
npmのインストール
以下を参考にnpmとnodejsをインストールする。
Expressのインストール
任意のディレクトリに移動して、以降のコマンドを実行。
npmの初期化
$ npm init
入力項目はこちらを参照
npmのインストール手順#npm init
Expressの雛形を作成
以下のコマンドで雛形を作成する。
今回はejsというテンプレートエンジンを使う。
$ npm install express-generator
$ ./node_modules/.bin/express --view=ejs
destination is not empty, continue? [y/N] y
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
install dependencies:
$ npm install
run the app:
$ DEBUG=sample-app:* npm start
npm installを実行
$ npm install
ブラウザからアクセス
アプリケーションを起動してブラウザからアクセスしてみる。
$ npm start
http://localhost:3000
defaultで用意されているindex.jsにアクセスする。
以下が表示されればOK。
アプリケーションを作成してみる
hello.jsを作成
routes/hello.js
routes/hello.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('hello', { title: 'Hello World!', text: 'This is a sample page.' });
});
module.exports = router;
テンプレートを作成
views/hello.ejs
views/hello.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p><%= text %></p>
</body>
</html>
app.jsに以下を追記
app.js
app.js
diff --git a/app.js b/app.js
index 62dff0d..68acca8 100644
--- a/app.js
+++ b/app.js
@@ -6,6 +6,7 @@ var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
+var helloRouter = require('./routes/hello');
var app = express();
@@ -21,6 +22,7 @@ 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) {
アプリケーションを起動
$ npm start
ブラウザからアクセス
http://localhost:3000/hello
以下が表示されればOK。
