はじまりました、jigインターン2021春!勉強会&チーム開発、2日間のオンライン開催。

やる気、6名の学生 with 眼鏡堅パンjigbox開封の儀

サーバーとクライアント、2つのコンピューターを使うwebアプリの基本をJavaScriptのランタイム、Denoを使って作る勉強会。 「Denoでかんたん、フロント&バックエンド超入門 in JavaScript」をベースにハンズオン。 全員、JavaScriptエンジニアの仲間入り!

チーム開発、スクラムのプラクティスのひとつ「KPTふりかえり」を元に作成、もっと優しい、Windows/Mac向けのハンズオン教材「Denoで作るシンプルなBBS

こんな掲示板アプリが2ファイル、90行で作成できます。
(慣れている方はこちら src on GitHub

0. エディタ VSCodeセットアップ(すでに入っている人はスキップ)
Visual Studio Code の「今すぐダウンロード」からセットアップし、起動する

1. Denoセットアップ
ブラウザで Deno を開き、Windows用インストールスクリプトをコピー

iwr https://deno.land/x/install/install.ps1 -useb | iex

Mac/Linuxの人はこちら

curl -fsSL https://deno.land/x/install/install.sh | sh

VSCodeのメニュー、Terminal、New Terminal
開いたTerminalで、貼り付けて、エンター

2. Deno動作確認
Terminalで deno と書いて、エンター
1+1 と書いて、エンター、JavaScriptが動きました!
Ctrlキーを押しながらD、で deno のREPL(リプル)を終了

3. webサーバーを動かす
適当なディレクトリ(例としてbbsserver)に、bbs.js と static/index.html を作成する
VSCodeのTerminalで、下記を書く(Windows用)

mkdir bbsserver New-Item -Type File bbsserver/bbs.js mkdir bbsserver/static New-Item -Type File bbsserver/static/index.html code bbsserver

(Mac/Linux用)

mkdir bbsserver touch bbsserver/bbs.js mkdir bbsserver/static touch bbsserver/static/index.html code bbsserver

新しくVSCodeが開く。
bbs.js を次のコードに編集する

import { Server } from "https://js.sabae.cc/Server.js"; new Server(8008);

static フォルダ内 index.html を次のコードに編集する

hello deno!

VSCodeのメニュー、Terminal、New Terminal
開いた Terminal で下記を書く

deno run -A --watch --unstable bbs.js

ライブラリをダウンロードしながら起動するので少し待つ(初回だけ)
ファイアーウォールのダイアログが出たら「プライベートネットワーク」で「アクセス許可する」
http://localhost:8008/ をブラウザで開く(Ctrl+click)と「hello deno!」と出る

4. バックエンド、APIサーバーを作る
bbs.js を下記に変更する

import { Server } from "https://js.sabae.cc/Server.js"; import { jsonfs } from "https://js.sabae.cc/jsonfs.js"; const datafn = "data.json"; let data = jsonfs.read(datafn) || []; class MyServer extends Server { api(path, req) { if (path == "/api/list") { return data; } else if (path == "/api/add") { data.push(req); jsonfs.write(datafn, data); return "ok"; } } } new MyServer(8008);

Denoのwebサーバーは自動的にファイルの更新を検出して、再起動する(--watch)
http://localhost:8008/api/add?{"date":"t","name":"test","body":"body"} にアクセスすると、"ok" とでる
VSCodeで data.json が更新されることを確認する
http://localhost:8008/api/list にアクセスすると、書き込んだデータが表示される
APIサーバーできた!

5. フロントエンド、掲示板(BBS)をHTML/CSS/JavaScriptでつくる
static/index.html を下記に変更する

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"> <title>DenoでシンプルなBBS</title> <script type=module> import { fetchJSON } from "https://js.sabae.cc/fetchJSON.js"; const enc = (s) => { s = s.replace(/&/g, "&amp;"); s = s.replace(/</g, "&lt;"); s = s.replace(/>/g, "&gt;"); s = s.replace(/\n/g, "<br>"); return s; }; window.onload = async () => { const data = await fetchJSON("api/list"); for (const d of data) { const div = document.createElement("div"); div.className = "bbsitem"; div.innerHTML = `<span class=date>${enc(d.date)}</span> by <span class=name>${enc(d.name)}</span> <div class=body>${enc(d.body)}</div>` container.appendChild(div); } btn_write.onclick = async () => { const item = { name: inp_name.value, body: inp_body.value, date: new Date().toString() }; if (await fetchJSON("api/add", item) == "ok") { window.location.reload(); } } }; </script> <style> .bbsitem { border-top: 1px solid gray; margin: 1em; } .writebox { border: 2px solid gray; padding: 1em; margin: 1em; } input, textarea { width: 80%; } </style> <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" type="text/css"> </head> <body> <h1>DenoでシンプルなBBS</h1> <div id=container></div> <div class=writebox> 名前:<input type=text id=inp_name><br> <textarea id=inp_body></textarea><br> <button id=btn_write>書き込む</button> </div> <footer>App: CC BY <a href=https://fukuno.jig.jp/3169>@taisukef</a></footer> </body> </html>

http://localhost:8008/ にアクセスすると掲示板として使える
あとは自由に変更しよう!

6. 演習
フロントエンド、関数 enc が無いとどうなってしまうか試してみよう。
フロントエンド、スタイルシート sakura.css の行を消すとどうなるか見てみよう。
バックエンド、jsonfs とは何者か?リンクを辿って確認してみよう。
バックエンド、書き込みを全削除するAPIを作ってみよう。(ヒント、Array mdn、キーワードとmdnと一緒に検索するのがオススメ!)

7. 参考
HTMLはじめのいっぽ
CSSはじめのいっぽ
JSはじめのいっぽ

Denoは株式会社になったようです!ますます楽しみ、DenoとJavaScript!
Announcing the Deno Company | Deno Blog

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / RSS