こんにちは！
LIFULLエンジニアの吉永です。
本日も最近あまり関わらなくなったのであまりキャッチアップできていなかったフロントエンド開発技術についてインプットした内容を備忘録として記載していきます。

本記事の概要

Vue.js入門 Vol.1 ～jQueryとの対比編～
Vue.js入門 Vol.2 ～jQueryとの対比編～
Vue.js入門 Vol.3 ～基礎まとめで簡易家計簿を作る編～
Vue.js入門 Vol.4 ～外部API呼び出し編～
上記4記事の続きで、業務効率を改善する為のちょっとした便利ツールを開発してみたので、共有したいと思います。

このツールを作った背景として、e2eテストを手動操作にて行っていた時に、実際に遷移したURLとテスト仕様書に記載されたURLのクエリパラメータが一致しているかをチェックする際に、この時URLのパス部分は動的に変わる要件だったり、クエリパラメータの並び順がテスト仕様書と実装で相違が生まれた場合に、ひとまず期待通りのクエリパラメータを含んでいて、バリューも想定通りなのかを目視チェックすることなく、機械的に行いたいというニーズから作成しました。

本来はテスト仕様書と実装でURLは完全一致であれば、単純なテキスト比較でいいですし、それが望ましいと思いますが、今回私が業務にて実際に遭遇したのは、とあるスマホアプリからリンクを踏んで、スマホのデフォルトブラウザでページを開く際に、クエリパラメータの並び順がデフォルトブラウザのアドレスバーからコピーすると変わっていて、かつその変化もアルファベット順などの規則性を見いだせなかったので、クエリパラメータを一つ一つ分解して一致してるかを確認する必要があり、これは大変面倒だということで作成しました！

作成するアプリケーションの仕様

二つのURLを入力値として受け取る。
二つのURLクエリのキーが一致していてかつ、バリューが一致しているかを検査して結果を表示する。
クエリ内のキーの並び順は比較対象外とする。
入力されたURLクエリからキー・バリューの一覧を表示する。
キー・バリューの行は一致しているか不一致なのかをアイコンで表現する。

画面仕様

初期表示

クエリパラメーターが一致した時

クエリパラメーターが不一致の時

クエリパラメーター比較ツール～完成版デモ～

See the Pen クエリ文字列比較ツール～完成版デモ～ by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.

この後の解説部分では各ソースコードをパーツごとに表記しているので、ソースコードの全文を見たい方は上記codepenへのリンクから参照してください。

クエリパラメーター比較ツール実装

入力フォーム

<h1 class="title">クエリパラメーター比較ツール</h1>
<div class="columns">
    <div class="column">
        <label class="label">比較元URL</label>
        <input class="input" type="text" v-model="srcUrl">
    </div>
    <div class="column">
        <label class="label">比較先URL</label>
        <input class="input" type="text" v-model="dstUrl">
    </div>
</div>

まずは比較元と比較先のURLを入力できるinputタグを二つ置いて、それぞれv-modelにて双方向データバインディングできるように設定します。

比較結果表示部分

<table class="table" v-if="querys.length">
    <thead>
        <tr>
            <th>クエリ名</th>
            <th>比較元の値</th>
            <th>比較先の値</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(query, index) in querys">
            <td>
                <span v-if="isMatch(index)" class="icon has-text-success">
                    <i class="fas fa-check-square"></i>
                </span>
                <span v-else class="icon has-text-danger">
                    <i class="fas fa-ban"></i>
                </span>
                {{ query.name }}
            </td>
            <td>{{ query.srcValue }}</td>
            <td>{{ query.dstValue }}</td>
        </tr>
    </tbody>
    <tfoot>
        <th></th>
        <th>比較結果</th>
        <th>{{ getQueryResultMessage() }}</th>
    </tfoot>
</table>

まずquerysというオブジェクトからひとつづつデータを取り出して、1行づつ表を作っていきます。
その際に、isMatchというメソッド使って、その行のクエリパラメータのバリューが一致しているかどうかによってアイコンを切り替えるようにしています。v-elseはv-ifにて条件式がfalseになった際に有効になるタグです。
最後にgetQueryResultMessageというメソッドを使って、比較した結果のメッセージを表示するようにしています。

クエリパラメーター比較ツールJS

