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
78
20210611_awsecs_rev2.pdf
jonakpkp
0
13
20200125_新人エンジニアが本音を語る会.pdf
jonakpkp
1
170
なんでReactやらVueやら、更にはRailsでもNode.jsが必要なの?
jonakpkp
0
36
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
GraphQLとの向き合い方2022年版
quramy
43
13k
What's new in Ruby 2.0
geeforr
340
31k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
Clear Off the Table
cherdarchuk
91
320k
Automating Front-end Workflow
addyosmani
1365
200k
Six Lessons from altMBA
skipperchong
26
3.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
Statistics for Hackers
jakevdp
794
220k
Designing for humans not robots
tammielis
248
25k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
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໋
Ҏ্Ͱ͢ɻ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