Vue.js 3.0で搭載される Composition APIについて、従来と比べてどう変わったかか、メリットは何かを紹介するスライドです

1. Vue.js 3.0で搭載される
Composition APIをざっくりと
湧上 雄一郎

2. ● VueComposition APIとは
● Composition APIのメリット
● 保守性の向上とは
● 再利用性の向上とは
● Vue Composition APIの設計
● まとめ
● 課題
アジェンダ

3. Vue Composition API

4. Vue Composition API
● Vue Composition APIはVue 3で導入される予定のVueの新しいAPI
● @vue/composition-apiを追加することで、Vue2系でも使用できる

5. Vue Composition API
● Vue Composition APIはVue 3で導入される予定のVueの新しいAPI
● @vue/composition-apiを追加することで、Vue2系でも使用できる
公式の紹介によると
「コンポーネントのロジックの柔軟なコンポジションを可能にする関数ベース
のAPI」

6. Vue Composition API
● Vue Composition APIはVue 3で導入される予定のVueの新しいAPI
● @vue/composition-apiを追加することで、Vue2系でも使用できる
公式の紹介によると
「コンポーネントのロジックの柔軟なコンポジションを可能にする関数ベース
のAPI」
ざっくりいうと

7. Vue Composition API
● Vue Composition APIはVue 3で導入される予定のVueの新しいAPI
● @vue/composition-apiを追加することで、Vue2系でも使用できる
公式の紹介によると
「コンポーネントのロジックの柔軟なコンポジションを可能にする関数ベース
のAPI」
ざっくりいうと
Vue Composition APIとは

8. Vue Composition API
● Vue Composition APIはVue 3で導入される予定のVueの新しいAPI
● @vue/composition-apiを追加することで、Vue2系でも使用できる
公式の紹介によると
「コンポーネントのロジックの柔軟なコンポジションを可能にする関数ベース
のAPI」
ざっくりいうと
従来と比べてより柔軟にコンポーネントを書く方法
Vue Composition APIとは

9. <script>
export default {
props: {
times: {type: Number,default: 2}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
}
}
}
</script>
これまでのやり方

10. <script>
export default {
props: {
times: {type: Number,default: 2}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
}
}
}
</script>
<script>
import { ref } from '@vue/composition-api'
export default {
props: {
times: {type: Number,default: 2}
},
setup() {
let count = ref(0)
const increment = () => {
count.value += 1
}
return {count,increment}
}
}
</script>
これまでのやり方 Composition API

11. <script>
export default {
props: {
times: {type: Number,default: 2}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
}
}
}
</script>
<script>
import { ref } from '@vue/composition-api'
export default {
props: {
times: {type: Number,default: 2}
},
setup() {
let count = ref(0)
const increment = () => {
count.value += 1
}
return {count,increment}
}
}
</script>
これまでのやり方 Composition API

12. <script>
export default {
props: {
times: {type: Number,default: 2}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
}
}
}
</script>
<script>
import { ref } from '@vue/composition-api'
export default {
props: {
times: {type: Number,default: 2}
},
setup() {
let count = ref(0)
const increment = () => {
count.value += 1
}
return {count,increment}
}
}
</script>
これまでのやり方 Composition API

13. <script>
export default {
props: {
times: {type: Number,default: 2}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
}
}
}
</script>
<script>
import { ref } from '@vue/composition-api'
export default {
props: {
times: {type: Number,default: 2}
},
setup() {
let count = ref(0)
const increment = () => {
count.value += 1
}
return {count,increment}
}
}
</script>
これまでのやり方 Composition API

14. <script>
export default {
props: {
times: {type: Number,default: 2}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
}
}
}
</script>
<script>
import { ref } from '@vue/composition-api'
export default {
props: {
times: {type: Number,default: 2}
},
setup() {
let count = ref(0)
const increment = () => {
count.value += 1
}
return {count,increment}
}
}
</script>
これまでのやり方 Composition API

15. <script>
export default {
props: {
times: {type: Number,default: 2}
},
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count += 1
}
}
}
</script>
<script>
import { ref } from '@vue/composition-api'
export default {
props: {
times: {type: Number,default: 2}
},
setup() {
let count = ref(0)
const increment = () => {
count.value += 1
}
return {count,increment}
}
}
</script>
これまでのやり方 Composition API

16. Composition APIのメリット

17. Composition APIのメリット
CompositionAPI は柔軟にコンポーネントをかける

18. Composition APIのメリット
CompositionAPI は柔軟にコンポーネントをかける

19. Composition APIのメリット
CompositionAPI は柔軟にコンポーネントをかける
● メリット① : 保守性の向上

20. Composition APIのメリット
CompositionAPI は柔軟にコンポーネントをかける
● メリット① : 保守性の向上
● メリット② : 再利用性の向上

21. 保守性の向上とは

22. 保守性の向上 =
保守性の向上とは

23. 保守性の向上 = コードが見やすい、わかりやすい
保守性の向上とは

24. 保守性の向上 = コードが見やすい、わかりやすい
保守性の向上とは
Vue 2

25. 保守性の向上 = コードが見やすい、わかりやすい
保守性の向上とは
Vue 2
● ロジックがオプションごとに切り分けられる
● オプションベースではdataやmethodsなどオプションごとに関連する
データや処理が分散してしまう
● このような断片化は、複雑なコンポーネントの理解と保守を困難にする

26. 保守性の向上 = コードが見やすい、わかりやすい
保守性の向上とは
Vue 2
● ロジックがオプションごとに切り分けられる
● オプションベースではdataやmethodsなどオプションごとに関連する
データや処理が分散してしまう
● このような断片化は、複雑なコンポーネントの理解と保守を困難にする
Composition API

