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
TypeScriptで統一したアーキテクチャ
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
iseki
May 11, 2024
Programming
1.6k
0
Share
TypeScriptで統一したアーキテクチャ
iseki
May 11, 2024
More Decks by iseki
See All by iseki
TypeScriptで統一したアーキテクチャ
masayaiseki
1
86
QUICの安全性解析と証明
masayaiseki
0
29
WebRTCの安全性証明をしたい
masayaiseki
0
33
Precise study on a SOA-PSA based optical signal regenerator with numerical analysis
masayaiseki
0
43
Other Decks in Programming
See All in Programming
柔軟なPDFレイアウトエディタを支える型システム設計 — Discriminated UnionとConditional Typeの実践
minako__ph
2
210
【ディップ|26年新卒研修資料】TDD実装演習
dip_tech
PRO
0
260
検索設計から 推論設計への重心移動と Recall-First Retrieval
po3rin
5
1.7k
関係性から理解する"同一性"の型用語たち
pvcresin
2
250
権限チェックの一貫性を型で守る TypeScript による多層防御
mnch
3
200
AI時代になぜ書くのか
mutsumix
0
430
Back to the roots of date
jinroq
0
910
エラー処理の温故知新 / history of error handling technic
ryotanakaya
7
1.9k
なぜあなたのコードには「コシ」がないのか?〜AI時代に問う、最後まで美味しい設計と戦略〜 #phpconkagawa / phpconkagawa2026
shogogg
0
210
プラグインで拡張される Context をtype-safe にする難しさと設計判断
kazupon
2
210
Agentic UI in the Frontend: Architectures with Open Standards @JAX 2026 in Mainz
manfredsteyer
PRO
0
120
WebAssembly を読み込むベストプラクティス 2026年春版 / Best Practices for Loading WebAssembly (Spring 2026)
petamoriken
5
1.1k
Featured
See All Featured
Leo the Paperboy
mayatellez
7
1.8k
From π to Pie charts
rasagy
0
180
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
400
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
290
Being A Developer After 40
akosma
91
590k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
aleyda
1
2k
Designing for Timeless Needs
cassininazir
1
220
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
300
Visual Storytelling: How to be a Superhuman Communicator
reverentgeek
2
530
Bootstrapping a Software Product
garrettdimon
PRO
307
120k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.9k
Transcript
EventHub All Rights Reserved. TypeScriptで統一したアーキテクチャ 2024年05月11日
EventHub All Rights Reserved. 自己紹介 • 井関 正也(@iskmsy) • 株式会社EventHub
取締役CTO • 2016年2月に代表の山本と一緒に EventHubを創業 • 開発組織、技術、プロダクトをみてます Chromium、Geckoのコミッターでした。 2
EventHub All Rights Reserved. EventHubとは 3 すべてのイベントを一気通貫でラクラク管理 成果を最大化するNO.1イベントプラットフォーム※ ※ 日本マーケティングリサーチ機構調べ「オンラインイベント」に関する競合調査(2021年8月期)
EventHubには、イベント開催に必要なあらゆる機能が揃っ ています。優れた操作性に加え、様々な形式のイベントに 利用できるため、多くの企業・団体様に選ばれています。 • 参加申込から当日開催、開催後アンケートまで対応 • オンライン、オフライン、ハイブリッド形式全てのイベン トタイプで利用可能 • ウェビナー・カンファレンスなどを中心に、BtoBイベント の開催実績は1000件以上
EventHub All Rights Reserved. 今日お話すること 少人数のエンジニアからスタートしたEventHubでどういった 理由で選定した技術なのかをお話します 4
EventHub All Rights Reserved. 技術選定の判断軸 5 組織 技術 製品 市場に受け入れられる製品であり続けるために、技術と組織を変化させていく
EventHub All Rights Reserved. 製品-フェーズによって求められる要件 6 PSF(Problem Solution Fit)到達前 顧客課題の発見・解決策の模索。できるだけコードは書かずに検証できるのが理想。
PMF(Product Market Fit) 到達前 最適な顧客体験・プランの構築。将来の拡張性を考慮しつつ個人あたりの開発効率を向上さ せていく。 PMF(Product Market Fit)到達後 更なる顧客拡大のために組織も拡大していきたい。個人あたりの開発効率も維持しつつ組織 拡大させていく。 1 2 3
EventHub All Rights Reserved. 組織-開発スタイル 7 • EventHubは、スクラムによる開発を推進しており、 フルサイクルを前提としています •
一部のスペシャリストを除いて、エンジニアは原則、 設計から開発・テスト、QA、リリース、O&M、 サポートの全ての工程に携わります Design Develop QA Deploy O&M Support Fullcycle Developer
EventHub All Rights Reserved. 技術スタック 8 フロントエンド Typescript、React、styled-component バックエンド Typescript、Node.js、NestJS、TypeORM
データベース MySQL インフラ AWS(Fargate、Elastic Beanstalk) CI CircleCI モニタリング Sentry、AWS CloudWatch
EventHub All Rights Reserved. 選定技術 9 TypeScriptでの統一 フロントエンド・バックエンドを同一リポジトリで管理 NestJSの採用 1
2 3 • 認知負荷を低減できる • コード共通化できる • モジュールを横断した編集がしやすい • 環境構築やビルドなどのプロセスを統一しやすい • 実装方法の指針がある • TypeScript との親和性
EventHub All Rights Reserved. TypeScriptでの統一 10 選定理由 • 言語スイッチによる認知負荷の低減できる •
フロントエンド・バックエンドでコードを共通化できる デメリット • プロダクト要件に合わせたバックエンドの選定ができない。
EventHub All Rights Reserved. Validationの統一 11 • class-validatorを利用して、フロントエンド・バックエンドにおいて処理を統一 ◦ 共通のクラスファイルを作成
◦ フロントエンドでリクエストする際にvalidationを実行 ◦ バックエンドでリクエスト内容をvalidationを実行 共通クラス NestJSでのバリデーション フロントエンドでのバリデーション
EventHub All Rights Reserved. 選定技術 12 TypeScriptでの統一 フロントエンド・バックエンドを同一リポジトリで管理 NestJSの採用 1
2 3 • 認知負荷を低減できる • コード共通化できる • モジュールを横断した編集がしやすい • 環境構築やビルドなどのプロセスを統一しやすい • 実装方法の指針がある • TypeScript との親和性
EventHub All Rights Reserved. エンジニア積極採用中です!!! 13 https://jobs.eventhub.co.jp/ • Webエンジニア •
セキュリティエンジニア • QAエンジニア • インフラエンジニア • コーポレートエンジニア • BizOps