Tomute’s Notes Twitter

2014-05-14

[] Express入門をexpress 4.xで学ぶ場合のメモ

Express入門 (全21回) - プログラミングならドットインストールはExpress 3.xが前提となっているのだが、Express 4.xで学ぶ場合には少し気をつけなければならない所があるので、以下にメモしておく。

【補足】

この記事を書いた時から更に変更が加わっているため、本記事のコメントも参考にして下さい。


#02 expressコマンドを使おう | Express入門 - プログラミングならドットインストール

上記はexpressコマンドの使い方を学ぶ章であるが、Express 4.x以降はexpressコマンドのインストール方法が変わっているので注意が必要である。

$ sudo npm install express -g

演習では上記のコマンドを叩いているが、Express 4.x以降は以下のコマンドも実行する必要があった。

$ sudo npm install express-generator -g

$ node app

また、expressコマンドで作成したひな形アプリを起動するのに上記のコマンドを叩いているが、以下のコマンドに変更する必要がある。

$ npm start

#03 はじめてのExpress | Express入門 - プログラミングならドットインストール

app.jsの内容を一部修正する必要がある。具体的には以下。

var express = require('express'),
    app = express();
 
// app.use(app.router); この行が不要になった
 
app.get('/', function(req, res) {
    res.send('hello world');
});
app.get('/about', function(req, res) {
    res.send('about this page!');
});
 
app.listen(3000);
console.log("server starting...");

#06 middlewareを使ってみよう | Express入門 - プログラミングならドットインストール

レッスンではmiddlewareが有効になるかどうかは、app.use(app.router)より前か後ろかで決まるとなっている。

しかし、Express 4.xではapp.use(app.router)の記載が不要になっているので、middlewareが有効になるかどうかはapp.get()より前か後ろかで決まる模様。


#07 middlewareを作ってみよう | Express入門 - プログラミングならドットインストール

ログ情報をターミナルに出力するmiddleware(logger)はexpressにバンドルされなくなったようなので、後継であるmorganを使う(no title)。具体的には、まず以下のコマンドでmorganインストール

$ npm install morgan

次にコードを以下のように変更する。

var express = require('express'),
    morgan = require('morgan'),
    app = express();
 
// middleware
// app.use(express.logger('dev'));
app.use(morgan());  // app.use(morgan('short')); 等とするとログの出力量を減らすことが出来る。

なお、Migrating from 3.x to 4.xによると、自分で作るmiddlewareはapp.get()やapp.post()より後ろに記載すべきとなっている。


#10 POSTされたデータを受け取ろう | Express入門 - プログラミングならドットインストール

jsonとurlencodedの両middlewareもexpressにバンドルされていないので、後継であるbody-parserを使う。

$ npm install body-parser

コードは以下。

var express = require('express'),
    bodyParser = require('body-parser'),
    morgan = require('morgan'),
    app = express(),
    post = require('./routes/post');

// middleware
// app.use(express.json());
// app.use(express.urlencoded());
app.use(bodyParser());

#12 ルーティングを確認しよう | Express入門 - プログラミングならドットインストール

express.methodOverride()もexpressにバンドルされていないのでmethod-overrideもインストールする。

$ npm install method-override

コードは以下。

var express = require('express'),
    bodyParser = require('body-parser'),
    methodOverride = require('method-override'),
    morgan = require('morgan'),
    app = express(),
    post = require('./routes/post');

// middleware
// app.use(express.json());
// app.use(express.urlencoded());
// app.use(express.methodOverride());
app.use(bodyParser());
app.use(methodOverride());

#20 CSRF対策を施そう | Express入門 - プログラミングならドットインストール

ここでも同様にexpress.cookieParser()、express.session({secret: '***********'})、express.csrf()が使えないので、それぞれcsurfexpress-sessioncookie-parserインストールする。コードは割愛。


【参考資料】

kken0201kken0201 2015/03/14 22:58 最新版で勉強しようとしていたところ以上の問題にぶち当たりまくってたので助かりました。ありがとうございました!

tomutetomute 2015/03/15 22:42 ご参考になったようで何よりです。またよろしくお願いします。

なかやんなかやん 2015/08/09 02:03 参考になりました。ありがとうございます!

tomutetomute 2015/08/09 08:59 > なかやんさん
コメントありがとうございます。参考になったようで良かったです。

stakastaka 2016/02/10 20:17 大変参考になりました。ありがとうございます。
ただ、『#19 記事を更新/削除してみよう』のmethodOverride() の使い方も最近変わっているようです。
app.js では
app.use( methodOverride( "_method" ) );
edit.ejs では
<form method="post" action="/posts/<%= id %>?_method=PUT">
としないと、post を put に変換できません。
下記のページで解決しました。
http://chaika.hatenablog.com/entry/2015/10/06/183604

tomutetomute 2016/02/16 23:01 > stakaさん
おっと、そんな所も変わってるんですね。情報ありがとうございます!

SOCCERSOCCER 2016/06/08 11:27 ちなみに
> staka さんの内容に少しだけ補足すると、
削除する際にも
<form method="post" action="/posts/<%= i %>?_method=DELETE">
このように記述しないと削除が出来なかったので共有させてください!

tomutetomute 2016/06/10 22:43 > SOCCERさん
情報ありがとうございます。またまた変わったんですねw

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/tomute/20140514/1400075607
リンク元