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

初心者向けにJSONをHTMLに埋め込む方法について解説しています。テキストベースのデータフォーマットJSONを記述する際の注意点と埋め込み方の基本をサンプルコードで確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

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

 

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JSONをHTMLに埋め込む方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

HTMLへの埋め込み方

 

JavaScriptとjQueryでの扱い方

JavaScript

jQuery

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

注意点

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など多岐にわたる。

 

大石ゆかり

JSONをHTMLに埋め込む方法について分かりやすくて良かったです!

田島悠介

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

大石ゆかり

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

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

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