【TSkaigi】2024/05/11 当日スライド

2024/05/11開催されたTSKaigiに登壇した際のプレゼン資料です。

Transcript

1. 本資料は、トグルホールディングス株式会社に許可なく複製・転載をしないようお願いします。
 トグルホールディングス株式会社
 君田 祥一 
 フロントエンドも
 バックエンドも
 インフラも…
 全てをTypeScriptで
 統一したらこうなった！

2. 君田 祥一 　 　@kimi_koma1111 営業職からエンジニアに転職 現在はフルスタックに開発に携わる 減量中
3. 会社紹介
 • 不動産、建築、金融の3つの業界を統合し、産業イン フラを構築することを目指しています • TSをフル活用しプロダクト開発を行っています
4. プロダクト紹介

5. 詳しく知りたいかたは

6. ホームページ
 https://toggle.co.jp/

7. note
 https://note.com/toggle/

8. toggle holdings Engineering Handbook
 https://engineer.toggle.co.jp/

9. ブースを出展していますので
 ぜひ遊びに来てください！

10. アジェンダ
 • TSを利用する前の自分の経験 • TSを使い始めてからどうなったか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか • 終わりに
11. アジェンダ
 • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか • 終わりに
12. • 主にJSでの開発
 ◦ toB向けのWEBサービス
 ▪ エンジニアにキャリアチェンジして最初の会社
 ◦ toC向けのWEBサービス
 ▪ 繁忙期を体験
 自分はフロントエンドエンジニアでした

13. フロントエンドエンジニアの方で
 次のような経験はありませんか？

15. どんなデータかわからない
 • productDataってどんなデータ型なの？
 ◦ どんなプロパティ持っているの
 ◦ それのデータ型は何？

16. もう一例

18. どんな値を渡せばいいかわからない
 • 関数の中身を見ないとどんな引数を渡せばいいかわからない
 • 間違った値を渡してもエディタ上ではエラーにならない
 ◦ あたかも実行できるように見える

19. 綱渡りをしている気分だった
 • 取得できるデータの型はなんだろう
 • この関数はどんなデータ型の値が返されるんだろう？
 • この関数にはどんなデータ型の引数を渡せばいいんだろう？
 ◦ オブジェクトだったとしたらどんなプロパティが必要なんだろう？

20. 綱渡りをしている気分だった
 • 取得できるデータの型はなんだろう
 • この関数はどんなデータ型の値が返されるんだろう？
 • この関数にはどんなデータ型の引数を渡せばいいんだろう？
 ◦ オブジェクトだったとしたらどんなプロパティが必要なんだろう？
 動かしてみないとわからない

21. みなさんどうですか？

22. アジェンダ
 • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか • 終わりに
25. どんなデータかがわかる！
 • fetchProduct関数にはstringを渡せばいいんだ！
 • productDataはProduct型なんだ！

26. どんなデータかがわかる！
 • Productがどんなプロパティを持っ ているかわかる！
 • 各プロパティがどんなデータ型な のかわかる！

27. もう一例の方は

30. どんな値を渡せばよいかがわかる！
 • updateUserInfo関数にはUserInfo型を渡せばいいんだ！

31. どんな値を渡せばよいかがわかる！

32. 石橋を叩いて渡っている気分
 • 取得できるデータの型がわかる！
 • 関数がどんなデータ型の値を返すのかがわかる！
 • 関数にはどんなデータ型の引数を渡せばいいかわかる！
 ◦ オブジェクトだったとしてもどんなプロパティが必要なのかわかる！

33. 動かさなくてもわかる
 実装している時にエディターがエラーを示してくれる

34. アジェンダ
 • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか • 終わりに
35. TSで統一

36. 技術スタック
 フロントエンド
 バックエンド
 インフラ

37. 技術スタック

38. レイヤードアーキテクチャを採 用

39. 構成
 • 各層ごとに明確な責務を負うことでコードをできるだけシンプルに保つ

40. 構成
 • 依存関係が一方向である
 ◦ infraはserviceからしか呼ばれない
 ◦ transactionはhandlerからしか呼ばれない
 ◦ etc…

41. 環境
 • GitHub Codespacesを活用
 ◦ 手間がかかる環境構築をボタンのクリックだけで実現
 
 • モノレポ
 ◦ 認知負荷が下がる
 ◦ 管理コストが下がる

42. 型について

43. どのように型を定義しているか
 • Zodを採用している
 ◦ バリデーションライブラリ
 ◦ interfaceやtypeよりもさらに厳密なデータへの制約をつけることができる

