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.8k
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.4k
Elementのすすめ
takenakasuji
0
3.8k
新規システムのためのLaravel導入とユースケース駆動開発の話
takenakasuji
1
510
IoTで実現するリアルストア戦略
takenakasuji
0
1.9k
Other Decks in Technology
See All in Technology
Opcodeを読んでいたら何故かphp-srcを読んでいた話
murashotaro
0
230
DUSt3R, MASt3R, MASt3R-SfM にみる3D基盤モデル
spatial_ai_network
2
110
【re:Invent 2024 アプデ】 Prompt Routing の紹介
champ
0
140
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
740
PHPからGoへのマイグレーション for DMMアフィリエイト
yabakokobayashi
1
170
Amazon VPC Lattice 最新アップデート紹介 - PrivateLink も似たようなアップデートあったけど違いとは
bigmuramura
0
190
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
170
Snowflake女子会#3 Snowpipeの良さを5分で語るよ
lana2548
0
230
watsonx.ai Dojo #5 ファインチューニングとInstructLAB
oniak3ibm
PRO
0
160
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
100
生成AIのガバナンスの全体像と現実解
fnifni
1
190
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
150
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Optimizing for Happiness
mojombo
376
70k
Optimising Largest Contentful Paint
csswizardry
33
3k
Navigating Team Friction
lara
183
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Invisible Side of Design
smashingmag
298
50k
Scaling GitHub
holman
458
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
How to Ace a Technical Interview
jacobian
276
23k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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 • αʔόʔαΠυΤϯδχΞ • ϑϩϯτΤϯυΤϯδχΞ • σβΠφʔ
ٕज़Λۦͯ͠ΞύϨϧۀքʹֵ໋Λى͍ͨ͜͠ํɺઈࢍืूதʂ