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
Vue.jsを使ったら幸せになった話
Search
Taketo Nakasuji
June 22, 2017
Technology
1
3.9k
Vue.jsを使ったら幸せになった話
Laravel/Vue勉強会#1での発表資料です。
https://connpass.com/event/58157/
Taketo Nakasuji
June 22, 2017
Tweet
Share
More Decks by Taketo Nakasuji
See All by Taketo Nakasuji
デザイナーが D2Cビジネスに身をおいてわかったこと
takenakasuji
2
8.5k
Elementのすすめ
takenakasuji
0
3.8k
新規システムのためのLaravel導入とユースケース駆動開発の話
takenakasuji
1
520
IoTで実現するリアルストア戦略
takenakasuji
0
1.9k
Other Decks in Technology
See All in Technology
Datadog APM におけるトレース収集の流れ及び Retention Filters のはなし / datadog-apm-trace-retention-filters
k6s4i53rx
0
320
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Culture Deck
optfit
0
330
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
データの品質が低いと何が困るのか
kzykmyzw
6
1k
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
panda_program
16
6.5k
これからSREになる人と、これからもSREをやっていく人へ
masayoshi
6
4.1k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
Bounded Context: Problem or Solution?
ewolff
1
210
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Unsuck your backbone
ammeep
669
57k
Rails Girls Zürich Keynote
gr2m
94
13k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Automating Front-end Workflow
addyosmani
1367
200k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Cult of Friendly URLs
andyhume
78
6.2k
Building an army of robots
kneath
302
45k
Site-Speed That Sticks
csswizardry
3
370
KATA
mclloyd
29
14k
Transcript
Vue.jsΛͬͨΒ ͤʹͳͬͨ Laravel/Vueษڧձ#1 גࣜձࣾϥΠϑελΠϧσβΠϯ (LaFabricӡӦձࣾ) CTO தےৎਓ
தے ৎਓ גࣜձࣾϥΠϑελΠϧσβΠϯ CTO ུྺ - ্ࣗӴୂ ॏഭܸ๒෭๒ख - SIer
Πϯϑϥߏங/ۀγεςϜ։ൃͳͲ - MSP αʔϏεاը/ΠϯϑϥΤϯδχΞ - Amazon Distribution Center ΤϯδχΞ - ݱ৬ ࣗݾհ !UBLFOBLBTVKJ
LaFabricͱʁ εʔπɾγϟπΛओ࣠ͱͨ͠ΧελϜΦʔμʔͷϝϯζΞύϨϧECαʔϏεɻ ମͷαΠζΛొ͢Δ͜ͱͰɺ͋ͳ͚ͨͩͷ̍ணΛΦϯϥΠϯͰߪೖ͢Δ͜ͱ͕Ͱ͖·͢ɻ ϝʔΧʔͱ͓٬͞·ΛμΠϨΫτʹͭͳ͙͜ͱͰɺதؒྲྀ௨Λഉআͨ͠దਖ਼Ձ֨Ͱ͝ఏڙ͍ͯ͠·͢ɻ
Technology Stack • PHP 5.6ܥ and 7.xܥ • CakePHP 2.xܥ
• Laravel 5.xܥ ServerSide FrontEnd • Vue.js 2.xܥ • React 15.xܥ • jQuery etc • AWS • Github • CD
ຊͷ༰ • ͢͜ͱ • ҰཡϖʔδʹVue.jsΛಋೖͨ͠ • ޮՌॴײͳͲ • ͞ͳ͍͜ͱ •
Vue.jsͱଞͷϑϨʔϜϫʔΫͱͷൺֱ
ಋೖͷഎܠ • ϏδωεαΠυ • (SKU)Λେ෯ʹ૿͍ͨ͠ • (͕૿͑ͯ)Ϣʔβʔ͕Λ୳͍ͨ͘͢͠͠ • nिؒޙʹϦϦʔε͍ͨ͠ •
ΤϯδχΞαΠυ • εέδϡʔϧෆ҆ • DOMΛ͞ΘΔͱύζϧʹͳΓͦ͏… • ݱঢ়ΑΓϢʔβʔϏϦςΟΛߴΊ͍ͨ
ͳͥVue.jsʹ͔ͨ͠ • HTMLηϯτϦοΫͳઃܭ • Vue.js 2ܥ͔ΒVDOMʹ • ෦తͳಋೖʹద͍ͯ͠Δͱײͨ͡ • Α͍ͦ͘͏ͳDirective͕๛
(v-forv-ifͱ͔) • ։ൃͷ্͕ظͰ͖ͦ͏ • ผػೳͰෳࡶͳUIΛ࣮͢Δ༧ఆͩͬͨͷͰφϨοδΛੵ͍ͨ͠
Ͱ͖͕͋ͬͨͷ - view • Ұཡදࣔ • ϑΟϧλػೳ • ϥΠϯφοϓ •
Χϥʔ • ฑ • ϑΟϧλ݅อଘػೳ • ࣗಈอଘ • ࣗಈϦηοτ
Ͱ͖͕͋ͬͨͷ - code components stores templates ίϯϙʔωϯτͷϩδοΫ෦Λهड़ applicationͷঢ়ଶཧ༻ vuex༻ͤͣ$emitΛ࣮ͬͯ ͍ΘΏΔhtmlతͳ෦
componentsͱͤͯ͞ݟ௨͠Λ֬อ ͍ͭͰʹpugΛ࠾༻ (Έ͕͔Εͨ…)
ޮՌͱॴײ • ݟࠐΈ௨ΓεϐʔσΟʔͳ։ൃ͕Ͱ͖ͨ • ੜDOMͷૢ࡞͕ͳ͘ͳͬͨͷͰݟ௨͠ͷྑ͍ίʔυʹ • ຊޠͷใ͕๛ (slack׆ൃ) • APIDirectivesΛ֮͑Δͷ͕໘
• ৭ʑศརʹͬͯ͘ΕΔ໘ϒϥοΫϘοΫతͳଆ໘͋Δ
ৄͪ͘͜͠Β http://lifestyledesign.co.jp/jobs/ We’re Hiring • αʔόʔαΠυΤϯδχΞ • ϑϩϯτΤϯυΤϯδχΞ • σβΠφʔ
ٕज़Λۦͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