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
4k
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.8k
Elementのすすめ
takenakasuji
0
3.9k
新規システムのためのLaravel導入とユースケース駆動開発の話
takenakasuji
1
560
IoTで実現するリアルストア戦略
takenakasuji
0
1.9k
Other Decks in Technology
See All in Technology
20250929_QaaS_vol20
mura_shin
0
130
E2Eテスト設計_自動化のリアル___Playwrightでの実践とMCPの試み__AIによるテスト観点作成_.pdf
findy_eventslides
1
490
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
1
520
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
brainpadpr
25
17k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
200
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
600
Azure Well-Architected Framework入門
tomokusaba
1
330
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
110
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
300
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
78k
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
430
Featured
See All Featured
Visualization
eitanlees
148
16k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
KATA
mclloyd
32
15k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
For a Future-Friendly Web
brad_frost
180
9.9k
The Invisible Side of Design
smashingmag
301
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Speed Design
sergeychernyshev
32
1.1k
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 • αʔόʔαΠυΤϯδχΞ • ϑϩϯτΤϯυΤϯδχΞ • σβΠφʔ
ٕज़Λۦͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