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
450
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
680
Other Decks in Technology
See All in Technology
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
130
Share my, our lessons from the road to re:Invent
naospon
0
100
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
1
1.3k
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
14
4k
ローカルLLMを活用したコード生成と、ローコード開発ツールへの応用
kazuhitoyokoi
0
130
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.8k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
220
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
120
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
150
Goで作って学ぶWebSocket
ryuichi1208
3
2.3k
コンテナサプライチェーンセキュリティ
kyohmizu
1
110
脳波を用いた嗜好マッチングシステム
hokkey621
0
160
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
44
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Embracing the Ebb and Flow
colly
84
4.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
How STYLIGHT went responsive
nonsquared
98
5.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Why Our Code Smells
bkeepers
PRO
336
57k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
A Philosophy of Restraint
colly
203
16k
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
少しでも気になった方は ぜひ弊社ブースにお越しください 実際のコードも公開してます
ご清聴ありがとうございました