--- title: 勉強会_新人向け_ソースコード基礎 tags: author: [smile_yukiko_it](https://docswell.com/user/smile_yukiko_it) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/2JVVNZK6JQ.jpg?width=480 description: https://github.com/Forbusinessuseyukikoishiguro/-PRESENTATION-6-APP_VER-v5.0.0-hexmode- published: June 02, 26 canonical: https://docswell.com/s/smile_yukiko_it/KE183N-2026-06-02-062219 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/2JVVNZK6JQ.jpg) 新 人 エ ン ジ ニ ア 勉 強会 単一HTMLツールの中身を読んでみよう HTML / CSS / JavaScript の「読める」を増やす ― うさうさ研修ツールを題材に うさうさ研修工房 ／ 面白きこともなき世を面白く # Page. 2 ![Page Image](https://bcdn.docswell.com/page/5EGLK4Q2JL.jpg) このツールは3つの部品でできている ① ② ③ <style> <body> <script> 見た目（CSS） 画面の中身（HTML） 動き（JavaScript） 色・大きさ・レイアウト ボタン・入力欄・文字 押したときの処理 この3つの関係が分かれば、Web画面の基本はほぼ理解できる # Page. 3 ![Page Image](https://bcdn.docswell.com/page/4JQYNGK97P.jpg) 部品を「名前」で探して、書き換える <div id="time">30</div> ポイント // 名前(id)で部品を探す const el = document.getElementById("time"); // 表示を書き換える el.textContent = "15"; • getElementById で部品を探す • textContent に文字を入れると画面が 変わる • 最初は「30」でも、あとから書き換 えられる # Page. 4 ![Page Image](https://bcdn.docswell.com/page/K74WG5KRE1.jpg) タイマーは「数える」より「引き算」 △ つい書きたくなる書き方 ◎ 採用した書き方 setInterval(() => { remain = remain - 1; }, 1000); // 終わる時刻を先に決める let endAt = Date.now() + 30000; // 残り = 終了時刻 − 今 const rem = endAt - Date.now(); 画面が裏に回ると間引かれ、30秒が32秒に…とズレる 時計から計算するので、何度呼ばれてもズレない # Page. 5 ![Page Image](https://bcdn.docswell.com/page/LJ1YDWXVEG.jpg) クイズの記録は「配列」にためる const records = []; // 入れ物 覚えること function judge(ok) { records.push({ ok, n: records.length+1 }); } • push＝配列の最後に追加 // 正解だけ数える • 1問を{オブジェクト}で表す records.filter(r => r.ok).length • filter＝条件に合うものだけ取り出す • length＝個数 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/GJWGY6N372.jpg) 外から来た文字は、そのまま使わない 1 sanitize（整える） 改行や長すぎる文字を整理。表示崩れを防ぐ 2 escape（無害化） < > & を記号扱いに。タグとして実行させない 3 自己テスト 起動時に計算が合っているか自動チェック 「動けばいい」ではなく「壊れたら気づける」を新人のうちから # Page. 7 ![Page Image](https://bcdn.docswell.com/page/4EZLXY3G73.jpg) 今日のまとめ • 単一HTMLは「配って開くだけ」で動く • 部品は getElementById で探し、textContent で書き換える • タイマーは「数える」ではなく「時刻の引き算」 • 記録は配列に push、集計は filter と length • 外から来た文字は sanitize / escape してから扱う • 起動時の自己テストで、壊れたらすぐ気づける まずは小さなボタン1つと数字1つから、真似して動かしてみよう