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
17
20200125_新人エンジニアが本音を語る会.pdf
jonakpkp
1
220
なんでReactやらVueやら、更にはRailsでもNode.jsが必要なの?
jonakpkp
0
40
Featured
See All Featured
Designing for Performance
lara
610
69k
Embracing the Ebb and Flow
colly
88
4.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
Designing Experiences People Love
moore
142
24k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
We Have a Design System, Now What?
morganepeng
53
7.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
How STYLIGHT went responsive
nonsquared
100
5.8k
Balancing Empowerment & Direction
lara
4
680
Context Engineering - Making Every Token Count
addyosmani
5
170
The Art of Programming - Codeland 2020
erikaheidi
56
14k
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໋
Ҏ্Ͱ͢ɻ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