JavaScriptのきほん⚡
HTMLが骨組み、CSSが見た目なら、JavaScript（JS）は「動き」の担当。ボタンを押したら何かが起きる、みたいな仕組みはぜんぶJSが作っているよ。
⚡ JavaScriptってなに？
JavaScriptは、Webページに命令を出すためのプログラミング言語。「このボタンが押されたら、この文字を変える」「この数を計算する」といった指示を書いていくよ。ブラウザの画面右下にある小窓「コンソール」に出力しながら動作を確認できるのも特徴。このサイトの体験コーナーでは、コンソールへの出力を下のダーク背景の欄にそのまま表示するようにしているよ。
変数
値に名前をつけて、あとで使い回せるようにする箱。letとconstの2つを使うよ。
const… あとから中身を変えない変数（基本はこっちを使う）let… あとから中身が変わる可能性がある変数
` `（バッククォート）で囲むと、${ }の中に変数の値をそのまま埋め込める（テンプレートリテラル）。
関数
よく使う処理をひとまとめにして、名前をつけておけるもの。呼び出すだけで何度でも使い回せる。
条件分岐
if / elseを使うと、「もし〇〇だったら」で処理を分けられる。
くり返し処理（ループ）
「同じ処理を何度も実行する」ためのしくみ。for文がいちばんの定番だよ。
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 0, 1, 2, 3, 4 の順に出力されるlet i = 0… 最初に1回だけ実行。カウント用の変数を用意するi < 5… これがtrueの間、くり返し続ける（条件分岐と同じ書き方）i++… 1周するたびに実行。iを1増やす
似たものにwhile文もあるよ。「くり返す回数が決まっていない」ときに使うことが多い。
let count = 0;
while (count < 3) {
console.log("がんばれ！");
count++;
}配列とオブジェクト
配列は「順番に並んだリスト」、オブジェクトは「名前つきのデータのまとまり」だよ。
fruits.forEach(...)のように、配列のうしろに.をつけて呼び出すものを「配列のメソッド」と呼ぶよ。forEachは「配列の中身をひとつずつ取り出して処理する」メソッドで、実はfor文と同じ「くり返し処理」の仲間。配列を順番に処理したいときは、for文よりもforEachを使うことが多いよ。ほかにも便利な配列メソッドがたくさんあるので、モダンJS×TSのページでもう少し紹介するよ。
DOM操作とイベント
「DOM」は、HTMLの内容をJSから触れるようにしたデータの形。document.querySelector()で要素をつかまえて、中身や見た目を書きかえられるよ。
document.querySelector("#id")… CSSと同じ書き方で要素をひとつ取得要素.textContent = "..."… 要素の中の文字を書きかえる要素.style.color = "..."… 要素の見た目をJSから直接変える要素.addEventListener("click", 関数)… クリックされたときに関数を実行する
() => { ... }のかたちは「アロー関数」と呼ばれる、関数の書き方のひとつ。addEventListenerのように「あとで実行してほしい処理」を渡すときによく使うよ。