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
170
Vue/Nuxt tutorial for Sendai
Yuichiro MASUI
March 20, 2021
Tweet
Share
More Decks by Yuichiro MASUI
See All by Yuichiro MASUI
Coding Agent用チケットシステム - ticket.sh
masuidrive
0
5
ハッカソンで 作ったアプリを売却した話
masuidrive
0
670
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
480
トレタの存在理由
masuidrive
0
210
18年でRubyから学んだこと - 関西Ruby会議 2017
masuidrive
3
2.3k
Other Decks in Education
See All in Education
小学校女性教員向け プログラミング教育研修プログラム「SteP」の実践と課題
codeforeveryone
0
130
社外コミュニティと「学び」を考える
alchemy1115
2
190
日本の情報系社会人院生のリアル -JAIST 修士編-
yurikomium
1
130
フィードバックの伝え方、受け身のココロ / The Way of Feedback: Words and the Receiving Heart
spring_aki
1
150
2025年度春学期 統計学 第12回 分布の平均を推測する ー 区間推定 (2025. 6. 26)
akiraasano
PRO
0
160
DIP_1_Introduction
hachama
0
170
2025年度春学期 統計学 第11回 分布の「型」を考える ー 確率分布モデルと正規分布 (2025. 6. 19)
akiraasano
PRO
0
180
JOAI2025講評 / joai2025-review
upura
0
440
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
700
Test-NUTMEG紹介スライド
mugiiicha
0
210
授業レポート:共感と協調のリーダーシップ(2025年上期)
jibunal
0
110
AWSと共に英語を学ぼう
amarelo_n24
0
160
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Balancing Empowerment & Direction
lara
4
660
Agile that works and the tools we love
rasmusluckow
330
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
BBQ
matthewcrist
89
9.8k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Fireside Chat
paigeccino
40
3.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Λੜͯ͠ૹΔ • ݕࡧʹҾ͔͔ͬΔ • ಡΈࠐΈ͕͘ͳΔ • ηΩϡϦςΟʹؾΛ͚ͭΔඞཁ͕͋Δ •
ߟ͑ͯඳ͘ͷͩΔ͍
ԋश
૯ׅ