27. 保守性の向上 = コードが見やすい、わかりやすい
保守性の向上とは
Vue 2
● ロジックがオプションごとに切り分けられる
● オプションベースではdataやmethodsなどオプションごとに関連する
データや処理が分散してしまう
● このような断片化は、複雑なコンポーネントの理解と保守を困難にする
Composition API
● compositionAPIでは、柔軟にかけるので機能ごとにロジックを切り分け
られる
● ロジックが一つにまとまってるのでわかりやすい

28. <script>
export default {
data() {
return {
// Xのdata
// Yのdata
}
},
computed: {
// Yのcomputed
// Zのcomputed
},
methods: {
// Xのmethod
// Zのmethod
}
}
</script>
<script>
import { reactive, computed } from
'@vue/composition-api'
export default {
setup() {
// X機能
// Xのdeta
// Xのmethod
// Y機能
// Yのdata
// Yのcomputed
// Z機能
// Zのcomputed
// Zのmethod
return {X, Y, Z}
}
}
</script>
オプションベース Composition API

30. 再利用性の向上とは

31. 再利用性の向上 =
再利用性の向上とは
処理を切り分けて共通パーツ化しやすいか
(共通化したパーツをインポート)

32. 再利用性の向上 =
再利用性の向上とは
Vue 2(mixinを使った場合の問題点)
処理を切り分けて共通パーツ化しやすいか
(共通化したパーツをインポート)

33. 再利用性の向上 =
再利用性の向上とは
Vue 2(mixinを使った場合の問題点)
● コンポーネント側ではmxinの内容が把握しにくい
● コンポーネントや別のmixinでプロパティやメソッドの名前が競合す
る可能性がある
処理を切り分けて共通パーツ化しやすいか
(共通化したパーツをインポート)

34. <script>
import {mousePosition} from ‘../mixins/mousePosition’
export default {
mixins: [mousePosition],
data() { ~~},
methods: {~~}
}
</script>
export const mousePosition = {
data() { ~~},
methods: {~~}
}
}
mixins/mousePosition.js
components/CounterMouse.vue

35. <script>
import {mousePosition} from ‘../mixins/mousePosition’
export default {
mixins: [mousePosition],
data() { ~~},
methods: {~~}
}
</script>
export const mousePosition = {
data() { ~~},
methods: {~~}
}
}
mixins/mousePosition.js
components/CounterMouse.vue

36. <script>
import {mousePosition} from ‘../mixins/mousePosition’
export default {
mixins: [mousePosition],
data() { ~~},
methods: {~~}
}
</script>
export const mousePosition = {
data() { ~~},
methods: {~~}
}
}
mixins/mousePosition.js
components/CounterMouse.vue

37. <script>
import {mousePosition} from ‘../mixins/mousePosition’
export default {
mixins: [mousePosition],
data() { ~~},
methods: {~~}
}
</script>
export const mousePosition = {
data() { ~~},
methods: {~~}
}
}
mixins/mousePosition.js
components/CounterMouse.vue
このコンポーネントはmixinからどんな機能を
提供してもらっているのか推測できない

38. compositions/position.js
components/CounterMouse.vue
<script>
import { usePosition } from ‘../composition/position’
export default {
setup() {
const { position, updatePosition} = usePosition()
}
}
</script>
import {reactive} from ‘@vue/composition-api’
export const usePosition = () => {
const position = reactive({~~})
const updatePosition = () => {~~}
};
return { position, updatePosition }
}

39. compositions/position.js
components/CounterMouse.vue
<script>
import { usePosition } from ‘../composition/position’
export default {
setup() {
const { position, updatePosition} = usePosition()
}
}
</script>
import {reactive} from ‘@vue/composition-api’
export const usePosition = () => {
const position = reactive({~~})
const updatePosition = () => {~~}
};
return { position, updatePosition }
}

40. compositions/position.js
components/CounterMouse.vue
<script>
import { usePosition } from ‘../composition/position’
export default {
setup() {
const { position: mousePosition, updatePosition: updateMouse} = usePosition()
}
}
</script>
import {reactive} from ‘@vue/composition-api’
export const usePosition = () => {
const position = reactive({~~})
const updatePosition = () => {~~}
};
return { position, updatePosition }
}

41. compositions/position.js
components/CounterMouse.vue
<script>
import { usePosition } from ‘../composition/position’
export default {
setup() {
const { position: mousePosition, updatePosition: updateMouse} = usePosition()
}
}
</script>
import {reactive} from ‘@vue/composition-api’
export const usePosition = () => {
const position = reactive({~~})
const updatePosition = () => {~~}
};
return { position, updatePosition }
}
外部の関数からどのようなデータを貰ってるか
推測しやすい => 読みやすい

42. Vue Composition APIの設計
実際にアプリケーションに落とし込むには

43. Vue Composition APIの設計
実際にアプリケーションに落とし込むには
● 機能ごとに処理をわけれるということは、関数にして共通化できる
● setup()関数は、主にすべての構成関数が呼び出されるエントリポイント
として主に機能させる
● setup内で生成したリアクティブな変数を渡すことで、状態を保つ

45. ● 関数化で柔軟にコンポーネントを書くことができる
● ロジックをオプションベースではなく機能ベースで切り分ける
ことができる
● 保守性と再利用性の向上で読みやすいコードになる
まとめ

46. ● 他と組み合わせたらどうなるか(TypeScript、AtomicDedign)
● 公式サイトをもっと読み込んで理解できるように
課題