express-generatorを読み解く その1

ちょっと **node.js** を使う用事ができたので、手始めに **express** とやらを読み解いてみようと思いました。

# node 公式サイト
[Node.js 日本ユーザーグループ](http://nodejs.jp/)
[Express](http://expressjs.com/ja/)
└ [Express のアプリケーション生成プログラム](http://expressjs.com/ja/starter/generator.html)


# 環境
|| version |
|:---:|---:|
| OS | macOS Sierra (10.12.4) |
| node.js | v7.9.0 |
| npm | 4.2.0 |
| express | 4.15.2 |
| express-generator | 4.15.0 |


# express-generatorとは
**node.js** の有名な(もはやデファクト)フレームワークである **express** を用いたアプリケーションがコマンドひとつで生成できるよ、と言う便利プログラム。


# express コマンド概要
とりあえず、`--help` を叩いてみる。

```bash
$ express --help

  Usage: express [options] [dir]

  Options:

    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory
```

オプションで **viewエンジン** や **stylesheetエンジン** の指定もできるらしい。
使ってみて地味に便利だったのが、 `--git` オプション。
`.gitignore` ファイルを自動で生成してくれて、リポジトリがスッキリ。

とりあえずやってみたい という人は

```bash
$ express
```

だけ打てば、全てデフォルト値で、
**sass** 使いたいんだよね！と言う人は

```bash
$ express -c sass
```

とすると **sass** を使うアプリケーションを生成してくれる。


# 基本的なアプリケーションを作ってみる

```bash
$ express ./otameshi
```

このコマンドを打つと、カレントディレクトリに `otameshi` ディレクトリを作って、その中に色々盛り込んでくれる。

```bash
$ express ./otameshi

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


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

   install dependencies:
     $ cd otameshi && npm install

   run the app:
     $ DEBUG=otameshi:* npm start
```

こんな感じ。色々生成されているのがわかる。
**jade** は商標だかの関係で **pug** と可愛く名前を変えているせいか `WARN` が出ているが、無視して大丈夫。

指示通り

```
$ cd otameshi && npm install
```

を実行してみる。

```bash
$ cd otameshi && npm install
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
otameshi@0.0.0 /Users/ishiguro/Documents/asobi/otameshi
├─┬ body-parser@1.17.1 
│ .
├─┬ cookie-parser@1.4.3 
│ .
├─┬ debug@2.6.4 
│ .
├─┬ express@4.15.2 
│ .
├─┬ jade@1.11.0 
│ .
├─┬ morgan@1.8.1 
│ .
└─┬ serve-favicon@2.4.2 
  .
```

最初の2つの`WARN`に関しては、パッケージ古いけど大丈夫？的なやつで、nodeがよしなに解決してくれていそうなので、こちらも無視して大丈夫。

さらに指示通り

```bash
$ DEBUG=otameshi:* npm start
```

を実行してみる。

```bash
$ DEBUG=otameshi:* npm start

> otameshi@0.0.0 start /Users/ishiguro/Documents/asobi/otameshi
> node ./bin/www

  otameshi:server Listening on port 3000 +0ms
```

この状態で `http://localhost:3000/` にアクセスをすると

![Express.png](https://qiita-image-store.s3.amazonaws.com/0/76237/fa5b28e6-b428-339f-bbbb-65d4674b3bf0.png)

こんな感じの真っ白シンプルなページが表示される。
ログにも

```
GET / 304 442.500 ms - -
GET /stylesheets/style.css 200 13.251 ms - 111
```

こんな感じで表示されている。
できてるぽい。

長くなりそうなので、読み解きは その2(未執筆) で。


> ### 参考URL
> [Express のアプリケーション生成プログラム](http://expressjs.com/ja/starter/generator.html)