express.jsでHello World - 株式会社BEFOOL ブログ

express.jsって？

express.jsはnode.jsベースのwebアプリフレームワークです。つまり、JavaScriptを使用したバックエンドフレームワークです。

express.jsを知る

準備

express.jsを使い始めるのはとても簡単です。コマンド叩くだけ！

npm install -g express-generator

-gはグローバルインストールという意味。npmが必要なので、詳しくはこの記事で参考してください。

新規プロジェクト

ターミナルでお気に入りのプロジェクト保存先に移動し、expressを叩くと、expressフレームワークのベースファイルとフォルダが作成されます。

cd path/to/project
express

すると：

   create : .
   create : ./package.json
   create : ./app.js
   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/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www
 
   install dependencies:
     $ cd . && npm install
 
   run the app:
     $ DEBUG=test-express ./bin/www

おめでとう、express.jsフレームワーク準備完了。アプリを起動してみよう。

パッケージをインストール

cd . && npm install

サーバー起動

DEBUG=test-express ./bin/www

test-expressは自分のプロジェクトフォルダ名です。

成功したら、下記の情報が表示されます

test-express Express server listening on port 3000 +0ms

もし3000というポートはすでに使われていれば、PORT=[好きなポート番号]をコマンドにつければ、ポートが変えられます。つまり上記のサーバー起動コマンドをこうします（例として3333にします）：

PORT=3333 DEBUG=test-express ./bin/www

お気に入りのブラウザを開いて、http://localhost:3000にアクセスしましょう。

express.js start screen

この画面が見れればexpress.jsもう正常に動いていますってこと！

中身をみてみよう

プロジェクトフォルダには下記のファイルとディレクトリーがあります。

ファイルorディレクトリー	説明
app.js	アプリ全体の設定と初期化コード
bin	コマンドツール
node_modules	`npm`でインストールしたパッケージは全部ここに保存されます
package.json	アプリのバージョンとパッケージ情報
public	公開フォルダ、フロント系のファイルはここに入ってます。
routes	ルータです。
views	テンプレートファイル

「あれ？controllerとmodelは？」OOP経験者はこういう疑問もあるでしょう。JavaScript自身はOOPよりもFP（Functional Programming）に近いので、他のOOPフレームワークとちょっと違います。もちろん、express.jsもMVCような開発できますが、この記事の範囲を超えたので、別記事で検討します。

app.js

app.jsの中身：

// 各パッケージをインポートする
// これはPHPのinclude, require
// Rubyのrequire, Pythonのimport
// C++の#include
// みたいなものです。
// npmでインストールしたパッケージはrequire(パッケージ名)だけでオッケー
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
 
// npmのパッケージ以外のモジュールは相対パースでrequireします
var routes = require('./routes/index');
var users = require('./routes/users');
 
// expressインスタンス
var app = express();
 
// テンプレートエンジンのセットアップ
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
 
// 各middleware
// middlewareはexpress.jsの中では非常に重要なパターンです。
// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
// 実はルーターもmiddlewareなんです。
// app.useでmiddlewareを追加することができます。
app.use('/', routes);
app.use('/users', users);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
 
// error handlers
 
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
 
// appを出力する
module.exports = app;

JavaScriptあまり触ってない方はこのfunctionいっぱいのコードを読むのが大変だと思いますが、これもJavaScriptという言語の特徴です。

hello world

routes中のindex.jsを開いて、module.exports = router;の直前に下記のコードを追加します。

// http://localhost:3000/helloというリクゥエストを受け取ります
router.get('/hello', function(req, res) {
  // req => request
  // res => response
  res.render('hello', { title: 'Hello Express', content: 'Hello World!' });
});

そして、下記のコードをviewsの中にhello.jadeというファイル名で保存します：

extends layout
 
block content
  p= content

アプリを再起動しましよう（ctrl+cで止めて、再起動します）。ブラウザを開いてhttp://localhost:3000/helloにアクセスすると：

Hello World

おめでとう、express.jsのHello World完成！

まとめ

express.jsのHello Worldをやりましたが、この程度って全然面白くないと思う人もいるだろうと思って、今度はexpress.jsのコードを解読する記事を書きます。また今度express.jsテンプレートエンジンや構造の話をして、いろんなことを試してみよう。