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
react-vueの遊び方 - Gotanda.js
Search
syumai
October 06, 2017
Programming
0
170
react-vueの遊び方 - Gotanda.js
syumai
October 06, 2017
Tweet
Share
More Decks by syumai
See All by syumai
GoのGenericsによるslice操作との付き合い方
syumai
3
690
GoのWebAssembly活用パターン紹介
syumai
3
10k
Cloudflare Workersで進めるリモートMCP活用
syumai
13
2.3k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
500
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
430
初めてDefinitelyTypedにPRを出した話
syumai
1
690
利用者視点で考える、イテレータとの上手な付き合い方
syumai
7
860
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
8
4k
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
7
1k
Other Decks in Programming
See All in Programming
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
エラーって何種類あるの?
kajitack
5
320
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Select API from Kotlin Coroutine
jmatsu
1
190
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
190
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
260
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
600
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
300
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
GitHub's CSS Performance
jonrohan
1031
460k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Building Applications with DynamoDB
mza
95
6.5k
Raft: Consensus for Rubyists
vanstee
140
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Making Projects Easy
brettharned
116
6.3k
Transcript
react-vueの遊び方 @__syumai 2017.10.6 Gotanda.js 資料置き場 => https://syumai.github.io/docs/
自己紹介 しゅーまい(福岡) @__syumai(アンダーバー2つ) ダックリングズ株式会社 フロント/サーバーサイド 担当 VR関連のサービスをやってるベンチャー 新卒2年目 最近はRails +
Vue.jsをずっとやってます
今日のお題
react-vue
react-vueとは? • Reactの上でVueが動くようにした • Vueのフォークで、VueのインスタンスがReactと連携できるようにするDecoratorを実装してい る(らしい) • 6月くらいに登場して若干物議を醸した (気がする) •
https://github.com/SmallComfort/react-vue
react-vueのいいところ
react-vueのいいところ • Vue.jsの資産をReact上で使える • Reactの資産をVue.js上で使える • Reactの強力なライブラリをVue.js上に持って来ることが出来る
実際に遊んでみる
サンプルコードはこちら https://syumai.github.io/
Demo
ファイル構成
ファイル構成
コンポーネントの宣言 ReactCounter.js VueCounter.vue
コンポーネントを使う index.js Vueのコンポーネントを普通に importして、Reactコンポーネント 内に組み込んでいる
ファイル構成 Vue→ React→ React→
もうちょっと遊んでみる
React Router + Vue = ?
動いた!
react-router-vue • React RouterのQuick Startのコードをvue に書き換えてみた • https://reacttraining.com/react-router/ web/guides/quick-start •
https://syumai.github.io/にサンプルへの リンクを貼ってます
元のコード 1ファイル内でアロー関数を使いコンポーネントを宣言 最後に一つのコンポーネントにまとめていた
react-vue版 全コンポーネントを.vueファイルに書き出し App.vueでインポートした
react-vue版 普通にReact RouterのコンポーネントをVueのcomponentsにぶち込んだら使えた!
react-vue で React Router を使うコツ • match は普通に props で受け取る
• Routeに渡すcomponentはdataに宣言する • <route … render=”() => <SomeReactComponent />”/>は動かないから、諦めてmethodsに 定義する ◦ 直接アロー関数をプロパティに書くと、 React is not definedで止まる • <link>がVueで動かないのでリネームする ◦ 適当に、<router-link>にリネームしました
react-vue で React Router を使うコツ • match は普通に props で受け取る
• Routeに渡すcomponentはdataに宣言する • <route … render=”() => <SomeReactComponent />”/>は動かないから、諦めてmethodsに 定義する ◦ 直接アロー関数をプロパティに書くと、 React is not definedで止まる • <link>がVueで動かないのでリネームする ◦ 適当に、<router-link>にリネームしました これさえやれば、普通に動く!
※実際にはVue Routerを使いましょう https://router.vuejs.org/ja/
開発環境の作り方
最小環境
最小環境 • 普通のReactの開発環境 + react-vue + babel-plugin-transform-decorators-legacy
最小環境でのコード • 通常のReactコンポーネントに対して、内 部のVueインスタンスの変化を監視するデ コレータを付ける • react-vueは、Vueのリアクティビティシス テムのみを含んでいるので、単体だとテン プレートは使えない
テンプレートを使うには?
react-vue-loader
サンプルはこちら https://syumai.github.io/
次に試したいのは…
react-vue-native-scripts
None
Weex
製作中は…
つらかった…
react-vue-native-scriptsで… • React Nativeのデザイン済みのコンポーネントで • 充実した標準ライブラリ、周辺ツールで 幸せになりたい…。
※本番で使えるかはわかりません
Enjoy react-vue!