Day 0・JavaScriptってなに？ — Webページに命を吹き込む
Webページの三層とJavaScriptの役割
HTML・CSS・JavaScriptを家にたとえて、JavaScriptが担う「動き」の層を実感する。
Webページは三つの層でできている
私たちが毎日見ているWebページは、じつは三つの役割が重なってできています。文章やボタンなどの「中身」を並べるHTML、それに色や配置といった「見た目」をつけるCSS、そしてクリックやスクロールに反応して「動き」を出すJavaScript。この三つが協力して一枚のページになっています。
いきなり三つの名前が出てくると混乱しやすいので、身近な「家」にたとえてみましょう。
- HTML = 家の骨組み(柱や壁、部屋の配置)。どこに何があるかを決める
- CSS = 内装(壁紙や照明の色、家具の並べ方)。見た目を整える
- JavaScript = 電気や自動ドア(スイッチを押すと明かりがつく、人が近づくと扉が開く)。動きをつける
骨組みだけの家(HTMLだけ)でも住むことはできますが、内装がなければ殺風景ですし、電気や自動ドアがなければ不便です。Webページも同じで、JavaScriptがあることで「押すと反応する」「近づくと変わる」といった便利さが生まれます。
JavaScriptがあると何ができるのか
「動き」と言われてもピンと来ないかもしれません。あなたが普段使っているWebサービスで、JavaScriptが働いている場面を挙げてみます。
- ボタンを押すと、隠れていたメニューや説明がふわっと表示される
- フォームに入力して「送信」を押すと、内容がサーバーに届く
- ページを開き直さなくても、新しいデータ(投稿やコメント)が読み込まれて画面に増える
<button onclick="alert('こんにちは！')">押してみて</button>なぜ層を分けて考えるのか
中身(HTML)・見た目(CSS)・動き(JS)を分けておくと、直したい所だけを直せます。色を変えたいならCSS、押したときの反応を変えたいならJavaScript、と担当がはっきりします。AIにお願いするときも「これはどの層の話か」が言えると、的確な指示になります。
AIにはこう聞く
「このWebページで、HTML・CSS・JavaScriptがそれぞれどの部分を担当しているか、初心者向けに色分けして説明して」と頼むと、三層の役割分担が一気に見えてきます。
読んでも腑に落ちない所は、AIに噛み砕いてもらいましょう。
理解度チェック
答えられれば、面接で説明できる状態に一歩近づきます。
Webページの三層と、その役割の組み合わせとして正しいものはどれですか。
次のうち、主にJavaScriptが担当している「動き」はどれですか。
HTML・CSS・JavaScriptの役割を、家のたとえを使って一文ずつで説明してください。
記述式です。まず自分の言葉で答えを考えてから、模範解答を開いて自己採点してください。