JavaScriptとは何か？HTMLとの違いと基本文法を初心者向けに解説

Webサイトを見ていると、ボタンを押すと表示が変わったり、フォームに入力した内容がその場でチェックされたりすることがあります。

これらの「動き」を支えているのがJavaScriptです。

本記事では、JavaScriptとは何かという基本から、HTMLとの違い、そして最初に覚えるべき文法まで、初心者の方にもわかりやすいように、段階を追って丁寧に解説していきます。

JavaScriptとは何か？できることと役割

JavaScriptとはどんなプログラミング言語か

JavaScriptは、主にWebブラウザの中で動くプログラミング言語です。

ChromeやEdge、Safariなど、私たちが普段使っているブラウザには、JavaScriptを読み取り実行する機能が最初から入っています。

HTMLやCSSと並んで、Webを支える3つの基本技術の1つであり、特に「ユーザーの操作に応じて画面を変える」「ページを動的に書き換える」といった役割を担います。

ポイントは、JavaScriptだけがあっても画面は表示されないということです。

画面の骨組みはHTMLが、見た目のデザインはCSSが、そして動きや処理はJavaScriptが担当します。

このように、JavaScriptはWebページに「命」を吹き込むようなものだとイメージしていただくと理解しやすいです。

WebサイトでのJavaScriptの役割

WebサイトにおけるJavaScriptの主な役割は次のようなものです。

まず、ユーザーの操作に反応することができます。

たとえば、ボタンをクリックしたとき、マウスを乗せたとき、キーボードで入力したときなどに応じて、画面の内容を変えたり、メッセージを表示したりできます。

また、画面の一部だけを動的に書き換えることもできます。

ページ全体を再読み込みせずに、商品リストだけ更新したり、入力フォームのエラーメッセージだけ表示したりといったことが可能です。

さらに、サーバー(バックエンド)と通信してデータを受け取る役割もあります。

新着記事を読み込んだり、検索結果を取得したりする際に、JavaScriptが裏側でHTTP通信を行い、結果を画面に反映させています。

JavaScriptでできること

JavaScriptでできることは年々広がっていますが、初心者向けに整理すると次のようになります。

1つ目は、Webページの表示内容を変えることです。

HTMLで用意された要素(見出し、段落、ボタンなど)のテキストを書き換えたり、非表示にしたり、追加したりできます。

これにより、タブ切り替えやモーダルウィンドウ、アコーディオンメニューのようなUIが実現されます。

2つ目は、ユーザーの入力内容をチェックすることです。

例えば、メールアドレスの形式が正しいかどうか、必須項目が入力されているかなどを、サーバーに送る前にブラウザ側で確認でき、ユーザーの入力ミスを減らせます。

3つ目は、データを扱う処理です。

配列やオブジェクトといったデータ構造を使い、リストの並び替え、検索、集計などの処理をブラウザ内で行えます。

現在では、サーバー側(Node.js)で動かしたり、スマホアプリやデスクトップアプリを作ったりすることも可能ですが、まずは「ブラウザ上で動く言語」として理解すると学習の入り口としては十分です。

JavaScriptとHTMLの違いと関係

HTMLとは何か

HTMLはHyperText Markup Languageの略で、Webページの骨組み(構造)を記述するための言語です。

プログラミング言語というより「マークアップ言語」と呼ばれ、<p></p>や<h1></h1>といったタグを使って、文章の構造や意味をブラウザに伝えます。

HTMLは、見出し・段落・リンク・画像・リスト・フォームなど、「どこに何があるか」を定義する役割を持ちます。

ここではまだ「動き」はありません。

あくまで、ブラウザに構造を教えるための設計図のような存在です。

JavaScriptとHTMLの違いを初心者向けに解説

HTMLとJavaScriptは目的がまったく異なります。

初心者の方が混乱しやすいポイントなので、役割を対比しながら整理してみます。

HTMLだけ：新聞の紙面レイアウトのような静的な状態、 HTML＋JavaScript：アプリのように操作に応じて変化する状態、とイメージすると違いがわかりやすくなります。

HTMLとJavaScriptの連携の基本

実際のWebページでは、HTMLが土台となり、その上にJavaScriptが「動き」を追加します。

JavaScript単体では画面に何も表示されないため、必ずHTMLと組み合わせて使います。

具体的には、以下のような流れで連携します。

