Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
jQuery -> React -> Vue と仕事で触った(予定込み)ので特徴を比較してみた
Search
jonakp
October 09, 2020
4
130
jQuery -> React -> Vue と仕事で触った(予定込み)ので特徴を比較してみた
社内勉強会資料
jonakp
October 09, 2020
Tweet
Share
More Decks by jonakp
See All by jonakp
生成AIキャッチアップ会__生成AIと共に働くために個人と組織の視点から_.pdf
jonakpkp
0
110
20210611_awsecs_rev2.pdf
jonakpkp
0
16
20200125_新人エンジニアが本音を語る会.pdf
jonakpkp
1
210
なんでReactやらVueやら、更にはRailsでもNode.jsが必要なの?
jonakpkp
0
37
Featured
See All Featured
Building Adaptive Systems
keathley
41
2.5k
Thoughts on Productivity
jonyablonski
69
4.5k
Rails Girls Zürich Keynote
gr2m
94
13k
Designing for Performance
lara
606
69k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
Practical Orchestrator
shlominoach
187
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
28
1.6k
Transcript
jQuery -> React -> Vue ͱ ࣄͰ৮ͬͨ(༧ఆࠐΈ)ͷͰ ಛΛൺֱͯ͠Έͨ
None
Vue React Λ͏ཧ༝ʁ jQuery ͱԿ͕ҧ͏ͷʁ Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ
ࠓ͢͜ͱ
࡞ͬͯΈͨαϯϓϧΞϓϦ શͯಉ͡ػೳͷ γϯϓϧͳTodoΞϓϦ
؆୯ͳσϞ
jQuery: ͘Β͍(ͨ·ʔʹ৮Δఔ) React: 1ఔ(΄΅ຖ) Vue: 3, 4(ಠֶɻͨͩ͠1िؒޙʹ͏৺ͮΓ) ֤ٕज़ʹର͢Δࢲͷशख़
ࠓ͞ͳ͍͜ͱ ɾjQueryपΓͷॻ͖ํ ɾReact/VueͷίΞػೳҎ֎ (Redux/Vuex/TypeScript/υΩϡϝϯτͷ ॆ࣮ etc…) ɾ֤ٕज़ͷਂ͍
ͦͷଞҙ ɾjQuery =ʮJSΛ༻͍ͨతͳDOMཧʯ ͱ͍͏ҙຯͰ͍ͬͯ·͢ ɾݸਓͷײΛؚΈ·͢
Q. Vue React Λ͏ཧ༝ʁ jQuery ͱͦΜͳʹҧ͏ͷʁ
A1. ಈతͳUIΛ࡞Δͷʹָ͔ͩΒ A2. ΘΓͱࠜຊతʹҧ͏
jQuery(on Rails) Ͱ࡞ͬͨTodoΞϓϦ slim(html)
jQuery(on Rails) Ͱ࡞ͬͨTodoΞϓϦ .slim(html) 5PEP-JTUͷத+4ͰՃ͑ͯ ͍ͨ͘ΊTMJN্ۭ 4+3Θͳ͍
ͬͯΔ͜ͱ submit͞Εͨࡍʹ… 1. Formೖྗ༗ແͷνΣοΫ 2. todoࣝผͷͨΊͷidΛࢉग़ 3. todoͷHTMLཁૉΛ࡞ 4. deleteϘλϯʹΠϕϯτՃ
5. ࡞ͨ͠HTMLΛDOMʹө .js
.js ͭΒΈϙΠϯτ ࠷ऴతʹͲΜͳݟͨʹͳ Δ͔͔Γʹ͍͘ .slim(html)
͜ΕΛղܾ͢Δͷ͕͍ͭ͜Β
ղܾखஈ ɾએݴతUI ɾԾDOM
VueͰ࡞ͬͨTodoΞϓϦ Todo.vue TodoList.vue TodoForm.vue
Todo.vue ݟͨ ঢ়ଶ ϩδοΫ
TodoList.vue 5PEPWVF͔Βɺ UPEPTΛड͚औΔ ࠷ऴతͳ5PEP-JTU ͷܗͷݟͨΛ એݴ͢Δ
એݴతUI ࠷ऴతͳݟͨΛએݴ͢Δ
ৗʹݟͨͷ࠷ऴܗΛએݴ͢Δ… -> Ϣʔβͷૢ࡞ͰͲ͕͜มΘͬͨͷ͔ؔ͠ͳ͍ -> ຖճHTMLશͯΛ࠶ඳը͢Δͬͯ͜ͱʁ -> ύϑΥʔϚϯεେৎʁ
ͦ͜Ͱొ͢Δͷ͕ ԾDOM
Ծ%0. %0.ͱରԠ͍ͨใΛ࣋ͭ +BWB4DSJQUͷΦϒδΣΫτ ࣮%0. ࣮ࡍʹ)5.-Ͱϒϥβ্ʹ ඳը͞ΕΔใ 7VF 3FBDUͷ ίʔυ ReactVueಉ͡
৽͍͠ ࣮%0. ৽͍͠ Ծ%0. ❌ Ϣʔβૢ࡞Λ࣮DOMʹ ద༻͢ΔΘ͚Ͱͳ͍
৽͍͠ ࣮%0. ৽͍͠ Ծ%0. ݹ͍ Ծ%0. ྆ऀͷ ࠩΛݕग़ ࠩͷΈΛ࣮%0.ʹద༻ ύϑΥʔϚϯε☺
Q1. Vue React Λ͏ཧ༝ʁ -> ಈతͳUIΛએݴతʹॻָ͚͔ͯͩΒ (ύϑΥʔϚϯεอূʂ) Q2. jQuery
ͱͦΜͳʹҧ͏ͷʁ -> એݴతUI/ԾDOMɺ ࠜຊతʹҟͳΔ
Vue React Λ͏ཧ༝ʁ jQuery ͱԿ͕ҧ͏ͷʁ Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ
ࠓ͢͜ͱ
Q. Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ
A. ͦΜͳݴ͏΄ͲมΘΒͳ͍Α͏ͳʁ (Vueʹ৮Εͯ1िؒະຬͷײ)
A(ଓ͖).Կʹॏ͖Λஔ͍͍ͯΔ͔ ҧ͏͔
Todo.tsx React Ͱ࡞ͬͨTodoΞϓϦ TodoList.tsx TodoForm.tsx
ݟͨ (એݴత) ঢ়ଶ ϩδοΫ Todo.tsx
Todo.vue ݟͨ ঢ়ଶ ϩδοΫ ݟͨ ঢ়ଶ ϩδοΫ Todo.tsx
ਖ਼গ͠ॻ͚ͩ͘ͳΒ ReactVue ͦΜͳʹมΘΒͳ͍ (վΊͯVueʹ৮Εͯ1िؒະຬͷײ)
Ծ%0. %0.ͱରԠ͍ͨใΛ࣋ͭ +BWB4DSJQUͷΦϒδΣΫτ ࣮%0. ࣮ࡍʹ)5.-Ͱϒϥβ্ʹ ඳը͞ΕΔใ 7VF 3FBDUͷ ίʔυ એݴత6*
ReactVueએݴతͳUI & ԾDOMɻ ͞Βʹݴ͑ίϯϙʔωϯτࢦ, σʔλϑϩʔ(΄΅)୯ํɻɻɻ
ͰͬͺΓҧ͏͋Δ
1. JavaScriptͱͷڑײ 2. ʮݟͨʯͷදݱʹର͢Δࢥ
JavaScriptͱͷڑײ Reactͱʹ͔͘ JSϑϨϯυϦʔ Vueগ͠JS͔Β ڑΛऔ͍ͬͯΔ
TodoForm.vue VueͰσΟϨΫ ςΟϒΛ͏͜ͱ ͰɺJavaScriptͷ هड़ྔ͕গͳΊͰ ॲཧΛ࣮ݱͰ͖Δ WNPEFMΛ͏ͱ ͜ͷ߹ ϑΥʔ Ϝʹೖྗͨ͠༰͕
ࣗಈͰө͞ΕΔ
TodoForm.tsx ReactͰ ಛผͳॻ͖ํΛ ֮͑ͳͯ͘ JavaScript Ͱ େମ͖ʹ Ͱ͖Δ ϑΥʔϜͷೖྗΠϕϯτ͕ى ͖ͨΒঢ়ଶΛߋ৽͢Δॲཧ
ʮݟͨʯͷදݱʹର͢Δࢥ VueUIΛ HTML+ॲཧͷຒΊࠐΈ Ͱදݱ͍ͯ͠Δ ReactUIΛ ؔͰදݱ͍ͯ͠Δ
Template(HTML)Λ ॻ͚ͻͱ·ͣಈ͘ Vueͷ࠷খ୯Ґ
React͋͘·Ͱ ؔΛهड़͢Δ Reactͷ࠷খ୯Ґ
Ծ%0. %0.ͱରԠ͍ͨใΛ࣋ͭ +BWB4DSJQUͷΦϒδΣΫτ ࣮%0. ࣮ࡍʹ)5.-Ͱϒϥβ্ʹ ඳը͞ΕΔใ 7VF 3FBDUͷ ίʔυ એݴత6*
VueReact࠷ऴతʹԾDOM(JavaScriptͷΦϒδΣΫτ) Λ࡞Δͱ͍͏؍ͰมΘΒͳ͍͕ɻɻɻ
Ծ%0. %0.ͱରԠ͍ͨใΛ࣋ͭ +BWB4DSJQUͷΦϒδΣΫτ TemplateΛ࡞ΔͱԾDOM(JSͷΦϒδΣΫτ)ʹ มͯ͘͠ΕΔΠϝʔδͷVue ม
Ծ%0. %0.ͱରԠ͍ͨใΛ࣋ͭ +BWB4DSJQUͷΦϒδΣΫτ JSͷؔͰԾDOM(JSͷΦϒδΣΫτ)Λ ੜ͢ΔΠϝʔδͷReact ੜ
ςϯϓϨʔτ(HTML) ॏࢹͷVue JavaScript & ؔ ॏࢹͷReact
ςϯϓϨʔτ(HTML) ॏࢹ͔ͩΒͦ͜ɻɻɻ ɾEasy ɾΘ͔Γ͍͢ ɾσβΠφʔ͞Μͱڠۀ͠қ͍ ɾֶशۂઢ͕؇͔ ɾ࠷ॳ͔ΒCSSͷαϙʔτ͕ް͍
JavaScript & ؔ ॏࢹ͔ͩΒͦ͜ɻɻɻ ɾSimple ɾ֮͑Δ͜ͱ͕গͳ͍ ɾTypeScriptͱ૬ੑ͕ྑ͍ ɾςελϒϧ ɾεέʔϥϏϦςΟ͕ߴ͍
ͳΔ΄Ͳʂ ͡Ό͋Ͳ͕͍͍ͬͪ ͷʁʁʁ
…ϊʔίϝϯτ
Q. Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ A. গ͠͏͚ͩͳΒͦΕ΄ͲมΘΒ ͳ͍͔ A. ॏࢹ͍ͯ͠Δͷͷҧ͍ҙࣝ͠
ͨํ͕ྑ͍
Vue React Λ͏ཧ༝ʁ jQuery ͱԿ͕ҧ͏ͷʁ Vue ͱ React ͬͯԿ͕ҧ͏ͷʁ
ࠓ͢͜ͱ
·ͱΊ
·ͱΊ )5.-͍͖ͩ͢ +BWB4DSJQU໋
Ҏ্Ͱ͢ɻ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