Node.js＋ExpressでWebアプリケーション開発 第１回

#はじめに
仕事でNode.js＋Expressを使うことになったので、勉強したことをメモしていきます。

#環境
- node v14.16.1
- npm 6.14.12
- Visual Studio Code

#Expressとは
Node.js 向けの高速で最小限の Web フレームワークのことです。
詳しくは公式ドキュメントをご参照ください。
http://expressjs.com/ja/

#プロジェクトの作成
フォルダを作成してVSCodeで開いてください。

#各パッケージをインストール
[Ctrl]+@でターミナルを開き、expressとejsをプロジェクトにインストールする。

```
npm install express ejs
```

package.json を生成する

```
npm init
```

プロジェクトの下に「node_modules」と「package-lock.json」作成されればOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189598/c4460849-3291-dbb6-25ac-20ee3e54f3e6.png)

#各ファイルの作成とソースコード
以下のディレクトリ構成になるようフォルダ＆ファイルを作成します。

```
NodeExpTest
│  package-lock.json
│  package.json
│  server.js
├─node_modules
│  (省略)
├─public
│  ├─css
│  │  index.css
│  │      
│  ├─img
│  └─js
│     index.js
├─routes
│  index.js
└─views
   index.ejs
```

- server.js：Expressサーバの処理を定義。（一番初めに起動）
- public\css\index.css：index.ejsのCSSを定義。
- public\js\index.js：index.ejsのクライアント側の処理を定義。
- routes\index.js：index.ejsのサーバサイドの処理を定義。（Java相当）
- views\index.ejs：js：index.ejsの画面デザインを定義。（JSP相当）

```package.json
{
  "name": "nodeexptest",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "MIT"
}
```

```server.js
const express = require('express');

// express の実態 Application を生成
const app = express();
const port = 3000;

// テンプレートエンジンを EJS に設定
app.set('views', './views');
app.set('view engine', 'ejs');
 
// 静的ファイルは無条件に公開
app.use('/public', express.static('public'));
 
// ルーティング設定
app.use('/', require('./routes/index.js'));

// HTTPサーバを起動する
app.listen(port, function () {
  console.log(`listening at http://localhost:${port}`);
});
 
// アプリケーション開始ログ
console.log(`Server running at http://localhost:${port}`);
```

```routes\index.js
const express = require('express');
const router = express.Router();
 
// デフォルトルーティング
router.get('/', function (request, response) {
    response.render('index', { title: 'Sample NodeExpTest', message: 'Hello World!' });
});

module.exports = router;
```

```views\index.ejs
<!DOCTYPE html>
<html lang="ja">
    <head>
        <title><%= title %></title>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/public/css/index.css" />
        <script type="text/javascript" src="/public/js/index.js"></script>
    </head>
    <body>
        <div class="container">
            <p><%= message %></p>
        </div>
    </body>
</html>
```


#実行とデバッグ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189598/46b54404-8cdf-c07f-66b7-0b9305e5df72.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189598/f34a941e-9662-7136-6ccf-382d3505b9b3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189598/49a0a68a-9590-4584-115e-d24de56ac690.png)

作成されたlaunch.jsonを以下の通り設定します。

```launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Express",
            "program": "${workspaceFolder}\\server.js"
        }
    ]
}
```

F5をクリックし、実行します。
ブラウザを起動して、[http://localhost:3000/](http://localhost:3000/)にアクセスして以下のような画面が表示されればOKです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189598/bc46eebf-358e-92e8-1933-9825277c99f0.png)

また、server.jsやroutes\index.jsにブレークポイントを立てて、再度デバッグ実行してみましょう。
デバッグできれば成功です。

ひとまず、今回はここまで。
次回はGETとPOSTにチャレンジしたいと思います。
（続きはこちら）
https://qiita.com/pocota5260/items/6f972b4455f609dbfeec

ソースコードはこちら。
https://github.com/pocota5260/NodeExpTest