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
FDDによるVue.jsコンポーネント開発
Search
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
Vue.js最新動向
kazupon
3
1.4k
Vue 3.4
kazupon
13
4.4k
Vue & Vite Rustify
kazupon
4
2.1k
Vue.jsエコシステム動向2023
kazupon
17
7.4k
Reactivity Transform
kazupon
1
1.2k
わたしのOSS活動
kazupon
1
980
Vue with Vite
kazupon
2
2.5k
State of Vue I18n
kazupon
3
540
まちにまった Vue.js 3
kazupon
14
5.5k
Other Decks in Programming
See All in Programming
知られざるNaNの世界
hole
3
1.1k
ポケモンで考えるコミュニケーション / Communication Lessons from Pokémon
mackey0225
5
220
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
190
フロントエンドの現在地とこれから
koba04
10
4.7k
Integrating AI in Your Enterprise Java Applications
ivargrimstad
0
810
CSC509 Lecture 06
javiergs
PRO
0
130
実践サーバーレスパフォーマンスチューニング ~その実力に迫る~ / Practical Serverless Performance Tuning ~A Close Look at its Power~
seike460
PRO
2
230
Workflow automationによるインシデント原因調査の自動化
showwin
1
100
tc39 x jsconf.jp Panel Discussion 2024
yosuke_furukawa
PRO
0
110
【YAPC::Hakodate 2024】TypeScriptエンジニアが感じたPerlのここが面白い
kimitashoichi
1
480
Kotlin Multiplatform at Stable and Beyond (Kotlin Vienna, October 2024)
zsmb
2
410
GrafanaのHTTP API を眺めてみよう
rinchoku
0
470
Featured
See All Featured
Writing Fast Ruby
sferik
626
60k
No one is an island. Learnings from fostering a developers community.
thoeni
19
2.9k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Unsuck your backbone
ammeep
668
57k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Designing the Hi-DPI Web
ddemaree
280
34k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Facilitating Awesome Meetings
lara
49
6k
GraphQLの誤解/rethinking-graphql
sonatard
66
9.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
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
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