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
StorybookでモジュールモードのVuex storeを利用する / Use Mod...
Search
Roadagain
November 21, 2019
Programming
0
1.1k
StorybookでモジュールモードのVuex storeを利用する / Use Modules mode Vuex store in Storybook
Yumemi.vue #3 LT登壇資料です
Roadagain
November 21, 2019
Tweet
Share
More Decks by Roadagain
See All by Roadagain
@slack/bolt on Cloud Functions for Firebase
roadagain
2
980
HL-Report コントラクト開発裏話 / Developing Contracts of HL-Report
roadagain
1
680
Rustでオブジェクト指向エクササイズやってみた / OOP exercise in Rust
roadagain
0
420
RegExp the lifehack
roadagain
0
110
Other Decks in Programming
See All in Programming
Effect の双対、Coeffect
yukikurage
5
1.4k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
44
29k
XSLTで作るBrainfuck処理系
makki_d
0
210
Haskell でアルゴリズムを抽象化する / 関数型言語で競技プログラミング
naoya
17
4.9k
GoのGenericsによるslice操作との付き合い方
syumai
3
680
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
140
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
400
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
840
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
GoのWebAssembly活用パターン紹介
syumai
3
10k
技術同人誌をMCP Serverにしてみた
74th
0
240
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
190
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Six Lessons from altMBA
skipperchong
28
3.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Language of Interfaces
destraynor
158
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to train your dragon (web standard)
notwaldorf
92
6.1k
A designer walks into a library…
pauljervisheath
206
24k
Writing Fast Ruby
sferik
628
61k
Typedesign – Prime Four
hannesfritz
42
2.7k
Transcript
StorybookͰ ϞδϡʔϧϞʔυͷVuex storeΛ ར༻͢Δ Roadagain
ࣗݾհͷ༻ҙ͕ ؒʹ߹Θͳ͔ͬͨΒ TwitterΛ։͘εϥΠυ https://twitter.com/ringoh72
ࣗݾհ Roadagain (Twitter: @ringoh72) גࣜձࣾϞόΠϧϑΝΫτϦʔ ࡢ10ͿΓʹࣃҩऀߦ͖·ͨ͠
ຊ
͋ΔNuxt.jsͷϓϩδΣΫτͰ VuexΛ͍࢝Ίͨ
ϞδϡʔϧϞʔυ • Nuxt.js͕ࣗಈͰVuex storeΛ࡞ΔϞʔυ • state, getters, actions, mutationsΛ ݸผͰexport͢Δ
• σΟϨΫτϦߏ͕moduleʹͳΔ https://ja.nuxtjs.org/guide/vuex-store/#ϞδϡʔϧϞʔυ
ΫϥγοΫϞʔυ • Nuxt.jsͰैདྷͷVuex storeΛѻ͏Ϟʔυ • store/index.jsͰVuex storeΛexport͢Δ • Nuxt 3Ͱഇࢭ༧ఆ
https://ja.nuxtjs.org/guide/vuex-store/#ΫϥγοΫϞʔυ
͔ͤͬͩ͘͠ ϞδϡʔϧϞʔυͰͬͯΈ͍ͨ
ͦͯ͠Ϳ͔ͭΔ Storybookͷน
StorybookͷVuex • αϙʔτ͞Ε͍ͯΔ͕ѻ͍͕গ͠໘ • storyͰVuex storeͷΠϯελϯεΛ͢ ඞཁ͕͋Δ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
StorybookͷVuex • αϙʔτ͞Ε͍ͯΔ͕ѻ͍͕গ͠໘ • storyͰVuex storeͷΠϯελϯεΛ͢ ඞཁ͕͋Δ • ϞδϡʔϧϞʔυ…ແཧͰʁ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
๚Εͨޫ໌ https://storybook.js.org/docs/guides/guide-vue/#step-3-create-the-config-file
require.context • webpack͕ఏڙ͢Δಛघͳrequire • σΟϨΫτϦͷϑΝΠϧ໊ΛҰׅऔಘ͠ɺ ͦͷ··requireͰ͖Δ༏Εͷ https://webpack.js.org/guides/dependency-management/#requirecontext
ߟ͑ͨ͜ͱ require.contextͰϑΝΠϧ໊ΛऔಘͰ͖Δ “/“ ͷ༗ແͰ్த͔Ͳ͏͔அͰ͖Δ →͍͍ײ͡ʹ࠶ؼॻ͚͍͚ΔͷͰʁ
࣮ࡍʹͬͯΈͨ
storybook-with-moduled-vuex
storeͷߏஙؔ
storeͷߏங
ಈ࡞આ໌
ಈ࡞આ໌ 1. require.contextͰϑΝΠϧ໊ΛҰׅऔಘ 2. ϑΝΠϧ໊͝ͱʹrequireͯ͠ ϞδϡʔϧΛऔಘ 3. ϑΝΠϧ໊Λݟ֤ͯϞδϡʔϧΛஔ
“counter.js”ͳͷͰ ͦͷ··moduleʹͰ͖Δ counter: { namespaced: true, state, getters, actions, mutations
}
ಈ࡞આ໌: ͷ߹ Ϟδϡʔϧల։ͯ͠ऴΘΓ { counter: { namespaced: true, state, getters,
actions, mutations } }
“form/text.js” form͔Β ߋʹજͬͨmodule͕͋Δ form: { namespaced: true, module: { text:
{ namespaced: true, state, getters, actions, mutations } } }
ಈ࡞આ໌: ࢠ࣋ͪͷ߹ 1. ࣗͷkeyͱࢠͷkeyΛׂ “form/text.js” → “form” “text.js”
ಈ࡞આ໌: ࢠ࣋ͪͷ߹ 2. Vuex moduleͷܗΛ࡞Δ { parentKey: { namespaced: true,
module: {} } }
ಈ࡞આ໌: ࢠ࣋ͪͷ߹ 3. ܗΛ৽ͨͳrootͱͯ͠࠶ؼ { parentKey: { namespaced: true, module:
{} // ͕͜͜৽͍͠root } }
࣮Nuxt.js෦Ͱ ࣅͨΑ͏ͳ࣮Λ͍ͯͨ͠ https://github.com/nuxt/nuxt.js/blob/838bacf/packages/vue-app/template/store.js
༧Ί༻ҙͨ͠ͷ͕ ͪ͜ΒʹͳΓ·͢
·ͱΊ • ϞδϡʔϧϞʔυ࠶ݱՄೳ • ͱ͍͏͔ॻ͍ͯͨΒຊՈίʔυͬΆ͔ͬͨ • ͬͱεϚʔτͳղܾ๏ͳ͍͔ͳ͋…
Α͍͜Ϛω͠ͳ͍ͰͶʂ