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
700
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
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
310
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
ReadMoreTextView
fornewid
1
490
エラーって何種類あるの?
kajitack
5
320
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
VS Code Update for GitHub Copilot
74th
1
480
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
110
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
250
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
Create a website using Spatial Web
akkeylab
0
310
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Become a Pro
speakerdeck
PRO
28
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
710
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Producing Creativity
orderedlist
PRO
346
40k
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!