プロダクトに 1 から Vue.js を導入した話

プロダクトに 1 からVue.js を取り入れた話

マーケティング事業の開発現場でリアルに使われるJS事情

岡田正平（おかだしょうへい）@okashoi

• 開発グループソリューションユニット所属

• 2015年にウィルゲートに新卒入社（3年目）

• サーバサイドエンジニア

• PHP / Laravel

• Vue.js をチームに導入した立場のお話をします

2

自己紹介

宮西由貴（みやにしゆうき）

• 開発グループソリューションユニット所属

• 2016年にウィルゲートに新卒入社（2年目）

• フロントエンド勉強中

• Vue.js の導入を受けたメンバーの立場からお話をします

3

自己紹介

4

ウィルゲートの事業

• 前半パート「チームに導入した話」@岡田

• 後半パート「実際に使った話」@宮西

5

構成

前半パート：チームに導入した話

1. 背景

2. 導入のためにやったこと

3. 良かったこと

4. 学んだこと

5. 今後の展望

7

アジェンダ

1. 背景



4. 学んだこと

5. 今後の展望

8

アジェンダ

• 4人チーム（2017年4月1日時点）

• 全員がサーバサイド

• 社内システム開発がメイン

• ロジックの堅牢性が重視される

• 画面はほとんどが動きが無い

• JS は jQuery ベース

• 非同期処理をするのは稀

9

背景 | Vue.js 導入前のチーム状況

• 2017年4月から新規プロダクトの開発が始まる

• web コンサルティングのノウハウをシステム化

• 「動きのある」画面が必要になってくる

• 画面操作に応じて Ajax 通信でデータを取得

• 画面操作に応じてグラフを動的に描画

➢ チームとして、リッチな画面をつくる力を付ける必要がある（課題）

10

背景 | きっかけ

その一方で

• web アプリケーションフレームワークに Laravel を使ってきた

• その Laravel が 5.3 より Vue.js を公式採用

→ これを受けて個人的な興味から触ってみる

→ いい感触を得た

• データの操作と表示の更新を分離

• 小さく始められる

11


その一方で

• web アプリケーションフレームワークに Laravel を使ってきた

• その Laravel が 5.3 より Vue.js を公式採用

→ これを受けて個人的な興味から触ってみる

→ いい感触を得た

• データの操作と表示の更新を分離

• 小さく始められる

➢ チームの課題を解決できるのでは？ → Vue.js 導入へ

12


1. 背景



4. 学んだこと

5. 今後の展望

13

アジェンダ

• チュートリアルを作成

• 方針を整備

• メンバーへのアドバイス

14

導入のためにやったこと


• 方針を整備


15


16

チュートリアルを作成

• ハンズオン形式

• 30 分程度

• 【題材】行を動的に増減させられる表をつくる

• 過去に辛かった実装例を持ち出して Vue.js の威力を感じてもらう

• 基本的なプロパティ・ディレクティブの使い方やコンポーネントのつくり方を身につけられるもの

• 資料は公開した

• https://github.com/okashoi/vue-js-handson/

17

チュートリアルを作成


• 方針を整備


18


• ビルドシステム（gulp, webpack等）は使わない

• 小さく始めるため

• 一度に新しい概念を導入することによる混乱を避けるため

• Vue.js を強制しない

• メンバー間のスキルが不均一な状態

• Vue.js 導入によって開発にブレーキが掛かるのを懸念

• 「こういうところに使う」部分だけすりあわせておく

• 基本ルールを設け、それを Confluence 上に明文化

➢ あとは個別にフォローアップ（後述）

19

方針を整備


• 方針を整備


20


• はじめは、メンバーには席の横に付きながら一緒にロジックを構築していく

• slack やプルリクへのコメントで Tips を共有

• 「なぜこうするとよいか」をあわせて説明

21

メンバーへのアドバイス


• 方針を整備


22



• 方針を整備


➢ チームとして Vue.js を使っている状態に

23


1. 背景



4. 学んだこと

5. 今後の展望

24

アジェンダ

• 複雑な挙動の画面の実装を想定より早く、バグも少なく実装できた

• jQuery オンリーだったら実装困難だったかもしれない

• 詳細は後半の部で

• 新しいメンバーの受け入れがスムーズに進んだ

• チュートリアルを資料として残せた

• Vue.js 自体の学習しやすさも助けになっている

• 小さく始めたことでチームメンバーが自発的に学習していってくれた

• 「Vue.js の良さ」が伝わった結果

25

良かったこと

1. 背景



4. 学んだこと

5. 今後の展望

26

アジェンダ

• フロント設計の必要性を理解した

• 1,000行に及ぶ new Vue() とか。。。

• 「Vue.js を強制しなかった」ことが裏目に出た

• 人・時期によって使われ方がまちまち

• 「画面全体 Vue.js」vs.「一箇所の挙動だけ Vue.js」

• 規模に依らないことは Vue.js の利点だが、プロジェクト内では統一すべき

