【Node.js+Express】app.jsのルーティング定義をroutesに分割した際にエラーでハマった話【初心者向け】

こんにちは、Ryohei（@ityryohei）です！

最近Node.jsの勉強を始めました。

Node.js、めっちゃ面白いです。サーバーサイドはPHPをかじった程度ですので、ほぼ初心者からのスタートになります。

新しいことを始めるのは本当に楽しいです。もちろん最初はわからないことだらけでストレスを感じることもありますが、壁にぶちあたって、検索して、理解して、自分の知識として定着する、という過程が最高に気持ち良いですよね（伝われ）。

そんな初心者の私が「Node.js + Express」でウェブアプリケーションを構築を始めたのですが、日々壁にぶちあたっては長時間つまずいて無駄な時間を割いています。

本記事では、書けば書くだけ肥大化するapp.jsのルーティング定義をroutes配下にファイルとして分割した際にハマった話と、分かれば秒で解決する簡単すぎた解決方法をご紹介したいと思います。同様のエラーに苦しむ方の参考になれば幸いです。

では、お話していきます。

app.js内のルーティング定義をファイルに分割する

app.jsの詳細な内容は割愛しますが、下記のように指定していた「signup」のルーティング定義を「routes」の配下に新しくファイルを作成して移動します。

app.js

var express = require('express');
var app = express();

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

app.get('/signup', function(req, res) {
    res.render('signup', {
        title: 'サインアップ',
    });
});

app.post('/signup', function(req, res, next) {
～省略～
});

～省略～

app.use('/', indexRouter);
app.use('/users', usersRouter);

～省略～

module.exports = app;

分割後のファイルの中身はこんな感じになりました。

routes/signup.js

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

router.get('/signup', function(req, res) {
    res.render('signup', {
        title: 'サインアップ',
    });
});

router.post('/signup', function(req, res, next) {
～省略～
});

module.exports = router;

移動したルーティング定義はいらないので消し、分割したファイルを使用するために「app.js」を修正します。

app.js

var express = require('express');
var app = express();

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

～省略～

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/signup', signupRouter );

～省略～

module.exports = app;

これだけで見通しがかなり改善されました！満足げにターミナルでnpm startを実行します……が。

npm ERR! code ELIFECYCLE

赤い文字とともにターミナルに激怒さられます。動かないことにはしょうがないのですべてを元に戻すとちゃんと動きます。

なぜなのだろうと考えますが、そもそもNode.jsの知識なんてないので諦めてグーグル先生に泣きつき、公式ドキュメントを参考に片っ端から試して修正を続けたところ……無事に問題が解決しました！

結局なにがダメだったのか

下記のサンプルが大変参考になりました。

http://expressjs.com/en/guide/routing.html#express-router

結局のところ、app.jsのルーティング定義をそのまま持ってきたのが原因で、下記のように「signup.js」の「signup」を消したら無事に起動しました！

routes/signup.js

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

//動かない
//router.get('/signup', function(req, res) {
//動く
router.get('/', function(req, res) {
    res.render('signup', {
        title: 'サインアップ',
    });
});

//動かない
//router.post('/signup', function(req, res, next) {
//動く
router.post('/', function(req, res, next) {
～省略～
});

module.exports = router;

公式ドキュメントに感謝です！ほんとにありがとう！