【TsKaigi】「フロントエンドもバックエンドもインフラも… 全てをTypeScriptで統一したらこうなった」を聞きました

フロントエンドもバックエンドもインフラも… 全てをTypeScriptで統一したらこうなった

tskaigi.org

君田様(トグルホールディングス)

@kimi_koma1111

不動産、建築、記入の三つの業界を統合し、産業インフラを構築することを目指している

発表スライド

発表メモ

TSを利用する前の自分の経験

元々フロントエンドエンジニアだった。主にjsを用いてフロント開発。

最初はtoB向けのwebサービス

次にtoC向けのwebサービス。お金が毎分発生している中での危機感を感じながら開発していた。

jsあるある。の話。

プロダクトのデータをAPIから取得するコード。しかし、取ってきたデータの型がわからない。仮にオブジェクトだったとしても、どのようなプロパティを持っているのかどうかわからないですよね。

(思ったことメモ:あるあるだ。。。)

jsだと、関数の引数にどのような値を入れればいいかもわからない。

わからないことがたくさんあるので、jsで開発していると綱渡りをしている気分だった。

TSを使い始めてどうなったか

tsを用いることによって、どのような型かというのがわかるので、安心して取ってきた値がどうなるのかがわかるようになる。

tsを用いていると、「綱渡り」から「石橋を叩いて渡っている気分」の開発になる!

動かさなくても、型の不一致については知ることができる。

実際にどのような環境で開発をしているか

トグルホールディングス様ではTSで統一されている

フロント:React

バックエンド;Hono

インフラ:pulumi

(思ったことメモ:pulumi知らなかった)

開発はレイヤードアーキテクチャ

各層ごとに責務を分割

環境:GitHub CodeSpace

型について

Zodを採用している

Zodはデータのスキーマで、バリデーションをしてくれる。

そして、Zodで定義したスキーマから、ts上の型を抽出することができるので、スキーマ定義を変更すると、型も変化する。

そして、それらの型をfrontendとbackendで共有している。

(思ったことメモ:APIなどの界面についてのバリデーションなどを変更したときに両方変更するみたいなことをしなくていいの便利だな)

API定義ができるライブラリとして、Zodを応用したZodiosというものを用いている。Zodのスキーマ定義を用いてAPI定義ができる。(便利だ!)

統一したらどうなったか

フロントもバックエンドもメンバーが両方開発することができるようになった。

バックエンドの開発の経験をフロントに活かせたりなどの効果もある。

個人の話

よりプロダクトの価値に貢献できるエンジニアになりたかったため、フルスタックに開発ができるようになりたいという思いで、現職に転職した。現在はTSのおかげでフルスタックに開発ができるようになり、エンジニアとしてもスキルアップできていると感じる。

終わりに

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

全体を通しての感想

うちでもtypescript統一で開発をしているけど、コードの共有はできていなかった。現状はモノレポではないので難しいかもしれないが、今回のお話を聞いて、コードの共有をすることの良さを知ることができた。

また、Zodやpulumiなどのツールを初めて聞けたので勉強しようと思う。