👍 202609 掲示板アプリ 勉強会資料 - #61
Draft
koduno wants to merge 9 commits into
Draft
Conversation
2026年9月 初心者コースで受講者が fetch から叩くバックエンド。 投稿の作成と一覧取得だけを持ち、保存・CORS・投稿量の上限といった 講座で扱わない部分を引き受ける。 - 保存は Deno KV。ID の先頭にミリ秒を置き、辞書順で古い順に取り出す - 名前 20 文字・本文 200 文字・部屋あたり 200 件で上限を設ける。 受講者のコードが暴走しても自動で収束させるため - エラーを含む全レスポンスに CORS ヘッダーを付ける。欠けるとブラウザ側で ステータスもメッセージも読めず、原因調査で講座が止まる
前半で自分の画面の中だけで動く掲示板を作り、後半でそれをサーバーに つなぎ替える構成。Chapter 1 で addPost / showPosts の 2 つの関数に 切っておき、後半ではその中身だけを差し替える。 - JS の基礎は独立章にせず、掲示板を作りながら都度導入する - 他人の投稿を画面に出すため、描画は createElement + textContent。 innerHTML を使わない理由も 1 枚割く - async / await は「待つ印」として規則化し、Promise は本編で出さない - 通信エラーは扱わない。発展課題に自動更新と SSE / WebSocket の紹介を置く
- template/ と completed/ を追加。受講者は script.js だけをさわる - screenshots/capture.ts でスライド用の画面を撮り直せるようにした。 バックエンドをメモリ KV で起動してサンプル投稿を入れ、章ごとの状態を Chrome の headless で撮る。CSS を変えても流し直すだけで済む - 記述スライド 9 枚に講師用タイマーを置いた。持ち時間は写経の行数から見積もった - タイマーと重なる見出しを短くした - backend が PORT を見るようにした。撮影時に別ポートへ逃がすため
投稿ボタンの隣にあると、対象の違う2つの操作が対に見える。更新するのは 一覧なので、一覧の見出し行に置いて対象を位置で示す。Chapter 1 の間ずっと 「押しても何も起きないボタン」がフォームに居座る問題も消える。
- 新しい書き方の説明を記述スライドの前へ移した。意味が分からないまま 写経する状態を作らない。書いたあとの比較だけを記述の後ろに残す - 2 枚にまたがっていた 1-4 を、showPosts を作る 1-4 と addPost を 書き換える 1-5 に分けた。記述スライドが 1 枚で完結する - サーバーの説明を書き直した。「データを置いておける場所」は不正確なので 「ずっと動きつづけているプログラム」とし、保存先はデータベースだと分けた。 今日はサーバーを書かないこと、コードは backend/ にあることも足した - 発展①の末尾の重複した一文を削除
- 今日のゴールの見出しを 2 行に分けた - 「はじめての Web アプリ」は受講者の経歴を決めつけるので、 「データが自分のブラウザの外に出ていく」という事実の記述にした - 準備の手順を 2 つに絞り、開かないファイルへの言及を削除した - 「JavaScript から命令していきます」を「動かしていきます」に - 1-1 の説明を関数とイベント登録の 2 枚に分けた。 例はこれから書く post-btn ではなく ok-btn の HTML と対にし、 click 以外のきっかけも表で示す。登録した時点では動かないことを明記した
- 「登録した時点では」を「書いた時点では」に。addEventListener を書いた 直後に「登録」という語はまだ定着していない - 1-2 の見出しを「入力された文字を使うには」に変え、道具を並べる前に 何のために要るのかを置いた。1-4 の見出しも同じ理由で直した - 1-3 に「alert は押すと消える。だから画面に残す」という段階の切り替えを 足した。3ステップの表だけでは、なぜここで手法が変わるのか分からない - 「なぜ textContent なのか」を Chapter 3 の動作チェックの直後へ移した。 Chapter 1 の時点では他人の投稿が存在せず、疑問が湧きようがない。 実際に他人の文字が画面に並んだ直後なら動機が伴う - 記述スライドの直後に、成功状態のスクリーンショットを置いた。 記述スライド自体には入れない（bg right が本文幅を狭め、タイマーの 絶対配置が本文の右端基準になってしまうため）
## は受講者から見た目的、### はその実現方法にした。以前は 「画面に出すには、部品を作って貼りつける」と「alert は押すと消える」で、 見出しに理由が入り、やることが抽象語のままだった。 完成形の HTML を先に見せ、投稿 1 件が <li> 1 行に対応することを示す。 表からも「部品」「くっつける」という抽象語を外した。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
2026年9月のオンライン開発ゼミ 初心者コース（全2回・各3時間）の教材です。
JavaScript で掲示板アプリを作りながら、DOM 操作からサーバーとの通信までを扱います。