【JavaScript】JavaScriptとは？基本から解説｜Webの基礎

記事内には広告が含まれます

2026年8月2日

はじめに

「ボタンを押したら画面の表示が切り替わる」「入力欄に何も書かずに送信すると注意メッセージが出る」――こうした動きのあるWebページを見たことはありませんか？

これらはすべて、JavaScriptというプログラミング言語によって実現されています。

これまでのシリーズでは、Webページの骨組みを作るHTMLと、見た目を整えるCSSについて解説してきました。今回からは新しいシリーズとして、Webページに「動き」や「反応」を加えるJavaScriptについて、基本から解説していきます。

JavaScriptとは？

JavaScriptとは、Webブラウザ上で動作するプログラミング言語です。HTMLが「骨組み」、CSSが「見た目」だとすると、JavaScriptは「動き・振る舞い」を担当します。

言語	役割
HTML	ページの構造（骨組み）
CSS	ページの見た目（デザイン）
JavaScript	ページの動き・振る舞い（機能）

たとえば、次のようなことはJavaScriptを使わないと実現できません。

ボタンをクリックしたら内容を切り替える
入力内容をチェックしてからフォームを送信する
画像をスライドショーのように自動で切り替える
スクロールに合わせて要素を表示・非表示する

名前が似ていますが、JavaScriptとJava（Sun Microsystems社が開発したプログラミング言語）は別物です。JavaScriptはNetscape社のブレンダン・アイク氏によって開発され、当時話題になっていたJavaの人気にあやかって名付けられたと言われています。

ECMAScriptという標準規格

JavaScriptの文法や仕様は、ECMAScript（エクマスクリプト）という標準規格で定められています。ブラウザによって動きが異ならないよう、この規格に沿って各ブラウザがJavaScriptを実装しています。「ES6」「ES2015」といった名前を見かけることがありますが、これはECMAScriptのバージョンを指しています。

JavaScriptでできること

JavaScriptは元々「ブラウザに動きを付ける」ための言語でしたが、現在では活躍の場が広がっています。

分野	主な用途
フロントエンド	Webページの動的な表示・入力チェック・アニメーション
サーバーサイド	Node.jsを使ったサーバー処理（Webサイトの裏側の処理）
アプリ開発	スマホアプリ・デスクトップアプリの開発

このシリーズでは、まず基本となるブラウザ上でのJavaScript（フロントエンド）に絞って解説していきます。

JavaScriptの書き方

JavaScriptのコードは、HTMLファイルの中に <script> タグを使って埋め込みます。

Step 1：HTML内に直接書く

<script>
  alert("こんにちは！");
</script>

<script> タグで囲んだ部分がJavaScriptのコードとして実行されます。試しにブラウザで開くと、ページを開いた瞬間にダイアログが表示されます。

Step 2：外部ファイルに分けて読み込む

コードが増えてくると、HTMLファイルとは別に .js ファイルを用意し、src 属性で読み込むのが一般的です。

<script src="main.js"></script>

// main.js
alert("こんにちは！");

HTML・CSS・JavaScriptをそれぞれ別のファイルに分けておくと、コードの見通しがよくなり、修正や管理もしやすくなります。実務でも「HTML＝構造」「CSS＝デザイン」「JavaScript＝機能」とファイルを分けるのが基本です。

Step 3：読み込む位置に注意する

<script> タグは書く位置によって動作のタイミングが変わります。

<head>
    <script src="main.js"></script>
</head>
<body>
    <p>こんにちは</p>
</body>

上記のように <head> 内にそのまま書いてしまうと、まだ読み込まれていない <body> 内の要素をJavaScriptから操作しようとしてエラーになることがあります。そのため、次のように</body> の直前に置くのが基本の書き方です。

<head>
</head>
<body>
    <p>こんにちは</p>

    <script src="main.js"></script>
</body>

こうすることで、<body> 内のHTMLがすべて読み込まれた後にJavaScriptが実行されるようになります。

実務サンプル（ボタンクリックで表示を切り替える）

簡単な例として、ボタンをクリックすると文章が表示される仕組みを作ってみましょう。

HTML

<button id="showBtn">メッセージを表示</button>
<p id="message" style="display: none;">ボタンが押されました！</p>

<script src="main.js"></script>

JavaScript（main.js）

const btn = document.getElementById("showBtn");
const message = document.getElementById("message");

btn.addEventListener("click", function () {
    message.style.display = "block";
});

document.getElementById() でHTML要素を取得し、addEventListener() で「クリックされたときの処理」を登録しています。この「HTML要素を取得して操作する」という仕組みについては、次回以降の記事（ドキュメント・イベント）で詳しく解説していきます。