Node.jsを使ってWebアプリケーションを作るための流れ - Expressで構築してみよう 編 -

# 前回の記事の続きです！

↓の記事の続きです。
[Node.jsを使ってWebアプリケーションを作るための流れ - 事前知識 & ベタ書きで書いてみる 編 -](https://qiita.com/don-bu-rakko/items/b74b9a353ecaf7ac54a8)

前回、httpモジュールを読み込んでサーバーをベタ書きで起動する方法についてまとめました。
今回は、Node.jsで有名なWebフレームワーク、**Express**を用いてサイトの構築を行ってみたいと思います。

node.jsがインストールされてない人は予めインストールしておいてくださいね！確認の方法などについては前回の記事を参照してください〜〜


# Expressをインストール

では、まずはExpressをインストールしちゃいましょう。
まずは`--version`オプションでexpressがインストール済みかどうかを確認してください。

```
$ express --version
4.16.0
```

バージョンが出てこない場合は、Expressをインストールしましょう。
よく使う場合は、`-g`オプション(グローバルにインストールする)をつけちゃいましょう。私は`-g`オプションでインストールしてしまっています。

```
$ npm install -g express
```

そして、公式で準備してくれている`express-generator`もインストールしておきます。
https://expressjs.com/ja/starter/generator.html

```
$ npm install -g　express-generator
```

これで準備は完了です。

# プリセットを作成

では、`express`を使って実際にアプリを作ってみましょう。

任意のディレクトリで、下記コマンドを実行します。

```
$ express [任意のアプリ名]
```

今回は`first_app`という名前で作成します。

```
$ express first_app

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


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

   change directory:
     $ cd first_app

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=first-app:* npm start
```

すると、`first_app`というディレクトリができているので、指示に従って下記コマンドを実行します。

```
$ cd first_app
$ npm install
```

これでセットアップは完了です。
では、実際にexpressを実行してみましょう。`DEBUG=first-app:* npm start`を実行しましょう。
必ず`first_app`のディレクトリの中で実行してくださいね！

```
$ DEBUG=first-app:* npm start

> first-app@0.0.0 start /hoge/first_app
> node ./bin/www

  first-app:server Listening on port 3000 +0ms
```

こんな感じの画面になったら成功です。
では、この状態のまま http://localhost:3000 にアクセスしてみましょう。


こんな画面が出たら成功しています！簡単ですね！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/4aeaafbb-3845-e888-dcc7-3235a83553ba.png)

ターミナル上でも `200`が返されている事が確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/b2dbc9fc-da0d-cbd9-c0da-9634cec7bacc.png)

ちなみに、 http://localhost:3000/users にアクセスするとこんな画面になっているはずです。これ、あとで使うので覚えといてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/80a4d7ce-d24c-9b50-244c-acf3bedc7ac4.png)


前回の苦労はなんだったんだ。。。

試しに`/routes/index.js/`の中身を書き換えてみましょう。

```javascript:/routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
-  res.render('index', { title: 'express' });
+  res.render('index', { title: 'どんぶラッコ' });
});

module.exports = router;
```

保存したら、サーバーを止めて再度立ち上げ、 http://localhost:3000 にアクセスしてみましょう。
ターミナル上で`ctrl + c`を押す事でサーバーを止められます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/319121aa-c403-924f-fc6d-be4b1f988950.png)

表示が変わりましたね！

# ファイル構成

ファイル構成を確認しましょう。`node_modules`を除いた形で`tree`コマンドします。

```
$ tree -I 'node_modules'
.
├── app.js
├── bin
│   └── www
├── package-lock.json
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── index.jade
    └── layout.jade
```

すごくシンプルな構成ですね。

- app.js
    - httpアクセスがあった時の処理部分です
- /routes
    - ルーティング処理が書かれています
- /public
    - 画像やCSSなどの静的ファイルの置き場所です
- /views
    - 描画のための`.jade`ファイルが配置されています。私はAPIサーバーとしてしかnode.jsを使った事がないのではいじった事がありませんが、、

JADEを使わない、という方であれば、基本的に上３つをこねくり回せばOKです。

# ルーティング処理

今回は最後に http://localhost:3000/rakko にアクセスできるようにして、終わりにしようと思います。

`/routes`ディレクトリをみてください。`index.js`と`users.js`があるはずです。
先ほど、 http://localhost:3000/users にアクセスしたら、コンテンツが表示されましたよね？
そうです、それは`/routes`にすでに`users.js`が用意されていたからなんですね！

という事は、`rakko.js`を作ればルーティング処理してくれるのでは！？

早速、`/routes/rakko.js`というファイルを作ってみましょう。コードについては`users.js`をパクってきましょう。

```javascript:/routes/rakko.js
var express = require('express');
var router = express.Router();

/* GET ラッコ listing. */
router.get('/', function(req, res, next) {
  res.send('ラッコだよ！');
});

module.exports = router;
```

しかし、これだけでは Not Foundになってします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/b2b2ac10-cadd-3e5c-f1fa-ec6f269a4417.png)


何故ならば、**app.jsにrakko.jsがあるよ！と伝えていない**からです。

という事で`app.js`に処理を追記しましょう。

8行目付近に`var rakkoRouter = require('./routes/rakko');`を追記し

```javascript
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var rakkoRouter = require('./routes/rakko');
```

24行目付近に`app.use('/rakko', rakkoRouter);`を追記しましょう。

```javascript
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/rakko', rakkoRouter);
```

改めてサーバーを起動しましょう。
すると、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/c0e53946-aa24-ccc3-c4fc-7e346e88ebd4.png)

ちゃんと表示されました！

```
$ DEBUG=first-app:* npm start

> first-app@0.0.0 start /hoge/first_app
> node ./bin/www

  first-app:server Listening on port 3000 +0ms
GET /rakko 200 6.781 ms - 18
```

通信も良好ですね。

# 補足：

ちなみにこのルーティングについてですが、こんな書き方をしても動作します。
`routes/index.js`に下記を追記してみてください。

```javascript:routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'どんぶラッコ' });
});

+ router.get('/rakko2', function(req, res, next) {
+   res.send('ラッコ2だよ！');
+ });

module.exports = router;
```

その上で、http://localhost:3000/rakko2 にアクセスすると、ちゃんと表示されている事がわかります。動かないよ！って人はサーバー再起動したか、確認してくださいね

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241647/cf7f4a56-57e9-8eaa-6ff6-5a60907ae329.png)

app.jsに処理を追記しなくても動きました！

「じゃあもうこれでいいじゃん！」と思われるかもしれません。
確かに、これくらいミニマムなアプリケーションであればこの対応でも問題ありませんが、ページ数をどんどん増やしていった時に、**index.jsが長くなりすぎて処理がわかりづらくなってしまいます。**

例えば、本屋さんにいった時、「漫画コーナー」「ビジネス書コーナー」「参考書コーナー」というように、大きくジャンル分けされているから自分が欲しい本の場所を把握できますよね。これがもし、なんのジャンル分けもされておらず、雑多に並べられているだけだったら、自分が欲しい本の場所なんてわかるはずがありませんよね？

今のうちから整理整頓をする手法を身につけておいたほうが、今後の自分の為になります！この段階から慣れておきましょう！！