毎日更新

136日目 親切

こんばんは。

今日は、「こんな感じでサンプルデモ渡したら喜んでもらえた」というテーマです。

仕事ではフロントエンドエンジニアとして、AB テスト案件のデモを作ってビジネスサイドやデザイナーの方に見てもらうことがあります。

その中で、アニメーションの継続時間や前後の処理とのタイミング(遅延させるか否か)など、要件が厳密に決まっていない部分で実装中に自分だけで判断できない箇所が出てきたりします。

そんな時によく使うのが、「URL のパラメータを変えれば誰でも設定を変えて試すことができるようにする」です。

例えばアニメーション開始までの遅延処理で、

window.setTimeout(function(){
// ここに処理を書く
}, 1000);

のような処理があったとします。

このとき、デモ環境に

function getParam(name) {
	var url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

const paramDelayMs = getParam('delayMs');
const delayMs = paramDelayMs || 0;

window.setTimeout(function(){
    // ここに処理を書く
}, delayMs);

のような処理を入れておくと、URL で

example.com/?delayMs=1000

とパラメータを指定すると 1000 ミリ秒の遅延となり、ソースに変更を加えなくても誰でも色んなパターンを試すことができます。

ビジネスサイドやデザイナーさんに確認してもらう時にこんなデモを渡すことができると、結構感謝されます。ぜひやってみてはいかがでしょうか。

おわり。

  • この記事を書いた人

きわっち

元食品メーカー製造マンが未経験からwebエンジニアになりました。 エンジニアとして0から成長していく過程を発信していきたいと思っています。