Introduce use-case for VueJS in Enechange Gas simulation.

1. ガス単独診断に学ぶ
VueJS
2017/11/28
Tomoya Kawanishi

2. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
1自己紹介
川西 智也
エネチェンジ株式会社 チーフエンジニア
Ruby関西代表
出自
新卒で入社したのは、関西電力
もともとはサーバサイド、インフラまわりを主に担当
最近はフロントエンドも開発するようになった
Buzzった記事
Ruby のオススメの機能 7選
https://qiita.com/cuzic/items/a265f140fdff289d5c07
PostgreSQL のパフォーマンスチューニング
https://qiita.com/cuzic/items/f9b846e6171a54079d77

3. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
ガス単独診断とは
従来、電気・ガスの組合せで最適な会社を提案
電気はすでに切替済のユーザも多い
ガスだけの組合せでの節約額の提示のニーズあり
ガス単独診断をリリース！
初期版はチャットUIだった
ただし、分岐もなく一直線で聞きたいことを聞くだけ
チャットＵＩの意味なし
VueJS を使った SPA に全面リニューアル！
ユーザ利便性を向上！
2

4. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
ガス単独診断（リニューアル後） 3
https://enechange.jp/gas

5. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
computed プロパティを多用！
computed プロパティはかなり便利！
たとえ、1行の内容でも computed プロパティにする
読みやすく簡潔になる
結果がキャッシュされるので、高速化の効果もある
4
computed: {
postcodeFull(){
return this.postcode1 + this.postcode2;
},
isPostcodeValid(){
return this.postcodeFull.match(/^¥d{7}$/);
},
isPostcodeErrorVisible(){
return this.tainted["postcode1"] &&
this.tainted["postcode2"] &&
!this.isPostcodeValid;
},
…
郵便番号のエラー表示での使用例

6. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
compted プロパティを watch ！
VueJS では computed プロパティを watch できる
条件分岐をシンプルにできる
5
watch: {
isPostcodeValid(current){
if(current){
this.getGasProviders();
this.resetSimulation();
}
},
…
郵便番号入力後の処理での使用例

7. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
$refs の活用
$refs で、特定の DOM 要素を参照可能
ここでは、郵便番号１を入力後、フォーカスを移動する
ために $refs を使っている
6
watch: {
isPostcode1Valid(current, old){
if(current){
this.$refs.postcode2.focus();
}
},
…
},
computed: {
isPostcode1Valid(){
return this.postcode1.length === 3;
},
<input type="text" … name="postcode2"
v-model="postcode2" … ref="postcode2">
郵便番号での $refs の使用例

8. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
入力エラーのリアルタイム表示 1 / 2 7
<div … v-show="isPostcodeErrorVisible"><span>
郵便番号を入力してください</span></div>
computed: {
isPostcodeErrorVisible(){
return this.tainted["postcode1"] &&
this.tainted["postcode2"] &&
!this.isPostcodeValid;
},
入力誤りがあったとき、エラー文言を表示したい
最初から、エラー文言が表示されてるとウザい
入力後だけ、
エラー表示を
有効化
tainted という
プロパティに
触ったか
どうかを格納

9. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
入力エラーのリアルタイム表示 2 / 2
@blur は v-on:blur の syntax sugar
blur イベントをフックして、特定の処理を実行できる
this.$set(this.tainted, fieldname, true); は
this.tainted[fieldname] = true と同じ意味
$set を使うと computed 等の再計算が実行される
8
methods: {
doTaint(event){
if(event.target.value){
const fieldname = event.target.name;
this.$set(this.tainted, fieldname, true);
}
}
…
<input type="text" … name="postcode2" v-model="postcode2" …
@blur="doTaint" ref="postcode2">
エラー表示での @blur イベントの使用例

10. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
結果は1行ごとに v-component として設計
Vueコンポーネントをどう分割するか？
設計結果
入力： １つの Vue コンポーネント
結果： 1行（１つのガスプラン）ごとにコンポーネント化
computed プロパティの機能を活用し、
View 側をシンプルに、見通しよく記述
9
<ul class="m__plans-container">
<li v-for="result in results">
<% if is_pc? %>
<plans-finder-item-pc :result="result" />
<% else %>
<plans-finder-item-smp :result="result" />
<% end %>
</li>
</ul>
結果ごとに Vue コンポーネントでレンダリング

11. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
x-template の活用 10
<script type="text/x-template" id="plans-finder-item-pc">
<%= render 'plans_finder_item_pc' %>
</script>
<script type="text/x-template" id="plans-finder-item-smp">
<%= render 'plans_finder_item_smp' %>
</script>
結果画面のマークアップをどう記述するか？
x-template を使って、そのまま従来の View を活用
.vue などは逆に活用せず
Ruby on Rails の従来の View と同じ運用の方が、
トータルで分かりやすいと判断した
従来の Rails プロジェクトで開発していた人にとっての
とっつきやすさを重視
x-template の活用の例

12. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
Spread演算子を使った共通化
ES2015 の Spread 演算子を使って、オブジェクトリテ
ラルの一部を共通的に利用
相違点は、ID だけ。
すっきり！
11
const plansFinderItemPc = {
template: "#plans-finder-item-pc",
...plansFinderItemCommon
};
const plansFinderItemSmp = {
template: "#plans-finder-item-smp",
...plansFinderItemCommon
};
Vue.component('plans-finder-item-pc', plansFinderItemPc);
Vue.component('plans-finder-item-smp', plansFinderItemSmp);
モバイルと PC で、共通の設定を利用する例

13. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
Filter の活用
一部の処理は View 側で頻出する（例： カンマ区切り）
メソッド呼び出しは、読みにくい
右から左に進むと思考が止まる
Filter を活用！
左から右に進む！読みやすい！
12
filters: {
numberWithDelimiter(value){
return value.toString().replace(/¥B(?=(¥d{3})+(?!¥d))/g, ",");
},
abs(value){
return Math.abs(Number(value));
}
<span class="value">{{ actualYearSaving | abs |
numberWithDelimiter }}</span><span class="unit">円</span><span v-
if="isCheaper">節約</span> <span v-else>割高</span>
Filter の活用例

14. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
番外編 lodash の活用
Lodash はすごく便利だった。オススメ
_.debounce
_.differenceBy
_.each
_.find
_.filter
_.isEmpty
_.map
_.reject
_.some
_.sortBy
13

15. Otemachi.rb #1 発表資料 「ガス単独診断に学ぶ VueJS」
14ガス単独診断全面リニューアルの感想
VueJS を活用して、全面リニューアルを実施した
2週間で全面リニューアルが完了でき、
VueJS の開発生産性の高さを実感した
特に computed プロパティが非常に便利だった
View 側のコードをシンプルにできた

16. 15
ご清聴ありがとう
ございました