[JavaScript] 超入門：JavaScript とは？初心者にもわかる『Webページに動きをつける』基本

MARKLEAPS

2025.05.20

「JavaScriptって聞いたことあるけど、実際何に使うの？」
HTMLやCSSはなんとなく分かるけど、「JavaScriptは難しそう」と感じている方も多いのではないでしょうか。

この記事では、フロントエンドエンジニアを目指す方やWeb制作に関わる方に向けて、JavaScriptの役割やできることをやさしく紹介します。
「これから勉強してみようかな」と考えている方の、最初の一歩にぴったりの内容です。

JavaScriptとは？ざっくり説明

JavaScript（ジャバスクリプト）は、Webページに「動き」や「ユーザーの操作への反応」を加えるためのプログラミング言語です。

例えば、ボタンを押すとメニューが開く、入力フォームの内容をチェックする、画像を自動で切り替える…といった動作をJavaScriptで実装できます
（※一部はCSSでも似た表現が可能ですが、JavaScriptを使うとより柔軟に制御できます）。

現在のブラウザにはJavaScriptの実行環境が最初から備わっているため、特別なソフトをインストールしなくても使えます。

フロントエンドにおけるJavaScriptの役割

Web制作では、主に以下の3つの技術が使われます。

・HTML：ページの構造や文章を記述する
・CSS：色やレイアウトなどデザインを整える
・JavaScript：ユーザーの操作に応じた動きを加える

HTMLとCSSだけでもWebページは作れますが、JavaScriptを組み合わせることで、ボタンを押す・入力するなどの操作に反応する「使いやすい」ページが作れます。
JavaScriptは、ユーザー体験（UX）を豊かにする重要な存在です。

JavaScriptでできること【具体例つき】

以下は、JavaScriptでできることの一例です（一部はCSSだけでも可能な場合があります）。
日常的によく見かけるWebの動きも、実はJavaScriptが使われていることが多いです。

スライドショーやモーダルウィンドウの表示
ボタンクリックでメニューの開閉
入力フォームのリアルタイムチェック
タブ切り替えやアコーディオン展開
ページの一部だけを非同期で更新（Ajax）
APIから天気情報や記事を取得して表示

たとえば、ボタンをクリックするとテキストが変わるという、シンプルな例を見てみましょう。

<!-- 簡単な例：ボタンを押すと文字が変わる -->
<button id="btn">押してね</button>
<p id="text">こんにちは</p>

<script>
  document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("text").textContent = "こんにちは、JavaScript！";
  });
</script>

<p id="text">こんにちは</p>

document.getElementById("btn").addEventListener("click", function() {

document.getElementById("text").textContent = "こんにちは、JavaScript！";

});

</script>

DEMO

See the Pen
【JavaScriptの基本例】ボタンをクリックするとテキストが変わる by mkl may (@mkl-may)
on CodePen.

ほんの数行のコードでも、ページに動きを加えられるのがJavaScriptの魅力です。

HTML・CSSとの違いと組み合わせ方

JavaScriptは、HTMLで作られた要素（タグ）を操作したり、CSSで設定した見た目を変えたりして、ページに動きを加えます。

3つの技術の役割をまとめると以下のようになります。

技術	役割	例
HTML	ページの構造	見出し・文章・画像の配置など
CSS	デザイン・見た目	色、サイズ、レイアウトの調整
JavaScript	動き・反応	データ取得（API連携）、入力内容に応じたエラーチェック、条件で表示変更など