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
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
990
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
52
32k
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
220
Outline View in SwiftUI
1024jp
1
110
PLoP 2024: The evolution of the microservice architecture pattern language
cer
PRO
0
1.6k
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
Golang と Erlang
taiyow
8
1.9k
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
CSC305 Lecture 13
javiergs
PRO
0
130
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4k
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう(KoR2024)
ymtdzzz
4
1.5k
Featured
See All Featured
Speed Design
sergeychernyshev
24
570
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
4 Signs Your Business is Dying
shpigford
180
21k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
A designer walks into a library…
pauljervisheath
202
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Building Applications with DynamoDB
mza
90
6.1k
Rails Girls Zürich Keynote
gr2m
93
13k
Building Adaptive Systems
keathley
38
2.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Navigating Team Friction
lara
183
14k
Designing Experiences People Love
moore
138
23k
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 • ࢲͱ͔͔ΔൣғͰ͑ΔͷͰ ݸਓͱ͔Ͱؾܰʹઓͯ͠Έͯʂ