Laravel/Vue.js 勉強会 #10

1. Vue.jsでFormを
Atomic Designしてみた時の
コンポーネント間の
データのやりとり
Laravel/Vue.js勉強会 #10
2019/07/18
Yuta Ohashi

2. 2
blue_goheimochi
⻘ごへいもち
株式会社オウケイウェイヴ
PHP(Laravel),
Javascript(Vue.js/Nuxt.js)
Docker, Golang, DDD …
おおはし ゆうた

3. 3
今⽇話すこと
• Atomic Designって︖
• Formをコンポーネントに分解してみる
• コンポーネント間のデータのやりとり
• まとめ

4. 4
Atomic Designって︖

5. 5
Atomic Designって︖
http://atomicdesign.bradfrost.com/

6. 6
Atomic Designって︖
• Bread Frostさんが提唱
• Atomsが集まってMoleculesに、Moleculesが集まってOrganismsに、
Organismsが集まって・・・・Pageができる
• ⼤きな要素を細分化して、⼩さい要素として捉える
• 詳細は「Atomic Designとは︖」で検索 ＆ 原典を参照ください

7. 7
Formを
コンポーネントに
分解してみる

8. 8
Formをコンポーネントに分解してみる

9. 9
Formをコンポーネントに分解してみる

10. 10
Formをコンポーネントに分解してみる
Pages

11. 11
Formをコンポーネントに分解してみる
ここになにかが⼊る

12. 12
Formをコンポーネントに分解してみる
ここになにかが⼊るTemplates

13. 13
Formをコンポーネントに分解してみる

14. 14
Formをコンポーネントに分解してみる
Organisms

15. 15
Formをコンポーネントに分解してみる

16. 16
Formをコンポーネントに分解してみる
Molecules
Molecules
Molecules
Molecules
Molecules

17. 17
Formをコンポーネントに分解してみる

18. 18
Formをコンポーネントに分解してみる
Atom
Atom
Atom
Atom
Atom
Atom
Atom
Atom
Atom
Atom
Atom
Atom
Atom Atom
Atom Atom

19. 19
Formをコンポーネントに分解してみる

20. 20
Formをコンポーネントに分解してみる

21. 21
Formをコンポーネントに分解してみる

22. 22
Formをコンポーネントに分解してみる

23. 23
コンポーネント間の
データのやりとり

24. 24
コンポーネント間のデータのやりとり
• 基本的にデータはPagesかOrganismsで管理する
• APIコールやStoreでデータを取得・保持する場合もPagesかOrganismsで
• 要するに、MoleculesやAtomsは状態をなるべく持たないようにする
• 親⼦のコンポーネント間のやり取りは props in / events out で
• 親から⼦にはpropsでデータを渡す
• 親でpropsの値が変更されれば⼦に伝搬する
• ⼦から親には$emitでイベントを発⾏し、データの変更を伝える
• 親コンポーネントが⼦のイベントを検知する

25. 25
コンポーネント間のデータのやりとり
• 基本的にデータはPagesかOrganismsで管理する
• APIコールやStoreでデータを取得・保持する場合もPagesかOrganismsで
• 要するに、MoleculesやAtomsは状態をなるべく持たないようにする
• 親⼦のコンポーネント間のやり取りは props in / events out で
• 親から⼦にはpropsでデータを渡す
• 親でpropsの値が変更されれば⼦に伝搬する
• ⼦から親には$emitでイベントを発⾏し、データの変更を伝える
• 親コンポーネントが⼦のイベントを検知する

26. 26
コンポーネント間のデータのやりとり

27. 27
コンポーネント間のデータのやりとり
export default {
data () {
return {
user_id: "",
password: "",
mail_address: "",
gender_box: "",
birthday: ""
}
}
}
Organismsでデータを保持する

28. 28
コンポーネント間のデータのやりとり
<template>
<form>
<user-id-box :user_id="user_id" @change="changeUserId" />
<password-box :password="password" @change="~" />
<mail-address-box :mail_address="mail_address" @change="~" />
<gender-box :gender="gender" @change="~" />
<birthday-box :birthday="birthday" @change="~" />
<submit-button @click="doRegister">登録</submit-button>
</form>
</template>
propsでデータを
⼦コンポーネント(Molecules)に渡す

