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
[社内LT]おいでよNuxtの森/Wellcome to Nuxt
Search
果物リン
May 20, 2020
Programming
2
810
[社内LT]おいでよNuxtの森/Wellcome to Nuxt
Nuxtもいいぞ
果物リン
May 20, 2020
Tweet
Share
More Decks by 果物リン
See All by 果物リン
Electron+Vue+Swift=真のデスクトップアプリ / How to create "Really" desktop app using Electron
fruitriin
0
50
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
110
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
810
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
160
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
130
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
240
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
910
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Programming
See All in Programming
The Evolution of the CRuby Build System
kateinoigakukun
1
730
Memory API : Patterns, Performance et Cas d'Utilisation
josepaumard
1
150
状態と共に暮らす:ステートフルへの挑戦
ypresto
3
950
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
1.2k
「”誤った使い方をすることが困難”な設計」で良いコードの基礎を固めよう / phpcon-odawara-2025
taniguhey
0
170
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
180
note の Elasticsearch 更新系を支える技術
tchov
0
170
Dissecting and Reconstructing Ruby Syntactic Structures
ydah
2
1.3k
AIコーディングの理想と現実
tomohisa
33
35k
Fiber Scheduler vs. General-Purpose Parallel Client
hayaokimura
1
190
KANNA Android の技術的課題と取り組み
watabee
0
140
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
1.1k
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Speed Design
sergeychernyshev
29
910
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Cult of Friendly URLs
andyhume
78
6.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
13
1.4k
Code Reviewing Like a Champion
maltzj
523
40k
[RailsConf 2023] Rails as a piece of cake
palkan
54
5.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
A designer walks into a library…
pauljervisheath
205
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
41
2.3k
Transcript
おいでよNuxtの森 தౡ ⁜ גࣜձࣾελσΟετ 2020 5/20 Studist Lightning Talks #13
ΰϦΰϦͷϑϩϯτΤϯυWebτʔΫͰ͢ WebΤϯδχΞ͡Όͳ͍ਓΰϝϯω Important notice: ͋ͱ৽͍͠ͳ͍ͷͰNuxtʹ͍ͭͯͬͯΔਓεϧʔͰ͓̺
自己紹介 • தౡ ⁜ • ΦϯϘʔσΟϯάվળʢ௨শϩεΠϯΰʣ • Vue͍͍ͧ • RubyͱRailsʹΘ͔
• ࣾLTొஃ3ճ࿈ଓୡʂ
Nuxt ͷ fetch = Vue Router ͷ beforeRoute() ʁ
ͦͷṖΛ͖͋Β͔ʹ͘͢ զʑΞϚκϯԞ͔…
͔Θͳ͔ͬͨʂ
ͦͷલʹNuxtͬͯͳΜͩΑ
おいでよNuxtの森
Nuxtとは • ࡶʹ͍͏ͱRubyʹ͓͚ΔRuby on Railsɺ Vueʹ͓͚ΔϨʔϧͬΆ͍ͷ • VueͱVue RouterͱVuexͱSSRͱSSGΛ ͍͍ײ͡ʹ͚ͬͭͯ͘Ұݸʹͨͭ͠
• ϑϨʔϜϫʔΫʢVueϑϨʔϜϫʔΫͰʁ͍͍…
3ͭͷϞʔυ SSR, SSG, SPA
SSRって何 • αʔόʔαΠυϨϯμϦϯάͷ͜ͱ • ΊͬͪΌϨΞͳϨΞϦςΟͰͳ͍ • ʮϞόΠϧͱ͔ϑΥʔεύϫʔ͕Γͳ͍ͷͰ ɹαʔόʔଆͰHTML࡞ͬͨ΄͏͕͍͍ͷͰʂʢ໊Ҋʯ • ޠΔͱͦΕ͚ͩͰ1ηογϣϯͰ͖ΔͷͰলུ
• σϑΥϧτͰSSRʢUniversalϞʔυʣͳΜͩͳ͜Ε͕
SSGって何 • ੩త(ελςΟοΫ)αΠτδΣωϨʔτͷ͜ͱ • ఆٛΛݩʹશ෦ͷύεͷίϯςϯπΛ ͦΕͧΕϑΝΠϧͱͯ͠ੜ͢ΔϞʔυ • ϒϩάͱ͔ʹ͍ͯΔ
SPAモードもあるよ • γϯάϧϖʔδΞϓϦέʔγϣϯ • SSRSSG͍Βͳ͍ΑʂͬͯਓSPAϞʔυͰΑ͍ • ී௨ʹVueΛ͏ͷͱҰॹ • αʔόʔαΠυͷੈքʹยಥͬࠐ·ͳ͍͍ͯ͘ͷͰγϯϓϧ •
Ϗϧυͨ͠ϑΝΠϧΛS3ͱ͔ʹ্͛ͪΌ͏ײ͡ • OGPʁALBͰUAஅͯ͠OGP༻ͷαʔόʔʹඈͦ͏ͥ
Nuxt͍͍ͱ͜Ζ
統合されたVue Routerが神 • Router༻ͷϑΝΠϧͳΜͯ͏͍Βͳ͍ʂ • pagesσΟϨΫτϦʹϑΝΠϧΛஔ͘ͱ ࣗಈతʹύεղऍͯ͘͠Ε·͢ʂ • มʹ͍ͨ͠ύεϑΝΠϧ໊ʢσΟϨΫτϦ໊ʣΛ _
Ͱ࢝ΊΔͱύϥϝʔλͱͯ͠ $route.params ʹೖΔ
→ thread/123/25 → thread/12/all → /user/30 → /user/myself → /hello
ϧʔςΟϯάͷྫ
組み込みのLayouts機構 • Layouts σΟϨΫτϦʹஔ͘ίϯϙʔωϯτ • Pages ίϯϙʔωϯτݶఆͰϨΠΞτΛࢦఆͰ͖Δ • ϔομʔͱαΠυόʔͱϝΠϯίϯςϯπɺΈ͍ͨͳ •
ͬͯΔ͜ͱSlotΈ͍ͨͳײ͚ͩ͡Ͳݟ௨͕͠Α͍ • Vue RouterͱίϯϙʔωϯτΛຐվͨ͠ײ͢͡Δ
Vuexがちょっとすごい • ϑΝΠϧΛஔ͚ͩ͘Ͱ ʮ໊લۭ͖ؒϞδϡʔϧʯͱͯ͠Πϯϙʔτͯ͘͠ΕΔ • ͜ͷ͏Ε͠Έ໘͕ͳ͍ఔ • ͋ͱSSRॳճͷΈઈରಡΈࠐ·ΕΔActionͱ͔͋Δ • SSRதͷ࣮ߦ݁ՌΛΫϥΠΞϯτʹ͖࣋ͬͯͯ͘ΕΔ
·͋SSR͠ͳ͍ͳΒޡ͔ࠩͳ
増えるライフサイクルフック • fetch • SSRʢ·ͨϖʔδදࣔલʣʹ࣮ߦ͞ΕΔϝιου • SPAϞʔυͳΒৗʹϖʔδදࣔલʹ࣮ߦͯ͘͠Εͯศར • validate •
falseͩͱΤϥʔϖʔδʹભҠ͢Δϝιου • middleware, pluginͳͲͳͲ
気になる学習曲線は? • Nuxtͷݟ͕͋Δਓ͕ۙ͘ʹ͍ΔͳΒΑ͍νϣΠεͰʁ • SPAϞʔυͳΒΉͱ͜Ζ͕গͳͯ͘Α͍ͷͰ • SSRϞʔυͷຊ൪ӡ༻ࣄલ४උ͕͔ͬ͠Γඞཁ • VueॳݟͰNuxtઓɺVueͷͳͷ͔Nuxtͷͳͷ͔ Γ͚ʹΉͱࢥ͏ͷͰݸਓతʹ͋·ΓΦεεϝ͠ͳ͍
まとめ • VueΛ͍͍ײ͡ʹϨʔϧʹͷͤΔͷ͕Nuxt • ࢲͱ͔͔ΔൣғͰ͑ΔͷͰ ݸਓͱ͔Ͱؾܰʹઓͯ͠Έͯʂ