HTMLファイルからJavaScriptファイルを利用する方法２選【Web制作】

2024年10月21日

JavaScriptってどこに記述するの？
ファイル構成は？

Web制作で動きのあるサイトにはかかせないJavaScriptですが、最初はどこに記述するのか、ファイルはどうなっているのかもわからないと思います。

この記事では、初学者の方向けにJavaScriptを書く前の準備について解説します。

JavaScriptを使う方法は二つ

結論からお伝えすると、HTMLファイルにJavaScriptを反映させるは2つの方法があります。

「script」タグを使ってHTMLファイルに書き込む
「JavaScript」ファイルを読み込む

JavaScriptファイルを読み込む

最初に外部のJavaScriptファイルを読み込む方法について解説します。

フォルダ構成

index.html
css
- style.css
js
- script.js

今回はcssに関しては関係ありませんが、例として上記のようなフォルダ構成だとします。

JavaScriptファイルの読み込み

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの説明</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>

    <!-- JavaScriptファイルの読み込み -->
    <script src="./js/script.js"></script>
</body>
</html>

外部のJavaScriptファイルを読み込むには<body>タグの一番下に<script>タグの「src属性」に読み込みたいJavaScriptファイルのパスを記載して読み込むことができます。

これによって、この「index.html」で「script.js」に記述した内容が反映されます。

今回であれば「index.html」と同じ階層にある「js」フォルダの中の「script.js」を読み込みたいため「./js/script.js」のようになります。

JavaScriptファイルの拡張子は「.js」になりますので、ご自身でファイルを作成するときは注意してくださいね。

<script>タグに直接書き込む

2つ目の方法が「index.html」ファイルに<script>タグを使って、直接JavaScriptの内容を記述する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptの説明</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>

    <script>
       console.log("読み込み成功");
    </script>
</body>
</html>

この方法の場合でも同じように<body>タグの一番下に<script>タグを書いてその中にJavaScriptのコードを記述します。これで、<script>タグの中に書かれたJavaScriptの内容が「index.html」ファイルに反映されます。

なぜ<body>タグの一番下に<script>タグを配置するのか

なんで、cssは<head>タグの中で読み込むのに、JavaScriptは<body>タグの一番下なの？

これまでの説明を聞いて上記のような疑問を持った方もいるのではないでしょうか。

理由としては2つ考えられると思います。

ページ読み込み速度の向上

これは、コードの記述量が少なければあまり関係ないかもしれませんが、cssと同じようにJavaScriptが<head>タグ内にあった場合には、ブラウザは最初にJavaScriptの内容を読み込んでから、htmlファイルの内容を読み込みますので、JavaScriptファイルの読み込みに時間がかかるとページの表示が遅れてしまいます。