【意味ない？】scriptタグに直接JavaScriptの処理を書く3つのメリット

WEBサイトで利用されるHTML文書では、JavaScriptのプログラムを実装する際、scriptタグを通じてプログラムを読み込みます。

scriptタグの内側にJavaScriptのコードを直接書き込むことが可能なのは知っている方は多いと思いますが、直接書くメリットに疑問を抱いている方もいるでしょう。

そこで今回は、scriptタグに直接JavaScriptタグを書くメリットについて解説していきます。

scriptタグについてよく知らないという方は、以下のリファレンスを先に読んでおくことをおすすめします。

（※先に言っておきますが、大きなメリットはありません。）

1．パスの知識不要でJSを実装できる

scriptタグは中にコードを書き込むというよりは、外部のソースファイルからJavaScriptのプログラムを読み込む用途で利用されることが多いです。

このとき読み込むソースファイルがどこにあるのかを示すため、”パス”というものを記述する必要があります。

実は、プログラミング初心者にとってはこのパスの入力が鬼門になることが多いです。

外部のソースファイルを読み込む場合、少しでもパスの書き方を間違えてしまうと、ソースファイルを上手く読み込めず、JavaScriptも実装できません。

一方でscriptタグに直接JavaScriptの記述を書く場合は、もちろんソースファイルが必要ないため、パスを記述する必要もありません。
JavaScriptのコードを書く場合も、以下のようにパス抜きで書けばOKです。

<!-- scriptタグの中に処理を書く -->
<script>
    // 適当なJSのコード
    for(let i=0; i<=10; i++){
        console.log(i);
    }
</script>

相対パスや絶対パスについてよくわかっていない方にとっては、手っ取り早くJavaScriptを学べるという点で、大きなメリットにもなり得るでしょう。

scriptタグを使って外部のソースファイルを読み込む場合は多いですが、そもそもの話、ソースファイルの読み込みには処理時間がかかりますよね。

もちろん、外部のサーバー上にあるソースファイルを読み込もうとしたとき通信時間が長引けば、その分自身のページの読み込みにも時間がかかります。

その点、scriptタグはHTMLの文書上で他のタグと一緒に読み込まれるため、一般的にソースファイルを読み込むよりもページの読み込み速度が速くなります。

何でもかんでもJSファイルを読み込んでいると、通信状態によってページの読み込み速度が遅くなってしまうリスクがあるのです。

ページの読み込み速度を向上させたい場合は、ソースファイルと作らず、scriptタグに直接コードを書くのが良いかもしれません。

（ただ、現実的には1秒も差が出ることはないので、正直気にするほどでもないです。）

scriptタグは、やはりHTML文書に直接JavaScript等のコードを埋め込めるのが魅力です。

このメリットが顕著に現れる場面が、WordPressで記事を執筆している最中。

WordPressはWEBメディアやブログの運営に用いられているページ管理システムのようなもので、この当サイトもWordPressを使って運営しています。

WordPressがあるからこそ、同じようなHTMLファイルを使いまわしつつ、各記事で執筆したタイトルや本文を埋め込むことでき、多くのWEBページで別々の記事を公開できるわけです。

ただし、同じHTMLファイルの構造を使いまわす関係上、ページごとに別々のJavaScriptプログラムを実装したいときに困ります。

ただ、WordPressで執筆した内容は最終的にHTMLの一部として埋め込まれるので、そこにscriptタグを直接書き込んでしまえば、以下のように特別なJSプログラムを実装することが可能です。

▼即席で追加したプログラム
（下のボタンを押せばプログラムが実行します。）

上記のプログラムは、あくまでもこの記事のページにだけ実装されているものであり、他の記事には存在しません。

開発者ツールを確認しても、当ページに上手くscriptタグが埋め込めているのが確認できます。

WordPressに関わらず、直接HTMLファイルを作れない場合などには、scriptタグを直接書き込めるのがメリットになる場面もたまにあります。

scriptタグの中にJSのコードを書くメリットについて色々と解説しましたが、結論としては、「好きにすればいい」と言う他ありません。

読み込み速度が多少速くなったり、WordPressなどからJSプログラムを実装できたりとメリットはあるものの、推奨するほど大きなメリットでもないからです。

ただし、これはあくまでも広い範囲の話であり、基本的にWEB制作の現場（実務）などでは、ソースファイルに書いたものをscriptタグで読み込むようにするのがおすすめです。