icon
icon

JavaScriptでJSONを生成する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでJSONを生成する方法について現役エンジニアが解説しています。JSONとはJavaScript Object Notationの略であり、テキストベースのフォーマットです。JSON形式にエンコードするにはJSON.stringify、デコードするにはJSON.parseを使います。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptでJSONを生成する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでJSONを生成する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JSONデータとは

JSONとは、JavaScript Object Notationの略であり、テキストベースで軽量にデータ交換のできるフォーマットのことです。JavaScriptとありますが、多くのプログラミング言語やシステムで使われています。

{“key”: “value”} のように、項目名と値をダブルクォーテーション(“)で囲み、コロン(:)で対応づけ、中括弧({})で閉じたものが、よくあるJSON形式のデータです。

より詳細な情報は「JSON」で検索すると出てきますので、興味のある方は調べてみてください。

JavaScriptでJSONを生成する方法

JavaScriptでJSON形式のデータを生成するにはJSON.stringifyメソッドを使用します。JSON.stringifyメソッドに変換したいデータを入力することで、JSON形式のデータ(文字列に変換した結果)を取得することができます。

逆にJSON形式のデータをプログラムで扱えるように変換するには JSON.parseメソッドを使いますので、あわせて覚えておきましょう。

[PR] コーディングで副業する方法とは

実際に書いてみよう

まずはシンプルなデータでJSON.stringifyとJSON.parseを試してみましょう。

JSON.stringifyでObject型からJSON形式のデータに変換されていること、JSON.parseでObject 型に再変換できていることが分かりますね。

let simpleData = {name: 'taro', age: 20};
// JSON 形式への変換
let simpleDataJSON = JSON.stringify(simpleData);
console.log(simpleDataJSON);
// => {"name":"taro","age":20}
// JSON 形式からの復元
let simpleDataParsed = JSON.parse(simpleDataJSON);
console.log(simpleDataParsed);
// => { name: 'taro', age: 20 }
console.log(simpleDataParsed.name);
// => taro
console.log(simpleDataParsed['age']);
// => 20

JSON形式のデータは配列や、ネストした構造を扱うこともできます。もう少し複雑なデータで見てみましょう。複雑なデータでも同様にJSON形式のデータとObject型のデータで相互に変換できていますね。

let complexData = {
  name: 'taro',
  age: 20,
  hobbies: ['tennis', 'game', 'soccer'],
  isMarried: true,
  partner: {
    name: 'kumi',
    age: 18,
    hobbies: ['piano', 'running'],
  }
};
// JSON 形式への変換
let complexDataJSON = JSON.stringify(complexData);
console.log(complexDataJSON);
// => {"name":"taro","age":20,"hobbies":["tennis","game","soccer"],"isMarried":true,"partner":{"name":"kumi","age":18,"hobbies":["piano","running"]}}
// JSON 形式からの復元
let complexDataParsed = JSON.parse(complexDataJSON);
console.log(complexDataParsed);
// => { name: 'taro',
// age: 20,
// hobbies: [ 'tennis', 'game', 'soccer' ],
// isMarried: true,
// partner: { name: 'kumi', age: 18, hobbies: [ 'piano', 'running' ] } }

 

筆者プロフィール

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript,Node.js。
おうち大好きマンです。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。