TypeScript で型を扱う観点から React と Vue3 を比較

React と Vue3 を比較する際に、機能を単純に比較するのではなく、TypeScript 上での型も気にして比較する内容です。

Transcript

1. TypeScript で型を扱う観点から React と Vue3 を比較 株式会社coroutine 東川 諒央
2. 自己紹介 1 作りながら考える 3 Vue3 で扱う型 4 動機：UI 実装時に欲しくなる型について 2 5 Runtime と型宣言 6 まとめ
3. 自己紹介 1 株式会社 coroutine 東川 諒央 @biwakonbu 大学教員 ゲームバックエンド フリーランス 経歴 Ruby Python JavaScript 実績言語 PHP 技術顧問 エンジニア教育 業務 設計 プログラミング インフラ etc… Rust Haskell TypeScript 学習中言語
4. 自己紹介 1 作りながら考える 3 比較 4 動機：UI 実装時に欲しくなる型について 2 5 番外編： styled-components 6 まとめ
5. UI 実装時に欲しくなる型について 2 ❏ フロントの実装をしているとコンポーネントの使い方に悩む ❏ ドキュメントがあれば読むが、自社開発の UI の場合無い事もしばしば ❏ Storybook? 使い方が完全に分かる訳ではないよね ❏ Next UI みたいなドキュメント・サジェスト良かったなぁ ❏ あの実装を参考にして UI を定義するようにしよう
6. UI 実装時に欲しくなる型について 2
7. UI 実装時に欲しくなる型について 2
8. UI 実装時に欲しくなる型について 2 ❏ こんな感じで使える内容を補完で出して欲しい
9. 自己紹介 1 作りながら考える 3 比較 4 動機：UI 実装時に欲しくなる型について 2 5 番外編： styled-components 6 まとめ
10. 作りながら考える 3 ❏ 簡単な <input type=”text” /> なタグを作ってみる ❏ 仕様 ❏ ステータスによって色が変わる ❏ normal: 通常色 ❏ error: 赤色 ❏ success: 緑色 ❏ 外部 (props) からステータスを流し込む形で反映 ❏ input の入力値を親コンポーネントから拾えるようにする ❏ 送信ボタンを押した際にバリデーションを行う ❏ 空だったら error ❏ 何か入力されていたら success
11. 作りながら考える 3 normal success error
12. 作りながら考える 3 共通 props Vue3 React
13. 作りながら考える 3 リフトアップ Vue3 React
14. 自己紹介 1 作りながら考える 3 比較 4 動機：UI 実装時に欲しくなる型について 2 5 番外編： styled-components 6 まとめ
15. 比較 4 ❏ Vue3 も React でも基本レベルの機能は大差は無い感じでした ❏ React：かなり素直に関数ベースでやり取りできるので直感的 ❏ Vue3 ：Composition API が少し特殊なので慣れは必要 ❏ CSS の扱いについて ❏ React：styled-components が CSS in JS において型を付けさせてくれる ❏ Vue3 ：vue-styled-components はあるらしいけど詳細は不明 ❏ もう更新されていなさそう
16. 自己紹介 1 作りながら考える 3 比較 4 動機：UI 実装時に欲しくなる型について 2 5 番外編： styled-components 6 まとめ
17. 番外編： styled-components 5
18. 番外編： styled-components 5 ❏ class ではなく属性で CSS を処理したい場合などに使える ❏ その場合の値に型を与えられるのは便利
19. 自己紹介 1 作りながら考える 3 比較 4 動機：UI 実装時に欲しくなる型について 2 5 番外編： styled-components 6 まとめ
20. まとめ 6 ❏ 型の扱いだけで Vue or React を決めるのは早計といえそう ❏ ただ、型の扱いは Vue3 ではちょっと面倒ではありそう ❏ Composition API が面倒な理由ではある ❏ だけど Vue が好きで型が欲しい場合はちゃんと型が React レベルで使える ❏ 学習コストが再度高めにかかるのが面倒なくらい ❏ React で CSS & 型を扱えるのは面白いけど、実際問題は便利かは微妙 ❏ エンジニア的には良いと思うけど、デザイナーからは地獄に見える ❏ チームの構成と相性を検討した上で決めるという辺り前の感想に ❏ ただ、props に使うデータには型エイリアスをちゃんと定義しておこうとは思う ❏ リテラル型をどんどん定義するのが良さそうでした
21. おわり Twitter: @biwakonbu Twitter やってます。 良ければ交流してください。
22. P.S. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています ・長く続く開発者コミュニティ作りを実行します