jQueryのonでハンドラにアローを使うと$(this)がエラーになる

作成:2021.09.11

更新:2021.09.11

jQuery

サンプルHTML

<ul class="pokemon-list">
  <li class="pokemon-list__item">
    <button type="button" class="pokemon-list__button">ヒトカゲ</button>
  </li>
  <li class="pokemon-list__item">
    <button type="button" class="pokemon-list__button">ゼニガメ</button>
  </li>
  <li class="pokemon-list__item">
    <button type="button" class="pokemon-list__button">フシギバナ</button>
  </li>
</ul>
<div id="result">ここに選択したポケモンを表示</div>

昔はよくこう書いていた

$(this)を使って、ハンドラを指定したDOMを取得できる。

// DOM
const $pokemon_button = $('.pokemon-list__button');
const $result = $('#result');

// クリックイベント
$pokemon_button.on('click', function() {
  // 選択した要素の中身
  const value = $(this).html();

  // 出力
  $result.html(value);
});

ただし、ハンドラをES2015のアロー関数に書き換えると、$(this)undefinedになる。

ES2015ではこう書く

// DOM
const $pokemon_button = $('.pokemon-list__button');
const $result = $('#result');

// クリックイベント
$pokemon_button.on('click', (e) => {
  // 選択した要素の中身
  const value = $(e.currentTarget).html();

  // 出力
  $result.html(value);
});

e.targete.currentTargetは使い分けようという話を聞くが、基本的にはe.currentTargetを使えば良いと思っている。

さらにリファクタリングできる

argument destructuring(引数分割束縛)を使えば、イベントオブジェクトの一部のプロパティを抜き出してこれるので、もっとスッキリ書ける。

// DOM
const $pokemon_button = $('.pokemon-list__button');
const $result = $('#result');

// クリックイベント
$pokemon_button.on('click', ({ currentTarget }) => {
  // 選択した要素の中身
  const value = $(currentTarget).html();

  // 出力
  $result.html(value);
});