コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

突然ですがジェイソンします

JSONが便利らしい

欧米では13日の金曜日にジェイソンがやってきますが、日本では古来より仏滅にジェイソンがやってくると言われています。さてみなさん今宵もいかがお過ごしでしょうか。お体は無事ですか?

そういった話ではなくてこちらのJSONというデータフォーマットの勉強をしたので記事にしました。
JSON

JSON(ジェイソン、JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptにおけるオブジェクトの表記法をベースとしているが、JSONJavaScript専用のデータ形式では決してなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しに使えるよう設計されている。

いわゆるCSVXMLみたいな形式のことです。事務的なことをするにはCSVでデータ管理したほうが楽だろうけどWebとかだとJSONで管理したほうが楽になるかもしれないそうですのでとりあえず触ってみました。

早速JSONを利用してつくってみた


それでは、いつも通りなにを作ろうかなんて考えずにつくったものがこちらになります。
f:id:andron:20161026132415p:plain
小説を書くための世界観、場所、時代の設定をランダムで決めてくれるやつをつくりました。

以下、ソース。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h3>以下の設定で小説を書いてみよう</h3>
  <script>
  // jsonのサポート確認
  if (window.JSON){
  	document.write("JSONに対応しています");
  }else{
  	document.write("JSONに対応していません");
  }

  // json
	var data = {
	"universe": ["ファンタジー","スチームパンク","SF"],
	"place": ["東洋","西洋","異国風"],
	"era": ["現代","中世","近未来"]
	}
  
  // javascript
  document.write(
  	'<ul><li>',
  	'世界観:'+ data.universe[Math.floor(Math.random()*data.universe.length)],
  	'</li><li>',
    '場所:'+ data.place[Math.floor(Math.random()*data.place.length)],
    '</li><li>',
    '時代:'+ data.era[Math.floor(Math.random()*data.era.length)],
    '</li></ul>'
    );    
  </script>
</body>
</html>

JavaScript内に直書きするとプログラミング言語の延長に見えて仕方ないけどもはじめてだしこれでいいよね(妥協の心)。
ちょうどスクリプトタグ内のjsonとコメしているところが、JSONの部分です。

{
   "test":["さんぷる","サンプル"],
}

ちょうどこんな形式のがJSONというものらしい。次回は外部ファイルとして読み込むということをやってこの何かを改良していきたいね。

JSONとまた別の話だけどdocument.write()って「,」で複数行記述できたのね。本末転倒だが、こちらのほうが便利と感じてしまった。