Help us understand the problem. What is going on with this article?

Vue.jsとFluxで実現するラピッドプロトタイピング

More than 1 year has passed since last update.

ラピッドプロトタイピングとは

製品開発で用いられる試作手法であり、高速に試作することを目的とします。
プロトタイプを試行錯誤しながら作っていくことに向くので、コンセプトを検証する段階でのユーザーテストや、メンバーやクライアント間での仕様をすり合わせることに適していると思います。

Webの世界ではラピッドプロトタイピングツールとして、Adobe XDやSketchが有名です。

XDやSketchの特徴

XDのようなツールは、GUIで素早く快適に画面設計を行っていくことを得意としていて、
ボタンなどのオブジェクトに対して遷移を設定することも可能なため、動的なプロトタイプまで制作できるようになっています。素晴らしいツールです。

「繰り返し」と「条件分岐」

ソフトウェアでは「繰り返し」と「条件分岐」が重要な要素として存在しておりますね。

XDでは快適な「繰り返し」を実現するために、「リピードグリッド」という優れた解決方法が実装されています。
※使ったことない方は一度動画なりで見て下さい。素晴らしいデザインです。

一方で「条件分岐」を実現するための手段は存在していません。

条件分岐が存在しないため、状態を反映したモックアップの作成が出来ません。
したがってユーザーの入力に応じ画面を変化させたり、環境や行動がUX上の重要な要素である場合に、XDでは検証が不十分になることがあり得ます。

ラピッドプロトタイピングツールとして

デザイナーはXDが最良だと思いますが、フロントエンドエンジニアやコーダーの場合、コードを書いた方が良いケースも多いでしょう。

こうしたケースではjQueryを用いられることが多かったと思うので、Vue.jsとFluxを用いて高速にモックを作成するための手法を紹介します。

セットアップ編

どんなサーバーでも構いません。
Vue.jsは、CDNですぐに始められます。

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

実装例

リストから商品をカートに入れることで、カートの中身が増えるサンプルで説明します。
説明を簡略化したいので、今回はCSSの設定は行いません。機能としても不十分なものです。
脳内でお好みのスタイルを割り当てながらご覧頂ければ幸いです。

html

今回は分かりやすいようにセマンティックなコーディングをしていますが、プロトタイピング時は不要です。すべてdivでいきましょう。

index.html
<!DOCTYPE html>
<html>
<head>
  <title>sample</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="/js/store.js">
  <script src="/js/header.js">
  <script src="/js/list.js">
</head>
<body>
  <header id="header">
    <div id="cart" v-on:click="toggleCartModal">{{ sharedState.cart.length }}</div>
    <div v-if="privateState.visibleModal">
      <ul>
        <li v-for="item in {{ sharedState.cart }}">
          <p>{{ item.name }}</p>
        </li>
      </ul>
      <button v-on:click="toggleCartModal">×</button>
    </div>
  </header>
  <ul id="list">
    <li v-for="item in {{ privateState.listData }}">
      <p>{{ item.name }}</p>
      <button v-on:click="addCart" :data-id="item.id">カートに入れる</button>
    </li>
  </ul>
</body>
</html>

v-(ブイハイフン)で始まる属性は、ディレクティブと呼びます。
それぞれがどのような意味を持ち、どのように用いるかの解説は 公式APIガイドでご覧ください。

JavaScript

/js/store.js
var store = {
  state: {
    cart: []
  },
  addCartAction (obj) {
    this.state.cart.push(obj);
  }
}

上記storeオブジェクトを他のファイルから操作していきます。

/js/header.js
var header = new Vue({
  el: '#header',
  data: {
    privateState: {
      visibleModal: false
    },
    sharedState: store.state
  },
  methods: {
    toggleCartModal: function (event) {
      this.privateState.visibleModal = !this.privateState.visibleModal;
    }
  }
})

privateStateとsharedStateが分かれていますが、下の項目で詳しく説明します。

/js/list.js
var data = [
  {
    "id": 1,
    "name": "foo"
  },
  {
    "id": 2,
    "name": "bar"
  }
]

var list = new Vue({
  el: '#list',
  data: {
    privateState: {
      listData: data
    },
    sharedState: store.state
  },
  methods: {
    addCart: function (event) {
      //ES2015~
      var addition = this.privateState.listData.find(i => i.id === event.target.dataset.id);
      store.addCartAction(addition);
    }
  }
})

dataはサーバーサイドから渡されたり、ajaxで取ってきたりすると思いますが、プロトタイピングでは何でも良いです。
正式なデータに差し替えることも簡単なので。

privateStateとsharedStateについて

結論から言うと、privateStateはそのモジュールのみで扱われる状態を管理していて、
sharedStateはモジュールをまたがる状態を管理しています。

上記サンプルでは、モーダルウィンドウが表示されているかどうかについては、headerモジュールのみが知っておけば良いですね。なのでprivateStateです。
一方、カートの中身に関しては、headerモジュールとlistモジュール両方から操作や参照する必要があります。
こうしたモジュールをまたぐ状態の管理に、storeオブジェクトを間におきながらsharedStateを用います。

Flux

実装例として、storeパターンを用いたコンポーネント間の状態管理をしました。
公式ガイドの実装例も参考になります。

あえて説明を避けてきましたが、このサンプルはとても簡単なFluxライクの実装パターンです。
※厳密なFluxの実装ではありませんが、データとして意識するのはstoreだけで良い点が似ています。

作って壊すを繰り返すことが重要なプロトタイピングにおいても、DOMを直接操作するのではなく、データを変更するだけで、表示を作って壊していけるFluxライクな実装を始めましょう。

そしてFluxライクな実装を簡単に行いたいなら、jQueryよりもReactよりもVue.jsが適しています。

参考

https://jp.vuejs.org/v2/guide/
https://jp.vuejs.org/v2/api/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした