※このブログではサーバー運用、技術の検証等の費用のため広告をいれています。
記事が見づらいなどの問題がありましたらContactからお知らせください。

【JavaScript】JSON.stringify()について

javascript stringify JSON nodejs node

投稿日：2020年11月30日

JSON.stringify()とは

JSON.stringify()はJavaScriptのObjectをJSONの文字列に変換することのできる静的メソッドです。

JSONはビルトインオブジェクトなのでブラウザ上、NodeJS実行環境どちらでも利用できます。

次の様な文法で使用します。

JSON.stringify(value[, replacer[, space]])

value：JSON文字列にコンバートする対象のオブジェクト。Object型またはArray型を渡す。
replacer：文字列変換の処理をカスタマイズする。functionまたはString型、Number型のArrayを渡す。nullが渡された場合にはデフォルトの動作になる。
space：JSON文字列の間に入れる文字。Number型、またはString型を入れる。

詳しい使い方は実践をみていきましょう！！

実践

基礎

一番簡単な使い方はObjectやArrayをJSON.stringify()に引数として渡す使い方です。

そのままJSON文字列に変換してくれます。

まずはObjectを変換してみます。

const value = {name:"marsquai", age: 26, job: "Web Engineer"};
JSON.stringify(value);

出力

"{"name":"marsquai","age":26,"job":"Web Engineer"}"

次にArrayを変換してみます。

使い方はObjectのときと同じです！

const array = [0,1,2,3,4,5];
JSON.stringify(array);

出力

"[0,1,2,3,4,5]"

【基礎】値のフィルタリング

ObjectをJSON文字列に変換する場合には第２引数にJSON化したいキーをString、またはNumberのArrayで渡すことでJSON化する値をフィルタリングすることができます。

const obj = {name:"marsquai", age:26, job:"Engineer"};
JSON.stringify(obj,["name", "job"])

出力

"{"name":"marsquai","job":"Engineer"}"

nameとjobという文字列の配列を渡したことでJSON化するプロパティを選択できました。

もし、選択したプロパティが存在しない場合にはそのプロパティは無視されます。

const obj = {name:"marsquai", age:26, job:"Engineer"};
JSON.stringify(obj,["name","account"]);

出力

"{"name":"marsquai"}"

Objectが入れ子の場合、JSON化したい値の親要素全てをfilterとして指定する必要があります、

const obj = {name: {firstname:"mars", lastname:"quai"}, age:26, like: {fruit: "apple", movie: "joker"}}
JSON.stringify(obj,["name","firstname","fruit"])

出力

"{"name":{"firstname":"mars"}}"

Arrayに対してこの方法でフィルタリングをしようとすると、フィルタは無視されます。

JSON.stringify([1,2,3,4,5,6], ["1","2"]);

出力

"[1,2,3,4,5,6]"

【基礎】JSON文字列の整形

JSON.stringify()の第３引数のspaceにはString、またはNumberを指定できます。

stringで指定した場合にはJSON整形時に、各キーの前にそのStringを入れて出力します。

例えばJSONに改行を入れてキレイに表示したい場合には次の様に改行文字を入れます。

const obj = {name:"marsquai", age:26, job:"Engineer"};
JSON.stringify(obj,null,"\r")

出力

"{

"name": "marsquai",

"age": 26,

"job": "Engineer"
}"

またNumberで指定した場合には各キーの前にその数だけのspaceが入れられて出力されます。Numberの最大値は10で、もしそれ以上の値を指定しても10になります。

const obj = {name:"marsquai", age:26, job:"Engineer"};
JSON.stringify(obj,null,4)

出力

"{
    "name": "marsquai",
    "age": 26,
    "job": "Engineer"
}"

【発展】Replacerによるフィルタリング

JSON.stringify()の第２引数replacerは関数としても定義できます。

通常JSON.stringify()は第１引数のObjectを再帰的に処理していきます。

replacer関数はフック関数のようなもので、フィルタリングや追加処理などを入れ、JSON文字列で出力したい値だけをreturnで返します。

次の例はageというキーの値だけを取得するreplacerです。

function replacer(key, value){
   if(typeof value == 'object' || key == "age"){
         if(key == "name" || key == "like"){
             return undefined;
         }
         return value;
}
}

const obj = {name: {firstname:"mars", lastname:"quai"}, age:26, like: {fruit: "apple", movie: "joker"}}

JSON.stringify(a, replacer)

出力

"{"age":26}"

ここでreplacerをreplacerという名前の関数で定義してJSON.stringify()に渡しています。replacer関数の１つ目のif文の条件はtypeof value == 'object' || key == "age"です。

注意すべき点として一番はじめに渡される値はvalueがそのまま渡されるという点です。今回valueはObjectなのでobjectタイプを条件として入れています。この点に注意しないと空のJSON文字列が返ってしまうので注意しましょう。

ネストされた２つめのif文は除外したいkeyを設定しています。今回はage以外のキーnameとlikeを指定してundefinedを返しています。

undefinedを返された場合その値は無視されます。

上の例では配列でフィルタリングをするのとそんなに変わりませんね。

次の例では関数であるメリットをいかして、『文字列を数値に変換』という処理をやってみます。

function replacer(key,value){
    if(typeof value == "string"){
        return Number(value);
    }
    return value;
}

const obj = [1,"2","3"];

JSON.stringify(obj, replacer)

ターミナル

"[1,2,3]"

今回はreplacerの処理として文字列の場合にはNumberにキャストして返すという関数を作成しました。

このようにreplacerを使うことでJSON文字列の生成の振る舞いをカスタマイズすることもできます。

【発展】toJSON()関数が実装されたObject

toJSON()という関数が実装されたObjectはJSON.stringfy()に渡された際にそのメソッドが呼ばれます。

const obj = {
    name : "marsquai",
    age: 26,
    toJSON(key) { return {name: this.name, age: "twenty-six"}}
}
JSON.stringify(obj);

出力

"{"name":"marsquai","age":"twenty-six"}"

この時toJSON()関数にはobjectのキーが渡されます。

これによって、特定のプロパティとして設定されたときだけ特殊な処理をするという実装ができます。

const obj = {
    name : "marsquai",
    age: 26,
    toJSON(key) { 
        if(key=="user"){
             return {name: this.name, age: "twenty-six"}}
        return this;
    }
}
const value={user:obj, parent:obj};
JSON.stringify(value)

出力

"{"user":{"name":"marsquai","age":"twenty-six"},"parent":{"name":"marsquai","age":26}}"

toJSON()関数によってこのオブジェクトがuserという名前のプロパティのときだけageを文字列で返す挙動になりました。

記事へのコメント

【JavaScript】JSON.stringify()について

JSON.stringify()とは

実践

基礎

【基礎】値のフィルタリング

【基礎】JSON文字列の整形

【発展】Replacerによるフィルタリング

【発展】toJSON()関数が実装されたObject

検索

カテゴリ

Web開発

機械学習

プログラミング

その他

サーバー開発

Linux

目次