ウヒョヒョ.md

JSONとJavascriptのオブジェクト

JavscripではオブジェクトをJSON形式で記述します。JSON形式とはkeyとvalueから成るデータの集合体ですよね？
JSON形式は以下のような書き方になります。

{"key":"value"}

この時、JSONではkeyとvalueは基本的に文字列です。
一方でJavascriptのオブジェクトではvalueに様々なデータを登録することができます。

例えば以下の感じに複雑なデータを登録することが可能です。

{
  "key" : function(){console.log('test')}, // 関数を入れたり
  "key1" : [1, 2, 3, 4, 5], // 配列を入れたり
  "key2" : {date: '2019-10-11', spot: '表参道'}　// オブジェクトの中にオブジェクトを入れたり
}

これを変数に代入するとその変数はオブジェクトとして認識されるようになります。

const objectData = {
  "key" : function(){console.log('test')}, // 関数を入れたり
  "key1" : [1, 2, 3, 4, 5], // 配列を入れたり
  "key2" : {date: '2019-10-11', spot: '表参道'}　// オブジェクトの中にオブジェクトを入れたり
}

そしてデータにアクセスする場合はオブジェクト名とkey名を.(ピリオド)で結びます。
オブジェクト名.key名 👈こんな感じですね。

objectData.keu1  // [1, 2, 3, 4, 5]と出力されるはず。
objectData.keu() // console.log('test')が実行されるはず。

この辺はもうバッチリかもしれませんね。

Dataもブラウザがデフォルトで用意したオブジェクトの1つです。

new Data()とするだけで、様々なデータのセットをオブジェクトで用意してくれるだけです。
なので、あとはnew Data()を変数に代入してメソッド名を書くだけで簡単に情報を読み書きすることができます。

まあこの辺を一発で理解しろって方が無理なんで、何回も使って何となく使えるようになるしか無いと思います。
とにかくChromeのコンソールを開いて実験すると理解が早まってオススメですよ😎

おまけ

今日の復習ポイントとしては配列とオブジェクトをうまく使いこなすことかもしれません。
この辺の学習が授業だけで難しそうだったら、PaizaのD問題を解いてみるといいかもしれません。
問題を与えられてそれをプログラミングで解いていくようなものです。
基本的に配列・オブジェクト・if・forさえ理解できれば解けるような問題なので、これらが解けるようになるとかなりすごいと思いますよ〜〜

あと、赤岸さんなら分かっていると思いますが、達成したい機能に対して必要なステップを分解して、1つづつこなしていくこともとっても大事です！
最終的に目的通り動きさえすれば、中で書いているコードは割とどうてもいいんですよね。
そう考えると、

1. ステップを分解する。
2. 最初の1ステップを実行できる処理をかく。
3. 前のステップのデータを使って次のステップを実装する

といった感じになって、あとは3を繰り返すだけなんですよね。

頑張ってください。