TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する

フロントエンド・PHPカンファレンス北海道2026 にて発表した「TypeScript Compiler APIとPHP-Parserを活用し、TypeScriptとPHPで型を共有する」の資料です。

Transcript

1. TypeScript Compiler APIと PHP-Parserを活⽤し、 TypeScriptとPHPで型を共有する 2026/06/06 did0es
2. Hirai Shuta | did0es（🗣 ディドス） SWE / Next Experts(TypeScript) @ CyberAgent, Inc. Lead organizer FEC Tokyo For more: did0.es
3. このセッションのねらい
4. TypeScriptとPHPという 異なる⾔語間で型を共有し 恩恵を享受する⽅法を知る
5. 今⽇お話すること ① 背景 ② 型の共有（type-bridge）について ③ JSONの型を共有する ④ TypeScriptの型はどこまでPHPで再現できるのか ⑤ まとめ
6. 今⽇お話しないこと 以下はお話しません🙏 • TypeScriptやPHPの基本的な⽂法の解説 • PHP⾃体の型の話 • PHPStan以外のPHP向け静的解析ツール
7. ① 背景
8. ① 背景 読み上げ⾳声を集めるためのWebアプリの開発 • 聞き取りやすさの推定に利⽤する読み上げ⾳声 • コロナ禍で対⾯での⾳声収録が困難 • 被験者のPCを⽤いてリモートで収録を実施 ❌
9. ① 背景 参考：Common Voice(Mozilla)
10. ① 背景 構成 ⾳声ファイル ユーザー情報(IDなど) 被験者 レンタルサーバー
11. 慣れている & 型の表現⼒が⾼い TSで全部やってしまおう！
12. ① 背景 採⽤しようとした技術 • クライアント：Next.js(Pages Router / TypeScript) • サーバー：Node.js(Express / TypeScript)
13. レンタルサーバーの規約で 常駐プロセスを⽴てられない ∕(^o^)＼
14. ① 背景 採⽤した技術 • クライアント：Next.js(Pages Router / TypeScript) • サーバー：PHP(Vanilla)
15. TypeScriptとPHPは全く違う⾔語
16. それでも型を共有したい
17. ① 背景 なぜ型を共有したいのか • 型を正として効率よく開発できる • API疎通を安全に⾏える
18. でもどうやって...？
19. ② 型の共有（type-bridge）について
20. ② 型の共有（type-bridge）について GitHubからサンプルコードをご覧になれます https://github.com/shuta13/ts-php-type-bridge
21. ② 型の共有（type-bridge）について type-bridgeに採⽤した技術 • PHPStan • PHP-Parser • TypeScript Compiler API
22. ② 型の共有（type-bridge）について クライアント‧サーバー共通の型をTypeScriptで記述 • TypeScript側の型を正とする • APIスキーマのような形で定義
23. FormDataの型を共有する例を通して 仕組みを理解しましょう！
24. TypeScriptを元にPHP側で FormDataのkeyに 型が付いている状態を⽬指す
25. ② 型の共有（type-bridge）について 共通の型の記述例
26. ② 型の共有（type-bridge）について クライアントで普通に参照してみる
27. ② 型の共有（type-bridge）について tscで型チェック（正常時）
28. ② 型の共有（type-bridge）について tscで型チェック（エラー時）
29. ② 型の共有（type-bridge）について この型をTypeScript Compiler APIで解析し、JSONに変換 TypeScriptの型 型の情報のJSON TypeScript Compiler API
30. ② 型の共有（type-bridge）について 型の抽出処理 1. TypeScriptのソースコードを⽊構造（AST）に変換 2. type を再帰で探す 3. 右辺から ‘file’ | ‘label’ のような箇所を取り出す
31. ② 型の共有（type-bridge）について 抽出⽤のTypeScript（簡易コード）
32. ② 型の共有（type-bridge）について ⽣成されるJSONの例
33. ここまでがTypeScript
34. ② 型の共有（type-bridge）について PHP-ParserでJSONからPHPDoc Typesを⽣成 型の情報のJSON PHP-Parser 型付きのPHP
35. ② 型の共有（type-bridge）について 型の⽣成処理 1. JSONを再帰で掘る 2. ‘file’ | ‘label’ のような箇所を探す 3. PHPDoc Typesに変換してコードに埋め込む
36. ② 型の共有（type-bridge）について PHP-Parserで型を⽣成するPHP（簡易コード）
37. ② 型の共有（type-bridge）について ⽣成されるPHPの例
38. ② 型の共有（type-bridge）について PHPStanで型チェック（正常時）
39. ② 型の共有（type-bridge）について PHPStanで型チェック（エラー時）
40. PHPでも型チェックが可能に🎉
41. この仕組みを応⽤する
42. ③ JSONの型を共有する
43. keyだけではなく valueの型も共有してみる
44. ③ JSONの型を共有する 共有する型
45. ③ JSONの型を共有する 型を抽出するTypeScript（簡易コード）
46. ここまでがTypeScript
47. ③ JSONの型を共有する ⽣成されたJSON
48. ③ JSONの型を共有する JSONから型をマッピングするPHP（簡易コード）
49. ③ JSONの型を共有する 型のマップからPHPDoc Typesを⽣成するPHP（簡易コード）
50. ③ JSONの型を共有する ⽣成されたPHPDoc Types
51. ③ JSONの型を共有する PHPStanでチェック（エラー時）
52. valueの型チェックが可能に🎉
53. 終 制作‧著作 ━━━━━ ⓅⒽⓅ
54. 番外編
55. ④ TypeScriptの型はどこまで PHP側で再現できるのか
56. 前述のtype-bridgeで再現を試みます
57. ※完全には再現できません※
58. ④ TypeScriptの型はどこまでPHPで再現できるのか type-bridgeで再現できるもの • primitiveな型 ( unknown / any / symbol 以外 ) • Array / Record / Optional • union types / intersection types • index signature
59. ④ TypeScriptの型はどこまでPHPで再現できるのか 再現できるもの：primitiveな型
60. ④ TypeScriptの型はどこまでPHPで再現できるのか 再現できるもの：Array
61. ④ TypeScriptの型はどこまでPHPで再現できるのか 再現できるもの：Record
62. ④ TypeScriptの型はどこまでPHPで再現できるのか 再現できるもの：Optional
63. ④ TypeScriptの型はどこまでPHPで再現できるのか 再現できるもの：union types
64. ④ TypeScriptの型はどこまでPHPで再現できるのか 再現できるもの：intersection types
65. ④ TypeScriptの型はどこまでPHPで再現できるのか 再現できるもの：index signature
66. ④ TypeScriptの型はどこまでPHPで再現できるのか type-bridgeで対応できないが、⼿動で再現できるもの • keyof • conditional types • generics
67. ④ TypeScriptの型はどこまでPHPで再現できるのか ⼿動で再現できるもの：keyof
68. ④ TypeScriptの型はどこまでPHPで再現できるのか ⼿動で再現できるもの：conditonal types
69. ④ TypeScriptの型はどこまでPHPで再現できるのか ⼿動で再現できるもの：generics
70. ここまでが再現できたもの
71. ④ TypeScriptの型はどこまでPHPで再現できるのか 部分的に再現できるもの ① • unknown → mixedで部分的に再現できるが、型の絞り込みは不可 • any → mixedで部分的に再現できるが、型チェックの対象になる
72. ④ TypeScriptの型はどこまでPHPで再現できるのか 部分的に再現できるもの ② • Readonly → PHP⾃体にreadonlyはあるが同等ではない • Partial / Required / NonNullable → ⼿作業で頑張るのみ
73. ④ TypeScriptの型はどこまでPHPで再現できるのか TypeScriptとPHPDoc Typesの⽐較 • primitiveなものや、オブジェクトの型は再現できる • TypeScriptと同じ書き⽅も存在する → Optional や Record、union / intersection types など • 無い構⽂ベースの型は再現できない → mapped types や infer などを⽤いた型
74. PHPもPHPStanとPHPDoc Typesで 型の表現⼒が豊かに
75. ⑤ まとめ
76. ⑤ まとめ • 静的解析によって、TypeScriptとPHPで型を共有し Web開発を効率よく安全に⾏えた • PHPStanによる型チェックで、PHPのコードがより堅牢になる • PHPDoc Typesで、TypeScriptのように様々な型を表現できる
77. ⑤ まとめ 参考⽂献 • https://www.typescriptlang.org/docs/handbook/ • https://phpstan.org/writing-php-code/phpdoc-types
78. ありがとうございました