44. 型の定義
 • Zodで作成したスキーマから型を生成

45. 型の定義
 • 型定義とスキーマ定義で二重管理にはならない
 ◦ Zodで作成したスキーマから型を抽出するから
 ◦ メンテナンス漏れを防ぐ

46. フロントエンドと
 バックエンドで
 型を共有

47. 型の共有
 • 共通のディレクトリから型を参照
 ◦ モノレポの強み
 ◦ それぞれが型定義を持たなくて済む
 • 型が変更された場合でも修正漏れがなくなる

48. より型安全に開発するために
 • CIを利用してテスト実行
 ◦ もし仮に実装時に気づかなかったとしても
 ▪ GitHub Actions

49. APIリクエストにおける型
 • Zodiosを採用
 ◦ Zodのスキーマ定義を活用したAPI定義がで きるツール
 ◦ 型安全なAPIリクエスト
 ▪ フロントが送信するデータ
 ▪ レスポンスデータ

50. アジェンダ
 • TSを利用する前の自分の経験 • TSを使うとどうなるか • 実際にどのような環境で開発を行っているか • 統一したらどうなったか • 終わりに
51. TSさえ使えればフルスタック開発が可能
 • TSで統一することでフルスタックな開発者体験を得ることができる強力な後押しに なる
 ◦ TSで統一しているので学習コストが低い
 ◦ 事実
 ▪ TSでの開発経験がなく、フロントエンドの経験しかなかった自分ですが、 現在はフルスタックに開発を行えている

52. 作業量の偏りが減った
 • フロントエンド、バックエンドという垣根がないから
 ◦ どんな開発内容でも誰でもアサインできる
 • もちろん開発する機能の難易度によっては作業量の違いが出る
 ◦ ただ、フロントエンド、バックエンドの分業によるタスク量の偏りは減った

53. 知識の共有が捗る
 • メンバー間での得意領域の知識の共有が捗る！
 ◦ 共通言語としてのTS
 ◦ 知識の共有が開発言語の違いによって阻害されない
 ◦ バックエンド開発の時に得ることができたTSに対する知見をフロントエンド開発に活 かしたり
 ◦ その逆も然り

54. 個人的な話

55. フロントエンド専任だった自分にとって
 • 今の環境に出会う前からフルスタックに開発したいなぁとうっすら思っていた
 ◦ 自分の今後のキャリアに良い影響を与えると思ったから
 ◦ エンジニアとしての選択肢を広げることができると考えていたから

56. どうなったのか
 • TSの実務経験がないTS素人だった
 • TSで統一された環境に入り半年が経過しフルスタックな開発ができるように

57. まとめ

58. TSで統一した環境は
 開発者体験が良い

59. • Zodを利用した型の抽出
 ◦ フロントエンド・バックエンド間での型の共通
 • Zodiosを利用したAPI定義
 • 学習コスト低くフルスタックな開発ができる
 • 分業による作業量の偏りが減る
 • 知識の共有が捗る
 • エンジニアとしてのスキルアップが見込める

60. 今後のTSライフに
 少しでもお役に立てれば

61. エンジニア積極採用中です！！
 AIエンジニア
 Pythonを中心技術として
 「データ収集・加工・分析・利用基盤 」を作る
 「建築士がやる高度な計算ロジック 」を実装する
 ひたすらコードとデータに向き合いたい人 
 ソフトウェアエンジニア 
 TypeScriptを中心技術として 
 「ユーザーと直接対話して」提供価値を発見する
 「業界の仕事を変革するサービス 」を開発する
 フルスタックエンジニアを目指す人 

62. 東大前 ”UT-Lab” 2024年6月オープン！！
 先端技術を掛け合わせた、 まちづくりの社会実装の拠点
63. • TypeScriptの経験ないけど大丈夫かなぁ
 • バックエンド経験しかないけど大丈夫かなぁ
 • フロントエンド経験しかないけど大丈夫かなぁ

64. 飛び込んでもらいたい

65. 採用情報はこちら
 https://toggle.co.jp/position/engineer/

66. 今日の振り返りイベントを自社でやります
 • 初めてだらけのTSKaigiを振り返り！！
 • 【オンライン開催】 5/22(木)19:00～20:00
 https://x.gd/HAe6c
67. 少しでも気になった方は
 ぜひ弊社ブースにお越しください
 実際のコードも公開してます

68. ご清聴ありがとうございました