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
780
[社内LT]おいでよNuxtの森/Wellcome to Nuxt
Nuxtもいいぞ
果物リン
May 20, 2020
Tweet
Share
More Decks by 果物リン
See All by 果物リン
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
76
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
690
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.4k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
140
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
95
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
220
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
860
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
340
SFCで挑戦するFunctional Component/Functional Component Challenge at SFC
fruitriin
3
1.5k
Other Decks in Programming
See All in Programming
Introduce dRuby
ledsun
0
110
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
360
Повторное использование кода в ML: почему ML-пайплайны могут помочь?
lamodatech
0
160
[KR] Server Driven Compose With Firebase
skydoves
2
200
What is TDD?
urakawa_jinsei
1
220
自分だけの世界を創るクリエイティブコーディング / Creative Coding: Creating Your Own World
chobishiba
2
1.1k
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
420
Infrastructure as Code でセキュリティを楽にしよう!
konokenj
6
1.4k
実践Dash - 手を抜きながら本気で作るデータApplicationの基本と応用 / Dash for Python and Baseball
shinyorke
2
270
CSC509 Lecture 02
javiergs
PRO
0
160
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
5
550
"Swarming" をコンセプトに掲げるアジャイルチームのベストプラクティス
boykush
2
250
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
3
230
Optimizing for Happiness
mojombo
375
69k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Testing 201, or: Great Expectations
jmmastey
38
7k
Music & Morning Musume
bryan
46
6.1k
What's in a price? How to price your products and services
michaelherold
243
11k
What the flash - Photography Introduction
edds
67
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
41
9.2k
WebSockets: Embracing the real-time Web
robhawkes
59
7.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 • ࢲͱ͔͔ΔൣғͰ͑ΔͷͰ ݸਓͱ͔Ͱؾܰʹઓͯ͠Έͯʂ