HTML CSS JavaScriptはそれぞれ別ファイルにするのが良いのですか？

Question

かなり基本的な質問です。

現在web学習サイトにてweb開発のコースを学習しています。
HTML、CSS、Javascriptの学習を完了しました。

CSSやJavascriptは外部ファイルに書いて、HTMLでそれを読み込み、機能やスタイルを実現させる方法の方が良い、とよく耳にします。(調べただけですが)
また、その方法がなぜ良いのかも自分なりに理解しているつもりです。
HTMLの中に全て書いてしまうと、ごちゃごちゃして見難いと思います。

また開発環境にVSCodeを使用しているのですが、HTMLファイルにCSSやJavascriptを書こうとしてもインテリセンスが効かず、効率が悪いです。

しかし、私が学習しているコースではcssもJavascriptもHTMLの中に書いて解説しています。
Javascriptに関しては外部ファイルとしての読み込み方を紹介する回があったのでわかりましたが、紹介程度でしたし、cssに関しては紹介すらありませんでした。

---

ここで、実際にwebのフロントサイドの開発をお仕事にしている方達に質問です。

実際の開発ではファイルを分けていますか？分けるべきなのでしょうか？
開発の規模によって分けるか分けないかを決めてたりする場合は、その分ける基準を教えていただけると幸いです。

拙い質問かとは思いますが、よろしくお願いします。m(__)m

Answer 1

DRY (Don't repeat yourself)

• 複数ページで同じデザインを適用する時には外部スタイルシートを使います
• 複数ページで同じ機能を使用する時には外部JavaScriptを使います

情報の重複を防ぐ考え方にDRYがあります。
https://ja.wikipedia.org/wiki/Don%27t_repeat_yourself

キャッシュ

外部ファイルはキャッシュされる為、複数回呼び出される場合かつ2回目以降の参照時には、単一ファイルに統合するより高速化される場合があります。
単一ファイルが有効なのは、次の場合です。

• 初回読み込みを最優先で高速化したい
• 複数ページに跨がって参照されない

Re: Atimot さん

Comments

[退会済みユーザー]

コードの再利用という点でも外部化の利点があるのですね。
とても勉強になります。ありがとうございました。m(__)m

Answer 2

私がteratailで回答するときにはすべて同じファイル内に
書かれている体でソースを提示していますが
自身がサイトに記載するときには必ずjsとcssは別ファイルにしています。

指針としては、構造（およびコンテンツ）、プログラム、デザインは
混在させないことが目標です
（全部が違う担当になる可能性を踏まえて）

とはいえ近年のSPAブームなどフロントエンドの極度なjs依存の
偏重状況を考えるとそれも古い考え方なのかもしれません。

Comments

[退会済みユーザー]

SPA初めて聞きました。とても興味深いですね。
確かに、全てを一人が担当するわけでもないと思うので、その点でも分けることの大切さがうかがえます。
勉強になります。ありがとうございました。m(__)m

Answer 3

速度だけ（特に初速）を求めるのなら同じファイルに全て書き、cssもインライン(style=)で書きます。

クラスや関数、別ファイルに切り出すのは主に再利用性とメンテナンス性を高めるためです。

Comments

[退会済みユーザー]

そのページに求められることに応じて対応することが大切そうですね。
とても勉強になります。ありがとうございました。m(__)m

Answer 4

場合によります。
例えばものすごく多いページがある場合は個々のファイルにしておいた方が該当ファイルの編集で大体はすみます。
しかし、直接書いた方が読み込み速度が上がることは覚えておいてください。
私の場合はトップページやお問い合わせページなどは直接の記述をして分けませんがそれ以外のブログやプレイリリースページ的な多くのページになることが予想されるものはheaderやfooterとかも別ファイルにしちゃいます。

Comments

[退会済みユーザー]

headerやfooterも別にできるのですね。
とても勉強になります。ありがとうございました。m(__)m

[退会済みユーザー]

phpのincludeですが..

Answer 5

私が学習しているコースではcssもJavascriptもHTMLの中に書いて解説しています。

推測ですが「学習」だからでは？どのようなものかは見ていないので推測にすぎませんが、「この部分はこのような設定ですよ」と分かりやすくしているのかも知れません。

基本（一般的に）はHTML・CSS・Javascriptは、別ファイルとして作成。HTMLに外部ファイルとしてCSS・Javascriptを読み込ませます。

ただし、「ページ表示を早くさせる手段」のひとつに、head内・body内に<style>や<script>を記述する場合もあります。
※全てではありません。必要なモノのみです。

Comments

[退会済みユーザー]

確かにその通りな気がします。入門的な内容なので情報量も多くないですし。
ただ、ファイルを別々にすることが実際の現場でも求められることがあるなら、ファイルの分け方、読み込み方なども解説してくれると嬉しいなと思ったりもします。
とても勉強になります。ありがとうございました。m(__)m

[yoshinavi]

＞ファイルを別々にすることが実際の現場でも求められることがあるなら、ファイルの分け方、読み込み方なども解説してくれると嬉しいなと思ったりもします。

→ これも「推測」ですが、学習を進めて行くなかで、外部設定はコースに組み込まれているような気はします。

理由として、他の回答にもありますが、一般的な「webサイト」は、同じ設定（デザイン）を、あちこち（別ページ含む）で使用する事が多いからです。

そして、その後に「SEO」にも関わる「表示速度」にどのように対応していくかも関連します。

「SEO」は、それだけで成り立つジャンルでもあるので、学習の最初の次点で一緒には組み込まないのが、一般的かと思います。

外部ファイル設定は、検索すると、いろいろ出てきますので、理解しやすい所で勉強されると良いかと思います。

Answer 6

複数の画面で共有するような指定がある場合も多々ありますし、基本的には分割します。
どうせ Web ブラウザのロードではキャッシュが効いてくれるので、読み込み速度が大きく変化するわけでもありませんし。

Comments

[退会済みユーザー]

cssやjavascriptを共有できるのは便利ですね。
とても勉強になります。ありがとうございました。m(__)m