ホーム / JavaScriptって何？ /

JavaScriptって何？

JavaScriptって何？

【初心者向け】JavaScriptってなに？具体例でわかりやすく解説！

「HTMLとCSSはなんとなく分かるけど、JavaScriptって何をするの？」
そんな疑問を持つ人のために、実際のWebページ構成を使った具体例でJavaScriptの役割をわかりやすく説明します！

Web制作の三本柱とは？

技術 役割
HTML ページの構造をつくる（骨組み）
CSS 見た目を整える（デザイン）
JavaScript ページに動きをつける（動作・反応）

💻 実際のコードと動作を体験しよう！

HTMLコード

<button id="btn-demo">クリックしてね</button>

CSSコード

#btn-demo {
  background-color: lightblue;
  font-size: 20px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScriptコード

document.getElementById("btn-demo").addEventListener("click", function () {
  alert("こんにちは!");
});

上記のコードを組み合わせることで、ボタンをクリックすると「こんにちは!」というアラートが表示されます。下記の作動ボタンを押して実際にコードを作動させてみてください。JavaScriptが作動するとクリックした時に反応するようになります。

🎯 まとめ

技術例え役割
HTML骨格／構造何がどこにあるか
CSS見た目／装飾どんなデザインにするか
JavaScript動き／反応どう動き、反応するか

💬 最後にひとこと

JavaScriptは最初ちょっと難しく見えるかもしれませんが、「ボタンを押したら何かが起きる」だけでも立派な一歩です！
少しずつ動かしながら、楽しんで覚えていきましょう！

QooQ