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
660
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
470
トレタの存在理由
masuidrive
0
190
18年でRubyから学んだこと - 関西Ruby会議 2017
masuidrive
3
2.3k
トレタの勤怠管理bot、miyamotoさん
masuidrive
0
380
Other Decks in Education
See All in Education
マネジメント「される側」 こそ覚悟を決めろ
nao_randd
10
5.3k
JPCERTから始まる草の根活動~セキュリティ文化醸成のためのアクション~
masakiokuda
0
170
予習動画
takenawa
0
3.2k
Tutorial: Foundations of Blind Source Separation and Its Advances in Spatial Self-Supervised Learning
yoshipon
1
110
Gaps in Therapy in IBD - IBDInnovate 2025 CCF
higgi13425
0
480
2025年度春学期 統計学 第3回 クロス集計と感度・特異度,データの可視化 (2025. 4. 24)
akiraasano
PRO
0
120
OpenAI Education Forum 資料「教育と生成AI ~事例から見えるこれからの活用~」
luiyoshida
2
760
実務プログラム
takenawa
0
3k
生成AI時代教育とICT支援員への期待
o_ob
0
290
ふりかえり研修2025
pokotyamu
0
1.1k
プレゼンテーション実践
takenawa
0
3k
미국 교환학생 가서 무료 홈스테이 살면서 인턴 취업하기
maryang
0
100
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
123
52k
Bash Introduction
62gerente
614
210k
Git: the NoSQL Database
bkeepers
PRO
430
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The World Runs on Bad Software
bkeepers
PRO
68
11k
YesSQL, Process and Tooling at Scale
rocio
172
14k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
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Λੜͯ͠ૹΔ • ݕࡧʹҾ͔͔ͬΔ • ಡΈࠐΈ͕͘ͳΔ • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ •
ߟ͑ͯඳ͘ͷͩΔ͍
ԋश
૯ׅ