概要
XSLTは1999年登場の ネイティブ なWeb向けビルドシステム。 現代の複雑なフレームワーク不要で 静的サイト 構築が可能。 XMLデータから HTML出力、ループや変数など多彩な機能。 主要ブラウザで クライアントサイド変換 対応、配布も容易。 シンプルなWeb制作の 有力な選択肢 として再評価。
XSLT:Webのためのネイティブ・ゼロコンフィグ・ビルドシステム
- XSLT は1999年に標準化された、 XML→HTML変換 用の技術
- 静的Webサイト制作でよくある構成
- データ (.json, .md, .txtなど)
- ビルドシステム (Hugo, Next.js, Astroなど)
- 出力 (静的HTML)
- 既存のビルドシステムは 複雑 で、理解や運用が大変
- シンプルなHTML+CSSで作りたいが、 共通パーツ (ヘッダー・フッター)の管理が手間
- ページ数増加で コピペ運用 が破綻
- HTML importやWeb Componentsは JavaScript依存、純粋なHTMLだけでは困難
XSLTとの出会いとその特徴
- ブラウザ 自体がビルドシステムになり得る発想
- ブラウザは 多様なデータ形式 (text/html, application/xml等)を理解
- RSSフィード の見た目改善をきっかけに XSLT に注目
- XMLはHTMLに似ており、 データ記述が直感的
- スタイルシート指定 も簡単
- 例:
<?xml-stylesheet type="text/xsl" href="blog.xsl"?>
- 例:
- XSLTで ループ・変数・インポート など、ビルドシステムに必要な機能を網羅
- HTML出力 が容易に実現
XSLTの実践方法
- XMLデータ例
<blog><post id="42" ...>...</post></blog>
- XSLTスタイルシート例
<xsl:stylesheet version="1.0" ...><xsl:output method="html" indent="yes" /><xsl:template match="/"> ... </xsl:template>
- HTMLテンプレート として柔軟に変換
- 動的データ も親XMLから参照可能
- 例:
<xsl:value-of select="title" />
- 例:
- 実行方法
- XMLファイルをブラウザで開くだけ (例:Safariでblog.xmlを開く)
- ブラウザが 自動でHTMLに変換・表示
XSLTのメリット・デメリット
- メリット
- ビルドツール不要、ゼロコンフィグで動作
- 全ブラウザ対応、クライアントサイドで完結
- 配布が容易、静的ファイルのみで運用可能
- JavaScript不要、純粋なWeb標準のみで実現
- XMLはHTMLに近く、直感的な記述が可能
- デメリット
- JSON非対応 (XMLデータ前提)
- 高度な動的機能 や大規模サイトには不向き
- 現代的な開発体験 にはやや古さも
まとめ:XSLTの再評価
- XSLT は現代のフレームワーク全盛時代においても、 静的Webサイト 制作のための シンプルで強力な選択肢
- Webブラウザ+XSLT で、 手軽かつ堅牢な クライアントサイド・ビルドシステム を実現
- 古き良き仕様 が、今もなお 有用な道具 であることの証明