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
9
3.3k
両面どころかインフラも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.3k
full test also want to end within 50ms
myfinder
11
7.4k
Other Decks in Programming
See All in Programming
Goのmultiple errorsについて (2024年4月版)
syumai
4
1k
Elm Form Validation
bkuhlmann
0
510
1BRC--Nerd Sniping the Java Community
gunnarmorling
0
340
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
210
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.4k
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
170
Snowflakeで眠ったデータを起こそう!
estie
0
120
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
930
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
810
SIMD Parallel Programming with the Vector API
josepaumard
0
210
GitHub Copilotのススメ
marcy731
1
200
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
238
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
How to name files
jennybc
65
93k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The Mythical Team-Month
searls
216
42k
Practical Orchestrator
shlominoach
183
9.7k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
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 !