• npm 等のパッケージ管理ツールを使わないと辛い目を見がち

• モジュール（vue-〇〇的なやつら）が使えなかったりする

• ちょっとしたハックをして使うこともある

27

学んだこと

1. 背景



4. 学んだこと

5. 今後の展望

28

アジェンダ

• 「フロントの設計」を身につける

• 状態の管理、ロジックの切り分け、コンポーネントへの分け方...

• ビルドシステムの導入

• Laravel の Vue.js 公式採用の真価を発揮（Laravel Mix）

• パッケージ管理, ES6記法, bundle化, .vue ファイル等の恩恵

29

今後の展望

後半パート：実際に使った話

1. 背景

2. 導入前と導入後のコード比較

1. 新規プロダクトで開発した機能

2. 導入前の状態

3. 導入後の状態

3. まとめ

1. 導入してよかった点

2. 今後できたらいいこと

31

アジェンダ

1. 背景





3. まとめ



32

アジェンダ

• 社内ツールをメインに開発

• 新規プロダクトの開発が決定

• 今までに比べてリッチな画面が求められる

• Vue.jsの導入が決定

• 開発開始（2017年06月～）

• 1次フェーズの開発が完了（2017年10月）

33

Vue.js導入前後のできごと（時系列順）





• 開発開始（2017年06月～）


34


• jQueryを駆使して画面を作成できる

• 処理を再利用できていない

• JS側に大量のHTMLタグをベタ書きしている

• 状態の管理が複雑になっている

• 要素にどんな状態が存在するのかわかりにくい

• 要素の「状態」を見て処理を分けている

35

これまでの私のJSレベル

• jQueryを駆使して画面を作成できる

• 処理を再利用できていない

• JS側に大量のHTMLタグをベタ書きしている

• 状態の管理が複雑になっている

• 要素にどんな状態が存在するのかわかりにくい

• 要素の「状態」を見て処理を分けている

36

これまでの私のJSレベル

「状態」の管理がピタゴラ装置

37

頑張るJSがそこに在る

// クリック禁止状態だった場合は何もせずに終了

if ($(e.target).css(‘cursor’) == ‘not-allowed‘) { return false; }

// メッセージを表示し、編集ボタンを無効化

if (!$('.js-btn-update-target-areas').prop('disabled')) {

$('.js-message-target-areas-changed').prop('hidden', false);

$('a.js-open-modal-update-modification-order').css('cursor', 'not-allowed');

}

// 更新を可能にする

$('.js-btn-update-target-areas').prop('disabled', false);

「状態」の管理がピタゴラ装置

38

頑張るJSがそこに在る

// クリック禁止状態だった場合は何もせずに終了

if ($(e.target).css(‘cursor’) == ‘not-allowed‘) { return false; }

// メッセージを表示し、編集ボタンを無効化

if (!$('.js-btn-update-target-areas').prop('disabled')) {

$('.js-message-target-areas-changed').prop('hidden', false);

$('a.js-open-modal-update-modification-order').css('cursor', 'not-allowed');

}

// 更新を可能にする

$('.js-btn-update-target-areas').prop('disabled', false);





• 開発開始（2017年06月～）


39


もしVue.js導入前に実装したら…

vsVue.js導入後の実装では…

1. 背景





3. まとめ



40

アジェンダ

• 値の編集が可能な表

• 送信前に値のバリデーションを行う

• 選択した条件でデータを絞り込む機能

• グラフ、表が複数存在する画面

• 期間を指定するとグラフ・表の内容が変化

41

開発した機能


• 送信前に値のバリデーションを行う




42

開発した機能

43

値の編集が可能な表

44

値の編集が可能な表

重複禁止 / 150文字以内正の整数のみ許可

• ボタン押下時の処理にバリデーションを大量に記述

• 表の要素をすべて取得

• $.eachで1要素ずつ確認

45

Vue.js導入前

