vue_js_composition_api

Transcript

1. Vue.js の新機能 Composition APIを 使ってみた Tried using Composition API which is a new feature of Vue.js
2. Hello! I am Hirofumi Horiuchi. Corp: Job: IoT Engineer Hobby: Camp, Watting Football 　 @h_reader 2
3. “ Vue.js 3.x は現在 Beta版が リリースされています。 Vue.js 3.x is currently in beta release.
4. “ Vue.js 3.x の Composition API を使ってみました I tried using the Composition API of Vue.js 3.x
5. “ Composition API を利用すると VueComponent内のscriptの 書き方が変わります How to write script in Vue Component changes when using Composition API.
6. “ 現在の書き方とComposition APIを 使った書き方で カウンターアプリを作ってみました I tried to make a counter application with the current writing style and the writing style using Composition API.
7. 7 カウンターアプリUI Counter app UI count up ボタン -> カウントを1上げる count up button -> Add 1 to the count Count -> 現在のカウント Count -> Current count. Double -> カウントの2倍 Count -> Double the count.
8. 現在の書き方 Current writing style
9. Composition APIの書き方 How to write with Composition API
10. “ なんだか面倒だな。。。 It's troublesome...
11. “ そんなふうに考えていた時期が 俺にもありました There was also a time when I was thinking that way.
12. “ Composition APIおじさんは こう言っています。 He says:
13. “ Composition APIを使うと Component間のロジックを抽出して 簡単に再利用できるよ！ The Composition APIs make it more straightforward to extract and reuse logic between components.
14. “ 先ほどのロジックを 抽出してみましょう。 Let's extract the logic.
15. ロジックを抽出して別ファイルへ Extract logic to another file use_increment.js
16. ロジックを抽出して別ファイルへ Extract logic to another file component
17. “ なるほど！これはいいかも I got it! This might be good.
18. “ Vuexを使う場合はどうなるんだろう？ What if I use Vuex?
19. Vuex を使う Use Vuex store
20. Vuex を使う Use Vuex component
21. Vuex を使うロジックを抽出 Extract the logic that uses Vuex use_increment_store.js
22. Vuex を使うロジックを抽出 Extract the logic that uses Vuex component
23. まとめ Summary Composition API は 機能ごとにComponentのロジックを分 割するためのAPI Composition API is an API for dividing the component logic by function. 今まで複数のComponentで書いていた同じロジックをDRYに 書けそう I wrote the same logic to multiple components, but I can write to DRY. VSCode is the amazing editor.
24. おまけ extra 24
25. “ Composition API の公式に載っていた とても良かったコード Very good code on the official Composition API site.
27. 27 Thanks! Any questions? You can find me at ▪ @h_reader