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
【TSkaigi】2024/05/11 当日スライド
Search
Kimita Shoichi
May 10, 2024
Technology
17
5.8k
【TSkaigi】2024/05/11 当日スライド
2024/05/11開催されたTSKaigiに登壇した際のプレゼン資料です。
Kimita Shoichi
May 10, 2024
Tweet
Share
More Decks by Kimita Shoichi
See All by Kimita Shoichi
型のインスタンス化は非常に深く、無限である可能性があります。
kimitashoichi
0
550
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
710
Other Decks in Technology
See All in Technology
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
640
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
300
コード品質向上で得られる効果と実践的取り組み
ham0215
0
170
BCMathを高速化した一部始終をC言語でガチ目に解説する / BCMath performance improvement explanation
sakitakamachi
2
570
Why Go?
xpmatteo
0
120
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.3k
Agent Mode とは?GitHub Copilot の新機能を探る
lescoggi
1
180
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
0
100
単一の深層学習モデルによる不確実性の定量化の紹介 ~その予測結果正しいですか?~
ftakahashi
PRO
3
490
Amazon Bedrock GenUハンズオン座学資料 #1 GenU環境で生成AIを体験してみよう
tsukuboshi
0
240
PHPStan をできる限り高速化してみる
colopl
0
230
Oracle Cloud Infrastructure:2025年3月度サービス・アップデート
oracle4engineer
PRO
0
270
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
450
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.6k
For a Future-Friendly Web
brad_frost
176
9.6k
Transcript
本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。 トグルホールディングス株式会社 君田 祥一 フロントエンドも バックエンドも インフラも… 全てをTypeScriptで 統一したらこうなった!
君田 祥一 @kimi_koma1111 営業職からエンジニアに転職 現在はフルスタックに開発に携わる 減量中
会社紹介 • 不動産、建築、金融の3つの業界を統合し、産業イン フラを構築することを目指しています • TSをフル活用しプロダクト開発を行っています
プロダクト紹介
詳しく知りたいかたは
ホームページ https://toggle.co.jp/
note https://note.com/toggle/
toggle holdings Engineering Handbook https://engineer.toggle.co.jp/
ブースを出展していますので ぜひ遊びに来てください!
アジェンダ • TSを利用する前の自分の経験 • TSを使い始めてからどうなったか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか •
終わりに
アジェンダ • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか •
終わりに
• 主にJSでの開発 ◦ toB向けのWEBサービス ▪ エンジニアにキャリアチェンジして最初の会社 ◦ toC向けのWEBサービス ▪ 繁忙期を体験
自分はフロントエンドエンジニアでした
フロントエンドエンジニアの方で 次のような経験はありませんか?
None
どんなデータかわからない • productDataってどんなデータ型なの? ◦ どんなプロパティ持っているの ◦ それのデータ型は何?
もう一例
None
どんな値を渡せばいいかわからない • 関数の中身を見ないとどんな引数を渡せばいいかわからない • 間違った値を渡してもエディタ上ではエラーにならない ◦ あたかも実行できるように見える
綱渡りをしている気分だった • 取得できるデータの型はなんだろう • この関数はどんなデータ型の値が返されるんだろう? • この関数にはどんなデータ型の引数を渡せばいいんだろう? ◦ オブジェクトだったとしたらどんなプロパティが必要なんだろう?
綱渡りをしている気分だった • 取得できるデータの型はなんだろう • この関数はどんなデータ型の値が返されるんだろう? • この関数にはどんなデータ型の引数を渡せばいいんだろう? ◦ オブジェクトだったとしたらどんなプロパティが必要なんだろう? 動かしてみないとわからない
みなさんどうですか?
アジェンダ • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか •
終わりに
None
None
どんなデータかがわかる! • fetchProduct関数にはstringを渡せばいいんだ! • productDataはProduct型なんだ!
どんなデータかがわかる! • Productがどんなプロパティを持っ ているかわかる! • 各プロパティがどんなデータ型な のかわかる!
もう一例の方は
None
None
どんな値を渡せばよいかがわかる! • updateUserInfo関数にはUserInfo型を渡せばいいんだ!
どんな値を渡せばよいかがわかる!
石橋を叩いて渡っている気分 • 取得できるデータの型がわかる! • 関数がどんなデータ型の値を返すのかがわかる! • 関数にはどんなデータ型の引数を渡せばいいかわかる! ◦ オブジェクトだったとしてもどんなプロパティが必要なのかわかる!
動かさなくてもわかる 実装している時にエディターがエラーを示してくれる
アジェンダ • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか •
終わりに
TSで統一
技術スタック フロントエンド バックエンド インフラ
技術スタック
レイヤードアーキテクチャを採 用
構成 • 各層ごとに明確な責務を負うことでコードをできるだけシンプルに保つ
構成 • 依存関係が一方向である ◦ infraはserviceからしか呼ばれない ◦ transactionはhandlerからしか呼ばれない ◦ etc…
環境 • GitHub Codespacesを活用 ◦ 手間がかかる環境構築をボタンのクリックだけで実現 • モノレポ ◦
認知負荷が下がる ◦ 管理コストが下がる
型について
どのように型を定義しているか • Zodを採用している ◦ バリデーションライブラリ ◦ interfaceやtypeよりもさらに厳密なデータへの制約をつけることができる
型の定義 • Zodで作成したスキーマから型を生成
型の定義 • 型定義とスキーマ定義で二重管理にはならない ◦ Zodで作成したスキーマから型を抽出するから ◦ メンテナンス漏れを防ぐ
フロントエンドと バックエンドで 型を共有
型の共有 • 共通のディレクトリから型を参照 ◦ モノレポの強み ◦ それぞれが型定義を持たなくて済む • 型が変更された場合でも修正漏れがなくなる
より型安全に開発するために • CIを利用してテスト実行 ◦ もし仮に実装時に気づかなかったとしても ▪ GitHub Actions
APIリクエストにおける型 • Zodiosを採用 ◦ Zodのスキーマ定義を活用したAPI定義がで きるツール ◦ 型安全なAPIリクエスト ▪ フロントが送信するデータ
▪ レスポンスデータ
アジェンダ • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか •
終わりに
TSさえ使えればフルスタック開発が可能 • TSで統一することでフルスタックな開発者体験を得ることができる強力な後押しに なる ◦ TSで統一しているので学習コストが低い ◦ 事実 ▪ TSでの開発経験がなく、フロントエンドの経験しかなかった自分ですが、
現在はフルスタックに開発を行えている
作業量の偏りが減った • フロントエンド、バックエンドという垣根がないから ◦ どんな開発内容でも誰でもアサインできる • もちろん開発する機能の難易度によっては作業量の違いが出る ◦ ただ、フロントエンド、バックエンドの分業によるタスク量の偏りは減った
知識の共有が捗る • メンバー間での得意領域の知識の共有が捗る! ◦ 共通言語としてのTS ◦ 知識の共有が開発言語の違いによって阻害されない ◦ バックエンド開発の時に得ることができたTSに対する知見をフロントエンド開発に活 かしたり
◦ その逆も然り
個人的な話
フロントエンド専任だった自分にとって • 今の環境に出会う前からフルスタックに開発したいなぁとうっすら思っていた ◦ 自分の今後のキャリアに良い影響を与えると思ったから ◦ エンジニアとしての選択肢を広げることができると考えていたから
どうなったのか • TSの実務経験がないTS素人だった • TSで統一された環境に入り半年が経過しフルスタックな開発ができるように
まとめ
TSで統一した環境は 開発者体験が良い
• Zodを利用した型の抽出 ◦ フロントエンド・バックエンド間での型の共通 • Zodiosを利用したAPI定義 • 学習コスト低くフルスタックな開発ができる • 分業による作業量の偏りが減る
• 知識の共有が捗る • エンジニアとしてのスキルアップが見込める
今後のTSライフに 少しでもお役に立てれば
エンジニア積極採用中です!! AIエンジニア Pythonを中心技術として 「データ収集・加工・分析・利用基盤 」を作る 「建築士がやる高度な計算ロジック 」を実装する ひたすらコードとデータに向き合いたい人 ソフトウェアエンジニア
TypeScriptを中心技術として 「ユーザーと直接対話して」提供価値を発見する 「業界の仕事を変革するサービス 」を開発する フルスタックエンジニアを目指す人
東大前 ”UT-Lab” 2024年6月オープン!! 先端技術を掛け合わせた、 まちづくりの社会実装の拠点
• TypeScriptの経験ないけど大丈夫かなぁ • バックエンド経験しかないけど大丈夫かなぁ • フロントエンド経験しかないけど大丈夫かなぁ
飛び込んでもらいたい
採用情報はこちら https://toggle.co.jp/position/engineer/
今日の振り返りイベントを自社でやります • 初めてだらけのTSKaigiを振り返り!! • 【オンライン開催】 5/22(木)19:00~20:00 https://x.gd/HAe6c
少しでも気になった方は ぜひ弊社ブースにお越しください 実際のコードも公開してます
ご清聴ありがとうございました