MOSKINというTypeScriptプロダクトを新規立ち上げする中で踏んだ地雷

Transcript

1. MOSKINというTypeScriptプロダクトを新規立ち上げする中で踏んだ地雷 -きんはむちゃんのTypeScript奮闘記- 新サービス開発部 FACTORY EC開発G 鈴木 優里 2026/06/10
2. 新サービス開発部 FACTORY EC開発G 鈴木 優里 "きんはむちゃん" as { "夫による呼び名": "きんはむちゃん" } 2023年KTC入社 UPGRADE FACTORYのFEを担当 2025年よりMOSKINの立ち上げからFEを担当 開発業務以外にも販促映像制作や商品・イベントで の撮影・ユーザーインタビューも担当している 私は複雑な型テクニックはあまり使わず 業務でシンプルにTypeScriptを使うタイプです - 特別なことはしていない - 普段の開発で使うレベル
4. モータースポーツの ワクワク全力応援。 2025年8月6日MOSKINのサービスがスタート‼️ 極限のスピードがドライバーを鍛え、クルマを鍛え るモータースポーツの世界。 体験したい気持ちはあっても、なかなか一歩踏み出せ ない。 その一歩、KINTOが応援します。 サブスク スポーツカーレンタル https://motorsport.kinto-jp.com/ サーキットレンタル 走行・体験イベント
5. 開発状況 サービス企画 × WEB立ち上げが同時進行 サービスのオペレーションも同時進行での企画だったので要件が定まりにくい PdM不在 実働はデザイナー1名・FE2名 リテラシーの差 Business: 　 - 事業部＝モータースポーツ・自動車ドメインのプロ、WEB開発知見は少ない Develop: 　 - WEBのプロ、車に興味あるメンバーは30%の割合 事業・開発共に、ほぼ初対面でのスタート 事業側の役割分担もわからず、開発内でも誰がどんなことを得意とするのかがわからず進めようにも 頼める人か不明な状況
6. コンテンツ - BEなし: 　 - ミニマムリリース前提 　 - JSONでページ生成 コンテンツ運用： 　 1, Excelで入力（Excelのデータは事業部） 　 2, JSONに変換 　 3, ページ生成
7. 今日の話 この状態で踏んだTypeScriptの地雷
8. 地雷① Excelが仕様を壊した
9. 理想 Excelに入力すればページ生成！
10. 現実 - 情報がExcelに収まらない - 入稿が間に合わない - 独自フォーマットで連携される
11. 結果 - JSON構造が崩壊 - 型にハマらない - UIも崩れる
12. 学び - 入力フォーマットは運用で壊れる - 型より先に運用設計が必要
13. +α 地雷（データ理解不足） そもそもデータが理解できてなかった
14. 状況 - 車のプロではない - 私はペーパードライバー
15. 起きたこと - 数値と単位の区別がつかない - 全部stringにしそうになる type CarSpec = { power: string; }
16. - わからないものに型はつけられない 学び - 型は知識をデータに対応させるルール - stringは「諦め」の型
17. 地雷② 変わるJSONを型で守ろうとした
18. なぜ起きたか - 要件変わる - Excel崩れる - JSON変わる → でも型は守ろうとする
19. 結果 - unionだらけ - optionalだらけ → 型の意味が消える
20. 状態 - 型はある ✅ - でも何も守ってくれない ❌
21. 学び - 型は“変わらないもの”に使う - 広げすぎると価値がなくなる
22. 地雷③ 型があっても認識がズレてた
23. 状況 同じ型を見ているのに解釈が違う type Event = { status: "open" | "closed"; } 開発： 　 open：リンク表示 　 closed：終了した情報ごと非表示 事業： 　 open：リンク表示 　 closed：イベント終了だが情報を表示
24. 結果 - 型は正しい - でも表示がバグる 本質 - TypeScriptは「構造」は保証する - でも「意味」は保証しない
25. 学び - 型はチームの共通言語 - 合意がないと意味がない
26. - JSONは仕様になる（特にBEがない場合） まとめ - 入力（Excel）は必ず壊れる - 型は「理解しているもの」にしかつけられない - 型は「安定」と「合意」に使う
27. ご静聴ありがとうございました