jQueryのイベントをアロー関数で

2018.03.20

webページの制作が多いとやっぱりまだjQueryを使う機会が多くなってきます。 jQueryもJavaScriptのライブラリなので、当然ES2015+の恩恵にあずかれます。今回はjQueryのイベントの関数をアロー関数に置き換えてみます。

アロー関数とは

ES2015から利用可能になったJavaScriptの新しい構文です。

//従来の関数
function(引数){本体}

//アロー関数
(引数) => {本体}

//引数が1つの場合は()を省略できる。
x => {本体}

//関数本体が1行の場合は{}が省略できる
x => alert(x)

//引数がない場合は()は省略できません
() => {本体}

$('#btn').on('click', function(){
    $(this).css('color', '#f00')
})

$('#btn').on('click', () =>{
    $(this).css('color', '#f00')
})

ただ、この状態では動かない。通常の関数で使われる this がさすのは呼び出し元のオブジェクトです。

$('#btn').on('click', function(){
    $(this).css('color', '#f00')
})

なので、この場合は $(‘#btn’) のjQueryオブジェクトをさします。しかし、アロー関数では呼び出し方ではなく、定義された場所で this が束縛されてしまい、結果クリックされたオブジェクトはとれません。

$('#btn').on('click', () =>{
    $(this).css('color', '#f00')
})

では、どうすればいいのかというと、イベントリスナーを使います。イベントリスナーはイベントが発火した時に関数とオブジェクトを関連づける仕組みです。

$('#btn').on('click', event =>{
   $(event.currentTarget).css('color', '#f00')
})

event を引数に event.currentTarget を使うことで、イベントが発火したオブジェクトを取得できます。