読者が資料のコードを手元に写さずに試せるようにする。コードの横の「実行」ボタンで、その場で出力（console.log）を表示する。TypeScript の資料なので、型エラーもその場で見せる。
| 項目 | 値 |
|---|---|
| 資料内のコードブロック | typescript 180 ／ shell 39 ／ json 10 |
| 実行用サンプル | docs/samples/ に 13 本（ハンズオン含む）。手元の Node で動かす前提 |
| 資料が対象にする版 | TypeScript 7.0.2 ／ Node v26.10.0 |
| TypeScript 7 の npm パッケージ | main が無く bin/tsc だけ（npm view で確認）。ブラウザから呼べる JS の API を持たない |
| ページの JS | docs/js/highlight.js（色付け）のみ |
ブラウザで動く変換器は、資料の TypeScript 7 と別物になる。型エラーの文言・検出の細部が資料の記述と食い違う可能性がある（未確認）。食い違いは「進め方」の手順 5・6 のテストで洗い出す。
| 部分 | jsprimer | この資料 |
|---|---|---|
| 対象の指定 | コードブロックの前に <!-- js-console --> を書いたものだけ | 同じ考え方（data-run） |
| 実行の場所 | 非表示の iframe ＋ postMessage（codemirror-console） | Web Worker |
| 編集 | CodeMirror 5 で編集して再実行 | textarea で編集して再実行 |
| 変換 | 無し（JavaScript をそのまま実行） | TypeScript 6.0.3 で型検査と変換 |
| 検証 | power-doctest。式; // => 値 の注記をビルド時に比較テストへ変換 | 同じ書き方の注記を使う |
| 論点 | 決定 | 理由 |
|---|---|---|
| 1. 変換器 | TypeScript 6.0.3 の lib/typescript.js を docs/js/lib/ に置く | 型エラーを見せられるのはこれだけ。「実行」を押したときだけ読み込む |
| 2. 実行の場所 | Web Worker | 無限ループでもページが固まらず、時間切れで止められる |
| 3. 対象の指定 | <pre data-run> を付けたものだけ | 断片・Node 専用の例に動かないボタンを並べない |
| 4. 編集 | textarea に差し替えて編集・再実行できる | ライブラリを増やさずに「書き換えて試す」を再現する |
| 5. 検証 | コードに // => 値 の注記を書き、テストで照合する | 結果を貼っていないコードも検証でき、読者には行の横に答えが見える |
注記は data-run を付けるコードにだけ書く。型エラーは注記ではなく、エラー番号（TS2345 等）で照合する。既存の $ npx tsx の結果ブロックと内容が重なるものは、手順 4 で残すか消すかを決める。
| 項目 | 値 |
|---|---|
lib/typescript.js | 9,144,216 バイト（gzip 後 1,652,436 バイト） |
型検査に要る lib.es*.d.ts | 97 本 618,660 バイト |
| 読込（Node v26.10.0） | 約 167 ms |
| 型検査＋変換 1 回目 | 298〜928 ms |
| 型検査＋変換 2 回目以降 | 144〜165 ms |
6.0.3 は 7 系と違い、JS の API を持つ（main が ./lib/typescript.js）。docs/samples/ を 6.0.3 の tsc で型検査し、7.0.2 と同じくエラー 0 件だった。
3 行のコード（greet(1) を含む）で TS2345 が出ることも確かめた。ブラウザでの時間は手順 3 で測った（下の表）。console の型は lib.dom.d.ts を読まずに、1 行の宣言で足りた。
手元の HTTP サーバから 07 章を開き、「実行」を押してから出力が出るまで。PlayWright 共有環境で測った。公開 URL では変換器（約 9 MB）のダウンロードが 1 回目に加わる。
| ブラウザ | 1 回目（変換器の読込を含む） | 2 回目 |
|---|---|---|
| chromium | 902 ms | 223 ms |
| firefox | 1,692 ms | 294 ms |
| webkit | 1,169 ms | 449 ms |
| 置き場 | 中身 |
|---|---|
docs/js/lib/ | 変換器の本体（1 の結果）と、そのライセンス文。版はファイルの先頭のコメントと docs/ZZ-構成.html に記す |
docs/js/runner.js | pre[data-run] にボタンと出力欄を足す。押されたら変換器を読み込み、型エラーと出力を表示する |
docs/js/runner-worker.js | Worker 側。変換したコードを実行し、出力を親へ返す |
docs/css/style.css | ボタン・出力欄・型エラーの見た目 |
docs/*.html | 対象の pre に data-run を付ける。runner.js を読み込む |
tests/ | 資料の data-run コードを取り出し、// => 値 の注記を比較に変えて node:test で実行する。型エラーは番号で照合する |
md-skip は要らない）runner.js と Worker を作り、1 章分（07 章）で試す（済）data-run を付けるものを一覧にする。結果ブロックの扱いもここで決める（済）// => 値 の注記を書き、注記を照合するテストを作る（済）data-run を付けたすべてのコードで、注記の値と型エラー番号がテストで一致するcheck-contrast の指摘が 0 件console.log を含むコード例 53 本を、tools/40_test/list-runnable.ts で型検査・実行して選んだ。17 本に付けた（01・02・04・05・06・07・08・09・11・A2）。
| 外したもの | 理由 |
|---|---|
| 実行の途中で例外が出るもの（03 #1、06 #6・#7 など） | 注記は出力の並びなので、例外で止まる様子を表せない |
import・await・process・fs を使うもの（10〜12・A3 など） | ブラウザの Worker では動かない。docs/samples/ で手元の Node に任せる |
| 未定義の名前を使う断片（A2 #2・#5 など） | 前後のコードが無いと動かない |
| 出力の無いもの | 「実行」しても見せるものが無い |
貼ってある $ npx tsx の結果ブロックは残した。JS が動かない読者と Markdown の読者のため。注記と同じ内容であることをテストで確かめる。
// => 出力。ループのように 1 行で何度も出力するものは、ループの後ろに // => の行を重ねる。型エラーはコメントの error TSxxxx（エラー TSxxxx）で照合するtests/samples-run.test.ts: 型エラーの番号、Worker の整形、本物の Node の出力、貼った実行結果の 4 つを注記と比べるtests/browser/runner.spec.ts: chromium・firefox・webkit で「実行」を押し、出力を注記と比べる。編集・型エラー表示・時間切れ・JS が足す部品の配色も確かめるTS2353 ではなく TS2561 だと分かった（7.0.2・6.0.3 とも）。直した| 条件 | 結果 |
|---|---|
| 注記と型エラー番号の一致 | ✅ 17 本すべて（Node・ブラウザ 3 種） |
| CDN を参照していない | ✅ 変換器は docs/js/lib/ に置いた |
| 公開 URL で実行できる | ✅ 2026-10-18、RUNNER_BASE を公開 URL にしてブラウザのテスト 36 件が通った（3 ブラウザ。76763b1） |
check-contrast の指摘 0 件 | ✅ docs・README とも 0 件。JS が足す部品は check-contrast が見ないので、ブラウザのテストで実測した（最小 3.63:1） |