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
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
140
Claude Code と OpenAI o3 で メタデータ情報を作る
laket
0
110
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
370
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
140
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
510
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
180
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1.1k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
新世界の理解
koriym
0
130
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
520
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
560
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Speed Design
sergeychernyshev
32
1.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Into the Great Unknown - MozCon
thekraken
40
2k
Music & Morning Musume
bryan
46
6.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Balancing Empowerment & Direction
lara
1
530
The Art of Programming - Codeland 2020
erikaheidi
54
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
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 !