HTMLにCSSとJavaScriptを含めない方がいい理由

チャンネルナビゲーション
記事種別ナビゲーション
本文
関連情報

注目情報

特設サイトの必見情報

2008/11/25

後藤大地

Robert's talk - Web development and Internet trends

Webサイトを構築するにあたってHTMLとCSS、JavaScriptの3者を完全にファイル分離するべきだという方法論が紹介されるケースが増えている。最近話題に上がったトピックに絞っても次のトピックが類似した内容を紹介している。紹介している内容や対象、視点に違いはあるが、どれもHTML、CSS、JavaScriptは分離してインラインで記述しない方がいいと説明している。

Obtrusive JavaScript Checkerの開発者でもあるRobert Nyman氏が自身のブログにおいてWhy inline CSS and JavaScript code is such a bad thingのタイトルのもと、なぜインラインCSSやインラインJavaScriptがよくないかを説明している。簡単にまとめると次のとおり。

HTMLファイルサイズが増える
外部のCSSやJavaScriptファイルはブラウザによってキャッシュされるがHTMLそのものはキャッシュされない
JavaScriptが無効の状況でアクセスできない状況が発生するHTMLを組めてしまう
コードのメンテナンスが困難

この時代にJavaScriptを有効にしないでWebを使うことがあるのかという疑問が浮かぶかもしれないが、セキュリティの一貫として会社レベルでJavaScriptを排除するプロキシやフィルタリングを導入していることもあるし、デバイスの制約としてJavaScriptが使えないケースやポリシーとしてJavaScriptを有効にしないユーザもいる。HTMLだけでアクセスできる内容をまずは組むべきというわけだ。

Why inline CSS and JavaScript code is such a bad thingでおもしろいのはGoogle検索のトップページにも言及していることだ。Google検索のトップページはインラインCSSとインラインJavaScriptで満ちあふれている。しかしこれは世界でもっともアクセスのあるページとしてHTTPリクエストを削減したいという目的があり、ほかの一般的なケースに当てはまるかといえばそうでもないというわけだ。