前回の記事の続きです！
↓の記事の続きです。
Node.jsを使ってWebアプリケーションを作るための流れ - 事前知識 & ベタ書きで書いてみる 編 -
前回、httpモジュールを読み込んでサーバーをベタ書きで起動する方法についてまとめました。
今回は、Node.jsで有名なWebフレームワーク、Expressを用いてサイトの構築を行ってみたいと思います。
node.jsがインストールされてない人は予めインストールしておいてくださいね！確認の方法などについては前回の記事を参照してください〜〜
Expressをインストール
では、まずはExpressをインストールしちゃいましょう。
まずは--versionオプションでexpressがインストール済みかどうかを確認してください。
$ express --version
4.16.0
バージョンが出てこない場合は、Expressをインストールしましょう。
よく使う場合は、-gオプション(グローバルにインストールする)をつけちゃいましょう。私は-gオプションでインストールしてしまっています。
$ npm install -g express
そして、公式で準備してくれているexpress-generatorもインストールしておきます。
https://expressjs.com/ja/starter/generator.html
$ npm install -g express-generator
これで準備は完了です。
プリセットを作成
では、expressを使って実際にアプリを作ってみましょう。
任意のディレクトリで、下記コマンドを実行します。
$ express [任意のアプリ名]
今回はfirst_appという名前で作成します。
$ express first_app
warning: the default view engine will not be jade in future releases
warning: use `--view=jade' or `--help' for additional options
create : first_app/
create : first_app/public/
create : first_app/public/javascripts/
create : first_app/public/images/
create : first_app/public/stylesheets/
create : first_app/public/stylesheets/style.css
create : first_app/routes/
create : first_app/routes/index.js
create : first_app/routes/users.js
create : first_app/views/
create : first_app/views/error.jade
create : first_app/views/index.jade
create : first_app/views/layout.jade
create : first_app/app.js
create : first_app/package.json
create : first_app/bin/
create : first_app/bin/www
change directory:
$ cd first_app
install dependencies:
$ npm install
run the app:
$ DEBUG=first-app:* npm start
すると、first_appというディレクトリができているので、指示に従って下記コマンドを実行します。
$ cd first_app
$ npm install
これでセットアップは完了です。
では、実際にexpressを実行してみましょう。DEBUG=first-app:* npm startを実行しましょう。
必ずfirst_appのディレクトリの中で実行してくださいね！
$ DEBUG=first-app:* npm start
> first-app@0.0.0 start /hoge/first_app
> node ./bin/www
first-app:server Listening on port 3000 +0ms
こんな感じの画面になったら成功です。
では、この状態のまま http://localhost:3000 にアクセスしてみましょう。
こんな画面が出たら成功しています！簡単ですね！
ターミナル上でも 200が返されている事が確認できます。
ちなみに、 http://localhost:3000/users にアクセスするとこんな画面になっているはずです。これ、あとで使うので覚えといてください。
前回の苦労はなんだったんだ。。。
試しに/routes/index.js/の中身を書き換えてみましょう。
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
- res.render('index', { title: 'express' });
+ res.render('index', { title: 'どんぶラッコ' });
});
module.exports = router;
保存したら、サーバーを止めて再度立ち上げ、 http://localhost:3000 にアクセスしてみましょう。
ターミナル上でctrl + cを押す事でサーバーを止められます。
表示が変わりましたね！
ファイル構成
ファイル構成を確認しましょう。node_modulesを除いた形でtreeコマンドします。
$ tree -I 'node_modules'
.
├── app.js
├── bin
│ └── www
├── package-lock.json
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
すごくシンプルな構成ですね。
- app.js
- httpアクセスがあった時の処理部分です
- /routes
- ルーティング処理が書かれています
- /public
- 画像やCSSなどの静的ファイルの置き場所です
- /views
- 描画のための
.jadeファイルが配置されています。私はAPIサーバーとしてしかnode.jsを使った事がないのではいじった事がありませんが、、
- 描画のための
JADEを使わない、という方であれば、基本的に上３つをこねくり回せばOKです。
ルーティング処理
今回は最後に http://localhost:3000/rakko にアクセスできるようにして、終わりにしようと思います。
/routesディレクトリをみてください。index.jsとusers.jsがあるはずです。
先ほど、 http://localhost:3000/users にアクセスしたら、コンテンツが表示されましたよね？
そうです、それは/routesにすでにusers.jsが用意されていたからなんですね！
という事は、rakko.jsを作ればルーティング処理してくれるのでは！？
早速、/routes/rakko.jsというファイルを作ってみましょう。コードについてはusers.jsをパクってきましょう。
var express = require('express');
var router = express.Router();
/* GET ラッコ listing. */
router.get('/', function(req, res, next) {
res.send('ラッコだよ！');
});
module.exports = router;
しかし、これだけでは Not Foundになってします。
何故ならば、app.jsにrakko.jsがあるよ！と伝えていないからです。
という事でapp.jsに処理を追記しましょう。
8行目付近にvar rakkoRouter = require('./routes/rakko');を追記し
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var rakkoRouter = require('./routes/rakko');
24行目付近にapp.use('/rakko', rakkoRouter);を追記しましょう。
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/rakko', rakkoRouter);
改めてサーバーを起動しましょう。
すると、
ちゃんと表示されました！
$ DEBUG=first-app:* npm start
> first-app@0.0.0 start /hoge/first_app
> node ./bin/www
first-app:server Listening on port 3000 +0ms
GET /rakko 200 6.781 ms - 18
通信も良好ですね。
補足：
ちなみにこのルーティングについてですが、こんな書き方をしても動作します。
routes/index.jsに下記を追記してみてください。
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'どんぶラッコ' });
});
+ router.get('/rakko2', function(req, res, next) {
+ res.send('ラッコ2だよ！');
+ });
module.exports = router;
その上で、http://localhost:3000/rakko2 にアクセスすると、ちゃんと表示されている事がわかります。動かないよ！って人はサーバー再起動したか、確認してくださいね
app.jsに処理を追記しなくても動きました！
「じゃあもうこれでいいじゃん！」と思われるかもしれません。
確かに、これくらいミニマムなアプリケーションであればこの対応でも問題ありませんが、ページ数をどんどん増やしていった時に、index.jsが長くなりすぎて処理がわかりづらくなってしまいます。
例えば、本屋さんにいった時、「漫画コーナー」「ビジネス書コーナー」「参考書コーナー」というように、大きくジャンル分けされているから自分が欲しい本の場所を把握できますよね。これがもし、なんのジャンル分けもされておらず、雑多に並べられているだけだったら、自分が欲しい本の場所なんてわかるはずがありませんよね？
今のうちから整理整頓をする手法を身につけておいたほうが、今後の自分の為になります！この段階から慣れておきましょう！！