JavascriptのFormDataにappendした中身をみたい

2023年10月6日

fetch などでデータを送信する時に FormData をよく使うため、デバッグ時に「中身ちゃんと入ってんの？」って事が割と発生する。

しかし FormData オブジェクトは、色々とメソッドがが詰まっているため、以下のような書き方では思った結果が得られない。

 

思考停止でやると見えない

管理人にも JS でオブジェクトの中身を見たいなら、雑に console.log しときゃ見れるっしょｗｗｗと思っていた時期がありました。

const data = new FormData();
data.append("hoge", 7);
data.append("foo", "This is a dog.");
console.log(data);
FormData {}
    [[Prototype]]: FormData
        append: ƒ append()
        delete: ƒ delete()
        entries: ƒ entries()
        forEach: ƒ forEach()
        get: ƒ ()
        getAll: ƒ getAll()
        has: ƒ has()
        keys: ƒ keys()
        set: ƒ ()
        values: ƒ values()
        constructor: ƒ FormData()
        Symbol(Symbol.iterator): ƒ entries()
        Symbol(Symbol.toStringTag): "FormData"
        [[Prototype]]: Object
            ～（以下略）～

まぁ明確な機能を持ったオブジェクトなんだから当たり前なんだけど、初見では keys や values や entries なんかを呼べば、中身を吐き出してくれると思っていた。

const data = new FormData();
data.append("hoge", 7);
data.append("foo", "This is a dog.");
console.log(data.entries());
Iterator {}
    [[Prototype]]: Iterator
        next: ƒ next()
        Symbol(Symbol.toStringTag): "Iterator"
        [[Prototype]]: Object
            ～（以下略）～

しかしこれだとイテレータが返って来る、あくまでこの命令は走査用なのでループとかしろよって事らしい。

 

スプレッド構文でワンパンよ

しかし現代は ES6 の時代、単純に中身を舐めるだけならスプレッド構文を使えばループとかしなくても中身を取り出す事が可能だ。

const data = new FormData();
data.append("hoge", 7);
data.append("foo", "This is a dog.");
console.log(...data.entries());

(2) ['hoge', '7']
    0: "hoge"
    1: "7"
    length: 2
    [[Prototype]]: Array(0)
(2) ['foo', 'This is a dog.']
    0: "foo"
    1: "This is a dog."
    length: 2
    [[Prototype]]: Array(0)

実にスマートかつエレガント、素晴らしいね。

スプレッド構文

スプレッド構文 (…) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

引用 – mdn web docs

MDN にはこう書かれていてちょっと理解し辛いが、ザックリと「条件が合っているなら要素数に限らず良い感じに展開する」みたいなニュアンスで認識しておけば良いと思う。

とにかく、かなり使える構文なので習得しておくことをおススメしたい。

JavaScriptentries,スプレッド構文

Posted by theuri