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
2.1k
NuxtJSの色々な共通化を試してみた話
tossyyukky
October 21, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
旅行プランAIエージェント開発の裏側
ippo012
2
930
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
個人軟體時代
ethanhuang13
0
330
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
760
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
Testing Trophyは叫ばない
toms74209200
0
890
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.1k
Bash Introduction
62gerente
615
210k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Speed Design
sergeychernyshev
32
1.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
GitHub's CSS Performance
jonrohan
1032
460k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Designing for humans not robots
tammielis
253
25k
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!!