TypeScriptの型だけでオセロを完全実装する ── 型は"仕様"をどこまで語れるか

Transcript

1. TypeScriptの型だけでオセロを完全実装する ── 型は"仕様"をどこまで語れるか 籏野 拓 2026.05.22 TSKaigi2026 -DAY1- RightTouchトラック
2. Speaker紹介 籏野 拓 @taku-hatano 2 フロントエンド・バックエンド・インフラ すべてをTypeScriptに支えられている
3. 3 フォルシア株式会社
4. こんな型を見たことはありませんか？ 4
5. 5 type TravelReservation = { reservationId: string; status: | "pending" | "confirmed" | "waitlisted" | "cancelled"; confirmedAt?: Date; cancelledAt?: Date; waitlistPosition?: number; }; 複数の状態が重なり合う型 status: “confirmed”なら confirmedAtは必ず存在するはず …だが型だけ見てもわからない “仕様”を正確に表さない型
6. 本日の主題 : 型で”仕様”を表現するハードルを下げたい 6
7. もっと複雑な ”仕様”を表現すれば 「あれ、できるかも？」と思ってもらえるかも 7
8. そうだ、オセロ作ろう
9. オセロの”仕様”の複雑さ • 8×8の盤面(端、角、それ以外で構成) • “合法手”の判定 • パスの判定 • 石をひっくり返す操作 • 勝敗の判定 • …etc 9
10. オセロ型の紹介 ~Play型~ 10 type G1 = Play<"e6">; // G2: f4 - e4の黒を挟んで裏返し、 4行目を白で横に支配する type G2 = Play<"f4", G1>; type G3 = Play<"f4", G2>; 型 '"f4"' は制約 '"c3" | "d3" | "e3" | "f3" | "g3"' を満たしていません。 次の手番と今の盤面を渡すと盤面が進む “合法手”でなければエラーになる
11. オセロ型の紹介 ~View型~ 11 expectTypeOf<V10>().toEqualTypeOf<{ cols: " abcdefgh"; row1: "1|--------|"; row2: "2|--------|"; row3: "3|---XO---|"; row4: "4|--OXOO--|"; row5: "5|--XXOX--|"; row6: "6|---XO---|"; row7: "7|---X-O--|"; row8: "8|--------|"; }>(); 今の盤面を視覚化する型
12. オセロ型の紹介 ~BoardResult型~ 12 expectTypeOf<BoardResult<FullBlackBoard>>().toEqualTypeOf<{ blackCount: 64; whiteCount: 0; winner: "black"; }>(); 石の数を数えて勝者を判定する
13. オセロ型の紹介 気になる方はこちらのリポジトリに実装を置いてます！ https://github.com/taku-hatano/othello-type 13
14. 型で作った “仕様”は他人に伝わるのか？ 14
15. よし、AIだ！！ 15
16. AIに「これはどんな型？」を調査させた モデル: Claude Opus 4.7 渡した情報は以下のみ 16 import type { SecretType } from "./src"; 型名も含めてあらゆる情報がない状態から どのような型か推測できるか？
17. A. できた 17
18. 型だけで仕様を表現し、他人に伝えることができた！ 18 ※先のリポジトリにAIの調査ログをおいてますので 気になる方はそちらを参照してください。
19. オセロという複雑な ”仕様”を 型で実装できた！！ 19
20. あなたが扱う ”仕様”も 型でもう少しうまく表現できるかも？ 20
21. EOF