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.4k
full test also want to end within 50ms
myfinder
11
7.6k
Other Decks in Programming
See All in Programming
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
複雑なドメインに挑む.pdf
yukisakai1225
5
1.1k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
150
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
430
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
🔨 小さなビルドシステムを作る
momeemt
4
680
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
740
AWS発のAIエディタKiroを使ってみた
iriikeita
1
180
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
A designer walks into a library…
pauljervisheath
207
24k
Designing for Performance
lara
610
69k
BBQ
matthewcrist
89
9.8k
Documentation Writing (for coders)
carmenintech
74
5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Docker and Python
trallard
45
3.6k
The Language of Interfaces
destraynor
161
25k
A Tale of Four Properties
chriscoyier
160
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
KATA
mclloyd
32
14k
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 !