$.each(selectedKeywords, function (index, selectedElemet) {// 要素の入力チェックif (isInput != isEmpty(selectedElemet.hoge)) {

// 略}

// 要素の重複チェックif (selectedElemet.hoge in keywordListWithDuplication) {

// 略} else {

// 略}

// 以下略});

• v-modelを使ってユーザの入力を双方向バインディング

• 編集後の値を使った処理も簡単

• バリデーション

• 値を使った計算結果の表示

46

Vue.js導入後

<tr v-for="(element, index) in data"><td><input type=text v-model.trim="element.value1"></td><td><input type=number v-model.trim="element.value2"></td>

</tr>

• v-modelを使ってユーザの入力を双方向バインディング

• 編集後の値を使った処理も簡単

• バリデーション

• 値を使った計算結果の表示

47

Vue.js導入後

methods: {// elementChangedメソッド：要素に0以下の値が入力された場合// 自動で0に修正する// 小数の場合は小数部分を切り捨てるelementChanged: function(element) {

element.value = Math.floor(element.value);if (element.value < 0) {

element.value = 0;}

}}


• ボタンを押下した際に値のバリデーションを行う




48

開発した機能

49

選択した条件でデータを絞り込む機能

50

選択した条件でデータを絞り込む機能

絞り込み機能

• データをJS側で絞り込んだ後、表を再描画

• 表の再描画時に大量のHTMLをベタ書き

51

Vue.js導入前①

tableCheckBoxId = 'goal' + goalInfo['id'];tableCheckBox = '<td class="css-table-goal-checkbox"><label class="cr-styled"><input id="'

+ tableCheckBoxId+ '" class="js-modal-checkbox-goal" data-goal-name="'+ escape_html(goalInfo['name'])+ '" name="selected_goal_ids[]" type="checkbox" value="'+ goalInfo['id']+ '"><i class="fa"></i></label></td>';

tableId = '<td><div>' + goalInfo['id_at_hoge'] + '</div></td>';

• JS側でデータを変更したら画面側は動的に変化

52

Vue.js導入後①

• 絞り込み条件に対するバリデーションをいたるところに記載

• 絞り込むボタンを押下した際にチェックが走る

53

Vue.js導入前②

// -----------------------------------// 絞り込み機能// -----------------------------------

// 要素1の絞り込み指定範囲内のものだけを表示$('.js-button-check-condition1').on('click', function(e) {

// バリデーションと絞り込み処理});

// 要素2の絞り込み指定範囲内のものだけを表示$('.js-button-check-condition2').on('click', function(e) {

// バリデーションと絞り込み処理});

• 役割を分けて処理を記述できる

• watch:リアルタイムなバリデーション

• methods: データの絞り込み処理

• computed: データを使った計算

• filter: 表示用に値を整形（例：1000円 → 1,000円）

54

Vue.js導入後②

watch: {filterConditions: {

handler: function (conditions) {// 非負値のみ許可if (conditions.hoge.lower < 0) {

conditions.hoge.lower = 0}// 以下略

},deep: true

}}


• ボタンを押下した際に値のバリデーションを行う




55

開発した機能

56

グラフ、表が複数存在する画面

• グラフの数だけ、似たような処理を記述

• 初期のグラフ表示用の設定

• グラフのデータが変わった時の処理

• 変更があった時に直し漏れが発生する危険性

• コピペが大量発生

• コード量が多くて直す箇所が分かりにくい

57

Vue.js導入前

58

Vue.js導入前

// パターンに紐付くデータおよび軸の設定をそれぞれ行う// 追加でテーブルへの表示もこちらで行うswitch (patternId) {

// ほげのグラフcase patternIds['hoge'] :

_createHogeDatasets();config.options.scales = hogeScales;break;

// ふがのグラフcase patternIds['fuga'] :

_createFugaDatasets();config.options.scales = fugaScales;break;

• グラフの作成にはChart.jsを使用

• vue-chartjsというVue.js用のプラグインを使用した

• vue-chartjsにはグラフ用のコンポーネントがある

59

Vue.js導入後

http://vue-chartjs.org/

• グラフの種類によってコンポーネント化

• データが異なる同じ種類のグラフに対応

• グラフの更新は、データをコンポーネントに渡すだけ

60

Vue.js導入後

//------------------// 円グラフ//------------------Vue.component('pie-chart', {

extends: VueChartJs.Pie,mixins: [VueChartJs.mixins.reactiveProp],props: ['options'],mounted: function () {

this.renderChart(this.chartData, this.options);}

});

61

Vue.js導入後

<div class="row"><div class="col-md-6 col-sm-6 col-xs-6 item">

<pie-chart:title="hogeTitle":height="150":chart-data="hogeDatacollection"

></pie-chart>

</div><div class="col-md-6 col-sm-6 col-xs-6 item">

<pie-chart:title="fugaTitle":height="150":chart-data="fugaDatacollection"

></pie-chart>

</div></div>

1. 背景





3. まとめ



62

アジェンダ

• データの変更があった際の画面への反映が簡単

• 導入前：JS側でデータ変更→画面側に反映させる処理が必要

• 導入後：JS側でデータ変更→自動で画面側に反映される

• コードが読みやすくなった

• データ処理と表示処理が分離されている

• データ処理の内部でも処理が用途に分かれている（computed, method, filtersなど）

• コンポーネントによって共通部分を再利用することができた

63

導入してよかった点








64









65









66




• 導入後：JS側でデータ変更→自動で画面側に反映される！



• データ処理の内部でも処理が用途に分かれている(computed, method など)


67


仕様の変更や修正にも強いコードになった

• 導入直後のコードのリファクタリング

• 導入直後コードはVue.jsの恩恵を受けきれていない

• まだまだVue.jsで記述できる箇所がある

• 共通部分をまとめる

• 現状：ページ単位で共通処理がまとまっている

• 今後：ページを跨いで共通部分をまとめる

• グラフのコンポーネントなど

68

今後やりたいこと

一緒に働くメンバーを募集しています！

プロダクトに 1 から Vue.js を導入した話

Technology