Vuexで覚える状態管理

Transcript

1. Vuex
   で覚える状態管理
   Vuex
   で覚える状態管理
   arm4
   

   View Slide

2. 今日、話すこと
   今日、話すこと
   Vuex
   って何？
   既存プロジェクトではこうでした
   Vuex
   を使うとこうなるよ
   Laravel
   での導入手順
   つまり状態管理って何？
   その他
   

   View Slide

3. Vuex
   って何？
   Vuex
   って何？
   

   View Slide

4. と、説明に入るその前に、
   コードから見ていきましょう！
   そうじゃないと説明が難しくて頭に入らないからね！
   

   View Slide

5. 既存プロジェクトではこうで
   既存プロジェクトではこうで
   した
   した
   

   View Slide

6. 親から子へデータを渡す
   親から子へデータを渡す
   親から子へデータを渡す際はprops
   といって、親のコ
   ンポーネントにカスタム属性を設定し、
   それを子コンポーネントに設定したprops
   オプション
   で受け取るという手法を使います。
   

   View Slide

7. 親コンポーネントであるProductList
   から、
   子コンポーネントであるProduct
   にそれぞれの商品デ
   ータを渡す場合
   

   View Slide

8. 親コンポーネント
   親コンポーネント
   resources/assets/js/components/ProductList.vue
   
   
   
   

   View Slide

9. 子コンポーネント
   子コンポーネント
   resources/assets/js/components/Product.vue
   
   
   
   
   {{ product.name }}
   
   価格
   {{ product.price }}円
   

   View Slide

10. 子から親へデータを渡す
    子から親へデータを渡す
    子から親へデータを渡す場合は、子で$emit
    を使いカ
    スタムイベントを発火させ、
    親のテンプレート側の子コンポーネントのタグでv-
    on
    を使ってカスタムイベントをリッスンしデータを
    渡す。
    

    View Slide

11. 子コンポーネントであるProduct
    から、
    親コンポーネントであるProductList
    に選択した商品
    数とその値段を渡す場合
    

    View Slide

12. 子コンポーネント
    子コンポーネント
    resources/assets/js/components/Product.vue
    
    
    
    
    {{ product.name }}
    
    価格
    {{ product.price }}円
    
    
    
    
    
    <br/>

    View Slide

