JavaScriptファイルを別フォルダーに保存する

今まではスクリプトをhtmlファイルに直接書き込んできましたが（インライン）外部ファイル（拡張子は.js）として保存実行することもできます。外部ファイルにすると1つのスクリプトファイルを複数のhtmlファイルで使いまわすことができるため結構便利ですよ～。なので今回は外部ファイルのお話です。

スクリプトファイルを作成してみよう

スクリプトを外部ファイルにする方法です。

スクリプトファイルの作成

いままでの記述だとこんな感じにhtmlファイルに記入してましたね。<script>～～～</script>がそれにあたります。

<html lang="ja"></html>
<head>
<meta charset="UTF-8">
<title>外部ファイル編</title>
</head>
<body>
<p>外部ファイルを作成しよう！</p>
<script>
document.currentScript.insertAdjacentHTML("beforebegin", "<p>田中</p>");
</script>
</body>
</html>

上記を外部ファイルとして記述するとこんな感じ。<script>～～～</script>の～～～部分を記述するだけです。記述はメモ帳、VSCodeを利用している場合は新しいファイルに拡張子を「.js」にして記述してください。

document.currentScript.insertAdjacentHTML("beforebegin", "<p>田中</p>");

htmlファイルの変更

いままでhtmlファイルに記述されていた<script>～～～</script>の部分は削除します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部ファイル編</title>
</head>
<body>
<p>外部ファイルを作成しよう！</p>
</body>
</html>

ファイルの保存

htmlのファイルはそのまま上書きすればおっけーです。スクリプトのファイルはメモ帳を使って書いた場合、「test.js」ファイル名は「test」拡張子は「.js」です。保存場所はhtmlファイルと同じ場所にしてください。VSCodeで記述してる場合は名前を付けて保存で「test.js」にすればおっけーです。

エクスプローラーの画像です。同じフォルダーにhtmlファイルとスクリプトファイルが並んでいますね。

スクリプトのファイルはアイコンが変更されます

htmlファイルにパスを記入する

JavaScriptのコードはhtmlファイルから起動させますが、htmlファイルからスクリプトのコードを削除しちゃったのでこのままではスクリプトは実行されません。なのでhtmlファイルに呼び出しのコードを付けてあげます。

<body>
<p>外部ファイルを作成しよう！</p>
<!--ここにスクリプトを呼び出すコードを書く-->
<script src="test.js"></script>
</body>

この状態で上書きして実行後、次のようになればおっけーです。

実行結果
外部ファイルを作成しよう！田中

表示されない場合は、ファイルパスや保存場所コードなど誤記入がないか確認してください。ファイルの保存場所の間違いは結構あるから要注意です。

書き方の書式はこんな感じです。

<script src=”ファイルパス”></script>

保存フォルダーが違う場合

htmlファイルとスクリプトの保存場所が違う場合は、パスの書き方がちがいますので形式を書いておきます。

htmlファイルが保存されている場所に「test」を作成してそこにスクリプトのファイルを保存した場合は次のように書きます。普通はwebサーバーに保存するためURLになります。

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

どんな利点があるの？

外部ファイルにほぞんするのは少し厄介です。でも、ちゃんとした理由があってそうしてますよ～

外部ファイルにする利点

外部ファイルにすると大きなメリットがあります。

最大のメリットはメンテナンスです。

よくページの下に会社名が表示されていますが、どのページをみても同じものが表示されています。

もし会社名が変更になった場合、すべてのhtmlファイルに同じスクリプトが書かれていたら、全てのhtmlファイルを書き換えしなければなりません。100ページあったら100ファイル修正する必要があります。

でも、外部ファイルから読み込むようにしておけば、外部ファイル1つを修正すればおっけーです。

なので、同じ記述のスクリプトはできるだけ使いまわしができるように外部ファイルにしておくのが最善です。

あとは、htmlファイルがすっきりする点も少しメリットですね。

デメリット

「さんざん外部ファイルをススメておいてデメリットかよ」って話です。デメリットおおありです。通信するときにhtmlファイルを呼び出すわけですけど、スクリプトが外部ファイルになっていると、htmlファイルと同時に呼び出しをしなければなりません。そこで問題になるのが、通信速度が遅くなってしまうってことです。

読者はページが表示されないとすぐに閉じちゃいますので、かなり問題です。なので外部ファイルにするかバランスが必要というわけです。

 

はい、外部ファイルの作り方のお話でした。

以上でこのページは終了です。

お疲れ様でした！

前のページ　 INDEX　 次のページ

ホーム