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
10
4.1k
両面どころかインフラも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.5k
Other Decks in Programming
See All in Programming
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
160
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
420
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
500
CSC509 Lecture 09
javiergs
PRO
0
140
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.3k
Outline View in SwiftUI
1024jp
1
290
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
4
2k
WEBエンジニア向けAI活用入門
sutetotanuki
0
330
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
Macとオーディオ再生 2024/11/02
yusukeito
0
330
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
420
受け取る人から提供する人になるということ
little_rubyist
0
180
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
390
Rails Girls Zürich Keynote
gr2m
93
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Writing Fast Ruby
sferik
627
61k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Designing the Hi-DPI Web
ddemaree
280
34k
The World Runs on Bad Software
bkeepers
PRO
65
11k
A better future with KSS
kneath
238
17k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.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 !