Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

LaFabricͱ͸ʁ εʔπɾγϟπΛओ࣠ͱͨ͠ΧελϜΦʔμʔͷϝϯζΞύϨϧECαʔϏεɻ
 ମͷαΠζΛొ࿥͢Δ͜ͱͰɺ͋ͳ͚ͨͩͷ̍ணΛΦϯϥΠϯͰߪೖ͢Δ͜ͱ͕Ͱ͖·͢ɻ ޻৔΍ϝʔΧʔͱ͓٬͞·ΛμΠϨΫτʹͭͳ͙͜ͱͰɺதؒྲྀ௨Λഉআͨ͠దਖ਼Ձ֨Ͱ͝ఏڙ͍ͯ͠·͢ɻ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

ຊ೔ͷ಺༰ • ࿩͢͜ͱ • ঎඼ҰཡϖʔδʹVue.jsΛಋೖͨ͠࿩ • ޮՌ΍ॴײͳͲ
 • ࿩͞ͳ͍͜ͱ • Vue.jsͱଞͷϑϨʔϜϫʔΫͱͷൺֱ

Slide 6

Slide 6 text

ಋೖͷഎܠ • ϏδωεαΠυ • ঎඼਺(SKU)Λେ෯ʹ૿΍͍ͨ͠ • (঎඼͕૿͑ͯ΋)Ϣʔβʔ͕঎඼Λ୳͠΍͍ͨ͘͢͠ • nिؒޙʹϦϦʔε͍ͨ͠
 • ΤϯδχΞαΠυ • εέδϡʔϧෆ҆ • DOMΛ௚઀͞ΘΔͱύζϧʹͳΓͦ͏… • ݱঢ়ΑΓ΋ϢʔβʔϏϦςΟΛߴΊ͍ͨ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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