読み込み中...

JavaScriptをbody内に埋め込む簡単な7つの方法

JavaScriptコードをHTMLに埋め込む方法 JS
この記事は約21分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

●JavaScriptをHTMLに埋め込む必要性とは？

JavaScriptは、Webサイトに動きやinteractivityを加えるための強力なプログラミング言語です。

静的なHTMLだけでは実現できない、ユーザーとのインタラクションやダイナミックなコンテンツ表示などを可能にします。

○JavaScriptでできること

具体的には、JavaScriptを使うことで、次のようなことができるようになります。

・フォームの入力チェックやバリデーション
・ボタンクリックでのポップアップ表示
・アニメーションやエフェクトの実装
・Ajaxを使ったサーバーとの非同期通信
・ユーザーアクションに応じたコンテンツの動的な書き換え

このように、JavaScriptはWebサイトに多彩な表現力と機能性を与えてくれる頼もしい相棒だと言えます。

○HTMLとJavaScriptの関係性

HTMLはWebページの構造と内容を記述するためのマークアップ言語で、JavaScriptはそのHTMLを操作したり、イベントに反応したりするためのプログラミング言語です。

例えるなら、HTMLが人間の体だとすれば、JavaScriptは体を動かす筋肉や神経のような役割を果たしています。

両者はお互いに連携することで、Webサイトに命を吹き込んでいるのです。

そのためには、HTMLの中にJavaScriptを適切に組み込む必要があります。

JavaScriptをHTMLに埋め込む方法はいくつかありますが、それぞれ使い分けることが大切ですね。

これからその方法を1つずつ見ていきましょう。

●bodyタグ内にJavaScriptを直接記述する方法

さて、JavaScriptをHTMLに埋め込む最も基本的な方法は、bodyタグの中に直接JavaScriptコードを記述することです。

この方法は、簡単で分かりやすいのが長所ですね。

HTMLファイルを開いてすぐにJavaScriptが書ける手軽さがあります。

ただし、コードの量が多くなるとHTMLとJavaScriptが混在して読みにくくなるのが難点です。

メンテナンス性を考えると、あまりおすすめできない方法かもしれません。

それでも、ちょっとした処理を組み込むにはこの方法が手っ取り早いでしょう。

初心者の方も、まずはこの方法から始めてみるのが良いと思います。

○サンプルコード1：alertを表示する

では実際に、bodyタグ内にJavaScriptを書いてみましょう。

たとえば、ページを開いたらアラートを表示するには、次のように書きます。

<body>
  <h1>ようこそ！</h1>
  <script>
    alert("こんにちは、JavaScript！");
  </script>
</body>

このように、bodyタグの中で<script>と</script>で囲んだ部分にJavaScriptを直接記述します。

シンプルですね。

このコードをブラウザで開くと、「こんにちは、JavaScript！」というアラートが表示されるはずです。

JavaScriptからアラートを出すにはalert()という組み込み関数を使います。

カッコの中に表示したい文字列を引数として渡すのがポイントですね。

○サンプルコード2：現在時刻を表示する

もう1つ、現在時刻を表示する例も見てみましょう。

bodyタグ内でDateオブジェクトを使って現在時刻を取得し、それをdocument.write()で出力します。

<body>
  <h1>現在時刻</h1>
  <script>
    const now = new Date();
    document.write(`現在時刻は${now}です。`);
  </script>
</body>

このコードを実行すると、次のように現在の日時が表示されます。

現在時刻
現在時刻はWed Jun 10 2023 12:34:56 GMT+0900 (日本標準時)です。

Dateオブジェクトをnewすることで現在時刻が取得でき、それをdocument.write()に渡すことでHTML上に出力できます。

