express.jsでHello World

ChainZ(クリエイター)
いろいろやってます。

express.jsって?

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

express.jsを知る

準備

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

1
npm install -g express-generator

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

新規プロジェクト

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

1
2
cd path/to/project
express

すると:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
   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フレームワーク準備完了。アプリを起動してみよう。

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

1
cd . && npm install

サーバー起動

1
DEBUG=test-express ./bin/www

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

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

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

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

1
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の中身:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
// 各パッケージをインポートする
// これは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;の直前に下記のコードを追加します。

1
2
3
4
5
6
// 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というファイル名で保存します:

1
2
3
4
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テンプレートエンジンや構造の話をして、いろんなことを試してみよう。