13. 親コンポーネント
    親コンポーネント
    resources/assets/js/components/ProductList.vue
    
    
    
    合計点数 {{ total.count }}点 合計 {
    
    
    
    <br/>import Product from './Product.vue'<br/>export default {<br/>components: {<br/>Product,<br/>}<br/>

    View Slide

14. 親子じゃないコンポーネントにデータ
    親子じゃないコンポーネントにデータ
    を渡す
    を渡す
    event bus
    という概念を使って、
    グローバル領域にあるオブジェクトのインスタンスで
    イベントの発火を行い
    それをそれぞれのコンポーネントがリッスンすること
    でデータをやりとりする。
    

    View Slide

15. コンポーネントProduct
    から
    コンポーネントCartLabel
    へ選択した商品数とその値
    段を渡す場合
    

    View Slide

16. app.js
    app.js
    require('./bootstrap');
    window.Vue = require('vue');
    import ProductList from './components/ProductList.vue'
    import CartLabel from './components/CartLabel.vue'
    const app = new Vue({
    el: '#app',
    components: {
    ProductList,
    CartLabel,
    },
    });
    

    View Slide

17. コンポーネントProduct
    コンポーネントProduct
    resources/assets/js/components/Product.vue
    
    
    
    
    {{ product.name }}
    
    価格
    {{ product.price }}円
    
    
    
    
    
    <br/>

    View Slide

18. コンポーネントCartLabel
    コンポーネントCartLabel
    resources/assets/js/components/CartLabel.vue
    
    
    

    View Slide

19. コンポーネントProductList
    コンポーネントProductList
    resources/assets/js/components/ProductList.vue
    
    
    
    合計点数 {{ total.count }}点 合計 {
    
    
    
    <br/>import Product from './Product.vue'<br/>export default {<br/>components: {<br/>Product,<br/>}<br/>

    View Slide

20. ▼それぞれのデータ受け渡しを理解するのに参考にな
    るページ
    https://kuroeveryday.blogspot.jp/2016/10/vuejs-
    components-emit-events.html
    

    View Slide

21. この程度のコンポーネント構造とイベント数であれ
    ば、そこまで複雑ではないし
    「ボタン押したら2
    つのコンポーネントにデータを渡
    すのね」と覚えていられます。
    が
    が
    このコンポーネント数が20
    個になって、イベントが
    15
    個になったときのことを想像してみてください。
    

    View Slide

22. View Slide

23. こうなります。
    

    View Slide

24. Vuex
    って何？
    Vuex
    って何？
    

    View Slide

25. 戻ってきました。
    いわゆるFlux
    フレームワークの１つで、
    Vue.js
    で作成するアプリケーションの状態を管理する
    ためのフレームワーク。
    

    View Slide

26. Flux
    ？
    Flux
    ？
    

    View Slide

27. Facebook
    社が提唱した設計思想。
    矢印が一方向になることによって、デバッグがしやす
    くなりメンテナンス性が上がるという思想。
    

    View Slide

28. え？ 逆に複雑そうじゃね？（小声）
    

    View Slide

29. あの図は偉い人用だから普通の人用に書き換えます
    

    View Slide

30. Action
    が呼ばれる
    ↓
    Store
    の値が変わる
    ↓
    View
    が書き換わる
    

    View Slide

31. Vuex
    以外にもFlux
    フレームワークはた
    Vuex
    以外にもFlux
    フレームワークはた
    くさんある
    くさんある
    Redux, Flux-utils, MobX
    

    View Slide

32. では、なぜVuex
    なのか？
    では、なぜVuex
    なのか？
    

    View Slide

33. Vue.js
    のリアクティブシステムを利用することによ
    りView
    の効率的な更新を可能にしている
    手順がRedux
    より少なく、単純で分かりやすい
    Chrome
    の開発ツールでVuex
    の状態変化をステッ
    プごとに確認できる
    

    View Slide

34. 具体的に何がうれしいの？
    具体的に何がうれしいの？
    

    View Slide

35. コンポーネントが共有しているdata
    を抽出し、それ
    をグローバルな唯一無二のデータとして管理でき
    る！！
    

    View Slide

36. さっきの例だと、
    ProductList.vue
    にもCartLabel.vue
    にも
    count
    とprice
    があり、
    これをイベントで両方更新しに行っている。
    どちらかに何かがあってバグっていると、
    本来は同一でなければいけないデータに差が。。
    

    View Slide

37. 要は、関係してるコンポーネ
    要は、関係してるコンポーネ
    ントを覚えてないといけなく
    ントを覚えてないといけなく
    てバグりやすい
    てバグりやすい
    

    View Slide

38. グローバルな領域にあるcount
    とprice
    をそれぞれのコ
    ンポーネントが読みに行ったり、
    変更したりすればいいじゃないの！
    そう思いませんか？
    そう思いませんか？
    

    View Slide

39. そう、つまりそれがVuex
    

    View Slide

40. Vuex
    を使うとこうなるよ
    Vuex
    を使うとこうなるよ
    

    View Slide

41. それぞれのコンポーネントでは共通で使うデー
    それぞれのコンポーネントでは共通で使うデー
    タを読み込んで、それを更新するミューテーシ
    タを読み込んで、それを更新するミューテーシ
    ョンを呼ぶだけ
    ョンを呼ぶだけ
    

    View Slide

42. 共通で使うデータやそれを更新するメソッドは
    new Vuex.Store
    でインスタンス化しておく
    const store = new Vuex.Store({
    state: {
    total: {
    count: 0,
    price: 0,
    },
    productList: [
    {
    name: ' ',
    price: 140,
    onSale: true,
    },
    {
    name: ' ',
    price: 300,
    onSale: true
    

    View Slide

43. app.js
    app.js
    require('./bootstrap');
    window.Vue = require('vue');
    import Vuex from 'vuex'
    Vue.use(Vuex)
    import store from './store/vuex'
    import VxProductList from './components/VxProductList.vue'
    import VxCartLabel from './components/VxCartLabel.vue'
    const vxApp = new Vue({
    el: '#app',
    store
    

    View Slide

44. コンポーネントVxProduct
    コンポーネントVxProduct
    resources/assets/js/components/VxProduct.vue
    this.$store
    はVuex
    ストアのインスタンス
    
    
    
    
    {{ product.name }}
    
    価格
    {{ product.price }}円
    
    
    
    
    
    <br/>

    View Slide

45. コンポーネントVxCartLabel
    コンポーネントVxCartLabel
    resources/assets/js/components/VxCartLabel.vue
    this.$store
    はVuex
    ストアのインスタンス
    
    
    

    View Slide

46. コンポーネントVxProductList
    コンポーネントVxProductList
    resources/assets/js/components/VxProductList.vue
    this.$store
    はVuex
    ストアのインスタンス
    
    
    
    合計点数 {{ total.count }}点 合計 {
    
    
    
    <br/>import { mapState, mapGetters } from 'vuex'<br/>import VxProduct from './VxProduct.vue'<br/>export default {<br/>components: {<br/>VxProduct<br/>

    View Slide

47. 今回は触れなかったけど、mapState
    とか
    mapMutations
    という便利なメソッドを使うと、さら
    に簡潔にコードが書けます。
    

    View Slide

48. Laravel
    での導入手順
    Laravel
    での導入手順
    

    View Slide

49. vuex
    をインストール
    vuex
    をインストール
    npm install vuex --save
    

    View Slide

50. app.js
    に以下の2
    行を追加
    app.js
    に以下の2
    行を追加
    import Vuex from 'vuex'
    Vue.use(Vuex)
    

    View Slide

51. store
    を作成する
    store
    を作成する
    ※ 事前にVue
    とVuex
    を読み込んでおく(require or import)
    必要があります。
    const store = new Vuex.Store({
    state: {
    count: 1
    },
    mutations: {
    increment (state) {
    // 状態 変更
    state.count++
    }
    }
    })
    

    View Slide

52. Vue
    のルートインスタンスにstore
    オプ
    Vue
    のルートインスタンスにstore
    オプ
    ションを追加
    ションを追加
    ※ ここで store,
    となっているのは、ECMAScript 2015
    で
    変数名とオブジェクトのkey
    名が同一の場合は省略できるという文法が追加になったためであり、
    省略しない表記は store: store,
    です。
    ※ store
    オプションのvalue
    にはVuex
    ストアのインスタンスを渡す必要があるので、ストアのインスタンス
    生成はVue
    のルートインスタンスより前に行っておく必要があります。
    const app = new Vue({
    el: '#app',
    store,
    components: {
    VxProductList,
    VxCartLabel,
    },
    });
    

    View Slide

53. 要するに、簡単！
    要するに、簡単！
    

    View Slide

54. つまり状態管理って何？
    つまり状態管理って何？
    

    View Slide

55. 状態 = state = data
    状態 = state = data
    

    View Slide

56. data
    をなぜstate
    と言い換えた？
    data
    をなぜstate
    と言い換えた？
    

    View Slide

57. data
    のとある状態を参照してるよ！ってこと
    

    View Slide

58. 管理 = management =
    整理してコントロール
    

    View Slide

59. 今までdata
    の状態はいろんなコンポーネントに内包
    されていて、それを変更するメソッドも分散しカオス
    っていました。
    

    View Slide

60. それを共通のストアで管理し、
    一方向の流れでデータを変更していくことで整理整頓
    された美しい世界を作る。
    

    View Slide

61. つまり、それが...
    That's
    状態管理
    That's
    状態管理
    

    View Slide

62. 【個人的な感想】
    【個人的な感想】
    js
    だろうが何だろうが、やっぱMVC
    が分かりやすいん
    じゃないそうなんじゃない？
    それに近づけたのがFlux
    なんじゃない？
    違うの？そうでしょ？
    

    View Slide

63. その他
    その他
    

    View Slide

64. ▼公式ドキュメント（日本語訳版）
    https://vuex.vuejs.org/ja/
    

    View Slide

65. ▼私が書いたLaravel+Vuex+Vue
    のサンプルコード
    ※ Vx
    のpre x
    ついてるコンポーネントのファイルがvuex
    版
    ※ assets/js/store
    にjs
    をModule
    化して分けて入れたり、mutations
    などのプロパティ別でファイルを分け
    て整理するとかするといいかもしれない。
    https://github.com/fromarm4/vuex_study
    

    View Slide

66. ▼Vuex
    を利用したVue
    アプリケーションのサンプル
    コードたち
    https://github.com/vuejs/vuex/tree/dev/examples
    

    View Slide

67. ご清聴ありがとうございまし
    ご清聴ありがとうございまし
    た！
    た！
    

    View Slide