ここで使っている「`」（バッククォート）は、テンプレートリテラルと呼ばれる記法です。

${}の中に変数を埋め込むことができ、文字列の中で変数を扱いやすくなります。

●scriptタグを使ってJavaScriptを埋め込む

bodyタグ内に直接JavaScriptを書く方法は手軽ですが、コードが長くなると読みづらくなるという欠点がありましたね。

そこで登場するのが、<script>タグを使う方法です。

<script>タグを使えば、HTMLとJavaScriptを分離して書くことができます。

コードの見通しが良くなり、メンテナンス性が向上するのが嬉しいポイントですね。

○サンプルコード3：scriptタグの基本的な書き方

<script>タグは、開始タグ<script>と終了タグ</script>で囲んだ部分にJavaScriptのコードを記述します。

たとえば、先ほどの現在時刻を表示する例は次のように書き換えられます。

<body>
  <h1>現在時刻</h1>
  <p id="clock"></p>

  <script>
    function showClock() {
      const now = new Date();
      const clock = document.getElementById('clock');
      clock.textContent = `現在時刻は${now}です。`;
    }
    showClock();
  </script>
</body>

ここでは、時刻を表示する場所として<p>タグを用意し、id属性でclockという名前をつけています。

そして<script>タグ内で、getElementById()メソッドを使ってその要素を取得し、textContentプロパティで中身を書き換えています。

このコードを実行すると、次のような結果になります。

<body>
  <h1>現在時刻</h1>
  <p id="clock">現在時刻はWed Jun 10 2023 12:34:56 GMT+0900 (日本標準時)です。</p>
</body>

このように、JavaScriptでHTML要素を操作することで、動的にページを変更できるようになるのです。

○scriptタグの属性について

<script>タグには、JavaScriptの動作を制御するためのいくつかの属性があります。

よく使われるのは次の2つです。

  • type属性：スクリプトの種類を指定します。JavaScriptの場合は"text/javascript"が一般的ですが、HTML5ではデフォルト値になったため省略できます。
  • src属性：外部JavaScriptファイルを読み込むときに使います。この属性を使う場合、<script>タグの中身は空にします。

たとえば、外部ファイルscript.jsを読み込むには次のように書きます。

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

このように、<script>タグを使うことでHTMLとJavaScriptを分離でき、コードの見通しが良くなります。

また属性を使って柔軟に設定することもできるので、状況に応じて使い分けていきましょう。

●外部JavaScriptファイルを読み込む方法

さて、JavaScriptのコードが長くなってくると、HTMLファイルの中に直接書くのは避けたいですよね。

そんなときは、JavaScriptを別ファイルに分離して、HTMLから読み込む方法が便利です。

外部JavaScriptファイルを使うメリットはいくつかあります。

まず、HTMLとJavaScriptを分離できるので、コードの見通しが良くなり、メンテナンスがしやすくなります。

また、同じJavaScriptを複数のHTMLファイルで使い回せるので、コードの重複を避けられます。

それでは、具体的にどうやって外部JavaScriptファイルを読み込むのか見ていきましょう。

○サンプルコード4：srcを使った外部ファイルの読み込み

外部JavaScriptファイルを読み込むには、scriptタグのsrc属性を使います。

たとえば、「script.js」というファイルを読み込むには、次のように書きます。

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

これだけです。

srcにファイルのパスを指定するだけで、HTMLから外部のJavaScriptファイルを読み込むことができます。

試しに、先ほどの現在時刻を表示する例を、外部ファイルを使って書き換えてみましょう。

まず、「clock.js」というファイルを作成し、次のようにJavaScriptのコードを書きます。

function showClock() {
  const now = new Date();
  const clock = document.getElementById('clock');
  clock.textContent = `現在時刻は${now}です。`;
}

showClock();

次に、HTMLファイルを次のように書き換えます。

<body>
  <h1>現在時刻</h1>
  <p id="clock"></p>

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

これで、JavaScriptのコードがHTMLから分離されました。

scriptタグでclock.jsを読み込んでいるので、ページを開くと時刻が表示されるはずです。

外部ファイルを使えば、HTMLとJavaScriptを分離でき、コードがすっきりします。

しかも、複数のHTMLファイルから同じJavaScriptファイルを読み込めるので、再利用性も高くなります。

○サンプルコード5：asyncとdeferの使い分け

ところで、JavaScriptファイルを読み込むとき、もう1つ注意点があります。

それは、scriptタグの置く場所です。

JavaScriptファイルを読み込むと、ブラウザはそのファイルをダウンロードして実行します。

ということは、ファイルのダウンロードが完了するまで、HTMLの解析が止まってしまうのです。

これを避けるため、scriptタグにasyncまたはdeferという属性をつけることがあります。こ

の2つの属性の違いを理解しておくと、ページの読み込み速度を改善できます。

asyncは、JavaScriptファイルの読み込みを非同期で行います。

つまり、HTMLの解析を止めずに、ファイルのダウンロードを並行して行うのです。

ダウンロードが完了次第、すぐにJavaScriptが実行されます。

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

一方、deferは、JavaScriptファイルの読み込みを延期します。

HTMLの解析が完了するまでファイルの実行を待つので、HTMLの表示が速くなります。

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

使い分けのポイントは、そのJavaScriptがHTMLの解析に依存しているかどうかです。

依存していなければasyncを使い、依存しているならdeferを使うのがよいでしょう。

たとえば、ページ読み込み時に必ず実行したいJavaScriptはdeferが向いています。

外部JavaScriptファイルを使いこなすには、async・deferの特性を理解しておくことが大切ですね。

使い分けを覚えて、ページのパフォーマンス改善につなげていきましょう。

●JavaScriptでHTMLタグに変数を埋め込む

さて、JavaScriptを外部ファイルに分離する方法を身につけたところで、今度はHTMLとJavaScriptをもっと密接に連携させる方法を見ていきましょう。

HTMLタグの中に動的なデータを埋め込みたい、そんなシーンはよくありますよね。

たとえば、ユーザー名を表示したり、商品の価格を出力したりといった具合です。

そこで活躍するのが、テンプレートリテラルとinnerHTMLです。

この2つを使いこなせば、JavaScriptの変数をHTMLに埋め込むのがとても楽になりますよ。

○サンプルコード6：テンプレートリテラルでHTMLにデータ挿入

テンプレートリテラルは、バッククォート(`)で囲んだ文字列の中に、${…}で変数を埋め込める機能です。

