---
title: うさうさ勉強会_新人向け_単一HTMLツール入門_v1.0
tags:
author: [smile_yukiko_it](https://image.docswell.com/user/smile_yukiko_it)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/Y76WP63M7V.jpg?width=480
description: うさうさ勉強会_新人向け_単一HTMLツール入門_v1.0 by smile_yukiko_it
published: June 07, 26
canonical: https://image.docswell.com/s/smile_yukiko_it/Z3J76J-2026-06-07-161847
---
# Page. 1
う さ う さ研 修 工 房
社 内 勉 強会 シ リ ー ズ
単一HTMLツールの解剖学
「質問エスカレ文ジェネレーターPRO v2.0.0」を読み解く
新人向け編
題材：HTML / CSS / JavaScript ・ 388行 ・ 外部ライブラリなし
ゴール：単一HTMLツールの「動く仕組み」を自分の言葉で説明できるようになる
面白きこともなき世を面白く ― 2026.06 ―
# Page. 2
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連携を扱います
# Page. 3
SUB JECT
題材：質問エスカレ文ジェネレーターPRO
新人向け
画面イメージ
WHY
サブ講師が受講生の相談をメイン講師へ伝えるとき、敬語の
文面作成とNotion起票が毎回の二度手間だった
WHAT
フォームに入力するだけで「演習の進め方ご相談」の定型文
を生成。コピーも、質問ダッシュボードDBへの一括起票もワ
ンクリック
HOW
HTML＋CSS＋JavaScriptのみの単一ファイル（388行）。ビ
ルド不要・外部ライブラリなし・ブラウザで開くだけ
ヘッダー（v2.0.0）
入力
フォーム
（左カラム）
生成結果
＋Notion
起票
（右カラム）
# Page. 4
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" 宣言でうっかりグロー
バル変数を防止
•
クラスを使わず関数ベース。規模
が小さいので読みやすさ優先
# Page. 5
DATA FLOW
データの流れ：状態は entries 配列ただ1つ
入力フォーム
→
10項目を入力
validate()
必須4項目を赤枠チェック
→
entries.push()
状態＝配列に1件追加
→
新人向け
render()
一覧・全文・件数を再描画
うさうさ先生の一言まとめ
•
信頼できる唯一の置き場（Single Source of Truth）：データはJSの entries 配列だけが持ち、画面はその「写し」
•
追加・削除・編集のたびに render() を呼び直して全体を作り直す ＝ Reactの「state → view」と同じ発想を素の
JSで体験できる
# Page. 6
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日」形式に整形（
不正値は空文字）
# Page. 7
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の⌘に
も対応
研修現場の知恵:相談はたいてい「今」起きる → 日時の手入力を省くだけで起票のハードルが下がる
# Page. 8
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自動起票する設
計
うさうさ研修工房 ｜ 面白きこともなき世を面白く ｜ 質問・改善要望はうさうさ先生まで