【ペパボ×プレイド】Tech Meetup 〜自動テスト・CI編〜を開催しました！

<html><head></head><body><p>こんにちは。プレイドの藤川(@atsushiss15)です。<br><br>
プレイドには学生時代よりインターンとして参加しており、今年の４月に新卒社員として正式に入社しました。現在に至るまで弊社の提供するKARTEの機能開発を担当しています。</p>
<p>今回はVue.jsを利用したコンポーネント指向のUI開発において、私たちが実際に遭遇した問題とその解決策として導入したStoreパターンについてご紹介したいと思います。<br>
Vue.jsというフレームワークが題材にはなりますが、Storeパターンの考え方自体は他のフレームワークを使った開発にも転用できると思うので、ぜひ読んでみていただければと思います。</p>
<h1 id="目次">目次</h1>
<ul>
<li>Vue.jsとは？</li>
<li>アプリケーションの大規模化に伴って生じた問題</li>
<li>解決策としてのStoreパターン</li>
<li>サンプルコード他</li>
<li>Storeパターンに移行した感想</li>
<li>最後に</li>
</ul>
<h1 id="Vue.jsとは？">Vue.jsとは？</h1>
<p><a href="http://jp.vuejs.org/" target="_blank" rel="noreferrer">Vue.js</a>を一言で表現するならば、「シンプルさが売りのMVVMフレームワーク」です。<br>
他の有名なMVVMフレームワークにはAngularJSやReactなどが挙げられますが、それらに比べてVue.jsはそのシンプルさ故に学習コストが低い上、あらゆる規模のアプリケーションで利用することができる設計になっています。</p>
<p>Vue.jsを知らない方でも、簡単なToDoアプリの実装例を見てみれば大体の使い方が理解できるのではないでしょうか。</p>

