JavaScriptでオブジェクトをシリアライズする方法を現役エンジニアが解説【初心者向け】

初心者向けにJJavaScriptでオブジェクトをシリアライズする方法について解説しています。シリアライズとはインスタンスを送受信可能なように変換することです。今回はオブジェクトを文字列に変換して、シリアライズしてみます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでオブジェクトをシリアライズする方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

オブジェクトをシリアライズする方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

シリアライズとは

JavaScriptでは、JavaScriptで作成したオブジェクト等をJSON文字列に変換することです。

JSON文字列に変換するにはJSON.stringifyメソッドを使用します。

 

シリアライズ出来ないケース

JSON.stringifyメソッドではシリアライズ出来ないオブジェクトがあります。具体的には、値が関数のオブジェクト・Symbol・undefinedなどです。

ただし、配列の中にある場合はnullとして変換されます。

 

var obj1 = {func: function(){}, und: undefined };

var obj2 = {valSymbol: Symbol(""), keySymbol: [Symbol("test")]: "test" }}

console.log(obj1);

// '{}'

console.log(pbj2);

// '{}'

var obj3 = {arr: [10, functon(){}]};

console.log(obj3);

// '{"arr":[10,null]}’

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

var obj = {id: "1", name: "testId", nl: null};

console.log(JSON.stringify(obj));

// '{"id":1,"name":"testId","nl":null}'

 

JSON.stringifyにはオプションとして2つの引数を設定できます。第2引数はreplacer引数とも呼ばれ、変換後のJSONに含まれるプロパティ関数あるいは配列を渡せます。

関数を渡した場合は、プロパティのkeyとvalueが渡されます。その返り値を使用して文字列に変換される際の挙動を操作することが出来ます。

var obj = {id: "1", name: "testId", nl: null};

var after_replace = JSON.stringify(obj, function(key,value){

if (value === null) {
return undefined;
}
return value;

})

console.log(after_replace );

//'{"id":1,"name":"testId"}'

 

第3引数はspace引数とも呼ばれ、変換後のJSON形式の文字列を読みやすくフォーマットする際のインデントを設定できます。

var obj = {id: "1", name: "testId", nl: null};

console.log(JSON.stringify(obj,null,2);

/*

{

"id" : 1

"name" : "testId"

"nl" : null

}

*/

 

筆者プロフィール

この記事を監修してくれた方

水野大輝(みずのたいき)

2014年より、某物流会社のシステム開発担当として入社

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。