Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
Search
Tatasuro Hisamori
March 26, 2024
Programming
11
4.6k
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
Tatasuro Hisamori
March 26, 2024
Tweet
Share
More Decks by Tatasuro Hisamori
See All by Tatasuro Hisamori
Perl and Riak
myfinder
2
3.5k
full test also want to end within 50ms
myfinder
11
7.6k
Other Decks in Programming
See All in Programming
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
630
AI Agent 時代的開發者生存指南
eddie
4
2.1k
Software Architecture
hschwentner
6
2.3k
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
900
Pythonに漸進的に型をつける
nealle
1
120
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
360
Go言語の特性を活かした公式MCP SDKの設計
hond0413
1
480
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.1k
開発組織の戦略的な役割と 設計スキル向上の効果
masuda220
PRO
8
1.4k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Introduce Hono CLI
yusukebe
6
3.1k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Scaling GitHub
holman
463
140k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Rails Girls Zürich Keynote
gr2m
95
14k
Product Roadmaps are Hard
iamctodd
PRO
55
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Transcript
両面どころかインフラも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 !