1. HTMLでボタンやテキストなどの要素を配置する
2. JavaScriptから、そのHTML要素を取得する
3. ボタンがクリックされたときに実行する処理をJavaScriptで定義する
4. JavaScriptの処理の中で、HTMLのテキストを書き換えたり、クラスを付け替えたりする

このように、HTMLが「対象」、JavaScriptが「操作する手」として働く関係だと考えると理解しやすいです。

JavaScriptの基本文法

この章では、ブラウザ上でJavaScriptを書いて動かす前提で、最初に必ず押さえておきたい文法を順番に説明します。

まず覚える書き方

JavaScriptでは、1つの命令(文)の終わりに;(セミコロン)を付けるのが基本です。

最近は省略されることも増えましたが、初心者のうちは付けておいた方がエラーに悩まされにくくなります。

また、文字列は"ダブルクォーテーション"か'シングルクォーテーション'で囲みます。

どちらを使っても動作しますが、プロジェクト内で統一することが大切です。

最もシンプルなコードの例として、ブラウザのコンソールに文字を表示するconsole.logがあります。

// コンソールに「こんにちは JavaScript」を表示する
console.log("こんにちは JavaScript");

このconsole.logは、学習中に結果を確認するためによく使うので、必ず覚えておきましょう。

変数と定数(let const)の基本

プログラムの中で値を一時的に保存しておく「箱」のようなものが変数と定数です。

JavaScriptでは、letとconstを使って変数・定数を宣言します。

基本的な書き方は次のようになります。

// letで変数を宣言
let count = 1;      // countという名前の変数に1を代入

// 値をあとから変更できる
count = 2;          // 問題なく代入できる

// constで定数を宣言
const PI = 3.14;    // PIという名前の定数に3.14を代入

// constは値を再代入できない
// PI = 3.1415;     // これはエラーになる (定数は変更不可)

初心者のうちは「基本的にconstを使い、どうしても値を変える必要があるときだけletを使う」というルールで書くと、バグを減らせます。

値が変わらない方が、後で読んだときに理解しやすく、安全なコードになりやすいからです。

データ型(文字列 数値 真偽値)の考え方

JavaScriptの値にはデータ型があります。

初心者がまず押さえるべきは、次の3つです。

1つ目は文字列(String)で、文章や文字を表します。

"こんにちは"や'JavaScript'のように、クォーテーションで囲んで表現します。

2つ目は数値(Number)で、整数・小数どちらも同じNumber型として扱われます。

10や3.14などが該当します。

3つ目は真偽値(Boolean)で、trueかfalseのどちらかの値だけをとります。

条件分岐(if文)でとても重要な役割を果たします。

// 文字列(String)
const message = "こんにちは";

// 数値(Number)
const age = 20;
const price = 99.8;

// 真偽値(Boolean)
const isAdult = true;
const isMember = false;

// typeof演算子で型を確認できる
console.log(typeof message); // "string"
console.log(typeof age);     // "number"
console.log(typeof isAdult); // "boolean"

値の種類によって、できる操作や意味が変わるため、「この変数にはどんな種類の値が入るのか」を常に意識することが大切です。

演算子(足し算 比較 条件)の基本

JavaScriptでは、演算子を使って計算や比較を行います。

初心者が最初に押さえるべき演算子は次の3種類です。

1つ目は算術演算子です。

足し算は+、引き算は-、かけ算は*、割り算は/などを使います。

2つ目は比較演算子で、値が等しいかどうか、大きいか小さいかを調べます。

===(等しい)、!==(等しくない)、>、<などがあります。

3つ目は論理演算子で、条件を組み合わせるときに使います。

&&(かつ)、||(または)、!(否定)などです。

const a = 10;
const b = 3;

// 算術演算子
console.log(a + b);  // 13
console.log(a - b);  // 7
console.log(a * b);  // 30
console.log(a / b);  // 3.333...

// 比較演算子
console.log(a === b); // false (10と3は等しくない)
console.log(a > b);   // true  (10は3より大きい)

// 論理演算子
const isAdult = true;
const isMember = false;
console.log(isAdult && isMember); // false (両方trueでないとtrueにならない)
console.log(isAdult || isMember); // true  (どちらかがtrueならtrue)

比較には===を使うことが重要です。

==という演算子もありますが、暗黙的な型変換が行われて予期せぬ結果になりやすいため、初心者のうちは===だけ使うと覚えておく方が安全です。

条件分岐(if文)の書き方

if文は「もし〜ならば〜する」を表現する構文です。

プログラムに「判断力」を与える重要な仕組みです。

基本の形は次のようになります。

