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
140
jQuery -> React -> Vue と仕事で触った(予定込み)ので特徴を比較してみた
社内勉強会資料
jonakp
October 09, 2020
Tweet
Share
More Decks by jonakp
See All by jonakp
生成AIキャッチアップ会__生成AIと共に働くために個人と組織の視点から_.pdf
jonakpkp
0
130
20210611_awsecs_rev2.pdf
jonakpkp
0
18
20200125_新人エンジニアが本音を語る会.pdf
jonakpkp
1
220
なんでReactやらVueやら、更にはRailsでもNode.jsが必要なの?
jonakpkp
0
41
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Thoughts on Productivity
jonyablonski
70
4.9k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Typedesign – Prime Four
hannesfritz
42
2.8k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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໋
Ҏ্Ͱ͢ɻ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