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
790
[社内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
21
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
76
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
710
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
150
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
99
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
220
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
870
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
350
Other Decks in Programming
See All in Programming
僕がつくった48個のWebサービス達
yusukebe
18
17k
offers_20241022_imakiire.pdf
imakurusu
2
360
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
150
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
230
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
150
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
130
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
Macとオーディオ再生 2024/11/02
yusukeito
0
160
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
GitHub's CSS Performance
jonrohan
1030
460k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
A Tale of Four Properties
chriscoyier
156
23k
Producing Creativity
orderedlist
PRO
341
39k
A Philosophy of Restraint
colly
203
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Being A Developer After 40
akosma
86
590k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
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 • ࢲͱ͔͔ΔൣғͰ͑ΔͷͰ ݸਓͱ͔Ͱؾܰʹઓͯ͠Έͯʂ