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
Updates on MLS on Ruby (and maybe more)
sylph01
1
160
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
210
ECS初心者の仲間 – TUIツール「e1s」の紹介
keidarcy
0
110
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
2
160
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
220
パッケージ設計の黒魔術/Kyoto.go#63
lufia
2
340
Namespace and Its Future
tagomoris
6
650
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
130
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
330
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
Featured
See All Featured
A better future with KSS
kneath
239
17k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Speed Design
sergeychernyshev
32
1.1k
Building Applications with DynamoDB
mza
96
6.6k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Designing for humans not robots
tammielis
253
25k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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!!