More than 3 years have passed since last update.

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

Last updated at 2021-05-01Posted at 2021-04-30

#はじめに
仕事で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。

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

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>

#実行とデバッグ

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

launch.json

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

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

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

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