これを使えば、HTMLとJavaScriptを混ぜて書くのが簡単になります。

具体例を見てみましょう。

たとえば、変数の値をHTMLのタグに埋め込むには、以下のように書きます。

const name = "太郎";
const age = 25;
const html = `
  <p>こんにちは、${name}さん</p>
  <p>あなたの年齢は${age}歳ですね</p>
`;
document.body.innerHTML = html;

このコードでは、name と age という2つの変数を定義し、それをテンプレートリテラル内で${…}を使って埋め込んでいます。

そうすることで、次のようなHTMLを動的に生成できるのです。

<body>
  <p>こんにちは、太郎さん</p>
  <p>あなたの年齢は25歳ですね</p>
</body>

最後にdocument.body.innerHTMLでHTMLを書き換えることで、JavaScriptで生成したHTMLをページに反映させています。

○サンプルコード7：innerHTMLでHTMLを書き換える

innerHTMLはJavaScriptからHTMLの中身を書き換えるためのプロパティです。

先ほどのコード例でも使いましたが、これを使えばHTMLを自由自在に変更できます。

もう少し実践的な例を見てみましょう。

たとえば、ボタンをクリックしたらHTMLが変わるようなスクリプトは次のように書けます。

<body>
  <h1 id="title">ようこそ</h1>
  <p id="content">ここは私のホームページです。</p>
  <button onclick="changeContent()">クリックで内容が変わります</button>

  <script>
    function changeContent() {
      const title = "こんにちは！";
      const content = "ボタンがクリックされました。";
      const html = `
        <h1 id="title">${title}</h1>
        <p id="content">${content}</p>
      `;
      document.body.innerHTML = html;
    }
  </script>
</body>

このコードでは、ボタンのonclickイベントで changeContent() 関数を呼び出しています。

changeContent() の中では、title と content の2つの変数を定義し、それをテンプレートリテラルでHTMLに埋め込んでいます。

ボタンをクリックすると、次のようにHTMLが書き換わります。

