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
150
Vue/Nuxt tutorial for Sendai
Yuichiro MASUI
March 20, 2021
Tweet
Share
More Decks by Yuichiro MASUI
See All by Yuichiro MASUI
ハッカソンで 作ったアプリを売却した話
masuidrive
0
650
DJ hands on for IT Engineers
masuidrive
1
170
自分の棚卸をして レジュメを書こう
masuidrive
5
2k
0から1ヶ月で DJになるまで
masuidrive
4
1.5k
Google Apps Scriptでbotを作る話
masuidrive
1
1.8k
Rails loves React
masuidrive
1
460
トレタの存在理由
masuidrive
0
190
18年でRubyから学んだこと - 関西Ruby会議 2017
masuidrive
3
2.3k
トレタの勤怠管理bot、miyamotoさん
masuidrive
0
380
Other Decks in Education
See All in Education
自己紹介 / who-am-i
yasulab
PRO
3
5.1k
生成AI
takenawa
0
980
FinOpsスキルの効率的な上げ方 #ochacafe
chacco38
1
170
実務プログラム
takenawa
0
910
ふりかえり研修2025
pokotyamu
0
660
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
110
Case Studies and Course Review - Lecture 12 - Information Visualisation (4019538FNR)
signer
PRO
1
2k
Are puppies a ranking factor?
jonoalderson
0
630
IMU-00 Pi
kanaya
0
360
データ分析
takenawa
0
980
生成AIとの上手な付き合い方【公開版】/ How to Get Along Well with Generative AI (Public Version)
handlename
0
410
Data Processing and Visualisation Frameworks - Lecture 6 - Information Visualisation (4019538FNR)
signer
PRO
1
2.4k
Featured
See All Featured
Music & Morning Musume
bryan
47
6.6k
Become a Pro
speakerdeck
PRO
28
5.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Git: the NoSQL Database
bkeepers
PRO
430
65k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Automating Front-end Workflow
addyosmani
1370
200k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
90
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
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Λੜͯ͠ૹΔ • ݕࡧʹҾ͔͔ͬΔ • ಡΈࠐΈ͕͘ͳΔ • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ •
ߟ͑ͯඳ͘ͷͩΔ͍
ԋश
૯ׅ