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.5k
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
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
430
著作権と授業に関する出前講習会/dme-2025-05-01
gnutar
0
200
Gesture-based Interaction - Lecture 6 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
仮説の取扱説明書/User_Guide_to_a_Hypothesis
florets1
4
300
探究的な学び:Monaca Educationで学ぶプログラミングとちょっとした課題解決
asial_edu
0
380
『会社を知ってもらう』から『安心して活躍してもらう』までの プロセスとフロー
sasakendayo
0
230
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
2
460
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
300
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
OpenRobomaster 中国のロボットコンテスト 日本連携の可能性
takasumasakazu
0
440
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
130
自己紹介 / who-am-i
yasulab
PRO
3
5.2k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Documentation Writing (for coders)
carmenintech
71
4.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
How to train your dragon (web standard)
notwaldorf
92
6.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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Λੜͯ͠ૹΔ • ݕࡧʹҾ͔͔ͬΔ • ಡΈࠐΈ͕͘ͳΔ • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ •
ߟ͑ͯඳ͘ͷͩΔ͍
ԋश
૯ׅ