---
matra:
entry: main.matra
values:
- content.js.part
---
# A page with Matra
```main.matra
html(lang="en") {
head {
title { content.pageTitle(content.title) }
}
body {
h1 { content.title }
p { content.description }
}
}
```
```content.js.part
({
title: "A page with Matra",
description: "Describe the document, then generate semantic HTML.",
pageTitle: title => `${title} | Matra`
})
```MATRA / EXPERIMENTAL STRUCTURAL LANGUAGE
文書をコードで組み立てる。
Matraは、文書・データ・プログラムを共通構造で扱うことを目指す実験的な構造言語です。現在のv0.3では、文書構造を記述し、JavaScriptの値と接続し、文書ASTからHTMLを生成する経路を試せます。技術書典の技術書で設計に触れた方は、まずCLIで動かし、ソースと出力を比較しながら仕様・実装へ進んでください。
Core v0.3.0 / HTML v0.3.0。Node.js向けの実験版です。
実験版CLI。Node.js 22/24とnpmが必要です。
npm install --global @matra/[email protected]SOURCE → DOCUMENT AST → HTML
ソースと生成結果を比較する
このサイト自身もMatraで生成しています。以下はbuildで実行するソースと実際のHTML出力です。Markdownの名前付きコードfenceを入口に、JavaScriptの値を参照して文書を評価し、文書ASTをHTML rendererへ渡します。
左は入力Markdown文書の全体です。matra.entryがmain.matraを入口に選び、matra.valuesがcontent.js.partのJavaScript式の結果をcontentとして渡します。contentは組み込み変数ではありません。h1はcontent.titleをそのまま使い、titleはJavaScript関数content.pageTitleを呼び出してサイト名を付けます。値の共有だけならJSONで足りますが、この例では関数を渡すために.js.partを使っています。関数はbuild時に実行され、生成HTMLには含まれません。
<html lang="en">
<head>
<title>A page with Matra | Matra</title>
</head>
<body>
<h1>A page with Matra</h1>
<p>Describe the document, then generate semantic HTML.</p>
</body>
</html>技術書の、その先へ
動かす。構造を読む。実装を追う。
01 / RUN
CLIで最初のページを作る
Node.js 22/24とnpmを用意し、version固定でCLIを導入。matra initからbuild・ローカルpreviewまで進めます。
Get Started →実行例とSVG・MathMLデモ →02 / MODEL
Data Model → AST → 文法
tag・props・childrenとMatraJSONを起点に、文書値の表現、source構文、parseと評価の境界を確認します。
データモデルから読む →parseと評価 →03 / IMPLEMENTATION
公開APIと実装を追う
Coreの評価・AST変換とHTML rendererの責務を確認し、JavaScriptとの接続や自分のツールへの組み込みを検討します。
Packagesとソース →設計思想と技術的背景 →開発状況
実装済みの経路と、実験版の契約。
CLIとNode.js向けliterate APIは実験版です。buildは文書内のJavaScriptを実行するため、信頼するsourceだけを使ってください。PlaygroundはHTML限定、SVG・MathMLはCore/HTMLによる限定デモです。専用Graphics/Math APIや汎用sandboxを提供するものではありません。