<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>
<script async="" src="//jsfiddle.net/atsushiss15/kj29sbh1/embed/js,html,result/"></script>
<p>上記のコードは、Vue.jsの公式サイトに掲載されているサンプルのコードを便宜上CoffeeScriptで書き直したものです。</p>
<p>簡単に解説をしてみます。<br>
id属性を用いてVueインスタンスと仮想DOMの紐付けを行い、<code>v-model</code>でデータの双方向バインディング、<code>{{ }}</code>構文でテキストのレンダリング、<code>v-for</code>でリストのレンダリング、<code>v-on</code>で要素にイベントリスナのアタッチをそれぞれ行っています。</p>
<p>Vue.jsはこの辺りさえ抑えておけば、とりあえずコードを書き始めることができるので便利です。</p>
<h1 id="アプリケーションの大規模化に伴って生じた問題">アプリケーションの大規模化に伴って生じた問題</h1>
<p>Vue.jsの最も大きな特徴の一つにコンポーネントシステムがあります。<br>
この仕組みを利用して、アプリケーションのUIをコンポーネントレベルに分割し、組み合わせるように実装することで、コードの再利用性が向上し、ロジックも各コンポーネントの中にカプセル化することができます。</p>
<p>コンポーネントの状態は各コンポーネントがそれぞれ管理し、状態やイベントの共有は<a href="http://jp.vuejs.org/api/#props" target="_blank" rel="noreferrer">props</a>や<a href="http://jp.vuejs.org/api/#vm-dispatch" target="_blank" rel="noreferrer">$broadcast</a>/<a href="http://jp.vuejs.org/api/#vm-broadcast" target="_blank" rel="noreferrer">$dispatch</a>といった仕組みを利用して行います。<br>
下図はコンポーネント間でのデータやイベントの伝達をイメージしています。propsを用いてデータを子コンポーネントへ明示的に受け渡したり、$broadcastや$dispatchを使って他コンポーネントへイベントの通知を送ることができます。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/ad51dcdd-703b-4f66-8255-89a89c6bdbcb/----------2016-10-12-19.27.58.png" alt=""></p>
<p>しかし、これらの仕組みを利用すると、アプリケーションの大規模化に伴い状態管理が複雑になってきてしまいます。<br>
状態が多くのコンポーネントに分散し、更にそれらが相互作用するようになるとpropsや$broadcastを使ったコンポーネント間でのデータやイベント伝達の仕組みが多用され、コンポーネント同士が密結合・複雑化し始めるのです。<br><br>
実際にKARTEの開発においても、これらが原因でコード変更の影響範囲が分かりづらく改修が困難になり、コードの重複やサーバーサイドとの無駄な通信などが散見されるようになっていました。</p>
<h1 id="解決策としてのStoreパターン">解決策としてのStoreパターン</h1>
<p>そこで私たちはStoreパターンによって<strong>アプリケーションの状態（State）・処理（Actions）・イベントの共有</strong>を行うことで、密結合しているコンポーネントの分離、コードの重複や無駄な通信の削減を目指しました。</p>
<h2 id="私たちがStoreパターンと呼んでいるもの">私たちがStoreパターンと呼んでいるもの</h2>
<p>Storeパターンは、Storeというグローバルな共有オブジェクトに複数のコンポーネントから使用される共通の状態・処理・イベントを管理させることで、コンポーネント同士を分離する考え方です。</p>
<p>下図のように、ユーザーから何らかの入力を受けたコンポーネントはStoreの共有処理（Shared Actions）を直接Callすることで共有状態（Shared State）を更新します。各コンポーネントはこの共有状態を監視することでそれぞれの表示を変化させます。<br>
また、Storeには共有のイベントも管理させます。何らかのイベントをトリガにしてコンポーネントごとの処理を行いたいケースなどは、これを利用して各コンポーネントに通知を送信します。</p>
<p><img src="https://ik.imagekit.io/newt/61b151f921640c0018173598/6593975e-2483-4c37-a10a-0c568d0ed4bd/----------2016-10-13-3.02.32.png" alt=""></p>
<h2 id="「Fluxとは何が違うの？」">「Fluxとは何が違うの？」</h2>
<p>というご指摘が挙がってきそうなので、<a href="https://facebook.github.io/flux/" target="_blank" rel="noreferrer">Fluxアーキテクチャ</a>との差分についても少し触れておきたいと思います。</p>
<p><a href="http://v1.vuejs.org/guide/application.html#State-Management" target="_blank" rel="noreferrer">Vue.js公式ドキュメント</a>でも言及されていますが、store patternは共有の状態・処理をグローバルなオブジェクトに管理させることでコンポーネント同士が密結合・複雑化してしまうのを防止することを目的としています。</p>
<p>そういった意味で、Fluxはstore patternの考え方をベースに、Event Dispatcherによる一方向（one-way）の状態更新フロー以外は許容しないという制約を加えたアーキテクチャであることが分かります。<br>
対して、私たちがStoreパターンと呼んでいるものは、Fluxの思想自体は汲み取りつつ柔軟性とシンプルさを担保したものであるといえます。</p>
<p>具体的には、状態更新に関する制約を設けないことで柔軟性を確保し、Event Dispatcher等は介さず直接関数をCallして状態更新を行うことでシンプルさを保つようにしています。そのためTPOに応じてコンポーネントが直接Storeの状態を書き換えることも許容します。</p>
<p>このように私たちがFluxのように、制約によってキレイに整理された（しかし少し大げさな）アーキテクチャよりも、柔軟性やシンプルさといったものを求めたのは**「ルールをできるだけ作らずに属人的に判断する」**という企業文化を大切にしているからです。<br>
また別の観点からみれば、KARTEの管理画面がサブアプリごとにページを分けるような構造になっており、そもそもフロントエンドが大規模化しすぎないように設計されているということも、このような方針を採る際の後押しとなりました。</p>
<h1 id="サンプルコード他">サンプルコード他</h1>
<p>何はともあれコードで説明するのが一番です。<br>
せっかくなので、冒頭でご紹介したToDoアプリのコードをStoreパターン的に実装してみます。</p>
<script async="" src="//jsfiddle.net/atsushiss15/fgone3us/1/embed/js,html,result/"></script>
<p>この例ではStoreによって状態（state）と処理（addToDo, removeTodo）の共有を行っています。<br>
一見コードが増えたようにも見えますが、複数コンポーネントで状態や処理の共有が行われるようになるとStoreパターンによる恩恵を享受できるはずです。</p>
<h2 id="イベントの通知について">イベントの通知について</h2>
<p>イベントの通知については幾つかの手段が考えられますが、次の２つをケースにより使い分けるのが良いのではないでしょうか。</p>
<h3 style="color:#494a50;" id="1. StoreのEventEmitterを利用してEventの通知を行う">1. StoreのEventEmitterを利用してEventの通知を行う</h3>
<pre><code class="hljs"><span class="hljs-comment"># Store側</span>
{EventEmitter} = <span class="hljs-built_in">require</span> <span class="hljs-string">'events'</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">XxxYyyStore</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">EventEmitter</span></span>
<span class="hljs-comment"># 省略...</span>
</code></pre>
<pre><code class="hljs"><span class="hljs-comment"># コンポーネント側</span>
<span class="hljs-comment"># ...省略</span>
methods: <span class="hljs-function">-&gt;</span>
    hogeAction: <span class="hljs-function">-&gt;</span>
      <span class="hljs-comment"># 別vueや別componentに変更等を通知</span>
      xxxYyyStore.emit <span class="hljs-string">'conditionChanged'</span>, {}

  compiled: <span class="hljs-function">-&gt;</span>
    <span class="hljs-comment"># 別vueや別componentからStore経由でイベントハンドリング</span>
    xxxYyyStore.<span class="hljs-literal">on</span> <span class="hljs-string">'conditionChanged'</span>, <span class="hljs-function"><span class="hljs-params">()</span> -&gt;</span>
      <span class="hljs-comment"># handling</span>
