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