Slide 1
Slide 1 text
本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。
トグルホールディングス株式会社
君田 祥一
フロントエンドも
バックエンドも
インフラも…
全てをTypeScriptで
統一したらこうなった！
Slide 2
Slide 2 text
君田 祥一
@kimi_koma1111
営業職からエンジニアに転職
現在はフルスタックに開発に携わる
減量中
Slide 3
Slide 3 text
会社紹介
● 不動産、建築、金融の3つの業界を統合し、産業イン
フラを構築することを目指しています
● TSをフル活用しプロダクト開発を行っています
Slide 4
Slide 4 text
プロダクト紹介
Slide 5
Slide 5 text
詳しく知りたいかたは
Slide 6
Slide 6 text
ホームページ
https://toggle.co.jp/
Slide 7
Slide 7 text
note
https://note.com/toggle/
Slide 8
Slide 8 text
toggle holdings Engineering Handbook
https://engineer.toggle.co.jp/
Slide 9
Slide 9 text
ブースを出展していますので
ぜひ遊びに来てください！
Slide 10
Slide 10 text
アジェンダ
● TSを利用する前の自分の経験
● TSを使い始めてからどうなったか
● 実際にどのような環境で開発を行っているか
● 統一したらどうなったか
● 終わりに
Slide 11
Slide 11 text
アジェンダ
● TSを利用する前の自分の経験
● TSを使うとどうなるか
● 実際にどのような環境で開発を行っているか
● 統一したらどうなったか
● 終わりに
Slide 12
Slide 12 text
● 主にJSでの開発
○ toB向けのWEBサービス
■ エンジニアにキャリアチェンジして最初の会社
○ toC向けのWEBサービス
■ 繁忙期を体験
自分はフロントエンドエンジニアでした
Slide 13
Slide 13 text
フロントエンドエンジニアの方で
次のような経験はありませんか？
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
どんなデータかわからない
● productDataってどんなデータ型なの？
○ どんなプロパティ持っているの
○ それのデータ型は何？
Slide 16
Slide 16 text
もう一例
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
どんな値を渡せばいいかわからない
● 関数の中身を見ないとどんな引数を渡せばいいかわからない
● 間違った値を渡してもエディタ上ではエラーにならない
○ あたかも実行できるように見える
Slide 19
Slide 19 text
綱渡りをしている気分だった
● 取得できるデータの型はなんだろう
● この関数はどんなデータ型の値が返されるんだろう？
● この関数にはどんなデータ型の引数を渡せばいいんだろう？
○ オブジェクトだったとしたらどんなプロパティが必要なんだろう？
Slide 20
Slide 20 text
綱渡りをしている気分だった
● 取得できるデータの型はなんだろう
● この関数はどんなデータ型の値が返されるんだろう？
● この関数にはどんなデータ型の引数を渡せばいいんだろう？
○ オブジェクトだったとしたらどんなプロパティが必要なんだろう？
動かしてみないとわからない
Slide 21
Slide 21 text
みなさんどうですか？
Slide 22
Slide 22 text
アジェンダ
● TSを利用する前の自分の経験
● TSを使うとどうなるか
● 実際にどのような環境で開発を行っているか
● 統一したらどうなったか
● 終わりに
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
どんなデータかがわかる！
● fetchProduct関数にはstringを渡せばいいんだ！
● productDataはProduct型なんだ！
Slide 26
Slide 26 text
どんなデータかがわかる！
● Productがどんなプロパティを持っ
ているかわかる！
● 各プロパティがどんなデータ型な
のかわかる！
Slide 27
Slide 27 text
もう一例の方は
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
どんな値を渡せばよいかがわかる！
● updateUserInfo関数にはUserInfo型を渡せばいいんだ！
Slide 31
Slide 31 text
どんな値を渡せばよいかがわかる！
Slide 32
Slide 32 text
石橋を叩いて渡っている気分
● 取得できるデータの型がわかる！
● 関数がどんなデータ型の値を返すのかがわかる！
● 関数にはどんなデータ型の引数を渡せばいいかわかる！
○ オブジェクトだったとしてもどんなプロパティが必要なのかわかる！
Slide 33
Slide 33 text
動かさなくてもわかる
実装している時にエディターがエラーを示してくれる
Slide 34
Slide 34 text
アジェンダ
● TSを利用する前の自分の経験
● TSを使うとどうなるか
● 実際にどのような環境で開発を行っているか
● 統一したらどうなったか
● 終わりに
Slide 35
Slide 35 text
TSで統一
Slide 36
Slide 36 text
技術スタック
フロントエンド
バックエンド
インフラ
Slide 37
Slide 37 text
技術スタック
Slide 38
Slide 38 text
レイヤードアーキテクチャを採
用
Slide 39
Slide 39 text
構成
● 各層ごとに明確な責務を負うことでコードをできるだけシンプルに保つ
Slide 40
Slide 40 text
構成
● 依存関係が一方向である
○ infraはserviceからしか呼ばれない
○ transactionはhandlerからしか呼ばれない
○ etc…
Slide 41
Slide 41 text
環境
● GitHub Codespacesを活用
○ 手間がかかる環境構築をボタンのクリックだけで実現
● モノレポ
○ 認知負荷が下がる
○ 管理コストが下がる
Slide 42
Slide 42 text
型について
Slide 43
Slide 43 text
どのように型を定義しているか
● Zodを採用している
○ バリデーションライブラリ
○ interfaceやtypeよりもさらに厳密なデータへの制約をつけることができる
Slide 44
Slide 44 text
型の定義
● Zodで作成したスキーマから型を生成
Slide 45
Slide 45 text
型の定義
● 型定義とスキーマ定義で二重管理にはならない
○ Zodで作成したスキーマから型を抽出するから
○ メンテナンス漏れを防ぐ
Slide 46
Slide 46 text
フロントエンドと
バックエンドで
型を共有
Slide 47
Slide 47 text
型の共有
● 共通のディレクトリから型を参照
○ モノレポの強み
○ それぞれが型定義を持たなくて済む
● 型が変更された場合でも修正漏れがなくなる
Slide 48
Slide 48 text
より型安全に開発するために
● CIを利用してテスト実行
○ もし仮に実装時に気づかなかったとしても
■ GitHub Actions
Slide 49
Slide 49 text
APIリクエストにおける型
● Zodiosを採用
○ Zodのスキーマ定義を活用したAPI定義がで
きるツール
○ 型安全なAPIリクエスト
■ フロントが送信するデータ
■ レスポンスデータ
Slide 50
Slide 50 text
アジェンダ
● TSを利用する前の自分の経験
● TSを使うとどうなるか
● 実際にどのような環境で開発を行っているか
● 統一したらどうなったか
● 終わりに
Slide 51
Slide 51 text
TSさえ使えればフルスタック開発が可能
● TSで統一することでフルスタックな開発者体験を得ることができる強力な後押しに
なる
○ TSで統一しているので学習コストが低い
○ 事実
■ TSでの開発経験がなく、フロントエンドの経験しかなかった自分ですが、
現在はフルスタックに開発を行えている
Slide 52
Slide 52 text
作業量の偏りが減った
● フロントエンド、バックエンドという垣根がないから
○ どんな開発内容でも誰でもアサインできる
● もちろん開発する機能の難易度によっては作業量の違いが出る
○ ただ、フロントエンド、バックエンドの分業によるタスク量の偏りは減った
Slide 53
Slide 53 text
知識の共有が捗る
● メンバー間での得意領域の知識の共有が捗る！
○ 共通言語としてのTS
○ 知識の共有が開発言語の違いによって阻害されない
○ バックエンド開発の時に得ることができたTSに対する知見をフロントエンド開発に活
かしたり
○ その逆も然り
Slide 54
Slide 54 text
個人的な話
Slide 55
Slide 55 text
フロントエンド専任だった自分にとって
● 今の環境に出会う前からフルスタックに開発したいなぁとうっすら思っていた
○ 自分の今後のキャリアに良い影響を与えると思ったから
○ エンジニアとしての選択肢を広げることができると考えていたから
Slide 56
Slide 56 text
どうなったのか
● TSの実務経験がないTS素人だった
● TSで統一された環境に入り半年が経過しフルスタックな開発ができるように
Slide 57
Slide 57 text
まとめ
Slide 58
Slide 58 text
TSで統一した環境は
開発者体験が良い
Slide 59
Slide 59 text
● Zodを利用した型の抽出
○ フロントエンド・バックエンド間での型の共通
● Zodiosを利用したAPI定義
● 学習コスト低くフルスタックな開発ができる
● 分業による作業量の偏りが減る
● 知識の共有が捗る
● エンジニアとしてのスキルアップが見込める
Slide 60
Slide 60 text
今後のTSライフに
少しでもお役に立てれば
Slide 61
Slide 61 text
エンジニア積極採用中です！！
AIエンジニア
Pythonを中心技術として
「データ収集・加工・分析・利用基盤
」を作る
「建築士がやる高度な計算ロジック
」を実装する
ひたすらコードとデータに向き合いたい人
ソフトウェアエンジニア
TypeScriptを中心技術として
「ユーザーと直接対話して」提供価値を発見する
「業界の仕事を変革するサービス
」を開発する
フルスタックエンジニアを目指す人
Slide 62
Slide 62 text
東大前 ”UT-Lab” 2024年6月オープン！！
先端技術を掛け合わせた、
まちづくりの社会実装の拠点
Slide 63
Slide 63 text
● TypeScriptの経験ないけど大丈夫かなぁ
● バックエンド経験しかないけど大丈夫かなぁ
● フロントエンド経験しかないけど大丈夫かなぁ
Slide 64
Slide 64 text
飛び込んでもらいたい
Slide 65
Slide 65 text
採用情報はこちら
https://toggle.co.jp/position/engineer/
Slide 66
Slide 66 text
今日の振り返りイベントを自社でやります
● 初めてだらけのTSKaigiを振り返り！！
● 【オンライン開催】 5/22(木)19:00～20:00
https://x.gd/HAe6c
Slide 67
Slide 67 text
少しでも気になった方は
ぜひ弊社ブースにお越しください
実際のコードも公開してます
Slide 68
Slide 68 text
ご清聴ありがとうございました