</code></pre>
<h3 style="color:#494a50;" id="2. watchやcomputedを利用して間接的にイベントハンドリングを行う">2. watchやcomputedを利用して間接的にイベントハンドリングを行う</h3>
```
# Store側
# ...省略
watch:
  'xxxYyyStoreState.todos': -&gt;
     # 共有状態に変更があった場合の処理
computed:
    isEmpty: -&gt;
      @xxxYyyStoreState.todos.length is 0 
```
複雑な変更と明示的なタイミングの制御が必要なものは **1.** の方法で個別にハンドリングし、そうでない場合は **2.** の方法でハンドリングするといった要領で使い分けてみると良さそうです。
<h2 id="その他に留意すべき点">その他に留意すべき点</h2>
<p>また、Vue.jsでStoreパターンを構築する際には以下の点にも留意するようにしてください。</p>
<h3 style="color:#494a50;" id="1. XxxYyyStore.stateに余分なものを入れない">1. XxxYyyStore.stateに余分なものを入れない</h3>
XxxYyy.stateは、Storeの外に公開されるオブジェクトです。Vueのデータ更新監視の対象になるので、あまり大きなものを入れないほうが良いです。
<h3 style="color:#494a50;" id="2. XxxYyyStore.stateを置き換えない">2. XxxYyyStore.stateを置き換えない</h3>
一つのStoreインスタンスを複数箇所で使い回す形になります。
constructorで作ったstateを、複数のVueコンポーネントで監視するようになるので、state自体を置き換えるコードがあると、値の追跡が正常に行われなくなります。
```
# まずい例
constructor: -&gt;
  @state=
    value: ''
updateXxx: (newState) -&gt;
  @state = newState # &lt;- @stateを置き換えているので、更新が拾えなくなる
```
<h3 style="color:#494a50;" id="3. 基本的に$broadcast, $dispatch, $parent, $childは使用しない">3. 基本的に$broadcast, $dispatch, $parent, $childは使用しない</h3>
これらの仕組みはほとんどStoreパターンで補うことができるので、コンポーネントの密結合・複雑化を防ぐためにも使うべきではありません。props（データを子コンポーネントに明示的に伝達する仕組み）に関しても使用を必要最小限に抑えてください。
<br>
さて、簡単なサンプルコードを使って説明してきましたが、なんとなく感覚は掴んでいただけたかと思います。実際にはもう少し考えなければならない事があるのですが、基本的には上記のシンプルなパターンを拡張していくイメージになります。
<h1 id="Storeパターンに移行した感想">Storeパターンに移行した感想</h1>
<h2 id="良かった点">良かった点</h2>
<ul>
<li>サーバーとの通信処理や複雑なロジックがStore側に集約されたことで、コンポーネント側はVueが本来担うべき表示系の処理に集中できるようになった。</li>
<li>コンポーネント間の密結合が解消され、コンポーネントの再利用性が高まった。</li>
<li>全体的に見通しが良くなるのでロジックの改修等が楽に行えるようになった。</li>
</ul>
<h2 id="考えるべき点">考えるべき点</h2>
<ul>
<li>重い初期化処理に対しては適宜遅延させるなどの工夫が必要になる</li>
<li>Storeでの処理後にコンポーネント側で後処理を行う際は、コールバックで行うのか、状態の変更を監視して行うのか、イベントをハンドリングして行うのか、などを適宜使い分ける必要がある</li>
<li>状態の更新フローに関する制約をどこまで設けるかは再考する必要がある</li>
</ul>
<p>所感としては、Storeパターンへの移行の目的としていた点はおおよそ満たせたのではないかと感じています。もちろんまだまだ試行錯誤が必要な点はあると思うので、より良いアーキテクチャを目指して日々改善していきたいと考えています。</p>
<h1 id="最後に">最後に</h1>
<p>ウェブ接客プラットフォーム「KARTE」を運営するプレイドでは、 KARTEを支える技術に興味を持つエンジニア（インターンも！）を募集しています。</p>
<p>詳しくは<a href="https://plaid.co.jp/recruit/engineer.html" target="_blank" rel="noreferrer">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects" target="_blank" rel="noreferrer">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>
</body></html>

Vue.jsを用いたコンポーネント指向のフロントエンド開発において弊社が導入したStoreパターンについてご紹介します。

コンポーネント指向のUI開発時に起きがちな密結合・複雑化問題をStoreパターンで解決する