タイトルは半分ネタですが、かなり陰湿なトラップに引っかかってしまったので記録として残します。

理由その1. thisバインドが効かない

有名なやつですね。jQueryのイベントハンドラーがthisを渡せなくなるというものです。

$('.hoge').on('click', fucntion() {
    $(this) // これができなくなる
});

これはアロー関数が呼び出し方に関係なくレキシカルにthisを束縛してしまうためです。一応解決策は存在します。

理由その2. 予期していない`return false`が起きる

今回問題が起きた原因です。

a要素をクリックした時、イベントハンドラーがfalseを返すとページ遷移がキャンセルされるのは聞いたことがあると思います。

$('a').on('click', function() {
    // ...
    return false; // クリックされたけどページ遷移はしない
});

アロー関数を使うとこれが予期せぬタイミングで起きることがあります。

実際に事故を起こしたコードを載せます。これは「ページのどこかをクリックしたらサイドバーを閉じる」というコードです。

$('.content').on('click', () => open = false);

パッと見はなんの問題もなさそうです。しかし、書き直してみると以下のようになります。

$('.content').on('click', () => {
    return open = false;
});

もうお気づきですよね。そうです。falseを返してしまっています。

ページ中のa要素をクリックした際にもこのハンドラーが呼び出されてfalseが返されてしまいます。

ではどうすればいいかというと、波カッコで囲むだけです。

$('.content').on('click', () => {open = false});

この問題、けっこう根が深い気がします。ぱっと見ではfalseを返すようにまったく見えないのが悪質すぎます。

アロー関数をまともに使えないし、やっぱりjQueryはクソ

一応書くと、僕はjQueryに依存しきった旧石器時代の原人ではないです。その証拠に過去記事みてね(ハート)。

「アロー関数を使うと下手な罠にかかるようなクソ原始ライブラリのjQueryはクソすぎ」というニュアンスでした。