はじめに

これまでJavaScriptの処理を書くときはjQueryを使っていました。昔のJavaScriptはブラウザ互換性問題などがありとてもゴタゴタしていたので、jQueryを知ってからはその便利さに頼りっきりになっていました。

しかし、最近は主要ブラウザでの互換性問題はほとんど解消され、jQueryを使うメリットが薄れてきています。むしろ、jQueryを導入する手間だったり、導入してからもバージョン管理したりとデメリットのほうが目立ってくるようになりました。

そこで、ようやく重い腰を上げて「脱・jQuery」をここに宣言し、jQuery卒業を図るべく、プレーンなJavaScriptの勉強をイチからはじめました。その第一歩として、今までjQueryで書いていたAjaxをJavaScriptのFetch APIで書き直してみました。

HTML

Laravelで作ったWebアプリなので、ところどころHTMLではない書き方をしていますが気にしないでください。

<span id="heart-{{ $post->id }}" class="heart"
      data-url="{{ route('posts.heart', ['post' => $post->id]) }}">
    <i class="far fa-heart"></i>
    <span id="count-{{ $post->id }}" class="count">
        @if ($post->heart > 0)
            {{ $post->heart }}
        @endif
    </span>
</span>

以下のようなハートをクリックするとサーバーにリクエストを送り、カウントアップしてクライアントに戻ってくるという処理です。

jQueryのAjax

リファクタリング対象であるjQueryのAjax処理は以下のようになっています。

$(function() {
    $('[id^=heart]').on('click', function() {
        $.ajaxSetup({
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });

        $.ajax({
            type: 'POST',
            url: $(this).data('url'),
            dataType: 'json'
        }).done(function(data, textStatus, jqXHR) {
            // 成功時の処理
            $('#count-' + data.id).text(data.heart);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            // 失敗時の処理
            alert(jqXHR.responseText);
        });

        return false;
    });
});

JavaScriptのFetch API

上記と同じ処理をJavaScriptのFetch APIを使って書き直したものが以下です。

window.onload = () => {
    document.querySelectorAll('[id^=heart]').forEach((heart) => {
        heart.addEventListener('click', (event) => {
            let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            let url = heart.getAttribute('data-url');
            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token,
                },
            }).then((response) => {
                if(response.ok) {
                    return response.json();
                }
                throw new Error();
                console.log(response);
            }).then((json) => {
                document.querySelector('#count-' + json.id).textContent = json.heart;
            }).catch((error) => {
                throw new Error();
                console.log(error);
            });
            event.preventDefault();
        });
    });
};