Vue Composition APIのコードを見やすくする

Transcript

1. 【iCARE Dev Meetup #19】Front-End 最 新アーキテクチャ Vue Composition APIのコー ドを⾒やすくする 2021/03/17 Tsuyoshi Hirosawa @watsuyo_2 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 1
2. #icare_meetup のツイート or YouTube のコメント で 質問、感想等のリアクションを随時募集中 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 2
3. 誰が喋ってる？ @watsuyo_2 Tsuyoshi Hirosawa Front-End Engineer Nuxt.js Vue.js TypeScript 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 3
4. 誰が喋ってる？ ひたすら ミートアップの宣伝してました 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 4
5. 誰向け？ Composition APIをこれから導⼊する⼈ Composition APIを導⼊していて、他社の知⾒を知りたい⼈ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 5
6. 宣伝 iCAREのフロントエンドは Vue Composition API TypeScript GraphQL で開発しています 詳細はWantedlyの採⽤ページ https://www.wantedly.com/projects/54 9145 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 6
7. iCARE と Vue Composition API 2020年10⽉ iCAREに⼊社 既にComposition APIで書かれているコードが有りました 現在は、フロントエンドメンバーは全員がComposition APIを触ったことがある 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 7
8. 今⽇話すこと CompositionAPIのおさらい Composition APIを⽤いた開発の課題 フロントエンド組織にとってComposition APIとは？ CompositionAPIのコードを⾒やすくする提案 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 8
9. CompositionAPIのおさらい 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 9
10. CompositionAPIのおさらい メリット ロジックの抽出と再利⽤しやすい モジュール化しやすい 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 10
11. Options API 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 11
12. Composition API TypeSctiptの世界 reactive関数でstateを定義 関数・incrementを定義 → retunする Vue.js側でimport 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 12
13. CompositionAPIのおさらい モジュール化しやすい 再利⽤性が⾼く、Reactivityを保ったコード use〇〇といったモジュールに切り出す 状態と振る舞い(更新処理など)を画⾯から切り離して書きやすくなった （隠蔽する設計にしやすくなった） 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 13
14. そんなにコード量は 変わっていない ? 出典: https://github.com/vuejs/rfcs/blob/mas ter/active-rfcs/0013-composition- api.md 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 14
15. Composition APIを⽤いた開発の課題や悩み 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 15
16. Composition APIを⽤いた開発の課題や悩み Options API時代のスキルが役に⽴たないのでは? Vue.jsとはいえ、学習コストもかかるし、実装コストも⾼いのでは？ ビジネス要求と setup()やロジックをどこに書くのがいいのか？ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 16
17. Options API時代のスキルが役に⽴たないのでは? Vue.jsとはいえ、学習コストもかかるし、実装コストも⾼いのでは？ 社内勉強会、ペアプロで解決 Composition APIで実装するかの判断をルール化 基本はComposition APIで書く スケジュールや実装者スキルによってはOptions APIで書く 現在のiCAREのフロントエンドメンバーは全員Composition APIの 実装を経験済み 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 17
18. 21Stepで体得 Vue.jsハンズオン 勉強会参加者は、全員買いました 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 18
19. ここでタイトル回収... Vue CompositionAPIのコードを⾒やすくするには ？ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 19
20. Composition API コンポーネントの作り⽅ の基本 setup() ref() reactive() computed() etc... 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 20
21. これでも動きますが、 Composition APIのメリットほぼ無いですよね 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 21
22. setup()がfatにするのは本末転倒だし 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 22
23. setup()のダイエット 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 23
24. たしかにダイエットはできたが... 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 24
25. Vueファイルにロジックが存在する時点で、 責務の分離ができていないのでは ？ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 25
26. TS(TypeScript)ファイルにロジックを寄せよう 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 26
27. 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 27
28. Vueファイルからロジックは消えた！ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 28
29. Vueファイルからロジックは消えた！ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 29
30. 改めて。。。 iCAREで、Vue CompositionAPIを書いてみた経験を 踏まえてコードを⾒やすくするためのTips 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 30
31. ①ピュアなTypeScriptの別ファイルにロジックを分ける setup()内でしか使⽤できないingect、provideに注意 全てをTSファイルに分ければ良いわけではない そのコードがたまたま重複しただけかもしれない 今後、そのロジックに変更が⼊るかもしれない 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 31
32. ②Vue.jsの世界とTypeScriptの世界を分けて考える Options APIまでは、ほとんどがVue.jsの世界だった Vue.jsだから動くコードから、TypeScript(React)でも動くコードへ ここが学習コストが上がった所以 ？ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 32
33. ③use◦◦とon〇〇な関数のTS切り出しルールを明確に する 何でもかんでも関数名をuse◦◦にしがち use**を使うパターン 値と振る舞い(更新処理など) on〇〇 それ以外のクリックイベントや状態を持たない関数は、on〇〇なｄの名前rにする 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 33
34. ④無理してComposition APIで書かない しかし、TypeScriptはマストで書く ビジネス観点やスケジュール、実装者スキルを踏まえて Composition API or Options APIを選択する Vue.extendsでTypeScriptは使える → よりよい型推論を求めて、Composition APIへ 【iCARE Dev Meetup #19】Front-End 最新アーキテクチャ 34