〜JavaScriptを「看板に命を吹き込む魔法」に例えたら全部つながった〜
こんにちは！ハンズオンラボ運営のえむです。
HTML・CSSを覚えると、次の壁として登場するのがJavaScript。
「Javaと何が違うの？」「どこに書くの？」「HTMLだけじゃダメなの？」という質問、毎回必ずもらいます。
この記事では、そのモヤモヤを 静的な看板と動く電光掲示板 に例えてスパッと解消します！
この記事はこんな人におすすめ
- HTML・CSSは触ったことがあるが、JavaScriptの立ち位置が分からない方
- JavaScriptとJavaの違いを知りたい方（全然別物です！）
- 「動的なWebページ」が何かピンとこない方
結論から言うと、ズバリこれです！
HTML ＝ 「看板の骨組み・文字（構造）」
CSS ＝ 「看板のデザイン・色（見た目）」
JavaScript ＝ 「看板を動かす・光らせる・変化させる（動き・ロジック）」
HTMLとCSSだけで作ったページは「静止した看板」です。ボタンを押してもなにも起きない。JavaScriptを加えると、クリックしたら動く・入力したら即検索される・スクロールしたらアニメーションする——という「生きたページ」になります。
1. JavaScriptにできること
🖱️ クリック・入力への反応
// ボタンをクリックしたらメッセージを表示
document.getElementById('myButton').addEventListener('click', function() {
alert('クリックされました！');
});
✨ HTMLを動的に書き換える
// 「いいね！」ボタンを押したらカウントを増やす
let count = 0;
function like() {
count++;
document.getElementById('count').textContent = count;
}
<button onclick="like()">❤️ いいね</button>
<span id="count">0</span>
🌐 APIと通信してデータを取得する
// サーバーにデータを取りに行く（fetch API）
fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => {
console.log(data); // ユーザー一覧が表示される
});
ページをリロードせずにデータを更新できる——これが「動的なWebページ」の正体です。
2. JavaScriptの基本構文
変数・条件分岐・繰り返しを覚えると、多くの処理が書けます。
📦 変数（データを入れる箱）
let name = "田中太郎"; // 変えられる変数
const age = 35; // 変えられない定数
let isLoggedIn = false; // true/falseのboolean型
🔀 条件分岐（if文）
if (age >= 18) {
console.log("成人です");
} else {
console.log("未成年です");
}
🔁 繰り返し（for文）
const fruits = ["りんご", "みかん", "ぶどう"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// りんご
// みかん
// ぶどう
3. JavaScriptとJavaは全くの別物
よく聞かれますが、JavaScriptとJavaは無関係 です。
Java ＝ Sunが開発したプログラミング言語（1995）
企業の業務システム・Androidアプリなどで使われる
JavaScript ＝ Netscapeが開発したWeb用スクリプト言語（1995）
「人気のJavaの名前を借りた」マーケティング的な命名
→ 名前が似ているだけで、文法も用途も別物！
「JavaScriptを学んでいます」と言うと「Javaもできるんですか？」と聞かれることがありますが、全然違います（笑）
4. JavaScriptが動く場所
【JavaScriptが動く場所の変化】
昔：ブラウザ（クライアントサイド）のみ
→ HTMLに書いてブラウザが実行する
今：サーバーサイドでも動く（Node.js）
→ フロントもバックも同じ言語で書ける！
さらに：スマホアプリ（React Native）・デスクトップアプリ（Electron）にも
最初は「ブラウザで動く言語」でしたが、今やJavaScriptはWebの外にも広がっています。最初に学ぶ言語としてとてもコスパが良い選択です。
まとめ
JavaScript = Webページを「動かす」言語。
HTMLが骨組み、CSSが見た目、JavaScriptが動き・ロジック。
クリック・入力への反応、HTML書き換え、APIとの通信ができる。
JavaとJavaScriptは名前が似ているだけで全くの別物！
ブラウザだけでなく、サーバー・スマホアプリでも動く。
最初はコンソールに console.log("Hello!") を出すところから始めて、少しずつ「動くもの」を作ってみましょう。動いた瞬間の感動が、学習の一番のモチベーションになります！
ハンズオンラボでは、ITインフラ系のハンズオンイベントを定期開催しています。
https://zeki-chan-lab.connpass.com/event/
参考
- MDN Web Docs — JavaScript ガイド
- JavaScript Primer — 現代JavaScript入門
- 小森裕介『プロになるためのWeb技術入門』