JavaScriptの外部ファイルについての疑問です。

質問

こんばんは。
他の方が作ったJavaScriptをよく利用させて頂いている立場の者です。
よろしくお願いします。

外部ファイルについて、多くのサイト等で
「複数のページで同じものを使う場合は、管理が楽になるので外部ファイルが良い」
と薦められているのを見掛けます。これに関して疑問が２つあります。

１つめに、閲覧者にとってやさしいページ作り、という観点から見ても、
外部ファイルの方が良いのでしょうか？
（共通のJavaScriptが複数ページにあるときは、
外部ファイルにした方が読み込み速度が速くなる、 といったメリットはありますか？）

２つめに、例えばＡページ、Ｂページ、Ｃページとあったとして、
ＡとＢに共通の JavaScriptが１つ、
ＢとＣに共通の JavaScriptが１つ、
ＣとＡに共通の JavaScriptが１つ…という具合だった場合、
全てを１つの外部ファイルに入れて、共通で使っても良いのでしょうか？
または、ページごとに使っていないJavaScriptは読み込まないように
外部ファイルを複数に分けた方が良いのでしょうか？
または、このような場合は外部ファイルにせずに、直接ページ毎にソースを
書いた方が良いのでしょうか？

以上です。よろしくお願いします。

回答No.2

Chaire · ベストアンサー

多くのページで使うスクリプトは外部に出してブラウザにキャッシュさせれば表示速度が向上するかもしれません。ただしファイルを分割し過ぎるとサーバへの要求が増えるだけで読み込み速度は遅くなりますから，特定のページでしか使用しないスクリプトはそのページに埋め込んだ方が良い場合もあります（もちろん一つの外部ファイルに全てまとめてキャッシュさせるのもアリ）。

また，スクリプトに対応していない携帯端末などでは不要な部分を読み込まずに済むでしょう。ついでに script 要素の内容に </ を書いてはいけないとか，XHTML の場合は --，< を書いてはいけない（したがって <!-- --> で囲んでもいけない）などの文法的な制約から逃れられます。

速度よりも管理のしやすさを優先するなら，たとえば HTML には

<script type="text/javascript" src="/common.js"></script>

の一行だけを書き，common.js で

// ページごとにスクリプトを切り替える
var file = (document.URL == '...') ? '/sample1.js' : '/sample2.js';
document.write('<script type="text/javascript" src="' + file + '"></script>');

と script 要素を出力すれば，common.js で全てのページのスクリプトを集中管理できます（場合にもよりますが）。

お礼

＞外部に出してブラウザにキャッシュさせれば
＞表示速度が向上するかもしれません。

ここの所が疑問でした(^^ゞ
JavaScriptの外部ファイルもキャッシュに残るんですね。
となると、複数ページに同じスクリプトを使用する時は、
外部ファイルの方が軽くなる可能性もあるんですね。

common.jsで全て管理する方法もあるんですね。
なるほど。。。
管理のしやすさの面では、仰る通り、楽そうですね。
＞速度よりも管理のしやすさを優先するなら
とのことですから、速度は多少犠牲になるのでしょうね。

ケースによって、考えて使いたいと思います。
ご回答、どうもありがとうございました！

回答No.1

m035

>外部ファイルを複数に分けた方が良いのでしょうか？

よほど長いスクリプトなら個々に書き込んだほうがロードは軽くなりますが、
さほど長くなければ気にしなくてもかまいません。
それよりもそのページの画像の保存形式を見直すことや、
HTMLの余計な部分を削るほうが効果的でしょう。

>全てを１つの外部ファイルに入れて、共通で使っても良いのでしょうか？

変数名などがダブっていない。かつ、上記のように短いスクリプト群なら、問題はないでしょう。
実際、ページのロードより、スクリプトを実行したときの処理待ちが問題なので、function以外に読み込んだだけで実行される部分が多いと、動作がもたつきます。
そこを注意すれば複数のJavaScriptはまとめて外部ファイルにしても、問題ないと思います。

お礼

なるほど。よくわかりました。

長いスクリプトならば、個々に書き込んだ方が軽くなるんですね。
私が使うレベルのものは恐らくどちらでも
ほとんど変わらないだろうとは思いつつ、
実際、どちらが軽いのか、ずっと疑問でした。
ありがとうございます。

また、読み込んだだけで実行される部分が多いなら
無駄なスクリプトは読み込ませないようにした方がいいんですね。
これも、謎が解けました。

分かりやすいご回答を、どうもありがとうございました。