JavaScriptとは｜役割と組み込み方の基本

この記事でわかること

HTML・CSS・JavaScriptの役割の違いを説明できる
自分のHTMLにJavaScriptを組み込み、最初のコードを動かせる
JavaScriptが動かないときに、原因を探して直せる

HTMLで骨組みを作り、CSSで見た目を整えたら、次はJavaScriptでページに「動き」を加える番です。役割と組み込み方を押さえれば、ボタンを押すと表示が変わるような仕組みを自分で作れるようになります。

ネコ丸

HTMLとCSSを覚えたなら準備はばっちりだよ！

JavaScriptの全体像

この記事は「役割を知る→HTMLに組み込む→読み込むタイミングを決める→実際に動かす」の順に進みます。組み込み方がわからないとコードを動かせず、タイミングを誤るとエラーになるため、初めての人は目次の順に読み進めてください。

やりたいことが決まっている場合は、次の表から探してください。すべてのSTEPを組み合わせたコードは「完成形のコード」にまとめています。

やりたいこと	使うもの	解説
HTMLにJSを直接書く	`<script>`	STEP2
JSファイルを読み込む	`<script src>`	STEP2
読み込み順のエラーを防ぐ	`defer`	STEP3
クリックで表示を変える	`addEventListener()`	STEP4
コードにメモを残す	`//`・`/* */`	STEP4
エラーの原因を調べる	開発者ツールのコンソール	STEP4

STEP1：JavaScriptの役割を知る

まずは、JavaScriptがWebページの中で何を担当しているのかを整理します。HTML・CSSとの違いがわかると、どこにJavaScriptを使えばよいか判断しやすくなります。

HTML・CSS・JavaScriptの役割分担

JavaScriptは、Webページに動きや複雑な機能を加えるためのプログラミング言語です。Webページは、HTML・CSS・JavaScriptの3層が重なってできています。

言語	担当	ボタンで例えると
HTML	構造と意味	ボタンを置く
CSS	見た目	ボタンの色や形を整える
JavaScript	動き・振る舞い	クリックしたら表示を変える

実装例

JavaScript：動き
CSS：見た目
HTML：構造

HTMLを土台に、CSS・JavaScriptの順で上に重なっていくイメージです

内容が自動で更新される、地図を操作できる、アニメーションが動くなど、ただ表示する以上のことをしているページには、JavaScriptが関わっています。

JavaScriptでできること

JavaScriptでは、値を変数に入れて使ったり、文字を組み立てたりできます。さらに、クリックなどページで起きる「イベント」を検知して、処理を実行できます。

最もよく使われるのは、DOM※1を通してHTMLやCSSを書き換える使い方です。要素の追加・削除・変更や、見た目の切り替えができます。

ほかにも、ブラウザに組み込まれた位置情報や2D・3D描画などのAPI※2を使えます。地図サービスのように、外部サービスが提供するAPIを使って機能を埋め込むことも可能です。

※1：DOM（Document Object Model）…HTMLをJavaScriptから操作できるようにする仕組み。
※2：API…プログラムから機能を呼び出すための窓口。自分で一から作らなくても、用意された機能を使える。

JavaとJavaScriptは別の言語

名前は似ていますが、JavaとJavaScriptは構文も用途も大きく異なる別の言語です。調べものをするときは、Javaの情報と混ざらないように注意しましょう。

また、JavaScriptはインタープリター言語※3です。書いたコードを変換する作業をしなくても、ブラウザがそのまま読み込んで実行してくれます。

なお、JavaScriptはブラウザだけでなく、Node.jsなどを使ってサーバー側で動かすこともできます。この記事では、ブラウザで動くJavaScriptを扱います。

※3：インタープリター言語…事前にコンパイル（変換）せず、実行するときに読み込んで動かす言語。実際には、多くのブラウザが実行時に高速化の処理を行っている。

ECMAScriptとの関係

JavaScriptの言語仕様は、Ecma Internationalという団体が「ECMAScript」という名前で標準化しています。ES6（ES2015）以降は毎年新しい版が出ており、「ES2017」「ES2018」のように年号で呼びます。

最新版はECMAScript 2026で、2026年6月30日に承認されました。一方、DOMなどブラウザの機能はECMAScriptとは別の仕様で決められています。

ネコ丸

「ES2015」みたいな言葉が出てきたら、JavaScriptのバージョンのことだと思えばOKだよ！

STEP2：HTMLにJavaScriptを組み込む

JavaScriptは、HTMLの<script>要素を使って読み込みます。CSSには<style>と<link>がありますが、JavaScriptでは<script>だけで両方の書き方ができます。

