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
120
20210611_awsecs_rev2.pdf
jonakpkp
0
17
20200125_新人エンジニアが本音を語る会.pdf
jonakpkp
1
210
なんでReactやらVueやら、更にはRailsでもNode.jsが必要なの?
jonakpkp
0
38
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
The Cult of Friendly URLs
andyhume
78
6.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Building an army of robots
kneath
304
45k
Designing for Performance
lara
608
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
How to Ace a Technical Interview
jacobian
276
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Into the Great Unknown - MozCon
thekraken
37
1.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cost Of JavaScript in 2023
addyosmani
49
7.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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໋
Ҏ্Ͱ͢ɻ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