// 条件がtrueのときだけ、中かっこの中の処理が実行される
if (条件) {
  // 条件がtrueのときの処理
}

ifに続いて丸かっこ()の中に条件式を書き、その結果がtrueのときに波かっこ{}の中の処理が実行されます。

elseを使えば「それ以外」の場合の処理も書けます。

const age = 18;

if (age >= 20) {
  console.log("お酒を買えます");
} else {
  console.log("まだお酒は買えません");
}

さらに、条件を3つ以上に分けたいときはelse ifを使います。

const score = 75;

if (score >= 80) {
  console.log("合格 (A)");
} else if (score >= 60) {
  console.log("合格 (B)");
} else {
  console.log("不合格");
}

このように、if文は「状況に応じて処理を切り替える」ための基本パーツです。

必ず書けるようにしておきましょう。

繰り返し(for while)の基本

同じ処理を何度も繰り返したいときに使うのが繰り返し処理(ループ)です。

JavaScriptでは、代表的なものとしてfor文とwhile文があります。

for文は、「何回繰り返すか」が決まっているときによく使います。

// 1から5までの数字を順番に表示する
for (let i = 1; i <= 5; i++) {
  console.log(i);
}

上のコードでは、iという変数を1からスタートし、i <= 5という条件を満たす間、毎回i++(iを1ずつ増やす)して繰り返します。

while文は、「条件がtrueである間」ずっと繰り返したいときに使います。

let count = 1;

// countが3以下の間、処理を繰り返す
while (count <= 3) {
  console.log("countの値:", count);
  count++; // 必ずどこかでcountを変化させないと、無限ループになる
}

ループを書くときに最も多いミスは「条件が永遠にtrueのままで無限ループになる」ことです。

forやwhileの中で、必ずカウンター変数を変化させるよう注意してください。

関数の基本

関数は「処理のまとまり」に名前をつけて再利用できるようにしたものです。

同じような処理を何度も書かずに使い回せるため、プログラムが整理されて読みやすくなります。

基本的な関数の定義と呼び出しは次のように書きます。

// 関数の定義
function greet(name) {
  // nameは「引数」と呼ばれ、関数に渡される値
  console.log("こんにちは、" + name + "さん");
}

// 関数の呼び出し
greet("田中");  // 「こんにちは、田中さん」と表示
greet("佐藤");  // 「こんにちは、佐藤さん」と表示

この例では、greetという関数を定義し、nameという引数として名前を受け取っています。

呼び出すときに渡す値によって、結果が変わります。

さらに、関数は値を返す(return)こともできます。

// 2つの数値を足して、その結果を返す関数
function add(a, b) {
  const result = a + b;
  return result; // 関数の呼び出し元に結果を返す
}

const sum = add(3, 5); // sumには8が入る
console.log(sum);      // 8と表示される

関数を使いこなせるようになると、「小さな部品を組み合わせて大きな処理を作る」という考え方が身につき、コードが格段に整理されます。

よく出るエラーと確認方法

初心者がJavaScriptを学ぶとき、エラーに遭遇するのは当たり前です。

大切なのは、エラーを読んで原因を探す習慣を身につけることです。

よくあるエラーには次のようなものがあります。

• SyntaxError(構文エラー)
  セミコロン;の抜け、かっこの閉じ忘れ、誤った文法などが原因で発生します。
• ReferenceError
  宣言されていない変数名を使ったときに出ます(タイポが原因のことも多いです)。
• TypeError
  本来その操作ができない型に対してメソッドを呼び出した場合などに出ます。

エラーを確認するには、ブラウザの開発者ツールを使います。

Chromeの場合は、画面を右クリックして「検証」を選び、「Console」タブを開くとエラー内容が表示されます。

エラーが出たときは、必ずメッセージを読み、どのファイルの何行目かを確認するクセをつけましょう。

最初は英語が難しく感じるかもしれませんが、同じエラーを何度か見るうちに、意味が自然とわかるようになってきます。

JavaScriptとHTMLを組み合わせた簡単な例

ここからは、実際にHTMLとJavaScriptを組み合わせて、「ボタンを押すと文字が変わる」という簡単な例を作りながら学んでいきます。

scriptタグでJavaScriptを読み込む方法

HTMLの中でJavaScriptを書くときは、<script>タグを使います。

方法は主に2つあり、HTMLの中に直接書く方法と、外部ファイルとして読み込む方法があります。

