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
820
[社内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
79
ある日オレオレフレームワークを作りたくなったぞ/Want to Create Oreore Framework
fruitriin
1
130
fishとfzfはじめて 豊かになりました / fish and fzf is good
fruitriin
1
880
Chrome Devtools使いこなしたい/I want to master devtool
fruitriin
3
1.5k
Event Stage - 真面目に作ったけど 全くウケなくてクソだったアプリ/I made new service but they say shit
fruitriin
0
170
読み上げチャット+映像配信サービス作ってるけど…/I develop Text-to-Speach chat and broadcast Savice but...
fruitriin
0
150
とある自社開発の苦楽の軌跡/Trajectory of a Certain In-house Development Effort
fruitriin
1
250
動画再生速度を変更するコンポーネントを作ろうとして諦めた話/talk about give up to create video with playback-rate controller
fruitriin
6
940
Soft Skillsから伝えたい新人時代の個人開発技術選定/Selecting Stack for Personal Development as a from Soft Skills
fruitriin
2
360
Other Decks in Programming
See All in Programming
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
100
実践AIチャットボットUI実装入門
syumai
7
2.3k
どの様にAIエージェントと 協業すべきだったのか?
takefumiyoshii
1
530
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
160
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
160
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
430
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
kwzr
1
660
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
deka_morita
0
160
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
3
950
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
190
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
970
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
697
190k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cost Of JavaScript in 2023
addyosmani
53
9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
RailsConf 2023
tenderlove
30
1.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Designing for humans not robots
tammielis
254
25k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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 • ࢲͱ͔͔ΔൣғͰ͑ΔͷͰ ݸਓͱ͔Ͱؾܰʹઓͯ͠Έͯʂ