<body>
  <h1 id="title">こんにちは！</h1>
  <p id="content">ボタンがクリックされました。</p>
  <button onclick="changeContent()">クリックで内容が変わります</button>
</body>

このように、innerHTMLとテンプレートリテラルをうまく使えば、HTMLとJavaScriptを連携させて動的なページを作ることができるのです。

●JavaScriptが動かない！よくあるエラーと対処法

JavaScriptを書いたはいいものの、思ったように動かない。

そんな経験は誰にでもありますよね。

特に初心者のうちは、些細なミスでも原因がわからず悩むことが多いかもしれません。

しかし、エラーは成長のチャンス。ひとつひとつ解決していくことで、確実にスキルアップできるはずです。

そこで、ここではよくあるJavaScriptのエラーをいくつか紹介します。

エラーの原因と対処法を知っておけば、つまずいたときも冷静に対処できるようになりますよ。

○エラー1：JavaScriptが有効になっていない

まず最初によくあるのが、「JavaScriptが有効になっていない」というエラーです。

プレビューしたブラウザで、JavaScriptが無効化されているために起こります。

たとえば、ChromeでJavaScriptを無効にするには、次の手順を踏みます。

設定＞プライバシーとセキュリティ＞サイトの設定＞JavaScriptをオフにする

このようにブラウザの設定でJavaScriptが無効化されていると、せっかく書いたコードが動かないのです。

対処法は簡単。

ブラウザの設定をもう一度確認し、JavaScriptが有効になっているか確かめましょう。ChromeならばJavaScriptをオンにすれば解決します。

意外と見落としがちなポイントですが、エラーの原因としてよくあるので、まずはここをチェックしてみてくださいね。

○エラー2：外部ファイルのパスが間違っている

次によくあるのが、「外部JavaScriptファイルが読み込めない」エラーです。

HTMLから外部JSファイルを読み込む際、ファイルのパスが間違っていると起こります。

例えば、HTMLファイルとJSファイルを次のように配置しているとします。

  • index.html
  • js/script.js

このとき、index.htmlから script.js を読み込むには src 属性を正しく指定する必要があります。

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

ここで、もし src=”script.js” と指定してしまうと、パスが違うためファイルが見つからず、エラーが発生してしまいます。

対処法は、ファイルの配置場所を再確認し、正しいパスを指定することです。

htmlファイルからの相対パスで指定するのがポイントですね。

パスを間違えると一見原因がわかりにくいエラーですが、実はよくある落とし穴なので注意が必要です。

○エラー3：DOMが読み込まれる前にJSが実行された

最後によく出くわすエラーが、「DOM要素が見つからない」というものです。

これは、HTMLのDOMツリーが構築される前にJavaScriptが実行されたために起こります。

たとえば、次のようなHTMLとJavaScriptを考えてみましょう。

<head>
  <script>
    const title = document.getElementById('title');
    console.log(title);
  </script>
</head>
<body>
  <h1 id="title">こんにちは</h1>
</body>

見ての通り、JavaScriptはHTMLのヘッダー部分で実行されるのに対し、id=”title”の要素はbodyタグの中にあります。

つまり、JavaScriptが実行された時点ではまだ id=”title” の要素が存在していないのです。

そのためこのコードを実行すると、titleの値は null になってしまいます。

これがDOMが読み込まれる前にJSを実行してしまったことによるエラーです。

対処法としては、JSの実行タイミングを遅らせること。

具体的には、次の2つの方法があります。

・JavaScriptをbodyタグの最後で読み込む
・window.onloadイベントを使ってDOMの構築を待つ

1つ目は、bodyタグの閉じタグ直前でJSを読み込む方法です。

こうすることで、JSが実行される頃にはHTMLのDOMが構築済みになります。

<body>
  <h1 id="title">こんにちは</h1>
  <script src="js/script.js"></script>
</body>

2つ目は、JavaScriptの実行をwindow.onloadイベントにひもづける方法です。

このイベントは、ページの読み込みが完了したタイミングで発火します。

window.onload = function() {
  const title = document.getElementById('title');
  console.log(title);
};

