JavaScriptのきほん⚡
HTMLが骨組み、CSSが見た目なら、JavaScript（JS）は「動き」の担当。ボタンを押したら何かが起きる、みたいな仕組みはぜんぶJSが作っているよ。
ボタンを押して、文字を変えてみよう
英語っぽい記号が増えるけど、最初は意味をぜんぶ読めなくてOK。ボタンと文字がつながって動くところを見てみよう。
このページで出てくるものを見る
- ボタンを押すと文字が変わるしくみ
- ことばや数字に名前をつける
- 同じ命令をまとめる
- 「もし〜なら」で動きを分ける
- 同じことを何回かくり返す
まずは右のボタンを押してみてね。コードは、あとからゆっくり見ればOK！
文字が変わった？ いま書いてあるJSは、ページの後半で1つずつほどいていくよ。
最初に右の画面を動かして、そのあとでコードの意味を見よう。いま開いている1項目だけでOK！
1数字をおぼえて、増やす変数のlet
let count = 0で、数字を覚える場所にcountという名前をつけているよ。ボタンを押すたびに、中の数字を新しくしている。
let count = 0;を1つずつ見る
let：あとで中身を変える値につける合図count：数字を覚える場所につけた名前。好きに決められる=：右側の値を、左側の名前へ入れる0：最初に覚えておく数字
2同じ言葉を、1か所で変える変数のconst
nameの中身を1回変えるだけで、使っている3か所が全部変わったね。"ひよこ"のような文字はダブルクォートではさむよ。あとから中身を変えない値にはconstを使う。
3数字によって、言葉を変えるifとelse
ifは「もし」、elseは「それ以外」
上から順番に条件を確かめて、当てはまった場所の命令だけを動かすよ。>= 30は「30以上」という意味。
4同じことを5回書いてみるくり返す前の大変さ
5回なら書けても、100回では大変だね。変え忘れを減らすためにも、次のfor文で1つにまとめるよ。
5くり返しを1つにまとめるfor文
forは、囲まれた命令を何度も動かす書き方だよ。今は細かな記号を暗記しなくてOK。countの数字で回数を変えられる、とわかれば十分！
for (...)の中を1つずつ見る
let i = 0：数えるための数字を0から始めるi < count：数えた数字がcountより小さい間は続けるi++：1回終わるたび、数えた数字を1つ増やす
6命令のまとまりに名前をつける関数
greetが、命令のまとまりにつけた名前
ボタンが押されたら、ブラウザがgreetの中にまとめた命令を動かすよ。
やりたい動きから、JSの言葉を探す
| JSの言葉 | 何をするときに使う？ |
|---|---|
let | あとで変わる値に名前をつける |
const | あとで変えない値に名前をつける |
if | 条件によって命令を分ける |
for | 同じ命令をくり返す |
function | 命令のまとまりに名前をつける |
🐣 つぎの練習：値をまとめて、画面を動かそう変数と関数を復習してから、配列と画面の書き換えへ進むよ
⚡ JavaScriptってなに？
JavaScriptは、Webページに命令を出すためのプログラミング言語。「このボタンが押されたら、この文字を変える」「この数を計算する」といった指示を書いていくよ。ブラウザの画面右下にある小窓「コンソール」に出力しながら動作を確認できるのも特徴。このサイトの体験コーナーでは、コンソールへの出力を下のダーク背景の欄にそのまま表示するようにしているよ。
値に名前をつけて、あとで使い回せるようにする箱。letとconstの2つを使うよ。
const… あとから中身を変えない変数（基本はこっちを使う）let… あとから中身が変わる可能性がある変数
` `（バッククォート）で囲むと、${ }の中に変数の値をそのまま埋め込める（テンプレートリテラル）。
const name = "ひよこ";
ことばには" "をつけるよ。
const count = 3;
数字はそのまま書けるよ。
中身：3const isHappy = true;
trueは「はい」のような値だよ。
よく使う処理をひとまとめにして、名前をつけておけるもの。呼び出すだけで何度でも使い回せる。
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」は、HTMLの内容をJSから触れるようにしたデータの形。document.querySelector()で要素をつかまえて、中身や見た目を書きかえられるよ。
document.querySelector("#id")… CSSと同じ書き方で要素をひとつ取得要素.textContent = "..."… 要素の中の文字を書きかえる要素.style.color = "..."… 要素の見た目をJSから直接変える要素.addEventListener("click", 関数)… クリックされたときに関数を実行する
() => { ... }のかたちは「アロー関数」と呼ばれる、関数の書き方のひとつ。addEventListenerのように「あとで実行してほしい処理」を渡すときによく使うよ。