細かすぎて伝わらないVue3RFC選手権

VuejsOsaka#3で発表した内容です。
タイトルに特に意味はないです。

Transcript

1. 細かすぎて伝わらない Vue3RFC選手権 morifuji koudai
2. • 名前 ◦ morifuji ◦ twitter : @marooon88 • 仕事 ◦ atma株式会社 ◦ PHP/Nodejs/Vuejs • 趣味 ◦ kotlin→Rust(勉強中) ◦ switchのインディーゲーム ▪ katana zero ▪ The friends of Ringo Ishikawa ▪ moon 自己紹介
3. Vue3
4. 目的 来るべきVue3のリリースに向けて Vue3のRFCを覗きみてみましょう
5. 目的 RFCとは？ • Request for Comments（リクエスト フォー コメンツ、略称：RFC） • コメント募集の意 • Vue.jsではrfcsリポジトリにプルリクエストを投げると提出できる
6. 目的 話題になっているRFC Function-based Component API Conversion（コメント）数=760, Commits数=32 https://github.com/vuejs/rfcs/pull/42 https://dev.to/danielelkington/vue-s-darkest-day-3fgh
7. 目的 N番煎じ
8. 目的 隠れたRFCに絞って調べて見ました • Vue3に関する知見を得る • どういう内容がRFCになるのかを理解する ※この発言は個人の見解であり所属する組織の見解ではありません ※個別のRFCの内容を批評しているわけではありません ※英語苦手なので超絶意訳です
9. 目的 • Global API Treeshaking By Evan you • Proposal for new slots syntax By Evan you • Proposal for dynamic directive arguments By Evan you • Implicit return initial values By sebhochuli • Dispatch & Broadcast API By wspl
10. Global API Treeshaking By Evan you
11. Global API Treeshaking By Evan you RFCのURL：https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md Vue 2.x Vue 3
12. Global API Treeshaking By Evan you なぜ?
13. Global API Treeshaking By Evan you 不要なコードをビルドしてサイズを大きくしたくないから
14. 不要なコードをビルドしてサイズを大きくしたくないから • Tree Shaking ◦ 不要なコードを削除する ◦ Webpackのビルドで行われる • Vue2.Xだと、APIを使わない場合でもビルドされる ◦ 必要な時だけビルドされるように • 影響を受けるAPI ◦ Vue.nextTick ◦ Vue.observable ◦ Vue.version ◦ Vue.compile (only in full builds) ◦ Vue.set (only in compat builds) ◦ Vue.delete (only in compat builds) Global API Treeshaking By Evan you Vue 2.x Vue 3
15. Global API Treeshaking By Evan you 採択された？
16. Global API Treeshaking By Evan you ‍♂
17. Proposal for new slots syntax By Evan you
18. Proposal for new slots syntax By Evan you 1. slot-scopeのディレクティブがv-slotに統一 ◦ slot-scope=”xxxx” → v-slot=”xxxx” 2. v-slotはslotを渡すcomponent自身のみで定義が可能 ◦ fooコンポーネントのv-slotは、fooコンポーネントでのみ定義が可能 RFCのURL：https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md Vue 2.x Vue 3
19. Proposal for new slots syntax By Evan you なぜ?
20. 1. slot-scopeのディレクティブがv-slotに統一 Propsを受け取る場合も受け取らない場合もSlotはSlot。だから記法を統一し概念も統 一すべき（超意訳） • A slot may or may not receive props, but they are all just slots. With this conceptual unification, having slot and slot-scope being two special attributes seems unnecessary, and it would be nice to unify the syntax under a single construct as well. Proposal for new slots syntax By Evan you
21. 2. v-slotはslotを渡すcomponent自身のみで定義が可能 可読性が悪い Proposal for new slots syntax By Evan you
22. 2. v-slotはslotを渡すcomponent自身のみで定義が可能 可読性が悪い Proposal for new slots syntax By Evan you Vue 2.x Vue 3
23. Proposal for new slots syntax By Evan you 採択された？
24. Proposal for new slots syntax By Evan you ‍♂
25. Proposal for dynamic directive arguments By Evan you
26. Proposal for dynamic directive arguments By Evan you • ディレクティブのkeyの動的変更の記法が簡潔に RFCのURL：https://github.com/vuejs/rfcs/blob/dynamic-directive-arguments/active-rfcs/0000-dynamic-directive-arguments.md
27. Proposal for dynamic directive arguments By Evan you なぜ?
28. 1. そもそもこのテクニックが限られたユーザーにしか知られていないから 2. 内部的により効率的に扱えるから Proposal for dynamic directive arguments By Evan you
29. 1. そもそもこのテクニックが限られたユーザーにしか知られていないから `v-bind` および `v-on` に渡す値がObject型であることを知らないと実装できない 2. 内部的により効率的に扱えるから Proposal for dynamic directive arguments By Evan you
30. 1. そもそもこのテクニックが限られたユーザーにしか知られていないから `v-bind` および `v-on` に渡す値がObject型を知らないと実装できない Proposal for dynamic directive arguments By Evan you
31. Proposal for dynamic directive arguments By Evan you 採択された？
32. Proposal for dynamic directive arguments By Evan you ‍♂
33. Proposal for dynamic directive arguments By Evan you どうでもいいこと
34. Proposal for dynamic directive arguments By Evan you Evan youでも仕様が漏れる
35. Proposal for dynamic directive arguments By Evan you カスタムディレクティブに関する指摘がありRFC更新
36. Proposal for dynamic directive arguments By Evan you 誰だって仕様漏れがある
37. Implicit return initial values By sebhochuli
38. Implicit return initial values By sebhochuli • ディレクティブのkeyの動的変更の記法が簡潔に RFCの URL：https://github.com/sebhoc huli/rfcs/blob/implicit-return-initial-v alues/active-rfcs/0000-implicit-retur n-initial-values.md Vue 3（Before）
39. Implicit return initial values By sebhochuli valueで定義された変数は暗黙的に returnしたことにしましょう Vue 3（After） RFCの URL：https://github.com/sebhoc huli/rfcs/blob/implicit-return-initial-v alues/active-rfcs/0000-implicit-retur n-initial-values.md
40. なぜ? Implicit return initial values By sebhochuli
41. 記載がなかった Implicit return initial values By sebhochuli
42. 書かれていなかった.... おそらくreturnを記述するための手間を省くため？ Implicit return initial values By sebhochuli
43. Implicit return initial values By sebhochuli 採択された？
44. Implicit return initial values By sebhochuli
45. Implicit return initial values By sebhochuli 理由（一部抜粋） • returnが省略された場合はundefinedが返ることはJavascriptの仕様 ◦ それを変えるにはコンパイルのステップが必要になる • それほどのメリットを感じられない
46. Dispatch & Broadcast API By wspl
47. Dispatch & Broadcast API By wspl • $dispatchメソッド ◦ 上位階層のコンポーネン ト全てに発火 • $broadcastメソッド ◦ 子・孫コンポーネントに 発火 RFCの URL：https://github.com/vuejs/rfcs/pull /43/files Vue 3
48. Dispatch & Broadcast API By wspl • $dispatchメソッド ◦ 上位階層のコンポーネン ト全てに発火 • $broadcastメソッド ◦ 子・孫コンポーネントに 発火 RFCの URL：https://github.com/vuejs/rfcs/pull /43/files Rootコンポーネント ItemAコンポーネント ItemB コンポーネント Childコンポーネント $dispatch ex) Childコンポーネントでdispatchした場合
49. Dispatch & Broadcast API By wspl • $dispatchメソッド ◦ 上位階層のコンポーネン ト全てに発火 • $broadcastメソッド ◦ 子・孫コンポーネントに 発火 RFCの URL：https://github.com/vuejs/rfcs/pull /43/files Rootコンポーネント ItemAコンポーネント ItemB コンポーネント Childコンポーネント $broadcast ex) Rootコンポーネントでbroadcastした場合
50. Dispatch & Broadcast API By wspl なぜ?
51. 様々なシナリオで便利だから Dispatch & Broadcast API By wspl
52. Dispatch & Broadcast API By wspl 採択された？
53. Dispatch & Broadcast API By wspl
54. Dispatch & Broadcast API By wspl 理由（一部抜粋） • すでにVue1で導入されたがVue2で廃止になった歴史がある ◦ https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced • Vuexなどのライブラリを使うことでdispatch/broadcastの脆弱性なしで実装できる • 開発者で簡単に実装作れる
55. まとめ • RFCはざっくりしたものでも提出していい ◦ 実現可能性がなくても通るかも？ • RFCのフォーマットが仕様の記述方法として綺麗、 ◦ サマリ ◦ 動機・必要性 ◦ 今までとの違い ◦ 詳細仕様 • RFCを出すだけではなくconversation(コメント)で議論することも有益 ◦ 仕様の選択肢をemojiで投票することもある ▪ https://github.com/vuejs/rfcs/pull/4#issuecomment-455928311 ▪ https://github.com/vuejs/rfcs/pull/2#issuecomment-454584258 • Evan youでも仕様が漏れる ◦ 僕が書いた仕様が漏れるのも当たり前
56. ご静聴ありがとうございました