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
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
500
Go製CLIツールをnpmで配布するには
syumai
2
1.3k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.7k
GoのGenericsによるslice操作との付き合い方
syumai
3
890
GoのWebAssembly活用パターン紹介
syumai
3
11k
Cloudflare Workersで進めるリモートMCP活用
syumai
13
2.6k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
660
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
450
Other Decks in Programming
See All in Programming
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
110
私の後悔をAWS DMSで解決した話
hiramax
4
210
Deep Dive into Kotlin Flow
jmatsu
1
340
Swift Updates - Learn Languages 2025
koher
2
480
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
860
旅行プランAIエージェント開発の裏側
ippo012
2
910
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
160
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
530
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
120
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
Cache Me If You Can
ryunen344
2
740
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Featured
See All Featured
Building an army of robots
kneath
306
46k
Why Our Code Smells
bkeepers
PRO
339
57k
Fireside Chat
paigeccino
39
3.6k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Rails Girls Zürich Keynote
gr2m
95
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The Language of Interfaces
destraynor
161
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
A Tale of Four Properties
chriscoyier
160
23k
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!