scriptタグの中に直接書く

<script>と</script>の間に、JavaScriptを直接書く方法です。短いコードをすぐに試したいときに便利です。

<script>
  // JavaScriptをここに書く
</script>

外部ファイルを読み込む

拡張子が.jsのファイルにJavaScriptを書き、src属性で読み込む方法です。deferは読み込むタイミングを決める属性で、STEP3で解説します。

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

外部ファイルにすると、同じコードを複数のページで使い回せます。HTMLにコードの塊が入らないため、HTMLも読みやすくなります。

直接書くか外部ファイルにするかの使い分け

方法	向いている場面
外部ファイル	実務の基本。複数ページで使うコードや、長いコード
scriptタグに直接	そのページだけで使う短いコードや、学習中の動作確認

type属性は書かなくていい

古い記事では<script type="text/javascript">という書き方をよく見かけます。現在はtype属性を省略することが推奨されており、省略してもJavaScriptとして扱われます。

また、JavaScriptは大文字と小文字を区別します。コードを写すときは、見えているとおり正確に書きましょう。

ネコ丸

古い記事のコードをコピペするときは、type属性を消しておこうね！

STEP3：読み込むタイミングを決める

JavaScriptは、書く場所によって実行されるタイミングが変わります。タイミングを誤ると、操作したい要素が見つからずにエラーになるため、ここでしっかり押さえておきましょう。

タイミングが大事な理由

ブラウザはHTMLを上から順に読み込みます。そのため、ボタンなどの要素より先にJavaScriptが実行されると、まだ存在しない要素を操作しようとして動きません。

何も属性を付けない<script>は、その場でHTMLの読み込みを止め、JavaScriptを読み込んで実行します。

bodyの閉じタグの直前に置く

scriptタグの中に直接書く場合は、</body>の直前に置くのが基本です。HTMLをすべて読み込んだあとに実行されるため、要素が見つからないエラーを防げます。

  <button>クリックしてね</button>
  <script>
    // ここに書いたコードは、ボタンを読み込んだあとに実行される
  </script>
</body>

defer属性で読み込む

外部ファイルを読み込むときは、<head>の中にdefer属性を付けて置くのがおすすめです。HTMLの読み込みと並行してファイルをダウンロードし、HTMLを読み終わってから実行されます。

<head>
  <script src="script.js" defer></script>
</head>

deferを付けたスクリプトが複数ある場合は、書いた順に実行されます。body末尾に置くよりも、早くダウンロードを始められる点もメリットです。

deferは外部ファイル用の属性です。srcのない、直接書いたスクリプトに付けても効果はありません。

asyncとtype=”module”

asyncも外部ファイル用の属性で、ダウンロードが終わり次第すぐに実行します。ただし、実行される順番は保証されません。

type="module"を付けると、コードはモジュールとして扱われ、deferと同じようにHTMLを読み終わるまで実行を待ちます。deferを付けなくても自動で待つため、併用する必要はありません。

ただし、type="module"で外部ファイルを読み込むと、HTMLファイルをダブルクリックして開いた状態では動きません。練習中はローカルテストサーバーを使うか、deferで読み込みましょう。

読み込み方の使い分け

書き方	実行されるタイミング	向いている場面
body末尾に置く	HTMLを読み終わったあと	scriptタグに直接書くコード
`defer`	HTMLを読み終わったあと、書いた順	ページの要素を操作するコード（基本はこれ）
`async`	ダウンロードが終わり次第。順番は不定	ほかのコードに依存しない独立したコード
`type="module"`	HTMLを読み終わったあと	モジュールとして書くコード（ローカルではサーバーが必要）

ネコ丸

迷ったら「headにdefer付きで置く」と覚えておけば大丈夫だよ！

STEP4：最初のコードを動かす

組み込み方とタイミングがわかったら、実際にコードを動かしてみます。クリックで表示を変えるコードを書き、つまずきやすいポイントと確認方法もあわせて見ていきます。

クリックしたら表示を変える

ボタンをクリックすると、ボタンの文字が変わるコードです。「要素を取得する→イベントを登録する→表示を変える」の流れは、多くのJavaScriptの基本形になります。

HTML

<button class="btn">クリックしてね</button>

JavaScript

const button = document.querySelector(".btn");  // ①
button.addEventListener("click", () => {         // ②
  button.textContent = "クリックされました";     // ③
});

コード解説
①	クラスがbtnの要素を探し、変数buttonに入れる
②	ボタンがクリックされたときに、中の処理を実行するよう登録する
③	ボタンの文字を書き換える

