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
130
react-vueの遊び方 - Gotanda.js
syumai
October 06, 2017
Tweet
Share
More Decks by syumai
See All by syumai
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
5
460
Go言語で始めるCloudflare Workers
syumai
3
1.1k
Goのジェネリクスを活用する
syumai
2
2.5k
Goでスタックトレースを扱う方法がややこしい件について
syumai
1
4k
What's new in Go 1.20?
syumai
2
1.7k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
1.1k
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
640
Go言語仕様輪読会の開催を通じた振り返り
syumai
1
460
What's new in Go 1.18?
syumai
4
1.9k
Other Decks in Programming
See All in Programming
DocC Tutorial と TCA におけるテスト機能の紹介
kalupas226
1
330
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
Introduction for Open Source Swift Workshop
giginet
PRO
0
290
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
TCA魔法学入門🪄
dazy
0
280
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
上手な探索的テストとその上達方法について
matsu802
4
660
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
SwiftUI, Jetpack Composeの導入で変化した「家族アルバム みてね」のアプリ開発体験
hicka04
6
400
「コンパイル時のユニットテスト」導入するとユニットテストを 書かなくてよくなるのか?
tomohisa
9
2.2k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Music & Morning Musume
bryan
39
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.6k
KATA
mclloyd
14
11k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Being A Developer After 40
akosma
56
580k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
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!