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

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

Transcript

1. Vue.jsΛ࢖ͬͨΒ
   ޾ͤʹͳͬͨ࿩
   Laravel/Vueษڧձ#1
   גࣜձࣾϥΠϑελΠϧσβΠϯ (LaFabricӡӦձࣾ)
   CTO தےৎਓ
   

   View Slide

2. தے ৎਓ
   גࣜձࣾϥΠϑελΠϧσβΠϯ CTO
   ུྺ
   - ཮্ࣗӴୂ ॏഭܸ๒෭๒ख
   - SIer Πϯϑϥߏங/ۀ຿γεςϜ։ൃͳͲ
   - MSP αʔϏεاը/ΠϯϑϥΤϯδχΞ
   - Amazon Distribution Center ΤϯδχΞ
   - ݱ৬
   ࣗݾ঺հ
   !UBLFOBLBTVKJ
   

   View Slide

3. LaFabricͱ͸ʁ
   εʔπɾγϟπΛओ࣠ͱͨ͠ΧελϜΦʔμʔͷϝϯζΞύϨϧECαʔϏεɻ

   ମͷαΠζΛొ࿥͢Δ͜ͱͰɺ͋ͳ͚ͨͩͷ̍ணΛΦϯϥΠϯͰߪೖ͢Δ͜ͱ͕Ͱ͖·͢ɻ
   ޻৔΍ϝʔΧʔͱ͓٬͞·ΛμΠϨΫτʹͭͳ͙͜ͱͰɺதؒྲྀ௨Λഉআͨ͠దਖ਼Ձ֨Ͱ͝ఏڙ͍ͯ͠·͢ɻ
   

   View Slide

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
   

   View Slide

5. ຊ೔ͷ಺༰
   • ࿩͢͜ͱ
   • ঎඼ҰཡϖʔδʹVue.jsΛಋೖͨ͠࿩
   • ޮՌ΍ॴײͳͲ

   • ࿩͞ͳ͍͜ͱ
   • Vue.jsͱଞͷϑϨʔϜϫʔΫͱͷൺֱ
   

   View Slide

6. ಋೖͷഎܠ
   • ϏδωεαΠυ
   • ঎඼਺(SKU)Λେ෯ʹ૿΍͍ͨ͠
   • (঎඼͕૿͑ͯ΋)Ϣʔβʔ͕঎඼Λ୳͠΍͍ͨ͘͢͠
   • nिؒޙʹϦϦʔε͍ͨ͠

   • ΤϯδχΞαΠυ
   • εέδϡʔϧෆ҆
   • DOMΛ௚઀͞ΘΔͱύζϧʹͳΓͦ͏…
   • ݱঢ়ΑΓ΋ϢʔβʔϏϦςΟΛߴΊ͍ͨ
   

   View Slide

7. ͳͥVue.jsʹ͔ͨ͠
   • HTMLηϯτϦοΫͳઃܭ
   • Vue.js 2ܥ͔ΒVDOMʹ
   • ෦෼తͳಋೖʹ΋ద͍ͯ͠Δͱײͨ͡
   • Α͘࢖͍ͦ͏ͳDirective͕๛෋ (v-for΍v-ifͱ͔)
   • ։ൃ଎౓ͷ޲্͕ظ଴Ͱ͖ͦ͏
   • ผػೳͰෳࡶͳUIΛ࣮૷͢Δ༧ఆͩͬͨͷͰφϨοδΛ஝ੵ͍ͨ͠
   

   View Slide

8. Ͱ͖͕͋ͬͨ΋ͷ - view
   • ঎඼Ұཡදࣔ
   • ঎඼ϑΟϧλػೳ
   • ϥΠϯφοϓ
   • Χϥʔ
   • ฑ
   • ϑΟϧλ৚݅อଘػೳ
   • ࣗಈอଘ
   • ࣗಈϦηοτ
   

   View Slide

9. Ͱ͖͕͋ͬͨ΋ͷ - code
   components
   stores
   templates
   ίϯϙʔωϯτͷϩδοΫ෦෼Λهड़
   applicationͷঢ়ଶ؅ཧ༻
   vuex͸࢖༻ͤͣ$emitΛ࢖࣮ͬͯ૷
   ͍ΘΏΔhtmlతͳ෦෼
   componentsͱ͸෼཭ͤͯ͞ݟ௨͠Λ֬อ
   ͍ͭͰʹpugΛ࠾༻ (޷Έ͕෼͔Εͨ…)
   

   View Slide

10. ޮՌͱॴײ
    • ݟࠐΈ௨ΓεϐʔσΟʔͳ։ൃ͕Ͱ͖ͨ
    • ੜDOMͷૢ࡞͕ͳ͘ͳͬͨͷͰݟ௨͠ͷྑ͍ίʔυʹ
    • ೔ຊޠͷ৘ใ͕๛෋ (slack΋׆ൃ)
    • API΍DirectivesΛ֮͑Δͷ͕΍΍໘౗
    • ৭ʑศརʹ΍ͬͯ͘ΕΔ൓໘ϒϥοΫϘοΫతͳଆ໘΋͋Δ
    

    View Slide

11. ৄ͘͠͸ͪ͜Β
    http://lifestyledesign.co.jp/jobs/
    We’re Hiring
    • αʔόʔαΠυΤϯδχΞ
    • ϑϩϯτΤϯυΤϯδχΞ
    • σβΠφʔ
    ٕज़Λۦ࢖ͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ
    

    View Slide