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.7k
Elementのすすめ
takenakasuji
0
3.9k
新規システムのためのLaravel導入とユースケース駆動開発の話
takenakasuji
1
560
IoTで実現するリアルストア戦略
takenakasuji
0
1.9k
Other Decks in Technology
See All in Technology
コスト削減の基本の「キ」~ コスト消費3大リソースへの対策 ~
smt7174
2
260
Product Management Conference -AI時代に進化するPdM-
kojima111
0
260
人を動かすことについて考える
ichimichi
2
350
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
15
7.9k
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
300
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
6
680
AIとTDDによるNext.js「隙間ツール」開発の実践
makotot
6
770
努力家なスクラムマスターが陥る「傍観者」という罠と乗り越えた先に信頼があった話 / 20250830 Takahiro Sasaki
shift_evolve
PRO
2
100
Microsoft Fabric のネットワーク保護のアップデートについて
ryomaru0825
1
110
スプリントレトロスペクティブはチーム観察の宝庫? 〜チームの衝突レベルに合わせたアプローチ仮説!〜
electricsatie
1
100
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
27
9.3k
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
1
100
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Gamification - CAS2011
davidbonilla
81
5.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
How STYLIGHT went responsive
nonsquared
100
5.8k
Why Our Code Smells
bkeepers
PRO
338
57k
Practical Orchestrator
shlominoach
190
11k
Designing for humans not robots
tammielis
253
25k
Balancing Empowerment & Direction
lara
2
590
A better future with KSS
kneath
239
17k
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 • αʔόʔαΠυΤϯδχΞ • ϑϩϯτΤϯυΤϯδχΞ • σβΠφʔ
ٕज़Λۦͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