Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
FDDによるVue.jsコンポーネント開発
kazupon
December 02, 2016
Programming
1
1.7k
FDDによるVue.jsコンポーネント開発
kazupon
December 02, 2016
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
1
240
Vue with Vite
kazupon
2
1.9k
State of Vue I18n
kazupon
3
260
まちにまった Vue.js 3
kazupon
14
4.9k
Native-ESM powered web dev build tool
kazupon
4
910
まもなくやってくる Vue.js 3
kazupon
38
18k
Vue.js 3 に向けた Vue.js 入門
kazupon
19
6.1k
Vue I18n 向けに ESLint プラグインを作った
kazupon
1
1.1k
Vue Fes Japan 2018 舞台裏について
kazupon
4
1.8k
Other Decks in Programming
See All in Programming
競プロへの誘 -いざな-
u76ner
0
340
スモールチームがAmazon Cognitoでコスパよく作るサービス間連携認証
tacke_jp
2
180
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
1.6k
Android入門
hn410
0
300
Milestoner
bkuhlmann
1
200
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
140
バンドル最適化マニアクス at tfconf
mizchi
3
2k
Nix for Scala folks
kubukoz
0
120
Monadic Java
mariofusco
4
260
Learning DDD輪読会#4 / Learning DDD Book Club #4
suzushin54
1
110
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
manfredsteyer
PRO
0
290
C言語でメモリ管理を考えた話
hkawai
0
180
Featured
See All Featured
What's new in Ruby 2.0
geeforr
336
30k
Ruby is Unlike a Banana
tanoku
91
9.2k
Embracing the Ebb and Flow
colly
73
3.3k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Design by the Numbers
sachag
271
17k
A better future with KSS
kneath
225
15k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Mobile First: as difficult as doing things right
swwweet
212
7.5k
Transcript
FDD ʹΑΔ Vue.js ίϯϙʔωϯτ։ൃ Gotanda.js #6 in Oisix 2016-12-02 @kazupon
ࣗݾհ
Vue.js Core Team member https://github.com/kazupon
Vue.js ຊޠެࣜαΠτ ͍ͭʹઌϦϦʔεʂ Vue.js ຊޠެࣜαΠτ
We are building Open Innovation Platform!! https://cuusoo.com
͡Ίʹ
͍Ζ͍Ζ͋Δʙۦಈ։ൃ ςετۦಈ։ൃ ;Δ·͍ۦಈ։ൃ νέοτۦಈ։ൃ υϝΠϯۦಈ։ൃ υΩϡϝϯτۦಈ։ൃ ɹϢʔβʔػೳۦಈ։ൃ ɹεέδϡʔϧۦಈ։ൃ ɾɾɾ Ϣʔεέʔεۦಈ։ൃ
Ϟσϧۦಈ։ൃ
ͱ·͋ɺ ͍ͬͺ͍͋Γ·͚͢Ͳ
͔͠͠ͳ͕ΒɺզʑΤϯδχΞ • ϢʔβʔʹʮՁʯΛಧ͚ͳͯ͘ͳΒ ͳ͍ʂʂ • OSS ͷੈքͱͯɺϑϨʔϜϫʔΫɺϥΠϒ ϥϦɺϓϥάΠϯͳͲɺՁ͋ΔͷΛ ఏڙ͠ͳ͚ΕɺΘΕͳ͍ͷʹͳͬ ͯ͠·͏ʂʂ
ΞδΣϯμ
ࠓ͢͜ͱ • Vue.js ͷ࡞ऀ͕࣮ફ͢ΔɺFDD ʹΑΔ։ൃ Λհ • Vue 2.0 pre-alpha
• vue-router 2.0
ࠓ͞ͳ͍͜ͱ • Vue.js ͷجຊతͳͱ͔ • FDD ͷৄࡉͳͱ͔ • ςετपΓͷৄࡉͷͱ͔ •
ϢʔβʔՁఏڙͱ͔ͷ͏Μ͵Μ
ҙࣄ߲ • ࠓճհ͢Δํ๏ɺVue.js ࡞ऀ͕ಛʹఏ এ͍ͯ͠Δํ๏Ͱ͋Γ·ͤΜ • ൃදऀͷࢲ͕ɺVue.js orgnaization / ίΞ
νʔϜʹδϣΠϯ͔ͯ͠Βɺ͜Ε·Ͱͷ ։ൃʹܞΘ͖ͬͯͨݟΛɺʮ͜Μͳํ ๏͋ΔΑʂʯతͳײ͡Ͱհ͍ͯ͠Δ ͚ͩͰ͢ʂ
FDD ͱʁ
Feature Driven Development • ”Ұൠతʹ”ɺϢʔβʔػೳۦಈ։ൃͱ • ϢʔβʔʹՁ͋ΔػೳΛఏڙ͢Δ؍ ʹΑΔۦಈ։ൃ • ࣮ࡍʹಈ࡞͢ΔͷΛ܁Γฦ͠ఏڙ͢
Δ։ൃ ※WikiPedia https://ja.wikipedia.org/wiki/Ϣʔβʔػೳۦಈ։ൃ
Vue.js ࡞ऀ͕࣮ફ͖ͯͨ͠ FDD ͱʁ
ϢʔβʔࢹʹΑΔ։ൃ • ϥΠϒϥϦͷػೳͷαϯϓϧΛ example ͱ ͯ͠ఏڙ • ͦΕΒʹରͯ͠ E2E ͰςετΛ࣮
• E2E ͷςετ͕ύεͨ͠ΒϦϦʔε • ͦͷޙɺ୯ମςετͷ࣮ɺػೳվળɺό άमਖ਼ͳͲͷ։ൃ܁Γฦ͠ߦ͏
Vue.js ίϯϙʔωϯτ։ൃྫ
ྫ: select2 ίϯϙʔωϯτͷ։ൃ • jquery ϓϥάΠϯ select2 Λϥοϓͨ͠ί ϯϙʔωϯτ (vuejs.org/examples/
select2.html Ͱެ։͞Ε͍ͯΔͱಉ͡ͷ)
DEMO
1. ϓϩδΣΫτͷηοτΞοϓ
vue-cli ͰηοτΞοϓʂ ※vue-cli ͷ GitHub ϦϙδτϦ https://github.com/vuejs/vue-cli
vue-cli ͰͷηοτΞοϓͷ༷ࢠ
2. ઃܭ & αϯϓϧͷ༻ҙ
• ίϯϙʔωϯτΛઃܭͯ͠ɺϢʔβʔ ͚ʹ example Λ༻ҙ͢Δ
3. E2E ςετͷ࣮
• example ͕ਖ਼͘͠ಈ࡞͢Δɺ E2E ͷςετ Λ࣮͢Δ vue-cli Ͱ ఏڙ͞ΕΔ E2E
ϑϨʔϜϫʔ ΫͰͦͷςετΛ ࣮͢Δ
4. ίϯϙʔωϯτͷ࣮
• Ϣʔβʔʹఏڙ͢ΔίϯϙʔωϯτΛ࣮
5. ίϯϙʔωϯτͷςετ
• Ϗϧυͯ͠E2E ςετΛ࣮ߦ͠ɺύε͢Δ ͜ͱΛ֬ೝ͢Δ
ޙɺػೳՃɺվળɺ ୯ମςετɺόάमਖ਼ͳͲͷ ։ൃΛ܁Γฦ͢
ࠓճհͨ͠FDDʹΑΔϝϦοτ • ୯ମςετΛͬ͢ඈͯ͠ɺ͍͖ͳΓ E2E ςετ͔ΒೖΔͷͰɺεϐʔσΟͳϦϦʔ ε͕Ͱ͖Δ • ϥΠϒϥϦϢʔβʔར༻ࢹͰ։ൃͰ͖ ΔͷͰɺՁ͕͋ΔϞϊΛఏڙ͍͢͠
ࠓճհͨ͠FDDʹΑΔσϝϦοτ • ٯʹ୯ମςετɺE2Eςετͱ͍͏ॱͳ ։ൃελΠϧΑΓ͕͔͔࣌ؒͬͯ͠· ͏͔ • ϢʔβʔʹՁ͋ΔػೳΛఏڙ͠Α͏ͱ ͢Δ͋·Γɺίϯϙʔωϯτઃܭʹ࣌ؒ Λ͔͚ͯ͠·͏͔
·ͱΊ
·ͱΊ • Vue.js ࡞ऀྲྀɺFDD Λհ͠·ͨ͠ • ࠓճհͨ͠ํ๏ͰɺϢʔβʔʹՁ͋Δ ػೳΛεϐʔσΟʹఏڙͰ͖ΔՄೳੑ͕͋ Γ·͢ •
ͨͩɺ߹͏ਓɾ߹Θͳ͍ਓ͕͍Δͱࢥ͏ͷ Ͱɺ࣮ࡍʹ͜ͷΓํͰ։ൃ͢Δ߹ ҙ͕ඞཁ
one more thing …
ຊਓ͚ Vue.js ίϛϡχςΟ • Vue.js ຊޠެࣜαΠτܦ༝ͰࢀՃͰ͖·͢ http://jp.vuejs.org
ຊਓ͚ Vue.js ίϛϡχςΟ • URL https://vuejs-jp-slackin.herokuapp.com
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