javascriptは外部ファイルにした方がいいの？それとも、インラインの方が良いの？

事の発端

os0xさんのブログコメントで、javascriptの書き方について、面白いやり取りがありましたので、それについての私見を書きたいと思います。
結論から言いますと、プログラマ的な立場から言わせて頂くと、外部ファイル管理が望ましく、コーダ的な立場から言わせていただくとインラインが望ましいです。
なぜそのような結論に至ったのか、まずは経緯を御覧ください。

コメント欄でのやり取り

os0xさんのブログコメント欄を引用しています


引用ここから(通りすがりさんとos0xさんのコメントのみ引用。文字強調はArcCosine)

通りすがり 2010/08/13 15:20
質問です。
>scriptタグの中に直にコードを書くというのはできる限り避けたほうが良い
のは何故でしょうか。
私は、「できるだけscriptタグの中に直にコードを書くようにし、理由がある場合に限って外部ファイルにする」というのが良いように思います。


os0x 2010/08/13 15:44
インラインでコードを書くということは、そのページだけでしか使わないコードを書くということになりますよね。
逆に外部ファイルでは、共通部分を別のページでも使うことができますし、それを実現するには必然的に保守性の高いコードを書く事になります。それは良い習慣ですよね。
また、HTML中のJavaScriptはHTMLとして解釈されないように配慮する必要があります(具体的には文字列リテラル中に</script>を直接書けない、<\/script>とすれば良いだけの話ではありますが)。
ところで、できるだけインラインにコードを書くほうが良いと思われる理由ってどんなところにあるんでしょうか？リクエストの数が減るというのはあると思いますが、そうとう大量のアクセスを持っているサイトでないとほとんどメリットにはならないだろうと思っています。


通りすがり 2010/08/13 16:47
O'ReillyのHigh Performance Web SitesやHigh Performance Javascriptは既読でしょうか。
ファイル内に書く理由は、そこに書かれているようなことが理由です（ここには書ききれません）。
でも私個人は、保守性という多大なるメリットのため、機能ごとに複数ファイルに分けています。ただ、combineしてminifyingしてページ内に配置したり、遅延ロードしたりというのが、アクセス数に関係無くパフォーマンスに良いことはわかっているのですが、時間がないためそこまでやりきれていないのが現状です。


os0x 2010/08/13 18:40
続・ハイパフォーマンスWebサイトなら読んだことありますが…。
あの辺の話は高いパフォーマンスを得るために色々なものを犠牲にする黒魔術的なものとして考えています(すべてではないですが)。
推奨する・されるべきはスクリプトの外部化で、どうしてもパフォーマンスがほしいときなど仕方なくインラインで記述する、と考えています。


通りすがり 2010/08/16 14:55
『続・ハイパフォーマンスWebサイト』で言うと、
>あの辺の話は高いパフォーマンスを得るために色々なものを犠牲にする黒魔術的なものとして考えています(すべてではないですが)。
という部分も多々ありますが、「4章実行をブロックしないスクリプトのロード」や「6章インラインスクリプトの適切な位置」あたりはそうでもないと思いますよ。

Javascriptをどこに置くべきかというのは、そのコードサイズやユーザのローカルにキャッシュされる確率、サイト（またはWebアプリケーション）自体の性格や同時アクセス数などによって取るべき戦略はさまざまだと思いますが、まず基本としてどうすべきなのかというところを考えると、やはり基本が外部スクリプトだというのには同意できません。
もちろん、どのようなぺーじにも共通で使えるようなライブラリ的なものは外部スクリプトとして存在すべきだとは思います。しかしそのライブラリ的なものを使ってあるページの操作をするコードは、基本的にはそのページに記述するのが一番良いのではないかと思います。そして、その部分をも外部スクリプト化するのには、それ相応のメリットがある場合に限ってであって、まず基本として外部スクリプトにするのが良いというのにはうなづけません。


os0x 2010/08/16 15:35
おっしゃる通り色々な条件があるので、一概には言えないだろうというのもわかります。
理想としては、効率が良く、保守性に優れ、それでいて簡単に実装できる絶妙な選択肢を選びたいところです。
しかし、そういった適切な判断をするには経験と知識が必要です(し、そもそもそんな都合のイイ話は滅多にないでしょう)。
そういった高度なことをできる人が試行錯誤した結果としてインラインにコードを書いているような特殊なケースを想定してこの記事を書いたわけではありません。
そもそも、高度な最適化が必要なウェブサイトというのが特殊なケースだとも思います(数値がわからないので感覚でしかないですが…)。