29. 29
コンポーネント間のデータのやりとり

30. 30
コンポーネント間のデータのやりとり
export default {
props: {
user_id: String
},
methods: {
changeUserId: function (user_id) {
this.$emit("change", user_id)
}
}
}
親(Organisms)から
propsでデータを受け取る

31. 31
コンポーネント間のデータのやりとり
<template>
<div>
<form-label for="user_id">ユーザーID:</form-label>
<input-text :value="user_id" @change="changeUserId"/>
</div>
</template>
さらに⼦コンポーネント(Atoms)に
propsでデータを渡す

32. 32
コンポーネント間のデータのやりとり
<template>
<div>
<form-label for="user_id">ユーザーID:</form-label>
<input-text :value="user_id" @change="changeUserId"/>
</div>
</template>
さらに⼦コンポーネント(Atoms)に
propsでデータを渡す
v-bind:value で渡すのがここではちょっと重要
（Atomsのコンポーネントで v-modelを使うため）

33. 33
コンポーネント間のデータのやりとり

34. 34
コンポーネント間のデータのやりとりexport default {
props: {
value: String
},
computed: {
input_text: {
get: function () {
return this.value
},
set: function (value) {
this.$emit("change", value)
}
}
}
}
親(Molecules)から
propsでデータを受け取る

35. 35
コンポーネント間のデータのやりとり
Atomは最⼩の要素
Inputなのでフォーム⼊⼒バインディングを利⽤
https://jp.vuejs.org/v2/guide/forms.html
<template>
<input type="text" v-model="input_text">
</template>

36. 36
コンポーネント間のデータのやりとり
<template>
<input type="text" v-model="input_text">
</template>
v-modelはv-bind:valueとv-on:inputを
⼀度に設定してくれている
https://jp.vuejs.org/v2/guide/components.html#コンポーネントで-v-model-を使う
<template>
<input type="text”
:value="input_text”
@input="input_text = $event.$target.value”>
</template>

37. 37
コンポーネント間のデータのやりとりexport default {
props: {
value: String
},
computed: {
input_text: {
get: function () {
return this.value
},
set: function (value) {
this.$emit("change", value)
}
}
}
}
v-modelの値の変更は
computedプロパティで知る
(のが多分定⽯)
https://jp.vuejs.org/v2/guide/computed.html算出-Setter-関数

38. 38
コンポーネント間のデータのやりとりexport default {
props: {
value: String
},
computed: {
input_text: {
get: function () {
return this.value
},
set: function (value) {
this.$emit("change", value)
}
}
}
}
inputの⼊⼒に変更があった場合に
⼦コンポーネント(Atoms)がイベントを発⾏
親コンポーネント(Molecules)でそのイベントを検知する

39. 39
コンポーネント間のデータのやりとりexport default {
props: {
value: String
},
computed: {
input_text: {
get: function () {
return this.value
},
set: function (value) {
this.$emit("change", value)
}
}
}
}
親コンポーネント(Molecules)に
変更を伝える場合は$emitを使う
下記の場合は、
親コンポーネントで定義した
changeイベントが呼び出され、valueの値を⼀緒に送る

40. 40
コンポーネント間のデータのやりとり
<template>
<div>
<form-label for="user_id">ユーザーID:</form-label>
<input-text :value="user_id" @change="changeUserId"/>
</div>
</template>
⼦コンポーネント(Atoms)のイベントを検知して
changeのイベントが呼び出されるので
changeUserIdを実⾏する

41. 41
コンポーネント間のデータのやりとり
export default {
props: {
user_id: String
},
methods: {
changeUserId: function (user_id) {
this.$emit("change", user_id)
}
}
}
⼦コンポーネント(Atoms)から引数に
変更された値が渡ってくるので
⼦コンポーネント(Molecules)でイベントを発⾏し
親コンポーネント(Organisms)でそのイベントを検知する

