バナー画像

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のタグでプルダウンリストを作る方法を解説

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。