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
640
TypeScript で型を扱う観点から React と Vue3 を比較
React と Vue3 を比較する際に、機能を単純に比較するのではなく、TypeScript 上での型も気にして比較する内容です。
biwakonbu
June 12, 2023
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
Django を使い続ける理由
biwakonbu
0
160
爆速なPythonフレームワーク
biwakonbu
0
160
HTMX触ってみた
biwakonbu
0
180
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
390
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
130
プログラミング言語F#を学びはじめました
biwakonbu
0
310
開発の生産性を高める事を考える
biwakonbu
0
140
「プログラミングを習得する」を考えてみた
biwakonbu
0
80
Python の型事情について
biwakonbu
0
96
Other Decks in Programming
See All in Programming
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
310
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
180
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
510
Java on Azure で LangGraph!
kohei3110
0
170
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
XP, Testing and ninja testing
m_seki
3
180
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
850
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Cult of Friendly URLs
andyhume
79
6.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Raft: Consensus for Rubyists
vanstee
140
7k
It's Worth the Effort
3n
185
28k
Optimizing for Happiness
mojombo
379
70k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
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. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します