引用ここまで

プログラマの見方

テンプレートに触れる機会が多くなっている昨今、scriptを単一のページに書くというのは保守性の効率が実に悪い方法になっています。
いや、テンプレートだからこそインラインでいーじゃねーかと思う人もおられると思いますが、コーダとプログラマが分業してるような会社ですとそうは問屋がおろしません。
もちろん、理想としてはコーダとプログラマが同じ人でインラインに綺麗にすぱっと書いてしまう方が一番良いのですが、それはあくまでも理想論。
そこまで手が回らないというのが現状だと思います。
なので、プログラマを生業としている身分からしますと、スクリプトとHTMLは切り離して管理した方が何かと便利であることが多いです。
もちろん、通りすがりさんが指摘してるように、ある個別ページでしか使わないコードはインラインで書くほうが良いと思います。

コーダの見方

一方、コーダ側から見ると、話は変わってきます。
外部にスクリプトを置く最大のデメリットはその挙動がよく分からないって事です。
そうなると、適当なクラス名やidを振ったりすると後でブラウザ（主にIE）の謎挙動により、阿鼻叫喚地獄絵図になるわけです。
さらに、レアなケースなのですが、プログラマが書いたコードのせいでページ全体が中々読込み終わらなかったり、レイアウトが崩れたりします。
そうすると、コーダがスクリプトを分析してどこが悪さしているのか、プログラマに指摘するしかない状況に陥ったりします。
インラインに書いてあるならば、最悪コメントアウトするなりその場でコーダが直すなりして対応できるので、楽なんですよね。
一番の理想は、短くて軽くてしかもカッコいい(動作も書き方も)スーパースクリプトを書いてくれるプログラマが居るとコーダのお仕事は楽になります。

ケースを分けて考えてみる

もう少し具体的に考えるために、ケースを分けましょう。

1. 個人のホームページ
2. 企業のホームページ
3. Webサービス

1.のような個人のホームページは正直どーでも良いです。
外部スクリプトにしようがインラインにしようが、それは個人の勝手。
好きな方を選びましょう。

2.のような企業のホームページの場合は、インラインで書いてしまった方が良いケースが多いと思います。
(CMS使っているケースが少ないため)
CMS使っている場合でも、テンプレートにインラインでさくっと書くほうが管理しやすいと思います。
(別に外部ファイルでも良いけどね)
なぜかといいますと、こういうホームページは、挙動関係のスクリプトをそう頻繁には更新しないからです。
逆に頻繁に更新ばっかりしてるサイトはちょっと最初のサイト設計が悪かったとしか言えないですねｗ

3.のようなWebサービスはその規模次第だと思います。
GoogleのようにアホみたいにPVが多いサービスですと、パフォーマンスが一番重要ですので、インライン表記の方がベターだと思います。
TwitterやMixiなどの会員制サービス系列は、使い勝手に特に気を使いますので、外部ファイルで管理する方が更新・管理しやすいと思います。
Webサービスは流動的なもので、どれだけ良い設計をしても、ユーザのニーズは日々刻々と変化しますので、どうしてもスクリプトの改善をせざるを得ない状況になります。
そうなると、外部ファイルに置いてしまったほうが単体更新で済むために管理がしやすいというメリットがあります。

もちろん、HTMLがきちんと設計されていればね！！

私見中の私見

僕は、個人のページや企業のページ、Webサービス(それなりのPVがある)も色々作ってきましたが、PVとコード管理とのバランスを考えた場合、外部ファイルに持たせるのが一番楽でした。
そう感じるのは、プログラマとしての仕事を長くしているからだと思います。
僕は理想的なプログラマでは無いので、どうしても冗長で遅くて動作がしょぼいコードしか書けません。
それを時間をかけて、じっくりアップデートして、なんとかまぁまぁ短くて、まぁまぁ速度が出て、まぁまぁの動作をするコードにしてきました。
結局の所、技術力が十分でないからこそ、そうしてるんですね。
ハイレベルなコードをいきなりインラインに書けるようなプログラマになりたいもんです。
そして、ちょっとやそっとのスクリプトで手こずらないコーダになりたいもんです。
以上、駄文でした。