HTMLのタグにonclick="関数名()"と書いて処理を実行する方法もあります。しかし、HTMLとJavaScriptが混ざるうえに、ボタンごとに属性を書く必要があるため、MDNでも使わないよう案内されています。

クリックの処理は、上のコードのようにaddEventListener()で登録しましょう。

使う前に定義する

JavaScriptは、基本的に上から順に実行されます。そのため、変数は使う前に用意しておく必要があります。

button.addEventListener("click", () => {  // まだbuttonがないのに使っている
  button.textContent = "クリックされました";
});
const button = document.querySelector(".btn");

このように順番を逆にすると、Uncaught ReferenceError: Cannot access 'button' before initializationというエラーになります。「buttonを用意する前に使おうとした」という意味です。

コメントを書く

コメントは、ブラウザに実行されないメモです。処理の意図を書いておくと、あとから見返したときや、ほかの人がコードを読むときに役立ちます。

// 1行のコメント
/* 複数行の
   コメント */

HTMLのとは書き方が違うので注意しましょう。複数行のコメントは、CSSと同じ書き方です。

コンソールで動作を確認する

JavaScriptが動かないときは、ブラウザの開発者ツールにある「コンソール」を確認します。エラーの内容が表示されるため、原因を探す手がかりになります。

開発者ツールを開く（Windowsは Ctrl + Shift + I または F12、Macは ⌘ + ⌥ + I）
「コンソール」タブを選ぶ
赤字のエラーがあれば、内容と行番号を確認する

コンソールには、JavaScriptを直接入力して実行することもできます。例えばalert("hello!");と入力して Enter を押すと、ダイアログが表示されます。

なお、Safariは初期状態では開発者ツールが使えません。設定の「詳細」から、開発者向けの機能を有効にする必要があります。

ネコ丸

動かないときは、まずコンソールを開くクセをつけようね！エラー文をそのまま検索するのもおすすめだよ

完成形のコード

ここまでのSTEPを組み合わせると、次のようになります。2つのファイルを同じフォルダに保存し、HTMLファイルをブラウザで開いて試してみてください。

HTML（index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JavaScriptの練習</title>
  <script src="script.js" defer></script>  <!-- ① -->
</head>
<body>
  <button class="btn">クリックしてね</button>
</body>
</html>

JavaScript（script.js）

// ボタンをクリックしたら文字を変える          // ②
const button = document.querySelector(".btn");  // ③
button.addEventListener("click", () => {         // ④
  button.textContent = "クリックされました";
});

コード解説
①	外部ファイルをdefer付きで読み込む（STEP3）
②	処理の内容をコメントで残す（STEP4）
③	操作したい要素を取得する（STEP4）
④	クリックされたら文字を書き換える（STEP4）

ネコ丸

動いたら、文字や色を変える処理を足して遊んでみてね！

さいごに

まとめ

JavaScriptは、HTML・CSSで作ったページに動きを加える言語です。まずは次の3つを押さえておけば、自分のページでコードを動かせます。

JavaScriptは外部ファイルにして、<script src>で読み込む
要素を操作するコードは、<head>にdefer付きで置く
動かないときは、開発者ツールのコンソールでエラーを確認する

慣れてきたら、クリック以外のイベントや、要素を追加・削除する操作にも挑戦してみてください。

よくある質問

JavaScriptを書いたのに動きません

次の3点を順に確認してみてください。

コンソールにエラーが出ていないか（コンソールで動作を確認する）
要素より先にJavaScriptが実行されていないか（defer属性で読み込む）
大文字・小文字やスペルが正確か（type属性は書かなくていい）

JavaとJavaScriptは同じものですか？

いいえ、名前は似ていますが別の言語です。構文も用途も大きく異なります。

詳しくは「JavaとJavaScriptは別の言語」で解説しています。

type=”text/javascript”は書く必要がありますか？

書く必要はありません。現在は省略が推奨されており、省略してもJavaScriptとして扱われます。

詳しくは「type属性は書かなくていい」で解説しています。

deferとasyncはどちらを使えばいいですか？

ページの要素を操作するコードや、実行する順番が大事なコードにはdeferを使います。asyncは、ほかのコードに依存しない独立したコード向けです。

詳しくは「defer属性で読み込む」で解説しています。

ES6やES2026とは何ですか？

JavaScriptの言語仕様であるECMAScriptのバージョン名です。ES6（ES2015）以降は毎年新しい版が出ており、最新版はECMAScript 2026です。

詳しくは「ECMAScriptとの関係」で解説しています。