うさうさ勉強会_新人向け_単一HTMLツール入門_v1.0
>100 Views
June 07, 26
スライド概要
何卒よろしくお願い申し上げます。 一流のIT研修講師を目指し、日々研鑽を続けております。 本資料は外部公開用としてご提供するものです。
関連スライド
各ページのテキスト
う さ う さ研 修 工 房 社 内 勉 強会 シ リ ー ズ 単一HTMLツールの解剖学 「質問エスカレ文ジェネレーターPRO v2.0.0」を読み解く 新人向け編 題材：HTML / CSS / JavaScript ・ 388行 ・ 外部ライブラリなし ゴール：単一HTMLツールの「動く仕組み」を自分の言葉で説明できるようになる 面白きこともなき世を面白く ― 2026.06 ―
AGENDA 新人向け 本日のメニュー ゴール：実務で配布している現物ツールを教材に、「動く仕組み」の根っこを理解する 1 ファイルの解剖図 head / style / body / script の4層で読む 2 データの流れ 状態は entries 配列ただ1つ（Single Source of Truth） 3 定型文づくり テンプレートリテラルと buildText() への1点集約 4 初期化処理 IIFE・日時の自動セット・Ctrl+Enterショートカット 続編の中堅向け編では、XSS対策・フォールバック・Claude API×Notion MCP連携を扱います
SUB JECT 題材：質問エスカレ文ジェネレーターPRO 新人向け 画面イメージ WHY サブ講師が受講生の相談をメイン講師へ伝えるとき、敬語の 文面作成とNotion起票が毎回の二度手間だった WHAT フォームに入力するだけで「演習の進め方ご相談」の定型文 を生成。コピーも、質問ダッシュボードDBへの一括起票もワ ンクリック HOW HTML＋CSS＋JavaScriptのみの単一ファイル（388行）。ビ ルド不要・外部ライブラリなし・ブラウザで開くだけ ヘッダー（v2.0.0） 入力 フォーム （左カラム） 生成結果 ＋Notion 起票 （右カラム）
ANATOMY 新人向け 解剖図：1ファイルの中身は4つの層 <head> L1–10 <style> L11–93 <body> L95–162 <script> L164–386 メタ情報の刻印：アプリ名・version 2.0.0・build-date・ author デザイントークン（:root のCSS変数で配色を一元管理）＋ 全UIスタイル 2カラムUI：入力フォームcard ＋ 生成結果card、注意書き 、footer ロジック約220行：utilities / CRUD / render / copy / Notion連携 ここに注目 • 外部読み込みゼロ：CDN・Webフ ォントなし → オフラインでも開 ける／CORSの心配なし • "use strict" 宣言でうっかりグロー バル変数を防止 • クラスを使わず関数ベース。規模 が小さいので読みやすさ優先
DATA FLOW データの流れ：状態は entries 配列ただ1つ 入力フォーム → 10項目を入力 validate() 必須4項目を赤枠チェック → entries.push() 状態＝配列に1件追加 → 新人向け render() 一覧・全文・件数を再描画 うさうさ先生の一言まとめ • 信頼できる唯一の置き場（Single Source of Truth）：データはJSの entries 配列だけが持ち、画面はその「写し」 • 追加・削除・編集のたびに render() を呼び直して全体を作り直す ＝ Reactの「state → view」と同じ発想を素の JSで体験できる
TEMPLATE 新人向け 定型文づくり：buildText() に1点集約 script内・実際のコード（折返しのみ調整） function buildText(e){ return `${fmtDateJp(e.date)} ${e.time} グループ：${e.group} タイトル：${e.title} 演習の進め方について、${e.who}さんより ご相談をいただきました。 ${e.page}の${e.body} お手数ですが、当該箇所の正しい解答・ 内容をご教示いただけますでしょうか。`; } // 2026-06-04 → 2026年6月4日 に変換 function fmtDateJp(iso){ ... } 読みどころ • バッククォート ` ` の中では改行がそ のまま文面になる • ${ } で変数を埋め込み。文字列連結 （+）より読みやすい • 文面は buildText() の1か所だけ → 言 い回しの修正が一瞬で全体に反映 • fmtDateJp() は正規表現で形式チェッ クし「2026年6月4日」形式に整形（ 不正値は空文字）
IN IT & UX
初期化処理：開いた瞬間から使える気配り
(function init(){
const now = new Date();
const pad = n => String(n).padStart(2,"0");
// 日付・時刻欄に「今」を自動セット
document.getElementById("f-date").value = ...
document.getElementById("f-time").value = ...
// Ctrl(⌘)+Enter で1件追加
document.addEventListener("keydown", ev=>{
if((ev.ctrlKey||ev.metaKey)
&& ev.key==="Enter") addEntry();
});
})();
新人向け
読みどころ
•
IIFE（即時実行関数）：定義と同時に
1回だけ実行し、変数を外に漏らさな
い
•
padStart(2,"0") でゼロ埋め（9時
→09）
•
metaKey も見ているのでMacの⌘に
も対応
研修現場の知恵:相談はたいてい「今」起きる → 日時の手入力を省くだけで起票のハードルが下がる
W RAP - U P & EXE R CI S E まとめ：4層・1状態・1関数で読み切れる 4層で読む ／ 状態は entries だけ ／ 文面は buildText() だけ ―― 構造を掴めば388行は怖くない 演習課題（手を動かそう） 次回予告：中堅向け編 • カテゴリに自分の担当研修名を追加してみる • XSS対策：innerHTMLとエスケープの作法 • buildText() の結びの一文を自分の言葉に変えて、 生成結果を確認する • 多重実行ガード・Clipboardフォールバックなど「 守りのUX」 • :root の配色を1色変えて全体に反映されることを 確かめる • Claude API × Notion MCP でDB自動起票する設 計 うさうさ研修工房 ｜ 面白きこともなき世を面白く ｜ 質問・改善要望はうさうさ先生まで