JSONをHTMLに埋め込む方法を現役エンジニアが解説【初心者向け】

JSONをHTMLに埋め込む方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

 

HTMLへの埋め込み方

 

JavaScriptとjQueryでの扱い方

JavaScript

jQuery

 

[PR] Webデザインで副業する学習方法を動画で公開中

注意点

JSONは、軽量のデータ交換フォーマットです。

JavaScriptのプログラムにも使用できるオブジェクトであるものの、文法としてはkeyの名前の前後にもダブルクォーテーションを記述しなければなりません。

JavaScriptの記述方法を基礎にしているものの、JavaScript専用のデータ形式ではなく、他のプログラム言語にも使用することが可能です。

JavaSciptのオブジェクト

var object_sample_data = [
  {
    name : "sample-00",
    age : 30
  },
  {
    name : "sample-01",
    age : 23
  }
];

JSON（JavaScript Object Notation）

var json_sample_data = [
  {
    "name" : "sample-00",
    "age" : 30
  },
  {
    "name" : "sample-01",
    "age" : 23
  }
];

 

eval(); と JSON.parse();

データの形式として、文字列として配信されている場合、JavaScriptのオブジェクトとして使用するためには、JavaScriptでプログラムコードに変換しなければなりません。

'[{ "name" : "sample-00", "age" : 30 }, { "name" : "sample-01", "age" : 23 }]'

eval関数を用いて、JavaScriptにて実行できるコードに変換は可能です。

しかし、クロスサイトスクリプティングと呼ばれる意図しないコードを挿入されてしまう可能性があるため、悪戯や情報漏洩が危惧されます。

そして、JSON.parse関数では、JSONコードのみに変換することが推奨されています。

JSON.parse('[{"name" : "sample-00", "age" : 30},{"name" : "sample-01","age" : 23}]');

 

執筆してくれたメンター

井内洋平 TechAcademyの現役メンター。 元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

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