JavaScript ってなに？

「JavaScript」「JS」「ボタンを押したら反応する」「動きをつける」… Webサイトを触ったり、開発の話を聞いたりするとよく出てくる言葉。

HTMLの記事 では骨組み、CSSの記事 では見た目（服）を見てきました。 最後の1ピース——JavaScript を、ふんわり見ていきます。

JavaScript ってなに？

ざっくり言うと、JavaScript は Webページに「動き」と「反応」をつける言葉 です。

人の体に例えると、JavaScript は 動きや反応 にあたります。 HTML（骨）に CSS（服）を着せただけだと、まだマネキンみたいに止まったまま。JavaScript が加わって初めて、触ったら反応する・自分から動く——「生きている感じ」になる。

クリックしたら反応する、が基本

JavaScript の一番わかりやすい例は、ボタンを押すと何かが起きる動き。

たとえばこんな書き方をします：

<button onclick="alert('やあ')">押してね</button>

このボタンをクリックすると、「やあ」というポップアップが表示されます。

• <button> …… HTML のボタンタグ
• onclick="..." …… 「クリックされたら、ここに書いた JS を実行してね」という印
• alert('やあ') …… 「『やあ』ってアラートを出して」という JS の命令

→ つまり JavaScript は「〇〇されたら△△する」を書くための言葉。触れる → 反応する という流れが基本です。

なんで JavaScript が必要？

HTML と CSS だけだと、ページは動かない・反応しないままです。

HTML（骨）と CSS（服）だけのページは「綺麗に飾られたショーウィンドウ」。見るぶんには素敵だけど、ボタンを押しても何も起きないし、何かを入力しても判断してくれない。 JavaScript を加えることで：

• ボタンを押すと メニューが開く
• フォームに入力すると その場で「メアド形式違うよ」と教えてくれる
• スクロールすると 要素がふわっと現れる
• 「いいね」ボタンを押すと すぐ数字が増える

→ つまり「Webサイトに反応や動きが生まれる」のは、ぜんぶ JavaScript のおかげ。

こんな場面で活躍してる

普段使っているサイトで、こんな動きはだいたい JavaScript の仕事です。

• メニュー・ハンバーガーボタン → 押すと開く・閉じる
• 入力チェック → メールアドレスやパスワードの形式チェック
• スクロール演出 → ふわっと現れる、固定されたヘッダー
• SNS の「いいね」「リプライ」 → リロードなしで数字や表示が変わる
• 地図のドラッグ・ズーム → Google マップとかの操作感
• チャット画面 → ChatGPT のあの「文字が流れて出てくる」のも JS

「ユーザーの動きに反応するもの」「ページがリロードなしで変わるもの」は、まず JS だと思って OK。

実はブラウザの外でも動く

ここまでは「ブラウザの中で動く JavaScript」の話。実は JavaScript は、ブラウザ以外の場所でも動かせるんです。

• サーバー側で動く（Node.js）→ Web サービスの裏側も JS で書ける
• デスクトップアプリ（Electron）→ VS Code や Slack も中身は JS
• スマホアプリ（React Native）→ アプリも JS で作れる

…と、いま世界で最も使われている言語のひとつになっています。

ただし、これら全部を1記事で語ろうとすると 5分じゃ収まらないので、この記事では 「ブラウザの中で動くJS」 に絞って見ていきます。

HTML と CSS との関係

ここまでで Web 三部作が揃いました。

• HTML ＝ 骨 … 構造をつくる
• CSS ＝ 服 … 見た目をつくる
• JavaScript ＝ 動き・反応 … 触ると反応する／自分から動く

3つセットで、いま見ているWebサイトのほぼすべてが成り立っています。

まとめ

これで Web の3点セット——HTML（骨）・CSS（服）・JavaScript（動き）——が一通り揃いました。あなたが普段見ているサイトも、この3つの組み合わせでできています 🌱