• JavaScript
  • script
  • 外部ファイル

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

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

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タグ内に処理を全て書くことで、コードを実行できます。

短いときにはHTMLファイル内に書く

JavaScriptのコードを直接HTMLファイル内に書くときはコードの長さを意識することが大切です。コードが長すぎると、ファイルをメンテナンスするのに時間がかかります。なぜなら、縦に長くなり、修正するところをスクロールしながら探さなくてはいけません。

100行くらいであれば、スクロールの長さも苦になることはありません。しかし、1000行となると、JavaScriptを対応させるHTMLの要素がどこにあるのかがわかりにくくなります。コードミスでエラーも起こりやすくなり、簡単なエラーの解決に何日もかかったなんてことになりかねません。

効率を最大限に、エラーを最小限に留めるにはコードが短いときのみ、HTMLファイル内に直接JavaScriptを書くことをおすすめします。

コードが長くなったら外部ファイルを作る

JavaScriptを書く場所として外部ファイルもあります。外部ファイルとはHTMLファイルとは別にJavaScript専用のファイルを作ることです。外部ファイルはHTMLファイルのコードで読み込むことで、JavaScriptの機能を発揮させます。

まずは、「script.js」という外部ファイルを作成しましょう。
index.htmlが入っているフォルダと同じ場所に作成します。

次に上で作成したscript.jsをindex.htmlファイル内で読み込んでいきます。
HTMLのscriptタグで読み込みます。scriptタグを書く位置は内部に書くときと同じでbodyの閉じタグの前がおすすめです。読み込み方は以下の通りです。

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

srcのシングルまたはダブルクォーテーションの中に読み込みたいJavaScriptのファイルパスを書きます。上記のコードでは同じディレクトリ内の「script.js」というファイルを読み込んでいます。

コードが長くなった時には外部ファイルを作ることで、ファイル内のコードを読みやすくすることがおすすめです。短い場合は読み込み時間がかかる、管理するファイル数が多くなるため、直接書く方がいいと思います。

まとめ

JavaScriptをHTML内に書く方法について解説しました。JavaScriptのコードが書ける人であれば簡単に実行することが可能です。しかし、書く位置によって動作に支障をきたすこともあるので気をつけてください。

JavaScriptは動的なWebサイトを作る上で重要な役割を担います。小規模なサイトであっても動きをつけるだけでユーザーの訪問数や滞在時間が変わります。つまり、簡単なJavaScriptのコードを用意できることがサイト運営でも重要なスキルです。

そのため、HTML内にJavaScriptのコードを何時でも書けるように書き方を覚えておくことをおすすめします。