Node.js(Express)で簡単なブログサービスを作る #1 公式ドキュメント
参考リポジトリ
1. 作業ディレクトリと必要なモジュールを整える
任意のシェルウィンドウ(ターミナルやコマンドプロンプト)で作業します
mkdir simple-diary を実行して作業ディレクトリを作成
simple-diaryの中で npm init を実行
プロンプトで色々聞かれるので全部Enterを押しておく
最後に Is this OK? (yes) と出るので yes と入力
ls を実行して package.json ができていることを確認
npm install -s express を実行してexpressをインストールする
捕捉
package.json は npm というNode.js のパッケージ管理ツールが依存しているモジュールなどを記録しておくファイル
2. まずはHello, World!
プログラミングを始めると必ずやらされる儀式こと「Hello, World!」を今回もやっていきます
ここからはVSCodeで simple-diary ディレクトリを開いて作業します(simple-diary のなかで code ./ とすると開ける)
※ これ以降 基本的にMac向けのコマンドなどを書くので Cmd は Winでは Ctrl に適宜読み替えてください
Cmd + N で新規ファイルを作成
Cmd + S でファイルの保存ができるので server.js という名前を付けて保存
server.js の中身は以下のようにする(コメントは適宜消してください)
code:server.js
// expressモジュールの読み込み
const express = require("express");
// expressでサーバを立てる時のおまじない
const app = express();
// サーバーのどのポートでHTTPリクエストを待ち受けるのかを決める
const port = 3000;
// 'localhost:3000/ に GETリクエストが来た時 response を Hello Worldにして返す'
app.get("/", (req, res) => res.send("Hello World!"));
app.listen(port, () => console.log(Example app litening on port ${port}!));
node server.js を実行して ブラウザで を開いてみる 3. 簡単なルーティングを試してみる
server.js を編集
code:server.js
const express = require("express");
const app = express();
const port = 3000;
app.get("/", (req, res) => res.send("Hello World!"));
// 新しいルーティングルールを追加
app.get("/hoge", (req, res) => res.send("hoge!!!!"));
app.get("/huga", (req, res) => res.send("huga!!!!"));
app.listen(port, () => console.log(Example app litening on port ${port}!));
node server.js を実行して ブラウザで を開いてみる も試してみる
表示されるメッセージがうまく変わっていたら成功
4. HTMLページを返してみる
mkdir views を実行して views というディレクトリを作る
views 以下に index.html を作成し中身を下のように適当に書く
code:index.html
<html>
<body>
<p>HTMLを使って書いたページです</p>
</body>
</html>
server.js を/ にリクエストした際にHTMLファイルを返すようにする
code:server.js
const express = require("express");
const app = express();
const port = 3000;
// viewsディレクトリをexpressから読み込めるように登録しておくおまじない
app.use(express.static("views"));
// sendFile関数を使ってHTMLファイルを返す
app.get("/", (req, res) =>
res.sendFile("views/index.html")
);
app.listen(port, () => console.log(Example app litening on port ${port}!));
node server.js を実行して ブラウザで を開いてみる メッセージがindex.htmlから配信されているものになっていたらOK
5. クライアントからサーバーへデータを渡してみる(GET)
GETリクエストとは
サーバから情報を取得してくる時に使用するHTTPリクエストのメソッドの1つ
/?key=value みたいに?を付けてkeyとvalueを=で繋いだ文字列がURLの後ろに付いているもの
複数渡すときは& で繋ぐ e.g.) /?key1=value1&key2=value2
index.html にformを設置する
code:index.html
<html>
<body>
<form action="/" method="GET">
<input type="text" name="message" />
<input type="submit" />
</form>
</body>
</html>
server.jsでクエリパラメーターを受け取ってみる
code:server.js
const express = require("express");
const app = express();
const port = 3000;
app.use(express.static("views"));
app.get("/", (req, res) => {
// req はリクエストに関する情報が詰まった構造体
// そこからqueryの中のmessageを取り出してmessageという変数に入れる
let message = req.query.message;
console.log(message);
res.send("OK");
});
app.listen(port, () => console.log(Example app litening on port ${port}!));
コンソール上にブラウザ上で打ち込んだメッセージが出ていればOK
ブラウザのURLにクエリパラメーターが出現していることに注目
6. クライアントからサーバーへデータを渡してみる(POST)
POSTリクエストとは
HTTP通信で、サーバへ情報を登録する時に使用する（データベースへの格納など）
データ量が多い場合（GETでのデータ送信量制限を超えてしまう場合）
GETとは違ってリクエストボディというところにデータを格納して送信する
index.html のformをPOSTに書き換える
code:index.html
<html>
<body>
<form action="/post" method="POST">
<input type="text" name="message" />
<input type="submit" />
</form>
</body>
</html>
server.js でPOSTリクエストを受け取ってみる
code:server.js
const express = require("express");
const app = express();
const port = 3000;
app.use(express.static("views"));
// POSTリクエストの値を受け取るためにおまじない
app.use(express.urlencoded({ extended: true }));
// GETリクエストが来た時はhtmlファイルを返す
app.get("/", (req, res) => res.sendFile("index.html"));
// POSTリクエストが来た時
app.post("/post", (req, res) => {
// GETの時と取得の仕方が違う/bodyの中のmessageという要素を取得
let message = req.body.message;
console.log(message);
res.send(message);
});
app.listen(port, () => console.log(Example app litening on port ${port}!));
7. テンプレートエンジンを使ってみる
テンプレートエンジンとは
サーバーから返ってきた値をHTMLに埋め込むのをプログラムで書くのは実は結構面倒
面倒なHTMLへの埋め込みをやってくれる便利ツール
コンソールで npm install -s ejs を実行し、 ejs をインストールしておく
/views/index.html を index.ejs という名前に書き換える
index.ejs の中にmessageを埋め込む場所を用意する
<%= %>で変数の名前を囲むとサーバーから返ってきた対応する名前の変数を埋め込んでくれる
code:index.ejs
<html>
<body>
<p>ここに送信された文字列が出ます: <%= message %> </p>
<form action="/post" method="post">
<input type="text" name="message" />
<input type="submit" />
</form>
</body>
</html>
server.js の方も少し変更
code:server.js
const express = require("express");
const app = express();
const port = 3000;
app.use(express.static("views"));
app.use(express.urlencoded({ extended: true }));
// テンプレートエンジンにejsを使いますよというおまじない
app.set("view engine", "ejs");
// resのrender関数にテンプレートの名前と埋め込みたい値をオブジェクトにして渡す
// GETリクエストのときはmessageが空なので null にしておく
app.get("/", (req, res) => res.render("index", { message: null }));
// message を取得して render関数に渡してあげる
app.post("/post", (req, res) => {
let message = req.body.message;
console.log(message);
res.render("index", { message: message });
});
app.listen(port, () => console.log(Example app litening on port ${port}!));
ここに送信された文字列が出ます: <%= message %> のところに送信した文字列が正しく表示されればOK
8. テンプレートエンジンをもっと使ってみる
テンプレートエンジンは値を埋め込めるだけではない
プログラミングでよく出てくる条件分岐 や for文などもHTMLの中に書ける
POSTされてくるmessageを消えないようにサーバー側で保持しておくようにしてみる
code:server.js
const express = require("express");
const app = express();
const port = 3000;
// messages という空のリストを作る
let messages = [];
app.use(express.static("views"));
app.use(express.urlencoded({ extended: true }));
app.set("view engine", "ejs");
// GETの時はmessagesリストをmessagesという名前で返す
app.get("/", (req, res) => res.render("index", { messages: messages }));
app.post("/post", (req, res) => {
let message = req.body.message;
// POSTされたmessageをリストの末尾に挿入する(push)
messages.push(message);
res.render("index", { messages: messages });
});
app.listen(port, () => console.log(Example app litening on port ${port}!));
ejsは <% %> の中にJavaScriptのコードをそのまま書くことができる
このJavaScriptのコードは実行されるだけで、表示はされない
もし messages が定義されていれば messages の中身を m という変数にセットして for文を回して <p> タグの中にmessageを書いている
code:index.ejs
<html>
<body>
<% if (messages) { %>
<% for (let m of messages) { %>
<p><%= m %></p>
<% } %>
<% } %>
<form action="/" method="post">
<input type="text" name="message" />
<input type="submit" />
</form>
</body>
</html>
9. 日記機能を作る
ここまで来たらもう日記が作れるはず
今回日記に必要な機能は以下の3点とする
タイトル
内容
(投稿時刻)
データをどうサーバー側で持っておくかはお任せします
10. 日記機能をもっと作り込む
使いやすい/面白い/便利な 日記にするにはどうしたらいいか考えてみる
例えば
間違えて記事をアップしてしまったので削除したい
あとで記事を編集したい
タイトルや本文が空白の場合そのままでいいのだろうか...
などなど色々考えられそうなことがある
何よりも問題なのはデータをサーバーの オンメモリで保持していること
Ctrl + C でサーバーを止めてみよう -> もう一度起動するとどうなる？
変数はメモリの任意の場所を借りてデータを保持している
メモリにあるデータは作業が終わると基本的には消えてしまう(揮発性)
そのために データベース のような永続的にデータを保持する仕組みがある
今日はここまで.....
次回予告!!!!
日程
2/20(木) 11:00~18:00 @ B418
やること(予定)
データベースを触ってみよう
Gitを使ってみよう
ブラウザの機能で遊んでみよう