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
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
400
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
PicoRuby on Rails
makicamel
2
130
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
700
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
140
効率的な開発手段として VRTを活用する
ishkawa
0
140
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
How to train your dragon (web standard)
notwaldorf
96
6.1k
Git: the NoSQL Database
bkeepers
PRO
430
65k
For a Future-Friendly Web
brad_frost
179
9.8k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
We Have a Design System, Now What?
morganepeng
53
7.7k
Why Our Code Smells
bkeepers
PRO
336
57k
Into the Great Unknown - MozCon
thekraken
40
1.9k
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!!