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
440
TypeScript で型を扱う観点から React と Vue3 を比較
React と Vue3 を比較する際に、機能を単純に比較するのではなく、TypeScript 上での型も気にして比較する内容です。
biwakonbu
June 12, 2023
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
爆速なPythonフレームワーク
biwakonbu
0
51
HTMX触ってみた
biwakonbu
0
48
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
180
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
63
プログラミング言語F#を学びはじめました
biwakonbu
0
67
開発の生産性を高める事を考える
biwakonbu
0
73
「プログラミングを習得する」を考えてみた
biwakonbu
0
42
Python の型事情について
biwakonbu
0
48
ESLint使ってますか?
biwakonbu
0
64
Other Decks in Programming
See All in Programming
Apache Hive 4 on Treasure Data
ryukobayashi
1
480
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
ts-morphを使ってコードリプレイスとASTへのハードルを下げる!
nyawach
5
320
2024 コーディング研修
ckazu
2
620
GitHub Actionsの痒いところを埋めるサードパーティーランナー
dora1998
1
180
Good first issues of TypeProf
mame
1
270
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
180
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
400
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
600
酒飲んでたらテックリードになった話
spbaya0141
0
200
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
16
2k
スタックトレース始めてみた
kuro_kurorrr
4
1k
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Web development in the modern age
philhawksworth
203
10k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
The Language of Interfaces
destraynor
151
23k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Typedesign – Prime Four
hannesfritz
36
2.1k
A designer walks into a library…
pauljervisheath
201
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Scaling GitHub
holman
457
140k
Agile that works and the tools we love
rasmusluckow
325
20k
How GitHub (no longer) Works
holman
305
140k
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. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します