両面どころかインフラもTSでできるよ ～ 全方位TypeScriptによるプロダクト開発 ～

Transcript

1. 両面どころかインフラもTSでできるよ
 ～ 全方位TypeScriptによるプロダクト開発 ～

2. 全方位TypeScript？

3. 「全方位TypeScript」とは？
 • フロントエンドだけでなくバックエンド、インフラも TypeScriptで統一して開発すること
 • 統一すると何がうれしいの？
 ◦ 型の共有
 ◦ モノレポとの相性
 ◦ 開発者オンボーディングの速さ、etc… 
 • 何より重要なこと
 ◦ 開発速度を高める
 ◦ 開発品質を高める
 ◦ → 顧客提供価値を高める 

4. 我々の開発者オンボーディング

5. ステップは3つ
 1. GitHub OrgとPlanetScaleに招待
 2. Codespaceを起動して立ち上げコマンド打つ
 3. 開発開始！
 MacとかWindowsとかそういうのも気にしない。
 ブラウザさえあれば開発に入れる。
 ※開発者体験的にはローカルのVSCode使うのがいい と思うけど

6. アプリケーション開発

7. フロントエンド開発
 Vite + React + Ant Design を採用しています。
 Viteはesbuildを用いた開発サーバでビルドが高速なので開発 者体験が良く、Pluginも充実してきているため採用
 Reactはもう特に議論の必要はないレベルでフロントエンドの デファクトだと思います
 Ant DesignとChakraで議論になりましたが、B2Bの管理画面 向けとして使えるコンポーネントがChakraよりも多くあるため 採用

8. バックエンド開発
 Hono + Prisma を主なコンポーネントとして採用 
 HonoはWAFとしてシンプルに振舞うため、乗るアプリのコン ポーネント設計と切り離すことができ、高速であるため採用 
 Prismaはprisma.schemaの定義ができていればTypeとテーブ ル双方の定義が出来上がるなど、データベースを使った開 発の生産性を高めることができ、ORMとしても一定のシェア を持っていることから採用 
 アプリケーション構成としてはレイヤードアーキテクチャに 倣った構成で依存の方向をシンプルに 

9. 型などの共有
 pnpm workspacesを利用
 プロジェクトルートにpnpm-workspace.yamlを配置する とサブパッケージをimportできる
 我々の場合は packages/* に api や schema を配置 し、それぞれのアプリから呼べるような構成を採用

10. インフラもTSでIaCする

11. TSでIaCするためのPulumi
 Pulumiとは、IaCするためのOSSツールで、AWS, GCP, Azure問わずリソース作成・削除、デプロイ など管理を行うことができる。
 TypeScript以外にもPython, Go, C#などでもIaCで きる。

12. おまけ：PlanetScaleの効用

13. PlanetScale？
 • ソースコード同様「ブランチ」という概念を データベースに持ち込んだサービス。
 • VitessというMySQLをクラスタ化して運用す るためのミドルウェアインフラをクラウド サービスにしたもの。
 • これを使うと、データベースも「プルリク」運 用できるようになる！

14. まとめ：なぜこうしているのか

15. なぜこうしているのか
 エンジニアリング組織論への招待に
 • 不確実性への向き合い
 • 役割を分けない
 • 経験を知識に変える
 • 価値の流れを最適化する
 というような話がありますが、我々も不確実 なことをやっているので「高速に価値を届け られる開発体制」が必要だから

16. 結論：全方位TypeScript開発の実践と効果
 • フルスタックな開発
 ◦ フロントエンド、バックエンド、インフラについて特に役割を設けていない→ 分業しない
 ◦ 得意なことが違う人同士でのコラボレーションもやりやすい 
 • IaC
 ◦ Pulumiを用いて、IaCもTSを用いてできるようにした結果、ちょっとしたメンテも開発者がやるように 
 • モノレポ
 ◦ 1つのリポジトリを見ればすべてのアプリケーションが入っている状態 
 ◦ GitHub Codespace と相性良好で超高速オンボーディングが実現 
 • CI/CD
 ◦ GitHub Actionsでリリースパイプラインを整備しており、仕事の開始から 開発作業、リリースまでGitHub上だけで完結 

17. 耳寄り情報
 toggle holdingsではエンジニア向けの Handbookを作って公開しています
 今日話した内容も記載がありますので、是 非ご覧ください
 
 https://engineer.toggle.co.jp/

18. エンジニア積極採用中です！！
 リサーチエンジニア
 Pythonを中心技術として
 「データ収集・加工・分析・利用基盤 」を作る
 「建築士がやる高度な計算ロジック 」を実装する
 ひたすらコードとデータに向き合いたい人 
 ソフトウェアエンジニア 
 TypeScriptを中心技術として 
 「ユーザーと直接対話して」提供価値を発見する
 「業界の仕事を変革するサービス 」を開発する
 フルスタックエンジニアを目指す人 

19. こちらからどうぞ
 https://x.gd/4TDao https://hrmos.co/pages/toggle/jobs/0000007
20. Thank you !