const app = new Vue({
    el: '#app',
    data: {
        srcUrl: '',
        dstUrl: ''
    },
    computed: {
        querys: function () {
            let querys = [];
            let srcQuerys = null;
            try {
                srcQuerys = new URL(this.srcUrl);
                srcQuerys.searchParams.forEach(function (value, key) {
                    let idx = querys.findIndex(query => query.name == key);
                    if (idx !== -1) {
                        querys[idx].srcValue = value;
                    } else {
                        querys.push({ name: key, srcValue: value, dstValue: '' })
                    }
                });
            } catch (e) {
                console.log(e);
            }

            let dstQuerys = null;
            try {
                dstQuerys = new URL(this.dstUrl);
                dstQuerys.searchParams.forEach(function (value, key) {
                    let idx = querys.findIndex(query => query.name == key);
                    if (idx !== -1) {
                        querys[idx].dstValue = value;
                    } else {
                        querys.push({ name: key, srcValue: '', dstValue: value })
                    }
                });
            } catch (e) {
                console.log(e);
            }

            return querys;
        },
        missMatchCnt: function () {
            let missMatchCnt = 0;
            for (let query of this.querys) {
                if (query.srcValue !== query.dstValue) {
                    missMatchCnt++;
                }
            }
            return missMatchCnt;
        },
    },
    methods: {
        /**
         * 比較結果文字列を取得。
         * @returns {string} 比較結果文字列
         */
        getQueryResultMessage: function () {
            let message = '全ての項目が一致しました！';
            if (this.missMatchCnt) {
                message = String(this.missMatchCnt) + '件の不一致が見つかりました。';
            }
            return message;
        },
        /**
         * 指定行のソースとデスティネーションが一致しているか
         * @returns {bool} 指定行の比較結果
         */
        isMatch: function (idx) {
            return this.querys[idx].srcValue === this.querys[idx].dstValue;
        }
    }
})

まずはJSの全体像です。
各詳細を以降で解説していきます。

computed

querys

querys: function () {
    let querys = [];
    let srcQuerys = null;
    try {
        srcQuerys = new URL(this.srcUrl);
        srcQuerys.searchParams.forEach(function (value, key) {
            let idx = querys.findIndex(query => query.name == key);
            if (idx !== -1) {
                querys[idx].srcValue = value;
            } else {
                querys.push({ name: key, srcValue: value, dstValue: '' })
            }
        });
    } catch (e) {
        console.log(e);
    }

    let dstQuerys = null;
    try {
        dstQuerys = new URL(this.dstUrl);
        dstQuerys.searchParams.forEach(function (value, key) {
            let idx = querys.findIndex(query => query.name == key);
            if (idx !== -1) {
                querys[idx].dstValue = value;
            } else {
                querys.push({ name: key, srcValue: '', dstValue: value })
            }
        });
    } catch (e) {
        console.log(e);
    }

    return querys;
},

今回の機能の心臓部分に当たる重要なプロパティとなります。
このプロパティはsrcUrlとdstUrlに依存しており、この二つはv-modelにてinputタグのvalueと連動しています。
よって、ユーザーが比較元・先のURLに文字を入力するとこのプロパティも自動で更新されます。
プロパティ内では入力されたURLからクエリパラメータ部分のみを抽出し、オブジェクト変数に配列形式で格納していって、最終的に比較結果表示部分で参照していたquerysというオブジェクト配列が出来上がります。

missMatchCnt

missMatchCnt: function () {
    let missMatchCnt = 0;
    for (let query of this.querys) {
        if (query.srcValue !== query.dstValue) {
            missMatchCnt++;
        }
    }
    return missMatchCnt;
},

こちらのプロパティは比較元と先のクエリパラメータで不一致を起こしている行の数を求めています。
このプロパティはquerysに依存しているので、先述したquerysプロパティの内容が更新されると次にこちらのプロパティも更新されます。

methods

/**
 * 比較結果文字列を取得。
 * @returns {string} 比較結果文字列
 */
getQueryResultMessage: function () {
    let message = '全ての項目が一致しました！';
    if (this.missMatchCnt) {
        message = String(this.missMatchCnt) + '件の不一致が見つかりました。';
    }
    return message;
},
/**
 * 指定行のソースとデスティネーションが一致しているか
 * @returns {bool} 指定行の比較結果
 */
isMatch: function (idx) {
    return this.querys[idx].srcValue === this.querys[idx].dstValue;
}

最後に本ツールにて使用しているメソッドです。
getQueryResultMessageではmissMatchCntプロパティの数に応じて表示するメッセージを切り替えるようになっています。
isMatchでは指定した行のsrcValueとdstValueが一致しているかどうかをtrue/falseの真偽値で返却しています。

最後に

本日は以上となります。

Vue.jsを用いると、というかフロントエンド技術全般に言えるかもしれませんが、ちょっとしたユーティリティツールが欲しい時にサクッと作るのに非常に適しているなぁと、つくづく思いました。

今日必要になったツールが、今日用意できるのっていいですよね！

実際に他者に配布して使ってもらう時とかはもう少しエラー処理きちんとしなきゃとか、配布しやすいようにElectronでデスクトップアプリにできるようにビルドしてインストーラー作って渡そうとか、今回の場合だとローカルファイルを開いたりする必要もないからGitHub Pagesでさくっと静的ページを公開して使えるようにしちゃおうとか、諸々の配慮が必要になりますが、ひとまず自分が使うだけならローカルファイルで持っといてとかでも十分だと思うので、業務効率化ユーティリティツールを作りつつ、Vue.jsの理解も深めつつの一石二鳥で学習を進めていけると、効率良いなと思いました！

それではまた次の記事でお会いしましょう！