こんにちは、Ryohei（@ityryohei）です！

本記事では、HTMLページにスクリプトを埋め込む（読み込む）方法をご紹介しています。

ブラウザでスクリプトを実行する場合はどうすればいいの？

上記のような疑問に対してお答えできればと思います。

では、解説していきます。

HTMLページにスクリプトを埋め込み（読み込み）には

HTMLにスクリプトを埋め込む（読み込む）ためには、<script>タグを使用します。

<script>タグは要素名の通り、スクリプトにを表すタグです。<script>タグは主にHTMLページ内に直接記述する（インラインスクリプト）場合と、外部で作成・保存したファイル（外部スクリプト）を読み込む場合に使用します。

インラインスクリプト、外部スクリプトそれぞれの記述方法を見ていきましょう。

インラインスクリプト

HTMLページ内でスクリプトを埋め込む場合は、<script>タグで囲み、タグの中にスクリプトを記述します。HTML5では<script>タグのtype属性の初期値は「text/javascript」となっているので省略することができます。

<!doctype html>
<html>
    <head>
        <meta charset=”utf-8”>
        <title></title>
    </head>
    <body>
        <script>
            //ここにスクリプトを記述
        </script>
    </body>
</html>

外部スクリプト

外部に保存したスクリプトを読み込む場合は<script>タグのsrc属性に読み込みたいスクリプトのパスを指定します。注意点として、src属性を指定した場合は内部のスクリプトは無視されます。インラインのスクリプトと外部のスクリプトを使用する場合はそれぞれ異なる<script>で囲んで使用するように心がけましょう。

<!doctype html>
<html>
    <head>
        <meta charset=”utf-8”>
        <title></title>
    </head>
    <body>
        <script src=”hello-world.js”>
            //ここのスクリプトは無視される
        </script>
    </body>
</html>

<script>は<body>の閉じタグ直前に配置しよう

<script>タグはHTMLファイル内のは好きな位置に配置することができますが、特に理由がない場合は<body>の閉じタグ直前に指定することが推奨されています。

一般的なブラウザはスクリプトの読み込み・実行が完了するまで以降の描画をブロックします。スクリプトの記述や処理内容が重くなるにつれて、ページの描画が長くなってしまいます。

<body>の閉じタグ直前に記述することでそのような描画の遅れを防ぐことができるため、特別な理由（先頭に記述しないと動かない等）がない場合は<body>の閉じタグ直前に記述するようにしましょう。

最後に

<script>タグはHTMLページにJavaScriptを埋め込む（読み込む）際に使用する重要なタグです。下記のリンクで<script>タグの詳細の他、指定できる属性についても詳しく解説されていますので、<script>を日常的に使用している方も改めて読んでみると新しい発見があるかもしれません！

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Script

以上、JavaScriptでHTMLにスクリプトを埋め込む（読み込む）方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。