Webアプリケーションの正しい作り方（Vol.61記載）
著者：しょっさん
ソフトウエアを正しく作るために、エンジニアたちはどんなことを知らなければならない でしょうか。実際のコードを使って、より良くしていくためのステップを考えてみましょう。第2回は、プロジェクトを開始するまでの準備を解説します。
シェルスクリプトマガジン Vol.61は以下のリンク先でご購入できます。
図1 注釈を入れたプログラム
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
# 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}`); }) |