Vue.js+Vuetify.jsを使ったWEBアプリケーション構築～モックアップ作成～

Vue.js

Last updated at 2020-09-29Posted at 2020-09-29

はじめに

設計工程で画面レイアウトをExcelやHTMLなどで顧客と調整し、アプリケーションがやっと完成！
いざ、エンドユーザに使ってもらうと、「イメージと違う」、「もっとこうしてほしかった」、「使いづらいから直してほしい」など、せっかく苦労して作成したアプリケーションが喜ばれなかった経験はないでしょうか。

エンドユーザには喜ばれたい。でも、調整の為に

きれいなモックアップを作成する時間はない。
フロントエンド部分だけ作成して顧客に見せたくても開発環境を顧客に作ってもらうわけにもいかない。
アプリケーション構築後に顧客要望でUIが変わったときにモックアップのメンテナンスをする時間はない。

などのジレンマもあるかと思います。

SPAはこの問題を解決してくれます。
SPAは基本的にブラウザのみで動作する為、本物のソースコードをほぼそのままモックアップとして提供することができます。
とはいえ、バックエンドとの連携部分については若干モックアップ用のコードを書く必要があります。

以前投稿した記事「Vue.js+Vuetify.jsを使ったWEBアプリケーション構築」のサンプルアプリケーションを基にモックアップの作成方法ついて説明したいと思います。

説明

SPAは基本的には本物ソースコードをそのままモックアップとして提供可能ですが、バックエンドとの連携部分はモックアップ用のコードを書く必要があります。
以下にモックアップ用のソースコードについて説明します。

axiosのモックモジュール作成

サンプルアプリケーションはバックエンドとの連携にaxiosを使っています。
axiosのモックとして、axios-mock-serverを利用しています。

axios-mock-serverはURLとファイルパスでマッピングして、URLに対応するモックモジュールを特定しています。
サンプルアプリケーションで、アクセスするURLとモックモジュールの対応は以下の通りです。

URL	リクエストメソッド	mockファイル
/joho	GET	/mocks/joho.js
/joho	POST	/mocks/joho.js
/joho/:id	DELETE	/mocks/joho/_id.js

※ファイル名はaxios-mock-serverでの命名規則です。

URLにアクセスした場合の戻り値をmockファイルに実装します。

/mocks/joho.js

const usersAll = [
    {"id": "1", "name": "サンプル 名前1", "mailAddress": "sample1@example.com", "phoneNo": "09000000001", "torokuNichiji": "2020/01/01 01:00"},
// ・・・省略
];

const usersSelf = [
    {"id": "3", "name": "サンプル 名前3", "mailAddress": "sample3@example.com", "phoneNo": "09000000003", "torokuNichiji": "2020/01/03 03:00"},
// ・・・省略
]

export default {
    get({values, params}) {
        // params.modeが全データかマイデータかで返すデータを決めます。
        let data = (params.mode == 'SELF') ? usersSelf : usersAll;
        // 検索の場合はparams.nameが指定されているので、データに絞り込みをかけます。
        if (params.name) {
            console.log(params);
            let regex = new RegExp(params.name, 'i');
            data = data.filter(datum => regex.test(datum.name));
        }
        // 1番目がHTTPステータスコード、２番目がレスポンスデータ
        return [200, data];
    },
    post({data}) {
        // 渡されたデータに登録日時を追加してそのまま返します。
        data.torokuNichiji = "2019/10/09 10:52";
        return [200, data];
    }
}

/mocks/joho/_id.js

export default {
    // URLパラメータはvaluesに入ってきます。
    delete({values}) {
        let status = 200;
        console.log(values);
        // idが13のデータを消そうとするとシステムエラーが発生します。
        if (values.id === 13) status = 500;
        return [status];
    }
}

これを作成したら次のコマンドを実行します。
("axios-mock-server -b"コマンドのエイリアスです。)

$ npm run build:axios-mock

コマンドが成功すると、「/mocks/$mock.js」が作成されます。
これでaxiosのモックアップの作成完了です。

モックアップの設定

サンプルアプリケーションがaxiosのモックモジュールで動作するように設定します。

/src/.env

・・・省略

# モックアップモード
# true or false
VUE_APP_MOCK_MODE=true

・・・省略

/src/axiosObj.js

import axios from 'axios';
import store from './store';
// axiosのモックモジュールを読み込む
import mock from '../mocks/$mock.js'

let axiosObj = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL
});

// 環境変数でモックモードに設定されている場合のみmockを有効にする。
// ローディングダイアログを表示したいので、setDelayTimeでレスポンスを遅らせる。
if (process.env.VUE_APP_MOCK_MODE === 'true') mock(axiosObj).setDelayTime(500);

// ・・・省略

export default axiosObj;

main.js

// ・・・省略
import axiosObj from './axiosObj'
// ・・・省略

// axiosオブジェクトの設定
Vue.prototype.$axios = axiosObj;

// ・・・省略

モックアップの作成

サンプルアプリケーションのルートディレクトリで以下のコマンドを実行してください。

$ npm run build:mock

ルートディレクトリ配下に「dist_mock」ディレクトリが作成されます。この中のindex.htmlをブラウザで開くとサンプルアプリケーションの動作を確認することができます。

おわりに

「dist_mock」を顧客に提供し、本物と同等の操作感を味わってもらうことで、アプリケーション完成後に顧客からイメージと違うなんて言われることがなくなるのではないでしょうか。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Vue.js+Vuetify.jsを使ったWEBアプリケーション構築 ～モックアップ作成～