Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

6721e347327b1423494b86b75b259625?s=128

Taketo Nakasuji

June 22, 2017
Tweet

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 • αʔόʔαΠυΤϯδχΞ • ϑϩϯτΤϯυΤϯδχΞ • σβΠφʔ

    ٕज़Λۦ࢖ͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