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

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

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

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

Taketo Nakasuji

June 22, 2017
Tweet

More Decks by Taketo Nakasuji

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size 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 full-size slide

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

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide