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

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

Avatar for watsuyo_2 watsuyo_2
March 17, 2021
1
300

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

Avatar for watsuyo_2

watsuyo_2

March 17, 2021
Tweet

More Decks by watsuyo_2

See All by watsuyo_2
Migrating to Vue 2.7 for safe and improve development efficiency / 安全に開発効率を上げるための Vue_2.7 移行
Avatar for watsuyo_2 watsuyo_2
0
500
OSS の変遷を振り返る
Avatar for watsuyo_2 watsuyo_2
1
160
Notion RSS Readerを OSSとして公開した話
Avatar for watsuyo_2 watsuyo_2
2
1.8k
Notion RSS Reader
Avatar for watsuyo_2 watsuyo_2
0
780
iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション
Avatar for watsuyo_2 watsuyo_2
1
6.4k
iCARE と Vue.js と コンポーネント設計 と デザインシステムの話
Avatar for watsuyo_2 watsuyo_2
1
580
Vue3 Breaking Changes
Avatar for watsuyo_2 watsuyo_2
1
220

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
21k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
233
140k
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.6k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
137
7k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
523
40k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k

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