Slide 1
Slide 1 text
TypeScriptとDocumentation tests
ssssota
Slide 2
Slide 2 text
だれ
● ssssota
● 冨川宗太郎
● {"x": "ssssotaro", "github": "ssssota"}
● JSのビルド周りのツールチェーンに関心がある
Slide 3
Slide 3 text
Documentation testsとは
/// ```
/// let result = doccomments::add(2, 3);
/// assert_eq!(result, 5);
/// ```
pub fn add(a: i32, b: i32) -> i32 {
a + b
}
↑はRustのドキュメントに書いてあるもの
最近のJSエンジニアはRustが必修と聞いているのでみなさんご存知。
コード内(外)のドキュメントに記述されたコードを実行することで
ドキュメントの信頼性を担保する。
Slide 4
Slide 4 text
JSのDocumentation tests
● Supabase CEO作 https://github.com/kiwicopple/doctest-js
● azu氏 作 https://github.com/azu/power-doctest
● https://github.com/davidchambers/doctest
いずれもJavaScriptにサポートが限定される。
（3つ目はなぜかCoffeeScriptサポートがある）
TypeScriptのファイルでもDocumentation testsしたい！
Slide 5
Slide 5 text
作った
https://github.com/ssssota/doc-vitest
Vitest向けのプラグインとして作ることでTypeScriptのトランスパイルは
Vite(esbuild)に、テスト周りのCLI,assertionはVitestに全乗っかり。
/**
* @import.meta.vitest
* ```ts
* expect(add(1, 2)).toBe(3);
* assert(add(3, 4) === 7);
* ```
*/
export function add(a: number, b: number) {
return a + b;
}
Slide 6
Slide 6 text
仕組み(変換)
/**
* @import.meta.vitest
* ```ts:1+2=3
* expect(add(1, 2)).toBe(3);
* ```
*/
export function add(a: number, b: number) {
return a + b;
}
/**
* @import.meta.vitest
* ```ts:1+2=3
* expect(add(1, 2)).toBe(3);
* ```
*/
export function add(a: number, b: number) {
return a + b;
}
if (import.meta.vitest) {
const {assert,...} = import.meta.vitest;
import.meta.vitest.test("1+2=3", async()=>{
expect(add(1, 2)).toBe(3);
});
}
Slide 7
Slide 7 text
仕組み(Vitest)
Vitest用プラグインと書いたが正確にはVite用プラグイン。Vitestからの実行時に
のみ変換が有効化される
VitestのIn-Source Testingと呼ばれる機能で追記されたテストが実行される
In-source Testingでは変換前の時点で import.meta.vitest の記述があるファイル
だけを実行対象にするので @import.meta.vitest という記述が必要だった
テスト対象を抜き出せばOKなので、Markdown内のコードブロックもサポートし
ている
Slide 8
Slide 8 text
おわりに
JavaScriptの開発では至る所でコード変換されている。
（トランスパイル、バンドル、ミニファイ、Svelte/Vueコンポーネント、、、）
webpackやViteのプラグインはUnpluginというライブラリで結構簡単に作れる。
みんなもコード変換しまくろう！