チュートリアル/2-バックエンド
#チュートリアル
なにをするの？
サーバで状態を保持するカウンターアプリを作るよ
https://scrapbox.io/files/60e489c8d81abd001c8b5dbe.png
使用技術は Node.js と Express だよ
完成ソースコードはここにあげてるよ
1. 準備
Node.js をインストールしてなかったらしてね
ターミナルを起動しよう
以下の説明では $ コマンド名 のようにLinuxコマンドを記述するよ
作業ディレクトリを作ろう
ディレクトリを移動しよう $ cd ./パス/
ディレクトリを作成しよう $ mkdir ディレクトリ名
VSCode を開こう $ code ディレクトリ名
Ctrl+Shift+@でターミナルを表示できるよ
Git の初期化
よくわからなかったらしなくてもおｋ
$ git init したあと、https://github.com/github/gitignore から Node の .gitignore を DL してね
Node.js プロジェクトの初期化
$ yarn init or $ npm initで package.json ファイルを作成する
なにか質問されたら，とりま全部Enterでおｋ
Express をインストールする
$ yarn add express or $ npm install express
2. サーバプログラムを書いていく
app.js というファイルを新規作成する
code:app.js
const express = require('express') // expressモジュールを読み込む
const app = express() // アプリケーションの動作を制御するオブジェクトを作成
const port = 3000 // ポート番号を指定
// ルートパスへのGETリクエストがあるたびに呼び出される処理を定義
app.get('/', (req, res) => {
res.send('Hello World!') // レスポンスするテキストやオブジェクトを指定
})
// 3000番ポートでサーバーを起動する
app.listen(port, () => {
console.log(Example app listening at http://localhost:${port})
})
参考 express Hello World
サーバを起動してみよう
$ node app.js
ブラウザで localhost:3000 にアクセスすると Hello World! と表示される！
3. カウンター用の状態変数を用意しよう
以下を追記し，サーバを再起動する
code:app.js
// カウントを保持する変数
let count = 0;
// increment動作確認用のページ
app.get("/counter/increment", (req, res) => {
count += 1;
res.send({ count });
});
// decrement動作確認用のページ
app.get("/counter/decrement", (req, res) => {
count -= 1;
res.send({ count });
});
確認してみよう
localhost:3000/count/increment にアクセスすると{"count": 数字}の値が増える
localhost:3000/count/decrement にアクセスすると減る
4. 表示部分を実装しよう
ejs をインストールしよう
$ yarn add ejs or $ npm install ejs
views というディレクトリを作成しよう
views ディレクトリ内に counter.ejs というファイルを作成しよう
code:counter.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>カウンター</title>
</head>
<body>
<h1>カウンター</h1>
<%= count %>
<form action="/counter/increment" method="POST">
<button type="submit">+</button>
</form>
<form action="/counter/decrement" method="POST">
<button type="submit">-</button>
</form>
</body>
</html>
EJSって？
サーバーで HTML を生成するためのテンプレート（テンプレートエンジン）
他にも Pug などがあるよ
基本的にはHTMLと同じ記法
一部だけ EJS 特有のタグで囲んで JavaScript のような記述ができる
今回の場合は <%= count %> の部分に変数count の値が入る
app.js に以下を追記する
code:app.js
app.get("/counter", (req, res) => {
res.render("counter.ejs", { count }); // counter.ejs をレンダリングする
});
// 指定したURLへのPOSTリクエストがあるたびに実行される処理を定義
app.post("/counter/increment", (req, res) => {
count += 1;
res.render("counter.ejs", { count });
});
app.post("/counter/decrement", (req, res) => {
count -= 1;
res.render("counter.ejs", { count });
});
確認してみよう
localhost:3000/counter にアクセスしてみよう
+ボタン，-ボタンを押すたびにページがリロードされ， カウントが増減する
まとめ
ExpressというNode.js上で動くWebアプリケーションフレームワークで実装したよ
アプリケーションの動作を制御するオブジェクトapp がもつメソッド(getやpost)で，
どのページで
どのリクエストがあったときに
どんな処理を行うか
を定義するだけで動くよ
アプリケーションより下のレイヤの実装は意識しなくても良いので楽ちん！
HTTP、TCP/IP、Ethernet ...