scriptタグって?HTMLでJavaScriptを使ってみよう
  • facebookページ
  • twitterページ
  • 2020.03.23

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

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

    HTMLのscriptタグとは?

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

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

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

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

    type属性とは?

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

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

    この属性は、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

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

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

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

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

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

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

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

    まとめ

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

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

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



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE