Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
本番環境にVue.jsを使った話 / Use Vue.js at production
Hiromi Kimura
August 02, 2017
3
1.2k
本番環境にVue.jsを使った話 / Use Vue.js at production
Hiromi Kimura
August 02, 2017
Tweet
Share
More Decks by Hiromi Kimura
See All by Hiromi Kimura
マネーフォワード Pay for Businessのフロントエンド / Money Forward Pay for Business Frontend
kimromi
0
280
マネーフォワードクラウド経費でのフロントエンドの取り組み / moneyforward-expense-frontend
kimromi
4
670
エンジニアにとってのアウトプットとはなにか考えた / what-is-output
kimromi
3
920
TypeScriptで作るGitHubApps / make GitHub Apps by TypeScript
kimromi
0
360
ムームードメインのJavaScript環境を整えた話 / prepare muumuu-domain's javascript
kimromi
1
270
ぼくがかんがえたさいきょうのぷるりくえすと / saikyo-no-pull-request
kimromi
7
100k
Vue.js on Rails / vue-js-on-rails
kimromi
7
4.2k
how about Marp?
kimromi
0
77
engineer-guideline
kimromi
0
930
Featured
See All Featured
It's Worth the Effort
3n
172
26k
Building Your Own Lightsaber
phodgson
95
4.7k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
Navigating Team Friction
lara
175
11k
The Language of Interfaces
destraynor
148
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.4k
Bash Introduction
62gerente
598
210k
BBQ
matthewcrist
74
7.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
6
2.5k
The Invisible Customer
myddelton
110
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
107
16k
Transcript
ଜւ(.01FQBCP *OD 'VLVPLBQIQ ຊ൪ڥʹ7VFKTΛͬͨ
(.0ϖύϘϜʔϜʔυϝΠϯΤϯδχΞ ଜւ!LJNSPNJ ࣇͷύύʢࡀͷஉͷࢠʣ IUUQLJNSPNJIBUFOBCMPHKQ
IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU
7VFKTʁ
Α͚ͩ͑͞·͢
IUUQTUSFOETHPPHMFDPNUSFOETFYQMPSF EBUFUPEBZZRWVFKT SFBDUKT BOHVMBSKT
ಛ wK2VFSZͷΘΓͱͯ͠খنʹ w41"443Ͱ͖େنʹ w*&Ҏ߱ʹରԠ wެࣜͷຊޠυΩϡϝϯτ͕Θ͔Γ͍͢ wখ࢝͘͞Ί͘͢ͱ͖͍ͬͭ͢ʂ IUUQTKQWVFKTPSH
)FMMP7VF <div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script
src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script>
݁Ռ
<div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>
<script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> OFX7VF 7VFΠϯελϯεΛ࡞ )FMMP7VF
<div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>
<script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> FMཧ͍ͨ͠%0.ͷJEΛࢦఆ )FMMP7VF
<div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>
<script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> EBUB7VFΠϯελϯεʹอ࣋͢ΔσʔλΛએݴ )FMMP7VF
<div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>
<script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> NFUIPETॲཧΛ͢ΔϝιουΛ࣮ IUNMଆ͔Β7VFΠϯελϯεͰݺͼग़͠Մೳ )FMMP7VF
<div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>
<script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> )FMMP7VF
IUUQTUFDIQFQBCPDPNNVVNVVTIPQQJOHDBSU
͖ͬ͞ͷײ͡Ͱ͍ͬͯΔ 41"Ͱͳ͘443͍ͬͯ·ͤΜ
ཧ༝ wσβΠφʔͱڠۀͩͬͨ w3VCZPO3BJMTͷ্Ͱͬͨ
ཧ༝ wσβΠφʔͱڠۀͩͬͨ w3VCZPO3BJMTͷ্Ͱͬͨ 3BJMTͷ7JFXϑΝΠϧͰ݁ͤ͞Δ )5.-ͷςϯϓϨʔτΛ+BWB4DSJQUଆʹ࣋ͨͳ͍ ˠίϯϙʔωϯτΛ࣋ͨͳ͍
<div id="vue-app"> <h1 v-show="isShow">hello!</h1> <button v-on:click="showHello()">show hello</button> </div> <script src="https://unpkg.com/vue"></script>
<script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> ɾid=“vue-app”͔ͩΒ7VFKT͔͍ͭͬͯΔͷͩͳ ɾv- Ͱ࢝·͍ͬͯΔ͔ΒԿ͔ॲཧʹ͔͍ͭͬͯΔͷͩͳ ɾv-show දࣔΓସ͑Λ͢Δͭͩͳ ɾv-on:click ΫϦοΫͨ࣌͠ʹԿ͔͍ͯ͠Δͳ )5.-͔ΒಡΈऔΕΔใ͕ଟ͍ʂ )FMMP7VF
K2VFSZ <div> <h1 id="hidden-h1" style="display: none;">hello!</h1> <button id="h1-show">show hello</button> </div>
<script src="https://unpkg.com/vue"></script> <script> new Vue({ el: '#vue-app', data: { isShow: false, }, methods: { showHello: function () { this.isShow = true } } }) </script> ɾid="hidden-h1"Կʹ͍ͬͯΔJEͳͷͩΖ͏ ɾstyle="display: none;" DTTʹҠ͍͚ͨ͠ͲҠ͢ͱ ɹI͕࠷ॳ͔Βফ͑ͯΔ͜ͱ͕Θ͔Βͳ͘ͳΔͳ ɾid="h1-show" ͨͿΜΫϦοΫͨ͠ΒIΛද͍ࣔͯ͠ΔΜͩΖ͏ +BWB4DSJQU$44Λ֬ೝ͠ͳ͍ͱΘ͔Βͳ͍ʂ ˠ։ൃεϐʔυ͕μϯɺอक͠ʹ͍͘
͚ͭͩۤ࿑ͨ͠
BKBYΛ͏߹ w7VFKTਪͷBYJPTͱ͍͏)551ΫϥΠΞϯτΛ༻ IUUQTHJUIVCDPNN[BCSJTLJFBYJPT w1SPNJTFϕʔε w*&͕ରԠͯ͠ͳ͔ͬͨɾɾɾ
QPMZpMM͍ͭͰʹXFCQBDL CBCFM wCBCFMQPMZpMMͰQPMZpMMΛಉࠝ͢Δ͜ͱͰݹ͍ϒϥβ͑Δ w&4ʹτϥϯεύΠϧ w&4 &4 Ͱιʔείʔυॻ͚ΔΑ͏ʹͳͬͨʂ wͦͯ͠&4ɾɾ
·ͱΊ w7VFKTΓ্͕͍ͬͯΔʢΓ্͍͖͍͛ͯͨʂʣ wখ͔͘͞ΒͰ࢝ΊΒΕΔ w)5.-͔ΒಡΈऔΕΔใ͕ଟ͘อक͍͢͠ w+BWB4DSJQUΛϞμϯʹ͍ͯͧ͘͠ʂʂ
ࠓ͙͢ʂ <script src="https://unpkg.com/vue"></script>