XSLTはXML（XSLT3.0の現在ではJSONも含む）の変換を記述する技術だ。
だが、この技術は1999年の登場から3.0まで進化したが現状ではあまり注目されていない。
しかし、私はこの技術がフロントエンドの最後の主要技術になり、これをもってフロントエンドの技術が完成すると考えている。この記事ではその理由について書く。
#フロントエンド
まずはフロントエンドの話をしよう。
HTML、CSS、JavaScriptがありそれぞれ変化を遂げてきた。特にCSS、JavaScriptでは画期的なフレームワークの登場が開発の進歩をもたらした。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://www.jsdelivr.com/package/npm/bulma">
(somecode)
</head>
<body>(somecode)</body>
</html>
これらのコードは現在ではあまりに見慣れたものだろう。
#ブラウザの挙動
その前にブラウザの挙動をまとめてみよう。現在のよく知られた技術なら大まかにこうなる。
- 指定されたURLのサーバからファイルをダウンロード
- ダウンロードしたものがHTMLならエンジンで解析
- CSSやJavaScriptのダウンロード
- レンダリング
- JavaScriptの実行など
#XSLT
そして、これ以外にもあまり知られていないフロントエンドの技術がある。それがXSLTの適用テクニックである。
XSLTはXMLにとある記述をすることで、それがブラウザから読み込まれた時に変換を行うようXSLTプロセッサに指令を出せる。
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="application/xml" href="framexs.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml">
(somecode)
</html>
この記述によってブラウザはXMLをそのままパースするのではなくframexs.xslによって変換された後の出力結果を内部で受け取り、それがHTMLであった場合などは必要に応じてパースやレンダリングをするようになる。
その流れを整理しよう。
- 指定されたURLのサーバからファイルをダウンロード
- ダウンロードしたものがXMLならエンジンで解析
- XSLTを行うよう命令されていたならばXSLをダウンロード
- XSLT処理を行う
- 出力先のタイプがHTMLだとしたらHTMLとして解析
- CSSやJavaScriptのダウンロード
- レンダリング
- JavaScriptの実行など
#framexs
この仕組みを利用して構成を記述したXHTMLとモデルとなるXHTMLを合成してHTMLを出力するフレームワークがある。
それが私が開発したframexsだ。
このフレームワークはまるでMVCアーキテクチャのようにHTMLを生成する。
詳しくはHTML5はXHTMLで楽に書ける？XSLTによるMVCライクなフレームワーク framexs を開発したので解説するよで書いているので参照されたい。
#終わりに
現在のフロントエンドは開発が急速に進むとともに混迷の度合いを深めている。そして、XSLTは今までフロントエンドの技術としてほとんど注目を浴びることはなかった。
しかし、framexsの登場と開発によってそれも変わっていくと私は期待している。