JavaScript
script
外部ファイル

【簡単】HTMLファイル内にJavaScriptのコードを書く方法を解説

2021/10/26

( 更新日：2022/05/17 )

Webサイトを動的なサイトにするためにはJavaScriptは欠かせません。ユーザーが見出しをクリックしたらコンテンツの文章が表示されたり、画像がスライドショー形式にするなどの機能はJavaScriptが使われています。

JavaScriptのコードを書く方法は二つあります。

HTMLファイル内に書く
外部ファイルに書く

本記事ではHTMLファイル内にJavaScriptを書くための方法を解説します。また、HTMLファイル内に書くケースはどんな時かも解説します。

JavaScriptとは

JavaScriptはHTML/CSSに動的な処理を行えるプログラミング言語です。JavaScriptを使えばユーザーのアクション（クリック、スクロールなど）に応じて、HTMLコンテンツの内容やCSSを書き換えることができます。

JavaScriptを使えば、ユーザーに見やすいサイトを作成可能です。

例えば、HTML/CSSだけで作られたサイトだとスマホやタブレットなどの小さい画面で見た際に、縦長のページになります。縦長のページだとスクロールが長くなり、途中で飽きられやすいです。JavaScriptを使えば必要なコンテンツのみを表示させることも可能です。

HTMLの中にJavaScriptのコードを書く方法

JavaScriptを書く場所

JavaScriptを書く場所はheadタグの中かbodyの閉じタグの前に書きます。本サイトではbodyの閉じタグの前に書くことをおすすめします。理由はWebページの表示までの時間とコードによっては先に読み込むとエラーになるケースがあるからです。

書く場所によってJavaScriptの読み込む順番が異なります。headタグに書いた場合、JavaScriptのコードを読み込むまで、bodyタグの内容は表示されません。JavaScriptのコードが多い、または複雑な処理になるほど、表示が遅くなります。

表示が遅いとユーザーが途中でページを離れてしまう可能性があります。

また、JavaScriptを先に読み込んでしまうと、HTMLのbody内のタグに対して処理を行う場合にエラーになります。JavaScriptを先に読み込むとHTMLのbodyタグは未だ表示されていないため、プログラムを実行できません。

避けるために特別にコードが必要になります。それなら、bodyタグの一番最後に書くほうが、コードも短く、表示までの時間が短いため、ユーザーにとってもいいです。

JavaScriptのコードの書き方

JavaScriptのコードはscriptタグ内に記述します。<script></script>の中に処理を書くことで、処理を実行することが可能です。以下に例を書きます。

<body>
  <h1>アラート</h1>
  <button id="caution">アラート</button>
  <script>
    function buttonClick() {
      window.alert('クリックされました');
    }

    var button = document.getElementById('caution');
    button.addEventListener('click', buttonClick);
  </script>
</body>

上記のコードはボタンを押せばウィンドウアラートが立ち上がる処理になります。scriptタグ内に処理を全て書くことで、コードを実行できます。