これまでに無いホームページの思考の「ヘッドレスDOM」についての話

ヘッドレスと聞くと、「首無し」->「ホラー映画」と考えてしまう、ユゲタです。 世の中では「ヘッドレスCMS」というモノが流行ってきている様で、よくWordpressと比較されているようですが、 こんなにITに詳しいユゲタでも、ヘッドレスCMSって全く意味がわかりません。 従来のCMSとの違いは、CMSとしての無駄なヘッダとされる管理機能の要素をAPIで構築して、柔軟なCMSを構築してしまおうという趣旨だということだけは理解できたんですが、 ITが苦手な人であれば、ヘッドレスCMSに該当するアプリやサービスを検索しても、製品が何も出てこないことに憤りを感じてしまうでしょう。 このヘッドレスCMSってエンジニアがメンテナンスを行う運用がこれまでのCMSよりも高額にかかってきそうなので、エンドユーザーには何にもメリットもなければ、 トラブルも含めた管理デメリットが増える気がするのは、自分だけでしょうか？ そんな中、いっそのことなら、WEBサイトの効率を考えて、「ヘッドレスDOM」という思考でSEOにも強くなるホームページの構造を意識した方がいいかと思って、 今回はこの「ヘッドレスDOM」という言葉を独自に作って、その有用性をブログに書き残しておこうと思います。

ヘッドレスDOMとは

このブログを書いている時点で、Googleで検索しても「ヘッドレスDOM」なんていう言葉はありません。 誰もこんなキーワードを検索することも無いのだろうなと思っているんですが、ホームページのスピードが遅くて悩んでいる企業やWEB管理者も多いと思います。 WEBページが早いで有名な「阿部寛のホームページ」は、 これでもかというぐらいのシンプル構造で、画像なども極力少ない状態のため、今現在の普通の回線速度であれば、瞬時にデータダウンロードが完了してしまうんですね。 でもやっぱり、ホームページって無駄なダウンロードパケットを、大量に使っている現実があります。 フレームワークを使っているWEBサイトなどでは、早くしたいために、高速化するプラグインなどを導入して、瞬間的に多少の速度改善はすると思いますが、 根本的な解決ができるケースは稀です。 具体的に、どんなパケットが無駄使いしているのかというと、 一番多いのは、画像や動画などのメディアコンテンツですが、これらは圧縮をして、軽量化させることはできますが、なかなか減らすことは難しい領域です。 次に意外と見えていないデータとしてフォントデータがあります。 英語フォントは数百KB程度でデザインのいいモノがたくさんありますが、日本語フォントはとにかく容量が大きく中には数十MBも容量があるモノもあります。 ホームページの特性上、これらをページを遷移するたびに読み込み直すというのは、ブラウザキャッシュで次のページでは早く感じるかもしれませんが、 キャッシュされているかどうかわかりずらいブラウザキャッシュをあてにすると、ページの早い遅いが見る人（ブラウザ）によってバラバラになることもあり、 安定的なスピードが提供できているとはいえません。 そこで、今回ご紹介するバーチャルDOMという構造体は、HTMLのHEADタグ部分は同じサイト内では、一切変更することがない状態にして、BODYのヘッダやフッタ部分も共通化することで、 中のコンテンツ部分だけをページに応じて変更するだけ、しかもページ遷移は、AJAXを使って、コンテンツの中身のHTMLを書き換えるというふうにすることで、 驚くほど高速なWEBサイトを構築することができます。

ヘッドレスDOMのやりかた

Reactを使っている人は、バーチャルDOMという構造体を理解しているかもしれませんが、Javascriptで自分でバーチャルDOMを作ってしまうと管理は楽になりますが、 ヘッドレスDOMは、コンテンツ部分だけのHTMLを差し替えるので、使い捨てのようなやり方でも問題ありません。 バーチャルDOMをメモリに持っておいて、一度表示したページはサーバーからのデータ読み込みなしで即座に表示反映させるということができると、より良いかもですね。 そして、ヘッドレスDOMで最も重要なのは、WEBサイト全体を通して、cssやhtmlの構造体を統一させるという構造設計が必要になります。 要するに、色々なページで、class名やID値がカブらないようにする仕様を、事前に構築しておく必要があるんですね。 これをトラブルを少なく構築したい場合は、 まず、1ページのコンテンツ内に全てのページの要素をブロック単位で作って、被りなどがない状態を作ります。 次のそれらをブロックごとに、別ファイルに保存して、コンテンツをそれらのファイルを読み込んだものを差し替える様にすれば、効率的な構築作業ができるでしょう。 もちろん、cssコードも、それぞれのコンテンツごと分割して、HTMLと一緒に読み込むというのもアリだし、サイト全体のcssをまとめてHEADタグで読み込んでしまうというのもありかもしれませんね。 どうしてもページ単体で使いたいものが現れた時は、STYLEタグで構築すればいいだけですよね。 Javascriptも同じ考え方で構築できれば、サイト全体ライブラリとしてのJavascriptを構築するだけでいいのですが、ライブラリなどをページごとに使いたい場合は、他のページで悪さをしないことを確認しておく必要があります。

注意点

このヘッドレスDOMという構造は、Ajaxが使えて、CSSやJavascriptなどが問題なく使える人であれば、誰でも簡単に構築することができるんですが、 Ajaxでそれぞれのコンテンツを読み込んで、HTMLとしてappendするときに、Javascriptが動かないことに気がつくでしょう。 これはW3Cの仕様なので、HTMLをappendした後で、scriptタグだけをピックアップして、手動で実行する必要があります。 この時、evalではなく、Function関数を使うというのがポイントですね。

最後に

CMSに頼り切ってホームページ制作をしているだけのフリーランスエンジニアも多い中、どうしてこの簡単な独自CMSを展開するエンジニアが少ないのか、ユゲタとしては不思議でたまりません。 運用も管理も、更新も、再構築も、サーバー引っ越しも、どのフレームワークに比べてもはるかに楽だし、軽量だし、なによりスピード感を持って行えるので、この手法に気がついたホームページ制作する人は、 世の中のWEB制作に無駄が多いということに気がつくことでしょうね。 「ヘッドレスWEB制作」という思考が思い浮かびましたが、それはまた次回の講釈にて・・・