scriptタグって？HTMLでJavaScriptを使ってみよう

HTMLを使ってウェブサイト・アプリなどを作成していると書かせないのが、scriptタグ。これまでJavasScriptを使ったことがなかったという方も、動きのあるウェブサイトなどを作る際にJavaScriptの使用は欠かせないものです。今回の記事ではHTMLでscriptタグを使用する方法や概要を紹介していきます。

HTMLのscriptタグとは？

scriptタグとは、主にHTML内でJavaScriptのようなスクリプトを埋め込んだり、外部のスクリプトファイルを呼び込む際に使用するタグのことです。呼び込むことができるスクリプトには、JavaScriptのほかにVBScriptなどもあります。

scriptタグの使用例1：JavaScriptの挿入

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, options);
  });
</script>

scriptタグの使用例2：スクリプトファイルの呼び込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js">

上記のように、JavaScriptのスクリプトをHTMLファイル内に記述する際には、必ずscriptタグで囲む必要があります。それは、2つ目の使用例にある外部のスクリプトファイルの呼び込みの際でも同様です。

type属性とは？

先ほど紹介したscriptタグの使用例には、type属性が指定されていました。

scriptタグの使用例1：JavaScriptの挿入

<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.parallax');
    var instances = M.Parallax.init(elems, options);
  });
</script>

この属性は、scriptタグ内に記述されるスクリプトがJavaScriptなのか、VBScriptなのかなどを明記するためのものです。type属性の初期値は「text/javascript」なので、使用するスクリプトがJavaScriptの場合には、type属性は省略することができます。

HTMLでscriptタグを使ってみよう

さて、ここまでscriptタグについて詳しく紹介を進めてきました。HTMLでscriptタグを使用する方法はイメージできたでしょうか。それでは実際にHTMLファイルの中にscriptタグを使用して、JavaScriptを使ってみましょう。

JavaScriptを使って文字を消す：同一ファイル内

JavaScriptを使って文字を消してみましょう。用意するのはHTMLファイル1つだけです。用意したHTMLファイル内に、以下のコードを貼り付けてみましょう。

example.html

クリックしたら文字が消えます

<script> var disappear = document.getElementById(‘disappear’); disappear.addEventListener(‘click’, function(){ disappear.classList.add(‘disappear’); setTimeout(function(){ disappear.style.display = “none”; }, 500); }, false); </script>

上記のコードでは、h2タグに囲まれた「クリックしたら文字が消えます」という文字をクリックすると、文字通り、0.5秒後に消えるという仕組みになっています。この段階で、JavaScriptのコードの意味自体は分からなくても構いません。重要なのは、scriptタグをHTMLファイル内に埋め込む方法を理解することのみです。

前述の通り、scriptタグ内に埋め込むスクリプトがJavaScriptの場合には、scriptタグのtype属性は記述する必要がありません。

JavaScriptを使って文字を消す2：外部ファイルを呼び込む

次の例でも同様にJavaScriptを使って文字を消しましょう。ただし、次の例ではJavaScriptとHTMLのファイルを分け、外部ファイルのJavaScriptを呼び込むようにしてみましょう。必要なのは、先ほど使用したHTMLファイル（example.html）と、新たなJavaScriptファイル（example.js）です。以下にコードを提示しますので、普段使用しているテキストエディタで実際に試してみてください。

example.html

クリックしたら文字が消えます

<script src=”example.js”></script>

example.js

var disappear = document.getElementById('disappear');
        disappear.addEventListener('click', function(){
            disappear.classList.add('disappear');
            setTimeout(function(){ 
                disappear.style.display = "none"; 
            }, 500);
        }, false);

実際にHTMLファイルをブラウザで確認した時と挙動は同じはずです。1つ目の使用例との違いを探してみましょう。

HTMLファイル内でJavaScriptファイルの読み込み

大きな違いの1つとしては、HTMLファイル内でJavaScriptのファイルをsrc属性で指定しているということです。

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

このようにscriptタグ内で読み込みたいJavaScriptファイルを指定することによって、対象のファイルを読み込むことができるのです。ただし、ファイルの階層によってファイルパスが異なるため、もしHTMLファイルとJavaScriptファイルの階層が異なるということであれば、ファイルパスの記述に注意しましょう。

JavaScriptファイルにscriptタグは不要

もう1つの大きな違いは、JavaScriptファイル内でscriptタグが不要であるという点です。scriptタグはあくまでHTML内でスクリプトを書いたり読み込んだり際に使用するもののため、JavaScriptなどスクリプトを書く際には不要となります。

var disappear = document.getElementById('disappear');
        disappear.addEventListener('click', function(){
            disappear.classList.add('disappear');
            setTimeout(function(){ 
                disappear.style.display = "none"; 
            }, 500);
        }, false);

このように記載することで、外部のスクリプトもHTMLに埋め込むことができます。HTMLファイル内にスクリプトを書くのでも、外部スクリプトを呼び込むのでも、動きは変わりませんが、スクリプトが長くなる場合には可読性も考慮に入れて、外部ファイルに分けることがおすすめです。

まとめ

今回の記事ではHTMLでscriptタグを使用する方法や概要を紹介していきました。HTMLでscriptタグを用いるのはとても簡単で、重要なのは実際にJavaScriptなどのスクリプトをどのように記述するかの方がです。

JavaScriptを使用することで動きのあるウェブサイト・アプリを作ることができるようになりますので、さらにコーディング・プログラミングが楽しくなるでしょう。ぜひ、これからは積極的にJavaScriptなどのスクリプトをHTMLの中に埋め込んでいきましょう。

【関連記事】
▶︎【HTML】表を作成するときに役立つタグについてわかりやすく解説。
▶︎HTMLのタグでプルダウンリストを作る方法を解説