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
TypeScript で型を扱う観点から React と Vue3 を比較
Search
biwakonbu
June 12, 2023
Programming
0
600
TypeScript で型を扱う観点から React と Vue3 を比較
React と Vue3 を比較する際に、機能を単純に比較するのではなく、TypeScript 上での型も気にして比較する内容です。
biwakonbu
June 12, 2023
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
Django を使い続ける理由
biwakonbu
0
110
爆速なPythonフレームワーク
biwakonbu
0
130
HTMX触ってみた
biwakonbu
0
140
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
330
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
110
プログラミング言語F#を学びはじめました
biwakonbu
0
250
開発の生産性を高める事を考える
biwakonbu
0
130
「プログラミングを習得する」を考えてみた
biwakonbu
0
70
Python の型事情について
biwakonbu
0
78
Other Decks in Programming
See All in Programming
Kubernetes History Inspector(KHI)を触ってみた
bells17
0
200
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Honoをフロントエンドで使う 3つのやり方
yusukebe
3
2k
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
CloudNativePGがCNCF Sandboxプロジェクトになったぞ! 〜CloudNativePGの仕組みの紹介〜
nnaka2992
0
220
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
Software Architecture
hschwentner
6
2.1k
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
Automating Front-end Workflow
addyosmani
1367
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Optimizing for Happiness
mojombo
376
70k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How GitHub (no longer) Works
holman
313
140k
Fireside Chat
paigeccino
34
3.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Faster Mobile Websites
deanohume
306
31k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
What's in a price? How to price your products and services
michaelherold
244
12k
Transcript
TypeScript で型を扱う観点から React と Vue3 を比較 株式会社coroutine 東川 諒央
自己紹介 1 作りながら考える 3 Vue3 で扱う型 4 動機:UI 実装時に欲しくなる型について 2
5 Runtime と型宣言 6 まとめ
自己紹介 1 株式会社 coroutine 東川 諒央 @biwakonbu 大学教員 ゲームバックエンド フリーランス
経歴 Ruby Python JavaScript 実績言語 PHP 技術顧問 エンジニア教育 業務 設計 プログラミング インフラ etc… Rust Haskell TypeScript 学習中言語
自己紹介 1 作りながら考える 3 比較 4 動機:UI 実装時に欲しくなる型について 2 5
番外編: styled-components 6 まとめ
UI 実装時に欲しくなる型について 2 ❏ フロントの実装をしているとコンポーネントの使い方に悩む ❏ ドキュメントがあれば読むが、自社開発の UI の場合無い事もしばしば ❏
Storybook? 使い方が完全に分かる訳ではないよね ❏ Next UI みたいなドキュメント・サジェスト良かったなぁ ❏ あの実装を参考にして UI を定義するようにしよう
UI 実装時に欲しくなる型について 2
UI 実装時に欲しくなる型について 2
UI 実装時に欲しくなる型について 2 ❏ こんな感じで使える内容を補完で出して欲しい
自己紹介 1 作りながら考える 3 比較 4 動機:UI 実装時に欲しくなる型について 2 5
番外編: styled-components 6 まとめ
作りながら考える 3 ❏ 簡単な <input type=”text” /> なタグを作ってみる ❏ 仕様
❏ ステータスによって色が変わる ❏ normal: 通常色 ❏ error: 赤色 ❏ success: 緑色 ❏ 外部 (props) からステータスを流し込む形で反映 ❏ input の入力値を親コンポーネントから拾えるようにする ❏ 送信ボタンを押した際にバリデーションを行う ❏ 空だったら error ❏ 何か入力されていたら success
作りながら考える 3 normal success error
作りながら考える 3 共通 props Vue3 React
作りながら考える 3 リフトアップ Vue3 React
自己紹介 1 作りながら考える 3 比較 4 動機:UI 実装時に欲しくなる型について 2 5
番外編: styled-components 6 まとめ
比較 4 ❏ Vue3 も React でも基本レベルの機能は大差は無い感じでした ❏ React:かなり素直に関数ベースでやり取りできるので直感的 ❏
Vue3 :Composition API が少し特殊なので慣れは必要 ❏ CSS の扱いについて ❏ React:styled-components が CSS in JS において型を付けさせてくれる ❏ Vue3 :vue-styled-components はあるらしいけど詳細は不明 ❏ もう更新されていなさそう
自己紹介 1 作りながら考える 3 比較 4 動機:UI 実装時に欲しくなる型について 2 5
番外編: styled-components 6 まとめ
番外編: styled-components 5
番外編: styled-components 5 ❏ class ではなく属性で CSS を処理したい場合などに使える ❏ その場合の値に型を与えられるのは便利
自己紹介 1 作りながら考える 3 比較 4 動機:UI 実装時に欲しくなる型について 2 5
番外編: styled-components 6 まとめ
まとめ 6 ❏ 型の扱いだけで Vue or React を決めるのは早計といえそう ❏ ただ、型の扱いは
Vue3 ではちょっと面倒ではありそう ❏ Composition API が面倒な理由ではある ❏ だけど Vue が好きで型が欲しい場合はちゃんと型が React レベルで使える ❏ 学習コストが再度高めにかかるのが面倒なくらい ❏ React で CSS & 型を扱えるのは面白いけど、実際問題は便利かは微妙 ❏ エンジニア的には良いと思うけど、デザイナーからは地獄に見える ❏ チームの構成と相性を検討した上で決めるという辺り前の感想に ❏ ただ、props に使うデータには型エイリアスをちゃんと定義しておこうとは思う ❏ リテラル型をどんどん定義するのが良さそうでした
おわり Twitter: @biwakonbu Twitter やってます。 良ければ交流してください。
P.S. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します