Upgrade to Pro — share decks privately, control downloads, hide ads and more …

react-vueの遊び方 - Gotanda.js

syumai
October 06, 2017

react-vueの遊び方 - Gotanda.js

syumai

October 06, 2017
Tweet

More Decks by syumai

Other Decks in Programming

Transcript

  1. react-vueの遊び方
    @__syumai
    2017.10.6 Gotanda.js
    資料置き場 => https://syumai.github.io/docs/

    View full-size slide

  2. 自己紹介
    しゅーまい(福岡)
    @__syumai(アンダーバー2つ)
    ダックリングズ株式会社
    フロント/サーバーサイド 担当
    VR関連のサービスをやってるベンチャー
    新卒2年目
    最近はRails + Vue.jsをずっとやってます

    View full-size slide

  3. 今日のお題

    View full-size slide

  4. react-vueとは?
    ● Reactの上でVueが動くようにした
    ● Vueのフォークで、VueのインスタンスがReactと連携できるようにするDecoratorを実装してい
    る(らしい)
    ● 6月くらいに登場して若干物議を醸した (気がする)
    ● https://github.com/SmallComfort/react-vue

    View full-size slide

  5. react-vueのいいところ

    View full-size slide

  6. react-vueのいいところ
    ● Vue.jsの資産をReact上で使える
    ● Reactの資産をVue.js上で使える
    ● Reactの強力なライブラリをVue.js上に持って来ることが出来る

    View full-size slide

  7. 実際に遊んでみる

    View full-size slide

  8. サンプルコードはこちら
    https://syumai.github.io/

    View full-size slide

  9. ファイル構成

    View full-size slide

  10. ファイル構成

    View full-size slide

  11. コンポーネントの宣言
    ReactCounter.js VueCounter.vue

    View full-size slide

  12. コンポーネントを使う
    index.js
    Vueのコンポーネントを普通に
    importして、Reactコンポーネント
    内に組み込んでいる

    View full-size slide

  13. ファイル構成
    Vue→
    React→
    React→

    View full-size slide

  14. もうちょっと遊んでみる

    View full-size slide

  15. React Router + Vue = ?

    View full-size slide

  16. 動いた!

    View full-size slide

  17. react-router-vue
    ● React RouterのQuick Startのコードをvue
    に書き換えてみた
    ● https://reacttraining.com/react-router/
    web/guides/quick-start
    ● https://syumai.github.io/にサンプルへの
    リンクを貼ってます

    View full-size slide

  18. 元のコード
    1ファイル内でアロー関数を使いコンポーネントを宣言
    最後に一つのコンポーネントにまとめていた

    View full-size slide

  19. react-vue版
    全コンポーネントを.vueファイルに書き出し
    App.vueでインポートした

    View full-size slide

  20. react-vue版
    普通にReact RouterのコンポーネントをVueのcomponentsにぶち込んだら使えた!

    View full-size slide

  21. react-vue で React Router を使うコツ
    ● match は普通に props で受け取る
    ● Routeに渡すcomponentはdataに宣言する
    ● ”/>は動かないから、諦めてmethodsに
    定義する
    ○ 直接アロー関数をプロパティに書くと、 React is not definedで止まる
    ● がVueで動かないのでリネームする
    ○ 適当に、にリネームしました

    View full-size slide

  22. react-vue で React Router を使うコツ
    ● match は普通に props で受け取る
    ● Routeに渡すcomponentはdataに宣言する
    ● ”/>は動かないから、諦めてmethodsに
    定義する
    ○ 直接アロー関数をプロパティに書くと、 React is not definedで止まる
    ● がVueで動かないのでリネームする
    ○ 適当に、にリネームしました
    これさえやれば、普通に動く!

    View full-size slide

  23. ※実際にはVue Routerを使いましょう
    https://router.vuejs.org/ja/

    View full-size slide

  24. 開発環境の作り方

    View full-size slide

  25. 最小環境

    View full-size slide

  26. 最小環境
    ● 普通のReactの開発環境
    + react-vue
    + babel-plugin-transform-decorators-legacy

    View full-size slide

  27. 最小環境でのコード
    ● 通常のReactコンポーネントに対して、内
    部のVueインスタンスの変化を監視するデ
    コレータを付ける
    ● react-vueは、Vueのリアクティビティシス
    テムのみを含んでいるので、単体だとテン
    プレートは使えない

    View full-size slide

  28. テンプレートを使うには?

    View full-size slide

  29. react-vue-loader

    View full-size slide

  30. サンプルはこちら
    https://syumai.github.io/

    View full-size slide

  31. 次に試したいのは…

    View full-size slide

  32. react-vue-native-scripts

    View full-size slide

  33. 製作中は…

    View full-size slide

  34. つらかった…

    View full-size slide

  35. react-vue-native-scriptsで…
    ● React Nativeのデザイン済みのコンポーネントで
    ● 充実した標準ライブラリ、周辺ツールで
    幸せになりたい…。

    View full-size slide

  36. ※本番で使えるかはわかりません

    View full-size slide

  37. Enjoy react-vue!

    View full-size slide