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

React使いがVueと仲良くなるためにやったこと

E5ab6eb9fc8de68bf1610c7ad0c86155?s=47 texdeath
October 17, 2019

 React使いがVueと仲良くなるためにやったこと

今までの業務でReactばかり書いてきた僕が新しい職場でNuxt・Vueを書くことになったので、触ってみた所感や新しいバージョンへの期待をまとめました。

E5ab6eb9fc8de68bf1610c7ad0c86155?s=128

texdeath

October 17, 2019
Tweet

Transcript

  1. 3FBDU࢖͍͕7VFͱ ஥ྑ͘ͳΔͨΊʹ΍ͬͨ͜ͱ 1

  2. ๏ ৿ాɹউॣ ๏ ϑϩϯτΤϯυΤϯδχΞ ๏ 3FBDU/PEF7VF /VYU  ๏ 7VFྺ͸ϲ݄ͪΐ͍͘Β͍

    ๏ 5XJUUFS!UFYEFBUI 2
  3. Agenda 1. なぜVueを書くことになったか 2. 仲良くなれそうなところ 3. つらいところ 4. Vue3.xへの期待 5.

    まとめ 3
  4. ͜Ε·Ͱͷܦྺ • React/ReduxでSPA開発 • 業務の60%以上React/Reduxでのツール開発 • 残りは設計とか運用とか調査とか… • 結構何でもやってた 4

  5. ͳͥVueΛॻ͘͜ͱʹͳ͔ͬͨ • 転職 • 何でも屋さんだったので、フロントエンド に集中したかった • フロントエンドやクリエイティブコーディ ングをやりたかった •

    転職先ではVueも扱えないといけない 5
  6. 6 ษڧ։࢝

  7. 7 ษڧ࢝͠Ίͯ ͙͢ࢥͬͨ͜ͱ

  8. 8 ΋ͱ΋ͱͷࢥ૝͕ҧ͏

  9. ͦΕͧΕͷΠϝʔδͷҧ͍ͷཧղ͔Βೖͬͨ 9 ॊೈ HTMLΛ֦ு͢ΔΠϝʔδ ॳݟʹ༏͍͠ ݫ֨ JavaScriptΛ֦ு͢ΔΠϝʔδ ॳݟʹͱ͖ͬͭʹ͍͘

  10. 10 ࣮ࡍʹ৮ͬͯΈΔ

  11. ͳΜͱͳ͘ͷॴײɿ஥ྑ͘ͳΕͦ͏ͳͱ͜Ζ • Scoped Styleが標準装備なのが良い • Reactだと何かライブラリ入れないと無理 • ドキュメントが超親切 • 他のフレームワークと比べても圧倒的に初

    心者に優しい • ミドルウェア入れるの簡単 • Firebase認証とかも簡単に入れられて便利 11
  12. ͳΜͱͳ͘ͷॴײɿͭΒ͔ͬͨͱ͜Ζ • 関数型に慣れてると辛い • TS入れるためにVue-Class-Componentを使っ ているが、そもそもClassでコンポーネント 書きたくない • <element></element> ←

    <element />にしたい • JSXでも書けるらしいけど… 12
  13. 13 ৽͘͠௥Ճ͞ΕΔ ػೳΛ஌Δ

  14. ৽͘͠௥Ճ͞ΕΔػೳΛ஌Δ 14

  15. 15 Vue 3.x΁ͷظ଴

  16. Vue Composition APIʢVue3.x RFCʣ 16

  17. setupؔ਺࢖͑͹ؔ਺ܕͬΆ͘ॻ͚Δ 17 React Hooksʹࣅͯͯ͞Βʹ஥ྑ͘ͳΕͦ͏

  18. 18 ·ͱΊ

  19. ·ͱΊ •それぞれの思想の違いを理解することが大事 •Vueの公式ドキュメントがとても親切で好き •Vue Composition APIがすごく楽しみ 19