1つ目は、HTMLファイル内に直接JavaScriptを書く方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptの基本</title>
</head>
<body>
  <h1>JavaScriptのテスト</h1>

  <!-- HTML内に直接JavaScriptを書く -->
  <script>
    // ページが読み込まれたときに実行される
    console.log("ページが読み込まれました");
  </script>
</body>
</html>

2つ目は、JavaScriptを別ファイルに分けて、それをHTMLから読み込む方法です。

実際の開発ではこちらが一般的です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptの基本</title>
</head>
<body>
  <h1>JavaScriptのテスト</h1>

  <!-- 外部ファイル(main.js)を読み込む -->
  <script src="main.js"></script>
</body>
</html>

// main.js ファイルの中身
console.log("外部ファイルからJavaScriptを読み込みました");

実際に試すと、ブラウザのコンソールにメッセージが表示されます。

外部ファイルからJavaScriptを読み込みました

HTMLとJavaScriptを分けることで、コードが整理され、再利用もしやすくなるため、慣れてきたら外部ファイル方式を基本にすると良いです。

HTMLのボタンをJavaScriptで動かす例

ここでは、ボタンをクリックしたらテキストが変わる簡単な例を作ってみます。

HTMLでボタンと表示用の要素を用意し、JavaScriptでそれらを操作します。

まずはHTML部分です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ボタン操作の例</title>
</head>
<body>
  <h1>ボタンをクリックしてみましょう</h1>

  <!-- メッセージを表示するための要素 -->
  <p id="message">メッセージはまだありません</p>

  <!-- クリックするボタン -->
  <button id="myButton">メッセージを表示</button>

  <!-- JavaScriptファイルを読み込む -->
  <script src="script.js"></script>
</body>
</html>

次に、script.jsの中身です。

// script.js

// idがmyButtonの要素(ボタン)を取得
const button = document.getElementById("myButton");

// idがmessageの要素(段落)を取得
const message = document.getElementById("message");

// ボタンがクリックされたときに実行する処理を登録
button.addEventListener("click", function() {
  // テキストを変更する
  message.textContent = "ボタンがクリックされました！";

  // コンソールにもログを出して確認
  console.log("ボタンがクリックされ、メッセージを書き換えました");
});

ボタンがクリックされ、メッセージを書き換えました

ここで重要なのは、JavaScriptがHTMLの要素を取得して操作している点です。

• document.getElementById("myButton")で、HTMLのid="myButton"のボタンを取得
• button.addEventListener("click", ...)で、「クリックされたとき」の処理を登録
• その中でmessage.textContentを書き換えてテキストを変更

この流れを理解できると、「HTMLで要素を用意し、JavaScriptで動きをつける」という基本パターンが見えてきます。

alertとconsole.logで結果を確認する方法

JavaScriptの学習時には、処理の結果をすぐ確認できる方法をいくつか持っておくと便利です。

代表的なものがalertとconsole.logです。

alert関数は、ブラウザ画面にポップアップ(ダイアログ)を表示します。

// 画面中央にポップアップを表示する
alert("こんにちは！JavaScriptの世界へようこそ");

console.log関数は、ブラウザの開発者ツールのコンソールにメッセージを出力します。

学習時にはほぼ必須と言える機能です。

const name = "山田";
const age = 25;

// 変数の値を確認したいときなどに使う
console.log("名前:", name);
console.log("年齢:", age);

名前: 山田
年齢: 25

alertはユーザーの操作を一時的に止めてしまうため、実際の開発ではあまり多用されませんが、学習の最初の段階では「ちゃんと動いているか」を視覚的に確認するために役立ちます。

一方でconsole.logは、開発中のデバッグ手段として非常によく使われます。

値が思った通りになっているか、関数が呼び出されているかなどを確認する際は、まずconsole.logを挟んでみる習慣をつけると良いです。

まとめ

本記事では、JavaScriptとは何かという基本的な位置づけから、HTMLとの役割の違いと連携、そして変数・データ型・演算子・if文・繰り返し・関数といった基本文法を、初心者向けに丁寧に解説しました。

最後に、HTMLとJavaScriptを組み合わせて、ボタンをクリックするとメッセージが変わるサンプルも作成し、「HTMLで骨組みを作り、JavaScriptで動きを付ける」という実践的なイメージを持てたのではないかと思います。

これらはすべて、今後より複雑なアプリケーションを作るための土台となる考え方です。

少しずつ手を動かしながら、「エラーを恐れず、動かしながら覚える」ことを意識して学習を続けてみてください。