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

知った気になる Vue Composition API

Cc6c9e1dcb8e40af8dd1d49b78c0c720?s=47 TomPenguin
January 21, 2020

知った気になる Vue Composition API

Cc6c9e1dcb8e40af8dd1d49b78c0c720?s=128

TomPenguin

January 21, 2020
Tweet

Transcript

  1. 知った気になる Vue Composition API あおた  ともひろ 青田 智寛 2020/01/21

  2. ❶ 自己紹介

  3. ❶ 自己紹介 あおた ともひろ      青田 智寛(28歳) 株式会社アーセス JSON色付け係(フロントエンドエンジニア) 前職は百貨店ワイン売り場

    タイ人と日本人のハーフ 2児の父 出家経験あり
  4. ❷ コンポジションAPI ?

  5. ❷ コンポジション API ? Vue 3.x から 導入される新しいシンタックス

  6. ❷ コンポジション API ? また覚えること増えたよ

  7. ❷ コンポジション API ? 今日覚えて欲しいこと

  8. ❷ コンポジション API ? 最悪覚えなくても大丈夫

  9. ❷ コンポジション API ? よりスケーラブル、 メンテナブルに 開発できるよう考案された オプショナルなAPI

  10. ❷ コンポジション API ? コンポーネントのロジックの 柔軟な整理が可能になる

  11. ❸ 背景を知る

  12. ❸ 背景を知る https://github.com/vuejs/rfcs/pull/42

  13. ❸ 背景を知る ぎゃ〜

  14. ❸ 背景を知る 背景❶ コードベースが肥大化してくると ジャンプがひどくてつらい

  15. ❸ 背景を知る https://github.com/vuejs/rfcs/pull/42

  16. ❸ 背景を知る ロジックの関心毎に 関数を分割することができる

  17. ❸ 背景を知る 背景❷ TSのサポートがしんどい

  18. ❸ 背景を知る コンテキストがすべて thisにバインドされるため 型推論が難しい

  19. ❹ 使い方

  20. ❹ 使い方 見やすいように データや関数などを定義して

  21. ❹ 使い方 templateで使いたい データや関数をreturnする

  22. ❹ 使い方 だけ

  23. ❹ 使い方 https://vue-composition-api-rfc.netlify.com/#basic-example

  24. ❹ 使い方 https://vue-composition-api-rfc.netlify.com/#basic-example templateは いつも通り

  25. ❹ 使い方 https://vue-composition-api-rfc.netlify.com/#basic-example thisがない

  26. ❹ 使い方 https://vue-composition-api-rfc.netlify.com/#basic-example 自由な場所に データや メソッドを 定義できる

  27. ❹ 使い方 いやいや 今までとそんなに 変わらないじゃん

  28. ❹ 使い方 例えば マウスのポジションだけ 返却するロジック

  29. ❹ 使い方 https://vue-composition-api-rfc.netlify.com/#logic-extraction-and-reuse

  30. ❹ 使い方 ただの jsファイル https://vue-composition-api-rfc.netlify.com/#logic-extraction-and-reuse

  31. ❹ 使い方 それを

  32. ❹ 使い方 こう使うだけ

  33. ❹ 使い方 マウスイベント まわりの 臭い処理を カプセル化

  34. ❹ 使い方 ロジックのみを 再利用できる

  35. ❺ プロダクション コードに書いてよい?

  36. ❺ プロダクションコードに書いてよい? まだ使うのは やめた方が良さそう

  37. ❺ プロダクションコードに書いてよい? ベストプラクティスが まだない‍♂

  38. ❺ プロダクションコードに書いてよい? 正式なリリースが されていないので 破壊的な変更の可能性もあり

  39. ❺ プロダクションコードに書いてよい? もちろんお試しはOK! Vue 2.xでも使用できる プラグインもあります https://github.com/vuejs/composition-api

  40. ❻ まとめ

  41. ❻ まとめ とりあえず このあとのビールは おいしく飲めそう

  42. 参照 ・https://vue-composition-api-rfc.netlify.com/ ・https://github.com/vuejs/composition-api ・https://github.com/vuejs/rfcs/pull/42