Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

E249db000b3645ef39bcc3dec6478dd3?s=47 watsuyo_2
March 17, 2021
150

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

E249db000b3645ef39bcc3dec6478dd3?s=128

watsuyo_2

March 17, 2021
Tweet

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〇〇なdの名前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