始めよう、Express
みなさんこんにちは。お酒を飲むと大抵記憶をなくす佐野です。前回 Node.js に関しての記事を書いたのですが、せっかくならそのフレームワークをちょっと使ってみようぜ！ということで、今回は有名な Express について、簡単な API を作成するところまでを書いていこうかなと思います。
Express とはなんぞや
Express とは、
Web アプリケーションとモバイル・アプリケーション向けの一連の堅固な機能を提供する最小限で柔軟な Node.js Web アプリケーション・フレームワークです。- 公式サイトより引用 –
非常にシンプルなフレームワークで、それ故に拡張性も高いです。
また、有名なフレームワークということもあり、ネットで検索すると情報がたくさん出てくるのが嬉しいところですね。
Express の他にもたくさん Node.js のフレームワークは存在するのですが、結構な量なのでその紹介はまた別の機会にでもできればいいかなと思います。
では早速 Express をインストールしていきましょう。
上でも述べましたが、今回は簡単な API を作成するところまでをやっていこうかなと思います。
環境
- OS : macOS High Sierra ver. 10.13.6
- Node.js : ver. 8.9.4
- Express : ver. 4.16.0
インストール
公式サイトを参考にインストールしてみます。
まずプロジェクトディレクトリを適当に作成し、そのディレクトリに移動します。
$ mkdir express-test
$ cd express-test
package.json を作成するために、 npm init をします。
$ npm init
色々聞かれますが、return キー連打で大丈夫です。
次に express と express-generator をインストールします。
$ npm install express
$ npm install -g express-generator
express-generator をインストールすることで express コマンドを使用することができるようになり、簡単にプロジェクトを作成することができます。まずはバージョンを確認してみましょう。
$ express --version
-bash: express: command not found
！？
express コマンドが使えない…だと…！？
ちょっと調べてみたらパスを通さないといけないみたいですね。パスは .bash_profile に以下の記述をします。
export PATH=/usr/local/share/npm/bin:$PATH
export NODE_PATH=/usr/local/lib/node_modules
変更を反映させ、再度確認しましょう。
$ vi ~/.bash_profile
$ express --version
4.16.0
大丈夫そうですね、一安心です。
プロジェクト作成
ではプロジェクトを作成しましょう。先ほど使用可能になった express コマンドを使用して、
$ express myapp
create : myapp
create : myapp/package.json
create : myapp/app.js
create : myapp/public
create : myapp/public/images
create : myapp/public/stylesheets
create : myapp/public/stylesheets/style.css
create : myapp/routes
create : myapp/routes/index.js
create : myapp/routes/users.js
create : myapp/views
create : myapp/views/index.jade
create : myapp/views/layout.jade
create : myapp/views/error.jade
create : myapp/bin
create : myapp/bin/www
install dependencies:
$ cd . && npm install
run the app:
$ DEBUG=myapp:* npm start
無事作成されました。
表示された通りのコマンド入力すると、サーバーが立ち上がるので、http://localhost:3000 にアクセスしてみます。
$ cd . && npm install
$ DEBUG=myapp:* npm start
> myapp@0.0.0 start /**********/express-test/myapp
> node ./bin/www
myapp:server Listening on port 3000 +0ms
TOP ページが表示されました。これで準備完了です。
API を作成してみる
では API を作っていきます。まず myapp/app.js を見てみましょう。
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
動作確認のためテストページを作成したいので、ルーティングの設定をします。以下の 2 行を myapp/app.js の 9 行目、24 行目に追加します。
var testRouter = require('./routes/test'); // 9 行目に追加
app.use('/test', testRouter); // 24 行目に追加
次に、 myapp/routes に test.js というファイルを作成し、以下の記述をします。
var express = require('express');
var router = express.Router();
/**
* GET
*/
router.get('/', function(req, res, next) {
var param = {"test":"テストページを作成したよ"};
res.send(param);
});
module.exports = router;
これで http://localhost:3000/test にアクセスしてやれば test.js で設定した json データが返却されるはずです。 実際にアクセスしてみましょう。
！？
Not Found だと…！？
そうなんです、Node.js の場合、ファイルに更新をかけた際にそのサーバを再起動させなければなりません。ですがいちいちサーバを手動で再起動するのは面倒なので、Nodemon を用いて、ファイルの更新を監視して自動で再起動するようにします。インストール自体は簡単で、
$ sudo npm install -g nodemon
でインストールされます。 npm start 時に起動する場合は、 package.json に以下の記述が必要です。
....
"scripts": {
"start": "nodemon -L ./bin/www"
},
...
control + C でサーバを停止し、再度 npm start してみましょう。すると以下のような表示に変わります。
$ npm start
> myapp@0.0.0 start /**********/express-test/myapp
> nodemon ./bin/www
[nodemon] 1.18.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./bin/www`
ファイルの更新を行うと、都度以下のようにログが流れ変更分が自動で反映されるようになりました。
[nodemon] restarting due to changes...
[nodemon] starting `node ./bin/www`
http://localhost:3000/test をみてみると…
無事表示できましたね。
さて、ちょっと話がずれてしまいましたが、API 作成の続きを行いましょう。
と言いたいところですが、続きは次回に。
まとめ
今回はパス指定を忘れていたり、ファイル更新が自動反映でされなかったりと、( 個人的に ) 結構つまづく点が多かったように思います。
express 自体はまだあまりさわれていないので使用感とかに関しての言及はできかねますが、API を一瞬で作成することができたので、やはり開発スピードは速いのではないかなぁと思います。
うーん奥が深い。もっともっといろいろ勉強していきたいですね。機会があれば他のフレームワークも使用してみたいです。
参考
Express – Node.js Web アプリケーション・フレームワーク
nodemon
npm install expressしてもexpress: command not foundとなる時の解決法 – Qiita
Node.js + ExpressでREST API開発を体験しよう［作成編］ – Qiita
Nodemon で Node.js のファイル更新時に自動再起動する – vistylee – テックプラスオン
