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
tossyyukky
October 21, 2019
Programming
3
2k
NuxtJSの色々な共通化を試してみた話
tossyyukky
October 21, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
150
ふつうの技術スタックでアート作品を作ってみる
akira888
0
430
5つのアンチパターンから学ぶLT設計
narihara
1
160
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
650
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
0
3.2k
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
260
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
670
CursorはMCPを使った方が良いぞ
taigakono
1
220
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
750
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
39
1.9k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Language of Interfaces
destraynor
158
25k
BBQ
matthewcrist
89
9.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Designing Experiences People Love
moore
142
24k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Designing for humans not robots
tammielis
253
25k
Navigating Team Friction
lara
187
15k
How GitHub (no longer) Works
holman
314
140k
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!!