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
650
TypeScript で型を扱う観点から React と Vue3 を比較
React と Vue3 を比較する際に、機能を単純に比較するのではなく、TypeScript 上での型も気にして比較する内容です。
biwakonbu
June 12, 2023
Tweet
Share
More Decks by biwakonbu
See All by biwakonbu
Django を使い続ける理由
biwakonbu
0
170
爆速なPythonフレームワーク
biwakonbu
0
170
HTMX触ってみた
biwakonbu
0
190
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
430
プログラミングを体系的に学べる言語 Python を推したい
biwakonbu
0
140
プログラミング言語F#を学びはじめました
biwakonbu
0
330
開発の生産性を高める事を考える
biwakonbu
0
160
「プログラミングを習得する」を考えてみた
biwakonbu
0
89
Python の型事情について
biwakonbu
0
110
Other Decks in Programming
See All in Programming
Kiroで始めるAI-DLC
kaonash
2
590
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
為你自己學 Python - 冷知識篇
eddie
1
350
Deep Dive into Kotlin Flow
jmatsu
1
340
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
540
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
100
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
450
Featured
See All Featured
It's Worth the Effort
3n
187
28k
Navigating Team Friction
lara
189
15k
Thoughts on Productivity
jonyablonski
70
4.8k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
BBQ
matthewcrist
89
9.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Music & Morning Musume
bryan
46
6.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
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. エンジニアのための学習・交流を行うコミュニティスペースを作ります 未経験者・学生・社会人・フリーランス歓迎、プログラミング等は教えます 色々なご相談にも対応します ・就活・キャリアアップ相談 ・業務に関する相談 ・個人的な学習の相談 大阪でのエンジニアコミュニティを応援します ・勉強会場として無料で場所貸し ・むしろ開催応援のギフト券なども考えています
・長く続く開発者コミュニティ作りを実行します