Vue.jsを使ったら幸せになった話

Laravel/Vue勉強会#1での発表資料です。
https://connpass.com/event/58157/

Transcript

1. Vue.jsΛ࢖ͬͨΒ ޾ͤʹͳͬͨ࿩ Laravel/Vueษڧձ#1 גࣜձࣾϥΠϑελΠϧσβΠϯ (LaFabricӡӦձࣾ) CTO தےৎਓ
2. தے ৎਓ גࣜձࣾϥΠϑελΠϧσβΠϯ CTO ུྺ - ཮্ࣗӴୂ ॏഭܸ๒෭๒ख - SIer Πϯϑϥߏங/ۀ຿γεςϜ։ൃͳͲ - MSP αʔϏεاը/ΠϯϑϥΤϯδχΞ - Amazon Distribution Center ΤϯδχΞ - ݱ৬ ࣗݾ঺հ !UBLFOBLBTVKJ
3. LaFabricͱ͸ʁ εʔπɾγϟπΛओ࣠ͱͨ͠ΧελϜΦʔμʔͷϝϯζΞύϨϧECαʔϏεɻ
 ମͷαΠζΛొ࿥͢Δ͜ͱͰɺ͋ͳ͚ͨͩͷ̍ணΛΦϯϥΠϯͰߪೖ͢Δ͜ͱ͕Ͱ͖·͢ɻ ޻৔΍ϝʔΧʔͱ͓٬͞·ΛμΠϨΫτʹͭͳ͙͜ͱͰɺதؒྲྀ௨Λഉআͨ͠దਖ਼Ձ֨Ͱ͝ఏڙ͍ͯ͠·͢ɻ
4. 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
5. ຊ೔ͷ಺༰ • ࿩͢͜ͱ • ঎඼ҰཡϖʔδʹVue.jsΛಋೖͨ͠࿩ • ޮՌ΍ॴײͳͲ
 • ࿩͞ͳ͍͜ͱ • Vue.jsͱଞͷϑϨʔϜϫʔΫͱͷൺֱ
6. ಋೖͷഎܠ • ϏδωεαΠυ • ঎඼਺(SKU)Λେ෯ʹ૿΍͍ͨ͠ • (঎඼͕૿͑ͯ΋)Ϣʔβʔ͕঎඼Λ୳͠΍͍ͨ͘͢͠ • nिؒޙʹϦϦʔε͍ͨ͠
 • ΤϯδχΞαΠυ • εέδϡʔϧෆ҆ • DOMΛ௚઀͞ΘΔͱύζϧʹͳΓͦ͏… • ݱঢ়ΑΓ΋ϢʔβʔϏϦςΟΛߴΊ͍ͨ
7. ͳͥVue.jsʹ͔ͨ͠ • HTMLηϯτϦοΫͳઃܭ • Vue.js 2ܥ͔ΒVDOMʹ • ෦෼తͳಋೖʹ΋ద͍ͯ͠Δͱײͨ͡ • Α͘࢖͍ͦ͏ͳDirective͕๛෋ (v-for΍v-ifͱ͔) • ։ൃ଎౓ͷ޲্͕ظ଴Ͱ͖ͦ͏ • ผػೳͰෳࡶͳUIΛ࣮૷͢Δ༧ఆͩͬͨͷͰφϨοδΛ஝ੵ͍ͨ͠
8. Ͱ͖͕͋ͬͨ΋ͷ - view • ঎඼Ұཡදࣔ • ঎඼ϑΟϧλػೳ • ϥΠϯφοϓ • Χϥʔ • ฑ • ϑΟϧλ৚݅อଘػೳ • ࣗಈอଘ • ࣗಈϦηοτ
9. Ͱ͖͕͋ͬͨ΋ͷ - code components stores templates ίϯϙʔωϯτͷϩδοΫ෦෼Λهड़ applicationͷঢ়ଶ؅ཧ༻ vuex͸࢖༻ͤͣ$emitΛ࢖࣮ͬͯ૷ ͍ΘΏΔhtmlతͳ෦෼ componentsͱ͸෼཭ͤͯ͞ݟ௨͠Λ֬อ ͍ͭͰʹpugΛ࠾༻ (޷Έ͕෼͔Εͨ…)
10. ޮՌͱॴײ • ݟࠐΈ௨ΓεϐʔσΟʔͳ։ൃ͕Ͱ͖ͨ • ੜDOMͷૢ࡞͕ͳ͘ͳͬͨͷͰݟ௨͠ͷྑ͍ίʔυʹ • ೔ຊޠͷ৘ใ͕๛෋ (slack΋׆ൃ) • API΍DirectivesΛ֮͑Δͷ͕΍΍໘౗ • ৭ʑศརʹ΍ͬͯ͘ΕΔ൓໘ϒϥοΫϘοΫతͳଆ໘΋͋Δ
11. ৄ͘͠͸ͪ͜Β http://lifestyledesign.co.jp/jobs/ We’re Hiring • αʔόʔαΠυΤϯδχΞ • ϑϩϯτΤϯυΤϯδχΞ • σβΠφʔ ٕज़Λۦ࢖ͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