42. 42
コンポーネント間のデータのやりとり
<template>
<form>
<user-id-box :user_id="user_id" @change="changeUserId" />
<password-box :password="password" @change="~" />
<mail-address-box :mail_address="mail_address" @change="~" />
<gender-box :gender="gender" @change="~" />
<birthday-box :birthday="birthday" @change="~" />
<submit-button @click="doRegister">登録</submit-button>
</form>
</template>
⼦コンポーネント(Molecules)のイベントを検知して
changeのイベントが呼び出されるので
changeUserIdを実⾏する

43. 43
コンポーネント間のデータのやりとり
export default {
data () {
return {
user_id: "",
password: null,
~~~~~~
}
},
methods: {
changeUserId (user_id) {
this.user_id = user_id
}
}
}
⼦コンポーネント(Molecules)から引数に
変更された値が渡ってくるので
Organismsのdataを変更する

44. 44
コンポーネント間のデータのやりとり
export default {
data () {
return {
user_id: "blue-goheimochi",
password: null,
~~~~~~
}
},
methods: {
changeUserId (user_id) {
this.user_id = user_id
}
}
}
dataが変更されると
親から⼦に変更が伝わってデータが更新される
⼦コンポーネントでは値を管理せず、
親のコンポーネントでpropsを変更することで
⼦コンポーネントに伝搬させる

45. わかりづらい

46. 46
画⾯キャプチャを⾒ながら
もう⼀度

47. 47
コンポーネント間のデータのやりとり
OrganismsからMoleculesにprops経由でデータ（空の値）が渡る

48. 48
コンポーネント間のデータのやりとり
MoleculesからAtomsにprops経由でデータ（空の値）が渡る

49. 49
コンポーネント間のデータのやりとり
inputのvalueに値（空の値）が反映される

50. 50
コンポーネント間のデータのやりとり
inputに⼊⼒があったのを検知する(この時点ではinputのvalueには反映されない)
blue-goheimochi

51. 51
コンポーネント間のデータのやりとり
Atomsでイベントが発⾏され
Moleculesがそれを変更された値と⼀緒に検知する
blue-goheimochi

52. 52
コンポーネント間のデータのやりとり
Moleculesでイベントが発⾏され
Organismsがそれを変更された値と⼀緒に検知する
blue-goheimochi

53. 53
コンポーネント間のデータのやりとり
Organismsで変更された値を更新する
user_id = blue-goheimochi

54. 54
コンポーネント間のデータのやりとり
OrganismsからMoleculesにprops経由でデータ（更新された値）が渡る
blue-goheimochi

55. 55
コンポーネント間のデータのやりとり
MoleculesからAtomsにprops経由でデータ（更新された値）が渡る
blue-goheimochi

56. 56
コンポーネント間のデータのやりとり
inputのvalueに値（更新された値）が反映される
blue-goheimochi

57. なるほど
わからん

58. 58
シンプルに
props in / events out
だけをみる

59. 59
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
props in / events out
値が変更されたら
イベントを発⾏する

60. 60
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
props in / events out
⼦が発⾏したイベントを
親が検知して値を受け取る

61. 61
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
props in / events out
検知した値とともに
イベントを発⾏する

62. 62
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
props in / events out
⼦が発⾏したイベントを
親が検知して値を受け取る

63. 63
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
props in / events out
値を設定する

64. 64
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
値が設定された
props in / events out

65. 65
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
propsでデータが渡るprops in / events out

66. 66
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
propsでデータが渡る
props in / event out

67. 67
コンポーネント間のデータのやりとり
Organisms Molecules Atoms
props in / events out
値が更新される

68. どうですか︖

69. 正直⾔葉での説明
わかりづらい

70. 実際に
⼿を動かしたほうが
理解が進む︕

71. 71
まとめ

72. 72
まとめ
• Vue.jsでFormをAtomic Designしてみた
• コンポーネントが複数階層の親⼦関係になる
• データはなるべく上位の親で管理
• Organismsより上でデータは持つ
• Molecules、Atomsに状態は持たない
• うまいこと親⼦間でデータをやりとりする
• props in / events out が⼤事
• 実際に⼿を動かして感覚をつかみましょう︕