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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
kazupon
December 02, 2016
Programming
1
1.8k
FDDによるVue.jsコンポーネント開発
kazupon
December 02, 2016
Tweet
Share
More Decks by kazupon
See All by kazupon
Oxlint JS plugins
kazupon
1
1k
gunshi
kazupon
1
150
Nitro v3
kazupon
2
420
わたしのOSS活動
kazupon
3
580
Vapor Revolution
kazupon
3
4k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.8k
Vue & Vite Rustify
kazupon
4
2.4k
Vue.jsエコシステム動向2023
kazupon
17
8.9k
Other Decks in Programming
See All in Programming
ぼくの開発環境2026
yuzneri
0
240
登壇資料を作る時に意識していること #登壇資料_findy
konifar
4
1.6k
【卒業研究】会話ログ分析によるユーザーごとの関心に応じた話題提案手法
momok47
0
200
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
390
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
220
Apache Iceberg V3 and migration to V3
tomtanaka
0
170
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
tjjh89017
0
170
Oxlintはいいぞ
yug1224
5
1.4k
CSC307 Lecture 06
javiergs
PRO
0
690
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
120
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる!
tosuri13
1
180
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
77
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
170
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
290
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
170
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
55
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
190
Become a Pro
speakerdeck
PRO
31
5.8k
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.2k
Leadership Guide Workshop - DevTernity 2021
reverentgeek
1
200
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
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
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