Webアプリケーションの正しい作り方（Vol.61記載）

著者：しょっさん

ソフトウエアを正しく作るために、エンジニアたちはどんなことを知らなければならないでしょうか。実際のコードを使って、より良くしていくためのステップを考えてみましょう。第2回は、プロジェクトを開始するまでの準備を解説します。

シェルスクリプトマガジン Vol.61は以下のリンク先でご購入できます。

図1　注釈を入れたプログラム

# Node.js（Javascript）でプログラムは書かれている
# Expressフレームワークを利用している
const express = require('express');
const app = express()

# SequelizeフレームワークでModelを利用している
const models = require('./models');
const expenses = models.expense;

# POSTデータをパーシングするためのライブラリを利用している
const bodyParser = require('body-parser');

# セッション管理にCOOKIEを利用しているが、特にステートは保管していない
const cookieParser = require('cookie-parser');
const session = require('express-session');
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({
  secret: 'secret',
  resave: false,
  saveUninitialized: false,
  cookie: {
    maxAge: 24 * 30 * 60 * 1000
  }
}));

# ユーザー情報をプログラムに埋め込んでいる
const users = {
  'user01': 'p@ssw0rd',
  'user02': 'ewiojfsad'
};

# /loginへアクセスするとログイン機能を利用できる (HTMLがべた書き)
app.get('/login', (req, res) => {
  res.send('<h1>LOGIN</h1><form action="/login" method="post">ユーザーID：<input type="text" name="user" size="40"><br />パスワード<input type="password" name="password"><input type="submit" value="ログイン">');
});
# ログインに成功しても、失敗しても、画面上は特に何も起きない
app.post('/login', (req, res) => {
  if (eval("users." + req.body.user) === req.body.password) {
    req.session.user = req.body.user;
  }
  res.redirect('/');
});

# /expenseへPOSTすると経費を登録できるが、特にエラー処理はない
app.post('/expense', (req, res) => {
  expenses.create(req.body)
    .then(() => {
      res.redirect('/');
    });
});

# /へアクセスすると誰でも経費の一覧が見られる。ログイン・経費入力フォームへのリンクを表示 (HTMLがべた書き)
app.get('/', (req, res) => {
  const user = req.session.user || '名無しの権兵衛';
  res.writeHead(200, { "Content-Type": "text/html" });
  res.write(`<h1>Hello ${user}</h1><table><tr><th>ID</th><th>申請者名</th><th>日付</th><th>経費タイプ</th><th>経費詳細</th><th>金額</th></tr>`);
  expenses.findAll()
    .then(results => {
      for (let i in results) {
        res.write(`<tr><td>{results[i].id}</td><td>{results[i].user_name}</td><td>{results[i].date}</td><td>{results[i].type}</td><td>{results[i].description}</td><td>{results[i].amount}</td></tr>`);
      }
      res.write('</table><a href="/login">ログイン</a><a href="/submit">経費入力</a>');
      res.end();
    });
});

# /submitへアクセスすると、経費入力フォームが表示される (HTMLがべた書き)
app.get('/submit', (req, res) => {
  const user = req.session.user || '名無しの権兵衛';
  res.send(`<h2>経費入力</h2><form action="/expense" method="post">申請者名:<input type="text" name="user_name" value="${user}"><br />日付:<input type="date" name="date"><br />経費タイプ:<input type="text" name="type"><br />経費詳細:<input type="text" name="description"><br />金額:<input type="number" name="amount"><br /><input type="submit" value="経費申請">`);
});

# Webアプリケーションサーバーとして起動する
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`http://localhost:${port}`);
})

# Node.js（Javascript）でプログラムは書かれている

# Expressフレームワークを利用している

const express = require('express');

const app = express()

# SequelizeフレームワークでModelを利用している

const models = require('./models');

const expenses = models.expense;

# POSTデータをパーシングするためのライブラリを利用している

const bodyParser = require('body-parser');

# セッション管理にCOOKIEを利用しているが、特にステートは保管していない

const cookieParser = require('cookie-parser');

const session = require('express-session');

app.use(cookieParser());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(session({

secret: 'secret',

resave: false,

saveUninitialized: false,

cookie: {

maxAge: 24 * 30 * 60 * 1000

}

}));

# ユーザー情報をプログラムに埋め込んでいる

const users = {

'user01': 'p@ssw0rd',

'user02': 'ewiojfsad'

};

# /loginへアクセスするとログイン機能を利用できる (HTMLがべた書き)

app.get('/login', (req, res) => {

res.send('<h1>LOGIN</h1><form action="/login" method="post">ユーザーID：<input type="text" name="user" size="40"><br />パスワード<input type="password" name="password"><input type="submit" value="ログイン">');

});

# ログインに成功しても、失敗しても、画面上は特に何も起きない

app.post('/login', (req, res) => {

if (eval("users." + req.body.user) === req.body.password) {

req.session.user = req.body.user;

}

res.redirect('/');

});

# /expenseへPOSTすると経費を登録できるが、特にエラー処理はない

app.post('/expense', (req, res) => {

expenses.create(req.body)

.then(() => {

res.redirect('/');

});

# /へアクセスすると誰でも経費の一覧が見られる。ログイン・経費入力フォームへのリンクを表示 (HTMLがべた書き)

app.get('/', (req, res) => {

const user = req.session.user || '名無しの権兵衛';

res.writeHead(200, { "Content-Type": "text/html" });

res.write(`<h1>Hello ${user}</h1><table><tr><th>ID</th><th>申請者名</th><th>日付</th><th>経費タイプ</th><th>経費詳細</th><th>金額</th></tr>`);

expenses.findAll()

.then(results => {

for (let i in results) {

res.write(`<tr><td>{results[i].id}</td><td>{results[i].user_name}</td><td>{results[i].date}</td><td>{results[i].type}</td><td>{results[i].description}</td><td>{results[i].amount}</td></tr>`);

}

res.write('</table><a href="/login">ログイン</a><a href="/submit">経費入力</a>');

res.end();

});

# /submitへアクセスすると、経費入力フォームが表示される (HTMLがべた書き)

app.get('/submit', (req, res) => {

const user = req.session.user || '名無しの権兵衛';

res.send(`<h2>経費入力</h2><form action="/expense" method="post">申請者名:<input type="text" name="user_name" value="${user}"><br />日付:<input type="date" name="date"><br />経費タイプ:<input type="text" name="type"><br />経費詳細:<input type="text" name="description"><br />金額:<input type="number" name="amount"><br /><input type="submit" value="経費申請">`);

});

# Webアプリケーションサーバーとして起動する

const port = process.env.PORT || 3000;

app.listen(port, () => {

console.log(`http://localhost:${port}`);

})