Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsを使ったら幸せになった話
Search
Taketo Nakasuji
June 22, 2017
Technology
1
3.7k
Vue.jsを使ったら幸せになった話
Laravel/Vue勉強会#1での発表資料です。
https://connpass.com/event/58157/
Taketo Nakasuji
June 22, 2017
Tweet
Share
More Decks by Taketo Nakasuji
See All by Taketo Nakasuji
デザイナーが D2Cビジネスに身をおいてわかったこと
takenakasuji
2
8.1k
Elementのすすめ
takenakasuji
0
3.6k
新規システムのためのLaravel導入とユースケース駆動開発の話
takenakasuji
1
450
IoTで実現するリアルストア戦略
takenakasuji
0
1.8k
Other Decks in Technology
See All in Technology
TCA入門したてなので、自分が馴染みのある実装と比較しながらキャッチアップしてみる
fumiyasac0921
1
370
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
Kubeflow Pipelines v2 で変わる機械学習パイプライン開発
asei
4
340
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
210
HoneycombとOpenTelemetryでオブザーバビリティに入門してみる
sumiren
2
150
Evolutionary Optimization of Model Merging Recipes
fuyu_quant0
3
520
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
Cloud Deploy と仲良くなりたい
phaya72
1
100
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
20
4k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
3
250
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
2
350
Featured
See All Featured
Become a Pro
speakerdeck
PRO
8
4.4k
Embracing the Ebb and Flow
colly
78
4.1k
What's new in Ruby 2.0
geeforr
335
31k
Producing Creativity
orderedlist
PRO
335
39k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
How STYLIGHT went responsive
nonsquared
92
4.7k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
The Invisible Side of Design
smashingmag
293
49k
The Pragmatic Product Professional
lauravandoore
24
5.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Typedesign – Prime Four
hannesfritz
36
2k
Building Better People: How to give real-time feedback that sticks.
wjessup
350
18k
Transcript
Vue.jsΛͬͨΒ ͤʹͳͬͨ Laravel/Vueษڧձ#1 גࣜձࣾϥΠϑελΠϧσβΠϯ (LaFabricӡӦձࣾ) CTO தےৎਓ
தے ৎਓ גࣜձࣾϥΠϑελΠϧσβΠϯ CTO ུྺ - ্ࣗӴୂ ॏഭܸ๒෭๒ख - SIer
Πϯϑϥߏங/ۀγεςϜ։ൃͳͲ - MSP αʔϏεاը/ΠϯϑϥΤϯδχΞ - Amazon Distribution Center ΤϯδχΞ - ݱ৬ ࣗݾհ !UBLFOBLBTVKJ
LaFabricͱʁ εʔπɾγϟπΛओ࣠ͱͨ͠ΧελϜΦʔμʔͷϝϯζΞύϨϧECαʔϏεɻ ମͷαΠζΛొ͢Δ͜ͱͰɺ͋ͳ͚ͨͩͷ̍ணΛΦϯϥΠϯͰߪೖ͢Δ͜ͱ͕Ͱ͖·͢ɻ ϝʔΧʔͱ͓٬͞·ΛμΠϨΫτʹͭͳ͙͜ͱͰɺதؒྲྀ௨Λഉআͨ͠దਖ਼Ձ֨Ͱ͝ఏڙ͍ͯ͠·͢ɻ
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
ຊͷ༰ • ͢͜ͱ • ҰཡϖʔδʹVue.jsΛಋೖͨ͠ • ޮՌॴײͳͲ • ͞ͳ͍͜ͱ •
Vue.jsͱଞͷϑϨʔϜϫʔΫͱͷൺֱ
ಋೖͷഎܠ • ϏδωεαΠυ • (SKU)Λେ෯ʹ૿͍ͨ͠ • (͕૿͑ͯ)Ϣʔβʔ͕Λ୳͍ͨ͘͢͠͠ • nिؒޙʹϦϦʔε͍ͨ͠ •
ΤϯδχΞαΠυ • εέδϡʔϧෆ҆ • DOMΛ͞ΘΔͱύζϧʹͳΓͦ͏… • ݱঢ়ΑΓϢʔβʔϏϦςΟΛߴΊ͍ͨ
ͳͥVue.jsʹ͔ͨ͠ • HTMLηϯτϦοΫͳઃܭ • Vue.js 2ܥ͔ΒVDOMʹ • ෦తͳಋೖʹద͍ͯ͠Δͱײͨ͡ • Α͍ͦ͘͏ͳDirective͕๛
(v-forv-ifͱ͔) • ։ൃͷ্͕ظͰ͖ͦ͏ • ผػೳͰෳࡶͳUIΛ࣮͢Δ༧ఆͩͬͨͷͰφϨοδΛੵ͍ͨ͠
Ͱ͖͕͋ͬͨͷ - view • Ұཡදࣔ • ϑΟϧλػೳ • ϥΠϯφοϓ •
Χϥʔ • ฑ • ϑΟϧλ݅อଘػೳ • ࣗಈอଘ • ࣗಈϦηοτ
Ͱ͖͕͋ͬͨͷ - code components stores templates ίϯϙʔωϯτͷϩδοΫ෦Λهड़ applicationͷঢ়ଶཧ༻ vuex༻ͤͣ$emitΛ࣮ͬͯ ͍ΘΏΔhtmlతͳ෦
componentsͱͤͯ͞ݟ௨͠Λ֬อ ͍ͭͰʹpugΛ࠾༻ (Έ͕͔Εͨ…)
ޮՌͱॴײ • ݟࠐΈ௨ΓεϐʔσΟʔͳ։ൃ͕Ͱ͖ͨ • ੜDOMͷૢ࡞͕ͳ͘ͳͬͨͷͰݟ௨͠ͷྑ͍ίʔυʹ • ຊޠͷใ͕๛ (slack׆ൃ) • APIDirectivesΛ֮͑Δͷ͕໘
• ৭ʑศརʹͬͯ͘ΕΔ໘ϒϥοΫϘοΫతͳଆ໘͋Δ
ৄͪ͘͜͠Β http://lifestyledesign.co.jp/jobs/ We’re Hiring • αʔόʔαΠυΤϯδχΞ • ϑϩϯτΤϯυΤϯδχΞ • σβΠφʔ
ٕज़Λۦͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