こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

【X】九保すこひ＠フリーランスエンジニア

さてさて、これは開発者の方なら「あるある」な話だと思うのですが、たまに全く別の調べものをしていて、

「えっ、こんなやり方があるの」

ってなることもあるんじゃないでしょうか。

というのも、開発の世界は新しいものが常に登場しますし、スピードも早いのでチェックが漏れてしまっているテクノロジーが出てくるのも当然と言えば当然なことかもしれません。

そして、今回ご紹介したいのが、まさに１年ほど前に「これは知らなかった」となったfetch APIです。

fetch APIというのは、簡単に言うと「Ajax通信」するために用意されたものでIEを除くほぼすべてのブラウザで有効になっています。

私の場合、Ajax通信はaxiosばかり使っていたのですが、fetch APIは純粋なJavaScriptの機能なので、<script>タグでコードを読み込む必要がないのがメリットです。

そこで！

今回はfetch APIの基本的な使い方をご紹介します。
ぜひ楽しみながらみていきましょう

「$.ajax()って書いてた頃が懐かしい・・・」

目次 [非表示]

1 基本的な使い方（GET）
2 パラメーターを送信する（POST, PUT, PATCH, DELETE）
3 ファイルを送信する
4 おわりに

基本的な使い方（GET）

では、fetchの基本的な使い方を紹介します。
次の例を見てみましょう

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {

        return response.json(); //  Promiseを返す

    })
    .then(data => { //  JSONデータ

        console.log(data);

    })
    .catch(error => { //  エラーの場合

        console.log(error);

    });

axiosに慣れている人だと、「あれっ」と思うかもしれませんが、thenが２つあるのは、JSONデータを取得するための正しいやり方です。

実はこの場合、１つ目のthen()ではJSONデータを取得することはできません。なぜならresponse.json()はPromiseだからです。

そのため、一旦returnで値を返しておき、２つ目のthen()でやっとJSONデータが取得できる流れになります。

また、Ajax通信やthen()でエラーが発生したら、catch()が実行されることになります。

※なお、asyncとawaitを使うと次のようにすることもできます。

(async () => {

    const response = await fetch('https://jsonplaceholder.typicode.com/posts');

    if(response.ok) {

        const data = await response.json(); //  JSONデータ

    }

})();

パラメーターを送信する（POST, PUT, PATCH, DELETE）

例えばAjaxでPOST送信したい場合です。
まず例を見てみましょう。

//  送信データ
const data = {
    keyword: 'キーワード',
    orderBy: ['created_at', 'desc']
};

fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST', //  メソッド ・・・ ①
        headers: {
            'Content-Type': 'application/json', //  データ形式 ・・・ ②
        },
        body: JSON.stringify(data) //  送信データ ・・・ ③
    })
    .then(response => response.json())
    .then(data => {

        console.log(data);

    })
    .catch(error => {

        console.log(error);

    });

各ブロックの説明は次のとおりです。

①メソッド

この部分は、次のような送信タイプを指定することになります。

POST
PUT
PATCH（部分的なPUT）
DELETE

②データ形式、③送信データ

まず、決まりごととして、②データ形式と③送信データは一致させる必要があります。

例えば、今回の例はJSON形式でのデータ送信なので、application/jsonを使っていますが、ファイル送信の場合は、application/x-www-form-urlencodedを使います。

※ファイル送信する方法は次の項目をご覧ください。

ファイルを送信する

次にファイルを送信する場合を見ていきましょう。
例えば、次のようなフォームです。

<form id="form">
    <input type="text" name="email" value="test@example.com"><br>
    <input type="text" name="password" value="secret"><br>
    <!--  ファイル入力 -->
    <input type="file" name="file">
</form>

この場合、送信データはFormDataを使い、さらにデータ形式はapplication/x-www-form-urlencodedを使います。

const formData = new FormData(document.getElementById('form'));

fetch('https://jsonplaceholder.typicode.com/posts', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded', //  データ形式
        },
        body: formData //  FormData
    .then(response => response.json())
    .then(data => {

        console.log(data);

    })
    .catch(error => {

        console.log(error);

    });

お問い合わせ、お待ちしております。

開発のご依頼はこちら: お問い合わせ

どうぞよろしくお願いいたします！ by 九保すこひ

おわりに

ということで、今回は純粋なJavaScriptの機能、fetch()でAjax送信する方法を紹介しました。

冒頭でも書いたとおり、特にライブラリを読み込まなくても使えるのは大きなメリットなんじゃないでしょうか。

ただ、コードを見てもらったら分かるとおり、axiosと比べるとちょっと「クセが強い」ので、最初はとっつきにくいかもしれません。

というのもaxiosの場合、次のようにthen()とcatch()がひとつずつですし、送信メソッドもひと目で分かるので、より直感的に使えるんじゃないでしょうか。（・・・というか、なぜfetchもこれと同じにしなかったのか不思議なところです）

axios.post('https://jsonplaceholder.typicode.com/postsake')
    .then(response => {

        // 成功した時

    })
    .catch(error => {

        // 失敗した時

    });