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

全方位TypeScript？
 

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

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

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

アプリケーション開発
 

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

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

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

インフラもTSでIaCする
 

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

おまけ：PlanetScaleの効用
 

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

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

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

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

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

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

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

Thank you !