Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Documentation testsの恩恵 / Documentation testing ...
Search
TOMIKAWA Sotaro
May 11, 2024
Programming
2
830
Documentation testsの恩恵 / Documentation testing benefits
TSKaigi 2024
の発表資料です
TOMIKAWA Sotaro
May 11, 2024
Tweet
Share
More Decks by TOMIKAWA Sotaro
See All by TOMIKAWA Sotaro
新しいAPI createRawSnippet触ってみた / What is the createRawSnippet?
ssssota
2
58
脱法Svelte / Evasion of svelte rules
ssssota
1
130
TypeScriptとDocumentaion tests / Documentation tests with TypeScript
ssssota
7
3.7k
Svelteでライブラリを作る / Make your library with Svelte
ssssota
0
110
現代のReactivityとSvelteの魔法
ssssota
0
1.8k
型付きdotenv
ssssota
0
270
Other Decks in Programming
See All in Programming
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
240
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
540
Pinia Colada が実現するスマートな非同期処理
naokihaba
4
200
カスタムしながら理解するGraphQL Connection
yanagii
1
1.5k
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.7k
Realtime API 入門
riofujimon
0
140
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
580
macOS でできる リアルタイム動画像処理
biacco42
9
2.3k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.5k
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
300
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
How STYLIGHT went responsive
nonsquared
95
5.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Language of Interfaces
destraynor
154
24k
Raft: Consensus for Rubyists
vanstee
136
6.6k
For a Future-Friendly Web
brad_frost
175
9.4k
Being A Developer After 40
akosma
86
590k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Transcript
Documentation testsの恩恵 ssssota
自己紹介 冨川宗太郎 Tomikawa Sotaro (ssssota) { GitHub: "ssssota", X: "ssssotaro"}
フロントエンドエンジニア sは合計4つ
突然ですがこちらのコードをご覧ください
/// ``` /// use biome_unicode_table::is_js_ident; /// /// assert!(is_js_ident("id0")); /// assert!(is_js_ident("$id$"));
/// assert!(is_js_ident("_id_")); /// assert!(is_js_ident("𐊧")); /// /// assert!(!is_js_ident("")); /// assert!(!is_js_ident("@")); /// assert!(!is_js_ident("custom-id")); /// assert!(!is_js_ident("0")); /// ``` pub fn is_js_ident(s: &str) -> bool { if s.is_empty() { return false; Rust製Linter/Formatterである Biomeのコードを一部抜粋 ソースコード中のドキュメント に 関数の入出力が記載されている Rust(Cargo)にはデフォルトで 搭載されている機能で実際に利 用されている https://github.com/biomejs/biome/blob/7 245146125fa76c19780f68653092ed24fcdb717/ crates/biome_unicode_table/src/lib.rs#L4 2-L57
TypeScriptでは次のようなもの(vite-plugin-doctestの例) JSDocとして記載されたコメント内でassert関数を用い関数をテストしている それだけ /** * @example * ```ts @import.meta.vitest *
assert(add(1, 2) === 3); * ``` */ export const add = (a: number, b: number) => a + b; Documentation testsとは?
1. ソースコードのすぐそばに、テストコードが記載できる。 index.test.ts など別途ファイルを作成することなく、すぐにテストを書 き始めることができる。 2. ドキュメントに記載したコードを実行してその動作が保証できる。 ライブラリ等で、動かないサンプルコードを見たことが...。 3. 関数利用時にIDE(LSP)を介して「動作保証されたサンプルが閲覧できる」。
Documentation testsの恩恵
Documentation testsの恩恵 こんなシーンを見たことが... • ドキュメントにサンプルコードを書いても廃れる • そもそもJSDoc誰も読み書きしない... →実装のすぐとなりにテストコード(=JSDoc)を書くことで、 そもそもJSDocに触れる機会が増え、 それがサンプルコードとなり、生きたドキュメントになる。
ドキュメンテーションテストとの向き合い方 ドキュメンテーションテストは銀の弾丸(万能)ではない。 次のようなテストは向かない(書けない)。 • ライフサイクル関数が必要 • モックが必要 • UIテスト カジュアルにドキュメントおよびテストを書き始める手段の一つ。
いま型をカジュアルに書くように、 よりドキュメント/テストをカジュアルに書く世界。
npm i -D vitest vite-plugin-doctest import { defineConfig } from
'vitest/config'; import { doctest } from 'vite-plugin-doctest'; export default defineConfig({ plugins: [doctest()], // markdownファイルもサポートしている test: { includeSource: ['./src/**/*.[jt]s?(x)', './**/*.md'] }, }); npx vitest 導入方法(vite-plugin-doctest)
TypeScriptでは次のようなもの(vite-plugin-doctestの例) JSDocとして記載されたコメント内でassert関数を用い関数をテストしている それだけ /** * @example * ```ts @import.meta.vitest *
assert(add(1, 2) === 3); * ``` */ export const add = (a: number, b: number) => a + b; Documentation testsとは?
Documentation testsで 生きてるドキュメントとテストを書こう!