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
NuxtJSの色々な共通化を試してみた話
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
tossyyukky
October 21, 2019
Programming
3
2.1k
NuxtJSの色々な共通化を試してみた話
tossyyukky
October 21, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
朝日新聞のデジタル版を支えるGoバックエンド ー価値ある情報をいち早く確実にお届けするために
junkiishida
1
380
PostgreSQL を使った快適な go test 環境を求めて
otakakot
0
450
Agent Skills Workshop - AIへの頼み方を仕組み化する
gotalab555
15
8.1k
株式会社 Sun terras カンパニーデック
sunterras
0
2k
AI駆動開発の本音 〜Claude Code並列開発で見えたエンジニアの新しい役割〜
hisuzuya
4
480
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
yamatoya
0
520
maplibre-gl-layers - 地図に移動体たくさん表示したい
kekyo
PRO
0
200
NOT A HOTEL - 建築や人と融合し、自由を創り出すソフトウェア
not_a_hokuts
2
590
どんと来い、データベース信頼性エンジニアリング / Introduction to DBRE
nnaka2992
1
220
atmaCup #23でAIコーディングを活用した話
ml_bear
4
750
Claude Codeセッション現状確認 2026福岡 / fukuoka-aicoding-00-beacon
monochromegane
4
400
Rails Girls Tokyo 18th GMO Pepabo Sponsor Talk
yutokyokutyo
0
200
Featured
See All Featured
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.5k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
500
ラッコキーワード サービス紹介資料
rakko
1
2.5M
How to Talk to Developers About Accessibility
jct
2
150
Designing for humans not robots
tammielis
254
26k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
How to build an LLM SEO readiness audit: a practical framework
nmsamuel
1
660
The Cost Of JavaScript in 2023
addyosmani
55
9.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.3k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.4k
Transcript
/695+4ͷ ৭ʑͳڞ௨ԽΛࢼͯ͠Έͨ 2019/10/21 ϊΠϯגࣜձࣾ Toshiyuki Ihara @tossy_yukky
DPOTUQSPpMF\ OBNFb5PTIJZVLJ*IBSB` BDDPVOUb!UPTTZ@ZVLLZ` DPNQBOZbϊΠϯגࣜձࣾ` KPCbαʔόαΠυʹগ͠ͷΠϯϑϥͱগ͠ͷϑϩϯτΤϯυ` MPWF<bKBWBTDSJQU`
b"84` b៉ྷͳίʔυ` b៉ྷͳ6*69` b࠷ۙͪΐͬͱ&MJYJS`> ^ Profile
None
Agenda ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ Export/Import Mixin Plugin Middleware
લఏ NuxtJS Ver 2.10.x Express 4.x
ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ ڈɺผͷҊ݅ͰVue.jsΛॳΊͯ৮͍ͬͯͨ࣌ɺɺɺ
None
ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ ͍ͭઌɺಉ͡Α͏ʹMixinͰ͍ͬͯͨͱ͜Ζɺ
Μʁ͜Εͬͯຊʹίϯϙʔωϯτ͕ ͍͍࣋ͬͯͨػೳͳΜ͚ͩͬɾɾɾʁ
ͳΜͰ͜ͷςʔϚʹͨ͠ͷ͔ վΊͯௐͯΈͨ
None
None
ͬͺͪΌΜͱௐΑ͏ʂʂ
Export/Import ී௨ʹJSϞδϡʔϧΛexport and import
Export/Import ϝϦοτ ͍͜͠ͱΛߟ͑ͣʹ͑Δɻ σϝϦοτ ྑ͘ѱ͘ຊʹͨͩͷJSϞδϡʔϧͳͷͰɺಛผͳ͜ͱͰ͖ͳ͍ɻ ͍Ͳ͜Ζ NuxtJSɺVue.jsͳͲʹґଘ͠ͳ͍୯७ͳػೳͷڞ௨Խɻ
Export/Import class Animal { constructor(greeting) { this.greeting = greeting; }
say() { return this.greeting; } } export default Animal; lib/Animal.js
Export/Import <template> <div>{{say()}}</div> </template> <script> import Animal from ‘@/lib/Animal’ export
default { … methods: { say() { return new Animal(‘meow meow’).say() } } } </script> page/say.vue
Mixin VueίϯϙʔωϯτΛ֦ு͢Δ(ެࣜͰ “Ϛʔδ” ͱݺ শʣɻ ͷͰɺϛοΫεΠϯͷద༻ઌίϯϙʔωϯτʹରͯ͠ɺ֤ छϓϩύςΟʢdata, methodsͳͲͳͲʣ͕ॾʑ·Δͬͱ “Ϛʔδ” ͞ΕΔɻ
Mixin ϝϦοτ ෳίϯϙʔωϯτͰಉ͡Α͏ͳػೳΛఏڙ͍ͨ͠߹ͳͲʹ༗ޮɻ άϩʔόϧͳద༻Ͱ͖ΔͷͰɺશίϯϙʔωϯτͰಉ͡ػೳΛఏڙ͍ͨ͠߹ͰରԠՄೳɻ σϝϦοτ ͍ํΛߟ͑ͳ͍ͱɺʮ୯७ͳڞ௨ͷؔʯΛద༻͍͚ͤͨͩ͞ͳͷʹɺ͍͍ͪͪVueίϯϙʔ ωϯτͦͷͷ͕֦ு͞ΕΔ͜ͱʹͳͬͯ͠·͏ɻ ίϯϙʔωϯτʹউखʹϝιου͕ੜ͑ΔʢΑ͏ʹݟ͑ΔʣͷͰɺॳݟͩͱͭΒ͍͔ɻ ͍Ͳ͜Ζ ίϯϙʔωϯτͷػೳͱͯ͠ڞ௨Խ͍ͨ͠ͷ͕͋Δ߹ɻ
Mixin export default { methods: { show() { alert(‘popup!’); }
} } mixins/popup.js
Mixin <template> <div> <button @click=‘show()’>Show Popup</button> </div> </template> <script> import
Popup from ‘@/mixins/popup’ export default { … mixins: [Popup], … } </script> page/use_mixin.vue
Plugin NuxtJSΞϓϦέʔγϣϯʹରͯ͠ػೳΛ֦ு͢Δ VueΠϯελϯεɺίϯςΩετɺ྆ํͳͲɺػೳͷೖઌ Λબ͢Δ͜ͱ͕Ͱ͖Δ ೖͨ͠ઌͰͲ͔͜ΒͰػೳΛࢀর͢Δ͜ͱ͕Ͱ͖Δ
Plugin ϝϦοτ ҰՕॴͰઃఆ͑ͯ͞͠͠·͑ΞϓϦέʔγϣϯͷͲ͔͜ΒͰࢀরͰ͖Δ σϝϦοτ ෦ద༻Ͱ͖ͳ͍ͷͰɺ͋·Γʹେ͖ͳϓϥάΠϯΛ࡞ͬͯ͠·͏ͱϏϧ υ͞Εͨapp.jsͷංେԽ͕ݒ೦ ͍Ͳ͜Ζ ΞϓϦέʔγϣϯશମͰ͏Α͏ͳେنͳڞ௨ॲཧɻ
Plugin class I18n { t(key) {…} } export default ({
app }, inject) => { const i18n = new i18n(); // ίϯςΩετʹಥͬࠐΉ߹ app.i18n = i18n; // Ͳ͔͜ΒͰ͍͍ͨ߹ inject(‘i18n’, i18n); } plugins/i18n.js
Plugin plugins: [ … ‘~plugins/i18n.js’, … ], nuxt.config.js
Plugin page/use_sample.vue <template> <div>{{$i18n.t(‘text.key’)}}</div> </template> <script> export default { …
methods: { getText() { return this.$i18n.t(‘text.key’); } } } </script>
Middleware ڞ௨Խͱ͍͏ΑΓʮը໘ͷϨϯμϦϯάલʹ࣮ߦ͞ΕΔ ػೳʯΛఆٛͰ͖Δɻ routerͰઃఆ͢ΕશମʹɺͦΕͧΕͷϨΠΞτϖʔ δίϯϙʔωϯτͰઃఆ͢ΕݸผʹఆٛՄೳɻ ࣮ߦॱɺઃఆൣғͷ͍ॱɺrouter > layout > page
ͷॱɻ
Middleware ϝϦοτ ೝূͳͲɺ֤ը໘Ͱ࣮ߦͱ͍͏ΑΓৗ࣌ભҠ࣌ʹ࣮ߦ͍ͤͨ͞ͷͳͲΛఆٛͯ͠ ͓͘͜ͱ͕Ͱ͖Δɻ σϝϦοτ ίϯϙʔωϯτͷϥΠϑαΠΫϧ͕࢝·ΔલͳͷͰɺͪΖΜίϯϙʔωϯτͷthis ͑ͳ͍ɻ ͍Ͳ͜Ζ ͍Ζ͍Ζͳը໘Ͱɺදࣔલʹಉ͡Α͏ʹνΣοΫ͓͖͍߲͕ͯͨ͋͠Δ߹ͳͲɻ
Middleware export default ({ store, redirect }) => { if
(!store.state.isLoggedIn) { redirect(‘/login’); } } middleware/auth.js
Middleware // routing͕มΘΔͨͼʹ࣮ߦ͞ΕΔ router: { middleware: ['auth'], }, nuxt.config.js
Middleware // ͜ͷϖʔδͰ͚ͩmiddleware͕࣮ߦ͞ΕΔ <template> <div></div> </template> <script> export default {
… middleware: ‘auth’, … } </script> page/use_middleware.vue
·ͱΊ NuxtJSʹ͓͍ͯɺॲཧͷڞ௨Խखஈ͕৭ʑ͋Δɻ ͦΕͧΕϝϦσϝɺ͍ಓ͕ͪΌΜͱ͋ΔͷͰɺڞ௨Խ͠ ͍ͨॲཧͲ͜Ͱߦ͍͍ͨॲཧͳͷ͔ʹΑͬͯํ๏Λ͍ ͚͍ͯ͘ඞཁ͕͋Δɻ
Masashi Ogawa Yuki Terashima Reishi Narisada Yuka Nozaki Takuya Kato
Special Thanks!
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
ϊΠϯגࣜձࣾͰɺ • NuxtJSɺVue.jsɺͦͷଞϑϩϯτΤϯυ͕ͬͭ ΓΓ͍ͨํΛืूͯ͠·͢ʂ • UI/UXҰॹʹߟ͍͖͍͑ͯͨͰ͢ʂ • https://noin.tv We're Hiring!!