テストの実装でよく使われる jQuery の機能のご紹介 vol2 | Optimizely 正規代理店イー・エージェンシー
  • 最終更新日:2017年02月23日

テストの実装でよく使われる jQuery の機能のご紹介 vol2

テストの実装でよく使われる jQuery の機能のご紹介の第2弾です。
今回ご紹介するのは以下の4点です。

  • remove ( 指定した要素の削除 )
  • html / text ( HTML 及びテキストの書き換え )
  • eq ( 何番目という形で要素を指定 )
  • if ( 条件分岐の実行 )

前回より少し難しい内容もありますが、その分できることが大幅に増える内容かと思います。

それでは、各機能についてご説明します。

remove

解説

指定した要素を削除します。
画面からの非表示ではなく、ソース上から要素自体を完全に削除する為、
HTMLの構造自体に影響を与えます。

具体例

実行されるコード

$("p").remove();

実行前

<div></div>
<p></p>

実行後

<div></div>

使用されるケース

要素を減らすことで効果を測るテストを行う際に使用します。
CSS の display: none; による要素の非表示でもほぼ同様の効果を得られますが、ソース上から完全に削除される為、他の処理に影響されるなどして再表示されてしまう心配がなくなります。

html / text

解説

指定した要素内の HTML 又は テキストを書き換えます。

実行されるコード

$("p").html("<span>HTMLの書き換え</span>");
$("div").text('書き換えられたテキスト');

実行前

<div>書き換え前のテキスト</div>
<p><em></em></p>

実行後

<div>書き換え後のテキスト</div>
<p><span>HTMLの書き換え</span></p>

使用されるケース

HTML及びテキストの書き換えはその汎用性が高さから、ケースを紹介するまでもなく、あらゆる場面での活用がイメージできるかと思います。

ユーザは我々が思っている以上にテキストに目を通しており、テキスト変更だけのシンプルなテストは意外にも高い効果を発揮する事が多くあります。
テキストの変更だけであれば実装コストを低く抑えられますので、「ユーザに刺さるキーワード」を見つける為に、キーワードの最適化は繰り返し行っていく事をオススメいたします。

eq

解説

連続して並んでいる要素を番号で特定する事ができます。
番号は 0 を 1 番目とします。
「0 なのに 1 番目?」と疑問を持たれる方もいらっしゃると思いますが、プログラムの世界では番号は 0 から数え始めます。
その為、例えば 3 を指定した場合は 4 番目の要素、という事になります。

実行されるコード

$("ul li").eq("1").text("2番目");

実行前

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

実行後

<ul>
    <li></li>
    <li>2番目</li>
    <li></li>
    <li></li>
    <li></li>
</ul>

使用されるケース

上記の例のように同じ要素が連続して並んでいる場合、特定の要素を指定する方法として用いられます。

eq 単体で使用する事はなく、ほとんどの場合「実行されるコード」のように eq で要素の場所を特定し、その上で行いたい内容を付け加える、という形で用いられます。

eq を用いると要素の指定方法が大幅にアップする為、一度使い方を覚えると使用頻度の高まる機能になるかと思います。

if

解説

if は「条件が A の場合は AA を、B の時は BB を表示する」という風に、「条件に応じた分岐の処理」を実装する事ができます。
今までご紹介したものと比べ、実に「プログラミングらしい」ですね。

それもそのはず、if は 正確には jQuery の機能ではなく、JavaScript に最初から用意されている機能なのです。

実行されるコード

if( $("p")[0] ){
        $("p").text("p が存在した");
    } else {
        $("div").text("p が存在しなかった");        
}

上記は「<p> が存在する場合は <p> にテキストを挿入し、存在しない場合は <div> へテキストを挿入する」というコードです。

if の直後の () に条件を記述します。$("p")[0] は最初の <p> の存在を確かめるものになります。
else の後は「そうでない場合」、つまり前述の条件に一致しなかった場合の処理を記述します。

<p> が存在する場合

実行前

<div></div>
<p></p>

実行後

<div></div>
<p>p が存在した</p>

<p> が存在しない場合

実行前

<div></div>

実行後

<div>p が存在しなかった</div>

使用されるケース

ABテストにおいては、ユーザの状況によって表示が異なる場合に使用されます。一番多いと思われるケースは、ECサイトなどにおけるユーザのログイン状態かと思われます。

例えば、ユーザがログインしていない状態の場合は会員登録を促進させるバナーを追加したり、ログインしている場合はオススメのアイテムを強調するなどといった事が可能となります。

if は難しく感じられるかと思いますが、柔軟な実装が可能となる本当にオススメしたい機能の一つですので、是非一度お試しください。

Optimizelyのサポートに関するお問い合わせはこちらまで

ヘルプの関連記事

Optimizely X と Ptengine の連携方法(Optimizely X)
投稿日: 2017年05月15日
GTMでOptimizelyタグとGAタグ両方を配信して連携を行う方法(Optimizely X)
投稿日: 2017年03月10日
Optimizely社公式の拡張機能を利用して編集画面への読み込みを補助する方法
投稿日: 2017年03月03日
スケジューラー機能の使い方(Optimizely X)
投稿日: 2017年02月24日
訪問者グループの作成条件と種類(Optimizely X)
投稿日: 2017年02月24日

ヘルプのよく読まれている記事

mautic is open source marketing automation