これまで、Webサイトの「骨組み」を作るHTMLと、「見た目」を整えるCSSについて学んできました。でも、Webサイトって、ただ見るだけじゃなく、ボタンを押したら画面が変わったり、写真がスライドショーになったりしますよね。
そんなWebサイトに「動き」や「機能」を追加する魔法の言葉が、JavaScriptです。HTMLとCSSが静的なWebサイトを作るのに対し、JavaScriptはWebサイトをより便利で、インタラクティブ（双方向）なものに変えてくれます。
この記事では、JavaScriptがWebサイトでどんな役割を果たしているのかを、簡単な例を交えながら見ていきましょう。
JavaScriptの役割：Webサイトの「脳みそ」
JavaScriptは、Webサイトの「脳みそ」や「頭脳」のような存在です。ユーザーの操作に合わせて、さまざまな命令を実行します。
- 例1：ボタンを押したらメッセージが表示される
- ボタンがクリックされたことを検知し、「ようこそ！」というメッセージを画面に表示します。
- 例2：フォームの入力チェック
- ユーザーが入力したメールアドレスが正しい形式かどうかをチェックし、間違いがあれば警告を表示します。
- 例3：画像をスライドショーで自動的に切り替える
- 複数の画像を一定時間ごとに自動で切り替えて、動きのあるギャラリーを作成します。
これらの動きは、すべてJavaScriptの力によって実現されています。
簡単なJavaScriptの書き方
JavaScriptは、HTMLファイルの中に<script>タグを使って直接書き込むことができます。
例えば、ボタンをクリックしたら「こんにちは！」と表示される簡単なコードを見てみましょう。
HTML
<!DOCTYPE html>
<html>
<head>
<title>JavaScriptの練習</title>
</head>
<body>
<h1>JavaScriptの力を体験しよう</h1>
<button onclick="alert('こんにちは！')">ここをクリック！</button>
<p>このボタンをクリックすると、メッセージが表示されます。</p>
</body>
</html>
このコードのonclick="alert('こんにちは！')"という部分がJavaScriptです。onclickは「クリックされたら」という意味で、alert()は「ポップアップでメッセージを表示する」という命令です。
たったこれだけのコードで、Webサイトに動きを加えることができます。
JavaScriptの魅力と将来性
JavaScriptはWebサイトだけでなく、サーバーサイド（Node.js）、スマホアプリ開発（React Native）、さらにはゲーム開発まで、非常に幅広い分野で使われています。
HTML、CSS、JavaScriptの3つを学ぶことは、Web開発の基礎を固める上で最も重要です。この3つを使いこなせば、あなたが思い描くほとんどのWebサイトやWebアプリケーションを作れるようになります。
まとめ：JavaScriptでWeb開発の可能性を広げよう
JavaScriptは、Webサイトに命を吹き込み、ユーザーの心を掴むための強力なツールです。
難しく考えず、まずは簡単な「クリックしたら動く」コードから試してみましょう。JavaScriptの学びは、Web開発の世界を大きく広げる、わくわくする第一歩になるはずです。
