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
Vue/Nuxt tutorial for Sendai
Search
Yuichiro MASUI
March 20, 2021
Education
0
160
Vue/Nuxt tutorial for Sendai
Yuichiro MASUI
March 20, 2021
Tweet
Share
More Decks by Yuichiro MASUI
See All by Yuichiro MASUI
ハッカソンで 作ったアプリを売却した話
masuidrive
0
660
DJ hands on for IT Engineers
masuidrive
1
180
自分の棚卸をして レジュメを書こう
masuidrive
5
2k
0から1ヶ月で DJになるまで
masuidrive
4
1.6k
Google Apps Scriptでbotを作る話
masuidrive
1
1.8k
Rails loves React
masuidrive
1
470
トレタの存在理由
masuidrive
0
200
18年でRubyから学んだこと - 関西Ruby会議 2017
masuidrive
3
2.3k
トレタの勤怠管理bot、miyamotoさん
masuidrive
0
380
Other Decks in Education
See All in Education
計算情報学研究室 (数理情報学第7研究室)紹介スライド (2025)
tomonatu8
0
540
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
190
Open Source Summit Japan 2025のボランティアをしませんか
kujiraitakahiro
0
730
JOAI2025講評 / joai2025-review
upura
0
170
Sponsor the Conference | VizChitra 2025
vizchitra
0
550
Are puppies a ranking factor?
jonoalderson
0
870
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
signer
PRO
2
1.7k
より良い学振申請書(DC)を作ろう 2025
luiyoshida
1
3.3k
Pythonパッケージ管理 [uv] 完全入門
mickey_kubo
20
15k
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
検索/ディスプレイ/SNS
takenawa
0
6.7k
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Thoughts on Productivity
jonyablonski
69
4.7k
4 Signs Your Business is Dying
shpigford
184
22k
The Invisible Side of Design
smashingmag
301
51k
Adopting Sorbet at Scale
ufuk
77
9.5k
RailsConf 2023
tenderlove
30
1.1k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Documentation Writing (for coders)
carmenintech
72
4.9k
Designing for humans not robots
tammielis
253
25k
How STYLIGHT went responsive
nonsquared
100
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Transcript
Vue / Nuxt Tutorial for Sendai Yuichiro MASUI @masuidrive Product
Founder & Engineer
@masuidrive Yuichiro MASUI
τϨλ ݩCTO
None
None
None
https://masuidrive.jp/resume Yuichiro MASUI (masuidrive) | Product Founder & Engineer
झຯDJͰ͢
None
None
None
None
None
օ͞ΜͷΛฉ͔͍ͤͯͩ͘͞ • HTML/CSSͷܦݧ • Javascript • ଞͷϓϩάϥϛϯάݴޠ • jQuery •
React
Frontendͷมભ • jQuery / Prototype.js DOMૢ࡞ • Angular /
Backbone.js MVCతͳϑϨʔϜϫʔΫ / ςετ • React / Vue Reactive / ViewϨΠϠʔͷΈ
1ը໘Ͱͷঢ়ଶભҠ͕ෳࡶ ͗ͯ͢ਓྨʹແཧ
Reactొ • 2010 - ෦ϦϦʔε • 2013/5 - Open SourceϦϦʔε
• 2015 - ReactNative
ΫϥΠΞϯτϩδοΫ αʔόαΠυੜ ϒϥβ ϩδοΫ (ίϯτϩʔϥ) ϦΫΤετ αʔό ΫϥΠΞϯτ Πϕϯτ (onSubmit)
React αʔόϩδοΫ HTMLੜ෦ (render) HTMLੜ෦ (ςϯϓϨʔτ) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (setState) ը໘Λදࣔ͢ΔͨΊͷঢ়ଶ (ςϯϓϨʔτม)
Vue.js • ݩAngular։ൃऀͷEvan You͕Founder • 2014/2ʹϦϦʔε • "I fi gured,
what if I could just extract the part that I really liked about Angular and build something really lightweight."
React vs Vue • VirtualDOM,Component,ReactiveͳͲجຊҰॹ • Reactͷํ͕७ਮ • Vueͪΐͬͱΰνϟΰνϟ •
྆ํͱجຊViewϨΠϠʔ͚ͩͰɺσʔλؔ ผͷπʔϧͱΈ߹͑ΘͤΔඞཁ͋Γ
ɹͳͥVueΛ͏ͷ͔ • ΫϥΠΞϯταΠυͰΔ͜ͱ͕૿େ • Ұͭͷը໘Ͱෳͷঢ়ଶ͕ಈ͘ • όʔδϣϯΞοϓ͕සൟʹߦΘΕΔ • εϚϗͳͲෳͷͷαϙʔτ •
ES6ͷߏจ͕͑Δ
ɹͳͥVueΛ͏ͷ͔ • ͬͱγϯϓϧʹ࡞Γ͍ͨ • ࠶ར༻ੑΛߴΊ͍ͨ • ϧʔϧΛܾΊ͍ͨ
ͳͥੲγϯϓϧͩͬͨͷ͔ • ը໘͕ঢ়ଶΛ࣋ͨͳ͍ • ը໘Λॻ͖͑ΔʹભҠͯ͠શମΛॻ͖ ͑Δ
jQuery • DOMΛૢ࡞͢Δ • ը໘ͷҰ෦͚ͩॻ͖͑Δ • Ͳ͔͜Βॻ͖͑ΒΕͨͷ͔Θ͔Βͳ͍
ݱࡏͷWeb • ը໘ͷ͋ͪͪ͜ͰΠϕϯτ͕ൃੜͯ͠ • ͕͋ͪͪ͜ඇಉظʹॻ͖͕͑ى͜Δ • όʔδϣϯΞοϓߴසͰ • େن
Ϣʔβͷ໊લ͕มߋ͞Εͨ߹ • jQueryͷ߹ɺϢʔβͷ໊લ͕Ͳ͜ʹهࡌ͞ Ε͍ͯΔ͔ɺidclassͰཧͯ͠ॻ͖͑Δ ඞཁ͕͋Δɻ දࣔͱߋ৽͕ผͷΈɻ • Vueը໘Λ͏Ұճॻ͖͢
ԋश
Nuxt.js • Vue + Vuex + Vue-Router + asyncData +
ServerSideRendering • ࠓVueͷඪ४ςϯϓϨʔτ͕Α͘Ͱ͖ͯΔ͔ Βલ΄Ͳॏཁ͡Όͳ͍ • ͰσΟϨΫτϦߏαϯϓϧ͕ࢀߟʹͳ Δ
Vuex • https://vuex.vuejs.org/ja/guide/ • VueͰΘΕΔσʔλετΞ • ReactͰ͍͏Redux • େ͖ͳάϩʔόϧม •
ετΞΛߋ৽͢Δͱؔ͢Δίϯϙʔωϯτ͕ࣗ ಈతʹߋ৽͞ΕΔ
Vue-router • URLͱݺͼग़͞ΕΔ.vueϑΝΠϧΛϚοϐϯά • pages/ϑΥϧμͷԼ͕ͦͷ··ݟ͑Δ • pages/items/_id.vueͰϫΠϧυΧʔυ this.$route.params.idͰݺͼग़ͤΔ •
ϦϯΫ<a>͡Όͳͯ͘<NuxtLink to=“”/>ͰுΔ
asyncData • https://ja.nuxtjs.org/docs/2.x/features/data- fetching/#async-data • ඇಉظͰσʔλΛͱͬͯ͘ΔΈ • APIݺͼग़͕͠؆୯ʹͳΔ
ServerSideRendering • αʔόͰVueΛ࣮ߦͯ͠HTMLΛੜͯ͠ૹΔ • ݕࡧʹҾ͔͔ͬΔ • ಡΈࠐΈ͕͘ͳΔ • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ •
ߟ͑ͯඳ͘ͷͩΔ͍
ԋश
૯ׅ