Expressフレームワークのインストールと簡単な使い方

Expressとは

Expressは、Node.jsのフレームワークで、以下の特徴があります。
・セキュリティ性能が高い。
・無数のHTTPに関連するメソッドとミドルウェアを使用できる。
・セキュリティ性能の高いAPIがすばやく簡単に作成できる。
・Node.jsの機能を分かりづらくすることがない。
Express公式サイト

英語翻訳なので分かりづらいと思いますが、Node.jsのアプリが「簡単に、素早く、安全に」作れるという認識で大丈夫だと思います。

Expressでサーバーを起動する。

公式サイトを見れば、わかるのですが、以下のようにインストールをします。
まずはアプリを保存するディレクトリを作成します。

console

//myappというディレクトリを作成
$ mkdir myapp
//myappディレクトリに移動
$ cd myapp

続いて、package.jsonファイルを作成を作成します。

console

//package.jsonファイルを作成
$ npm init

質問にはすべてenterキーを押して大丈夫です。

続いて以下のようにexpressをインストールします。
--saveを使うことで、package.jsonにexpressのバージョン情報などが書き込まれます。

console

//expressのインストール
$ npm install express --save

これでexpressのインストールが完了しました。
それでは、以下のようにexpressの基準となるapp.jsに移動します。

console

$ cd app.js

続いて、app.jsでサーバーを起動するための記述をしていきます。

app.js

//expressモジュールを使えるように設定
const express = require('express')
//expressモジュールを利用しアプリケーションオブジェクトappを作成
const app = express()

// HTTPgetメソッドでアクセスしたら、'Hello World!'と表示される設定。
app.get('/', (req, res) => {
  res.send('Hello World!')
})

//サーバーを起動したら、リクエストを8000番ポートで待ち受ける設定。
app.listen(8000, () => console.log('Example app listening on port 8000!'))

それでは以下のようにサーバーを起動します。

console

$ node app.js
> Example app listening on port 8000!

サーバーを起動したら、http://localhost:8000/ にアクセスしてみてください。

Expressジェネレーターを使う。

以上のようにサーバーを起動しても良いのですが、expressには、ジェネレーターというひな形作成モジュールがあります。ここで言う、ひな形とは、アプリ作成に必要な機能がセットになったものを指します。

それでは、ジェネレーターを使っていきます。以下のように、express-generatorをグローバルインストールします。

console

$ npm install express-generator -g

インストールが完了したら、下記コマンドでアプリケーションのひな形を作成します。
--view=pugで、views内のファイルにpugというテンプレートエンジンを使う設定になります。

console

$ express --view=pug myapp2

すると、 以下のようにコンソールに表示されます。
これはひな形が自動的に作られたことを意味します。

console

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www

続いて、myappに移動し、必要な依存モジュールをインストールします。

console

$ cd myapp
$ npm install

これでひな形が完成しました。
サーバーを起動していきましょう。

console

$ DEBUG=myapp:* PORT=8000 npm start

このコマンドは、
DEBUGという環境変数にmyapp:*という値を設定し、myapp:とついたログが表示されるようにしています。
PORTという環境変数に8000という値を設定し、8000番ポートでサーバーが待ち受けるようにしています。
npm startは、サーバーを起動するという意味になります。
サーバーを起動したら、http://localhost:8000/ にアクセスしてみてください。
Express Welcome to Expressと表示されたら成功です。

続いて、自動生成されたひな形を見ていきます。

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.pug
    ├── index.pug
    └── layout.pug

app.jsはサーバーなどを起動する基本ファイルです。
bin/www は、サーバー起動などの情報が書き込まれています。
publicディレクトリには、画像や、クライアントJavaScript、CSSなどの静的ファイルが格納されています。
routesディレクトリには、ルーティングを行うファイルが格納されます。
viewsディレクトリには、pugテンプレートファイルが格納されています。主にhtmlのような画面上での役割を果たします。

次に簡単なルーティングを見ていきます。
ルーティングとは、クライアントの要求に応じて処理を振り分けることです。
例えば、/indexにGETメソッドで要求があった際には以下のようにします。

app.get('/index', (req, res) => {
  res.write('Hello World!');
});

以上は以下のような構造になっています。

app.METHOD(PATH, HANDLER)

app は、expressのアプリケーションオブジェクトのインスタンスです。
アプリケーションオブジェクトのインスタンスは、use関数を使うことで、ミドルウェアやルーティングを使うことができます。
METHOD は、HTTP要求メソッド です。
PATH は、サーバー上のパスです。
HANDLER は、ルートが一致したときに実行される関数です。

最後に、静的ファイルの取り扱い方についてです。
image、CSS、JavaScriptなどの静的ファイルを利用するには、Expressに標準実装されているexpress.staticミドルウェア関数を使用します。

app.use(express.static('public'));

これで、/public以下のファイルをブラウザから見ることができるようになります。

http://localhost:8000/css/style.css にアクセスしてみてください。
style.cssの中身が表示されるはずです。

おまけ ミドルウェアの使い方

ミドルウェアは、標準装備かサードパーティ（helmetなど) 製のものがあり
、Expressの機能を拡張してくれるモジュールのことを指します。
helmetだったら、以下のように使います。

var helmet = require('helmet');
app.use(helmet());

参考文献：Express公式