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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 ษڧ։࢝

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 ΋ͱ΋ͱͷࢥ૝͕ҧ͏

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

10 ࣮ࡍʹ৮ͬͯΈΔ

Slide 11

Slide 11 text

ͳΜͱͳ͘ͷॴײɿ஥ྑ͘ͳΕͦ͏ͳͱ͜Ζ • Scoped Styleが標準装備なのが良い • Reactだと何かライブラリ入れないと無理 • ドキュメントが超親切 • 他のフレームワークと比べても圧倒的に初心者に優しい • ミドルウェア入れるの簡単 • Firebase認証とかも簡単に入れられて便利 11

Slide 12

Slide 12 text

ͳΜͱͳ͘ͷॴײɿͭΒ͔ͬͨͱ͜Ζ • 関数型に慣れてると辛い • TS入れるためにVue-Class-Componentを使っているが、そもそもClassでコンポーネント書きたくない • ← にしたい • JSXでも書けるらしいけど… 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

15 Vue 3.x΁ͷظ଴

Slide 16

Slide 16 text

Vue Composition APIʢVue3.x RFCʣ 16

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

18 ·ͱΊ

Slide 19

Slide 19 text

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