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
iseki
May 11, 2024
Programming
1.8k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
TypeScriptで統一したアーキテクチャ
iseki
May 11, 2024
More Decks by iseki
See All by iseki
TypeScriptで統一したアーキテクチャ
masayaiseki
1
88
QUICの安全性解析と証明
masayaiseki
0
31
WebRTCの安全性証明をしたい
masayaiseki
0
36
Precise study on a SOA-PSA based optical signal regenerator with numerical analysis
masayaiseki
0
50
Other Decks in Programming
See All in Programming
プロポーザルを書いてもらう
pvcresin
0
550
Laravelで学ぶ Webアプリケーションチューニング入門/web_application_tuning_101
hanhan1978
4
1.9k
Claude CodeとAgentCore Gatewayを繋ぐ際の認証認可 / Authentication and authorization when connecting Claude Code with AgentCore Gateway
har1101
2
300
PHP初心者セッション2026 〜生成AIでは見えない裏側を知る:今だからLAMPを通して仕組みを学ぶ〜
kashioka
0
950
ここ半年くらいでAIに作らせたR用ツール
eitsupi
0
390
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
380
What's New in Android 2026
veronikapj
0
260
FDEが実現するAI駆動経営の現在地
gonta
2
280
使いながら育てる Claude Code — 開発フローの1コマンド化 × 繰り返し指摘の自動仕組み化
shiki_kakaku
0
1.8k
Cloudflare is Agents
chimame
0
170
そこに3びきプロダクトがいるじゃろう——生成AI時代における“価値が届かない理由”の構造
kosuket
0
510
リアルな遅延を測る仕様
kota_yata
1
110
Featured
See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
56k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
210
SEO for Brand Visibility & Recognition
aleyda
0
4.7k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
440
How to Align SEO within the Product Triangle To Get Buy-In & Support - #RIMC
aleyda
2
1.8k
HDC tutorial
michielstock
2
790
Testing 201, or: Great Expectations
jmmastey
46
8.2k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
1
470
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
2
470
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
2
3.8k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
800
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
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