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
63
Other Decks in Programming
See All in Programming
TypeScriptとGraphQLで実現する 型安全なAPI実装 / TSKaigi 2024
hokaccha
5
2.5k
TypeScriptでもLLMアプリケーション開発 / LLM Application In Typescript
rkaga
5
1.3k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
1.1k
Fragment Composition of GraphQL
quramy
14
1.7k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
180
Deep Dive into React Stream/Serialize
mugi_uno
4
840
株式会社ゼネテック
genetec
0
120
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
410
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
590
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
150
TypeScriptコードの漸進的改善 / Progressive Improvement of TypeScript Code
medley
1
390
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
Featured
See All Featured
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Product Roadmaps are Hard
iamctodd
45
9.8k
Building an army of robots
kneath
300
41k
Ruby is Unlike a Banana
tanoku
96
10k
How to Ace a Technical Interview
jacobian
273
22k
The Language of Interfaces
destraynor
151
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
Become a Pro
speakerdeck
PRO
13
4.6k
How to train your dragon (web standard)
notwaldorf
75
5.2k
The Mythical Team-Month
searls
217
42k
Why Our Code Smells
bkeepers
PRO
331
56k
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. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します