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

#Expressとは

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

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


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

```JS:console
//myappというディレクトリを作成
$ mkdir myapp
//myappディレクトリに移動
$ cd myapp
```
続いて、package.jsonファイルを作成を作成します。

```JS:console
//package.jsonファイルを作成
$ npm init
```
質問にはすべてenterキーを押して大丈夫です。

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

```JS:console
//expressのインストール
$ npm install express --save
```

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

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

```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!'))
```
それでは以下のようにサーバーを起動します。

```JS:console
$ node app.js
> Example app listening on port 8000!
```
サーバーを起動したら、http://localhost:8000/ にアクセスしてみてください。

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

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

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

```JS:console
$ express --view=pug myapp2
```
すると、 以下のようにコンソールに表示されます。
これはひな形が自動的に作られたことを意味します。

```JS: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に移動し、必要な依存モジュールをインストールします。

```JS:console
$ cd myapp
$ npm install
```

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

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

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

```JS
.
├── 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メソッドで要求があった際には以下のようにします。

```JS
app.get('/index', (req, res) => {
  res.write('Hello World!');
});
```
以上は以下のような構造になっています。

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

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

```JS
app.use(express.static('public'));
```
これで、/public以下のファイルをブラウザから見ることができるようになります。

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

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

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




参考文献：[Express公式](http://expressjs.com/ja/guide/using-middleware.html)