【JavaScript入門】JSON.stringifyでJSONを整形して表示する │ TechMania

Webサイトやアプリケーションでのデータ通信時に活用される「JSON」というデータ形式ですが、プログラム内でデータ処理を行う際には扱いが難しくなるため、通信前後でエンコードやデコードをしてデータ形式を変換する必要があります。

その際、JSON形式へエンコードするために使用されるのが、JSON.stringifyメソッドです。
この記事では、JavaScriptで JSON.stringifyメソッドを使用する方法について、解説していきたいと思います。

1. そもそもJSONとは？
2. JSON.stringifyとは？
3. まとめ
4. JavaScriptの勉強方法は？

そもそもJSONとは？

JSONは、APIなどで活用されるデータフォーマットの一種です。

JavaScript Object Notationの略で、元々は JavaScriptで使用することを想定して作られたデータ形式ですが、現在は JavaScriptに限らず様々な言語で活用されています。

JSON.stringifyとは？

JSON.stringifyメソッドは、対象のオブジェクトの内容を JSON へとエンコードする際に使用するメソッドです。

視覚的に見るとJSONのデータ構造はJavaScriptのオブジェクトに似た形式になっていますが、実態としては単なるテキストデータのため、そのままでの状態では値ごとのデータの取り扱いが難しくなります。
そのため、受け取ったJSONは必ずJavaScriptのオブジェクトの形式にデコードしてから処理を行います。

反対にJavaScript側で扱っているオブジェクトをそのままデータとして送ることはできないため、JSON形式にエンコードする必要があります。その際に使用するのが、JSON.stringifyメソッドです。

基本構文

JSON.stringifyメソッドを使用する際は、以下の形式で記述します。

【基本構文】

JSON.stringify(オブジェクト名)

以下のサンプルコードで、実際の動きを見てみましょう。

【サンプルコード】

const sampleObj = {
  name: 'Taro Yamada',
  age: 25,
  bloodtype: 'B'
};

console.log(typeof(sampleObj));
console.log(sampleObj);

const sampleJson = JSON.stringify(sampleObj);

console.log(typeof(sampleJson));
console.log(sampleJson);

【実行結果】

object
{ name: 'Taro Yamada', age: 25, bloodtype: 'B' }
string
{"name":"Taro Yamada","age":25,"bloodtype":"B"}

メソッドの使用によって、データ型がオブジェクトから文字列に変わっているのが見て取れますね。
見た目では少し分かりづらいですが、データ内容の表示でも文字列へと変換されているのが分かります。

このように、JSON.stringifyメソッドを使用して、オブジェクトを JSONへとエンコードすることができます。

JSON.stringifyでエンコードしつつフォーマットを整える

JSON.stringifyメソッドは、以下の3つの引数を指定することができます。

第1引数・・・オブジェクト
第2引数・・・コールバック関数
第3引数・・・インデント

コールバック関数には、オブジェクト内の各キーと値が引数として順に渡されるため、値ごとにデータ整形を行うことができます。
使用頻度はあまり高くはありませんが、JSON.stringifyメソッドで使用可能な機能の1つです。

【サンプルコード】

const sampleObj = {
  name: 'Taro Yamada',
  age: 25,
  bloodtype: 'B'
};

const sampleJson = JSON.stringify(sampleObj, (key, val) => {
    if (key === "name"){
        return "hogehoge";
    }
    return val;
});

console.log(sampleJson);

【実行結果】

{"name":"hogehoge","age":25,"bloodtype":"B"}

また、第３引数に文字列か数値のどちらかを指定することで、結果の出力時にインデントを付与することができます。

【サンプルコード】

const sampleObj = {
  name: 'Taro Yamada',
  age: 25,
  bloodtype: 'B'
};

const sampleJson = JSON.stringify(sampleObj, null, 2);

console.log(sampleJson);

【実行結果】

{
  "name": "Taro Yamada",
  "age": 25,
  "bloodtype": "B"
}

文字列の場合は指定した値を、数値の場合は指定した数分の空白を各行の先頭に追加します。

配列をJSON.stringifyでエンコードする

JSON.stringifyメソッドは、配列に対しても使用することができます。
エンコードの処理は、オブジェクトの時と同じやり方で実装することができます。

【サンプルコード】

const sampleObj = [1, 2, 3];
console.log(typeof(sampleObj));

const sampleJson = JSON.stringify(sampleObj);
console.log(typeof(sampleJson));
console.log(sampleJson);

【実行結果】

object
string
[1,2,3]

データ型がきちんと文字列型に変換されていますね。
このように、配列に対してもメソッドを使用することができます。

まとめ

今回は、JSON.stringifyメソッドの使い方について解説を行いました。

実際の開発においては、JSONはほぼ必ず扱うと言っても過言ではないほど使用頻度の高いデータ形式です。特に、APIを活用してデータの送受信を行う際には、JSONを使用する場合がほとんどです。

そのため、メソッドの使い方はしっかりと覚えておきましょう。

JavaScriptの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、JavaScriptに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。