こうすれば、DOMが完成してから確実にJavaScriptが実行されるようになります。

●応用編：イベントハンドラでインタラクティブなページを作ろう

JavaScriptの基本的な使い方は理解できてきたところで、そろそろ実践的なテクニックにも挑戦してみたくなりますよね。

ここからは少し応用的な内容になりますが、イベントハンドラを使ってインタラクティブなWebページを作ってみましょう。

イベントハンドラとは、マウスクリックやキー入力など、ユーザーの動作に反応してJavaScriptを実行する仕組みのことです。

これを使えば、ユーザーとの対話性の高いページが作れるようになりますよ。

○サンプルコード8：クリックイベントでポップアップを表示

まずは、マウスクリックに反応するサンプルから見てみましょう。

次のコードは、ボタンをクリックするとポップアップを表示するという単純な例です。

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

<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('click', function() {
    alert('ボタンがクリックされました！');
  });
</script>

コードを詳しく見ていきましょう。

まず、HTMLではid属性が”btn”のbuttonタグを用意しています。

JavaScriptでは、document.getElementByIdでそのボタン要素を取得し、addEventListenerメソッドで「clickイベントが発生したら、この関数を実行する」という命令をセットしています。

このコードをブラウザで開いてボタンをクリックすると、次のようなポップアップが表示されるはずです。

ボタンがクリックされました！

ポイントは、イベントリスナーをセットするところ。

ここではclickイベントを監視していますが、ほかにもmouseoverやkeydownなど、さまざまなイベントに対応できます。

○サンプルコード9：マウスオーバーでスタイルを変更

続いて、よく使われるマウスオーバーイベントの例も見てみましょう。

<div id="box">マウスを乗せてね</div>

<script>
  const box = document.getElementById('box');

  box.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'red';
  });

  box.addEventListener('mouseout', function() {
    this.style.backgroundColor = '';
  });
</script>

ここでは、id=”box”のdiv要素に対して、マウスオーバー（mouseoverイベント）とマウスアウト（mouseoutイベント）の2つのイベントリスナーを設定しています。

マウスオーバーされたら背景色を赤に、マウスアウトしたら色を元に戻すという動作ですね。

イベントリスナーの中で要素のstyleプロパティを操作することで、JavaScriptからCSSを動的に変更しています。

このコードの実行結果は次のようになります。

マウスを乗せると赤色になるボックス

ポイントは、イベントリスナーの中でthisを使っているところ。

ここでのthisは、イベントの発生した要素（この場合はbox）を指しているので、その要素のプロパティを直接操作できるのです。

○サンプルコード10：入力内容をリアルタイムで反映

最後に、もう少し複雑な例として、フォームへの入力内容をリアルタイムで表示するサンプルを見てみましょう。

<input type="text" id="name">
<p id="output"></p>

<script>
  const input = document.getElementById('name');
  const output = document.getElementById('output');

  input.addEventListener('input', function() {
    output.textContent = `こんにちは、${this.value}さん`;
  });
</script>

ここでは、テキスト入力欄（id=”name”）とメッセージを表示するための段落（id=”output”）を用意しています。

JavaScriptでは、テキスト入力欄にinputイベントのリスナーを設定し、入力内容が変わるたびに、その値を取得してメッセージに反映しています。

ポイントは、inputイベントを使うことで、リアルタイムに値の変化を検知できること。

このコードを実行すると、次のように動作します。

こんにちは、（入力中の名前）さん

入力欄に「太郎」と入力すれば、リアルタイムで「こんにちは、太郎さん」とメッセージが変わるわけです。

ライブプレビュー機能のような、インタラクティブなフォームを作るのに役立つテクニックだと覚えておきましょう。

まとめ

さて、今回はJavaScriptをHTMLに組み込む方法について、基本から応用まで幅広く解説してきました。

この記事で学んだテクニックを活かして、自分だけのWebサイトを作っていくのをおすすめします。

HTMLとJavaScriptを組み合わせる面白さを体感しながら、実践スキルを磨いていきましょう。