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.7k
【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
420
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
670
Other Decks in Technology
See All in Technology
プロセス改善による品質向上事例
tomasagi
1
1.6k
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
MC906491 を見据えた Microsoft Entra Connect アップグレード対応
tamaiyutaro
1
480
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
君も受託系GISエンジニアにならないか
sudataka
2
370
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
AndroidデバイスにFTPサーバを建立する
e10dokup
0
240
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
90
5.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
How STYLIGHT went responsive
nonsquared
98
5.3k
A designer walks into a library…
pauljervisheath
205
24k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
29
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Thoughts on Productivity
jonyablonski
69
4.5k
GitHub's CSS Performance
jonrohan
1030
460k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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
少しでも気になった方は ぜひ弊社ブースにお越しください 実際のコードも公開してます
ご清聴ありがとうございました