【６日目】メモ帳アプリの作成 [３]

# １．本日の課題
本日も前回から作成しているメモアプリに機能を付け加える。前回では、localStrageの中に複数のメモ内容を保存できるようにした。
次は保存した日付と削除ボタンを付け加える。
まずは連想配列を使ってメモ内容と日付を結びつける。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="eYyrqXZ" data-user="mizmizsan2" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mizmizsan2/pen/eYyrqXZ">
  Memo2</a> by mizmizsan2 (<a href="https://codepen.io/mizmizsan2">@mizmizsan2</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

このままではメモ内容をセーブしたときは良いもののリロードをしたときに内容と日付が反映されなくなっている。
![Memo2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2584729/c6f8ba1f-4d57-093a-1d25-2926e3b22727.png)

原因は`JSON.parse(localStorage.getItem('writeMemo${count}'))`にあり、連想配列をそのままinnerHTMLに入れ込んでも表示はされない。
そこで1つずつ連想配列のmamoとdateを指定してinnerHTMLに戻さないといけない。


<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="RwxJWaN" data-user="mizmizsan2" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mizmizsan2/pen/RwxJWaN">
  Memo3</a> by mizmizsan2 (<a href="https://codepen.io/mizmizsan2">@mizmizsan2</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

上のプログラムでは後で削除ボタンの追加がしやすいように`chunkData`内にwriteMemoのキーを入れ込み、そのデータがnullでない場合に表示の処理を実行するようにする。
そして`chunkData`内のデータを`JSON.parse`で`chunk`内に入れ、それぞれ`chunk.memo` `chunk.date`と指定し呼び出す。

しかしこのプログラムで問題になるのは、リロード前と後で日付の表示のされ方が違ってしまうこと。

- saveボタン押した後
![Memo2_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2584729/e6df7880-ac95-c921-6b5f-2147c8957878.png)


- リロード後
![Memo2_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2584729/d19c6e48-ec77-e645-d754-8c138cf2b4a4.png)


そこで日付のフォーマットを調べて適用するとこのようになる。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="QWaxYRK" data-user="mizmizsan2" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/mizmizsan2/pen/QWaxYRK">
  Memo4</a> by mizmizsan2 (<a href="https://codepen.io/mizmizsan2">@mizmizsan2</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

まずは変数tに今の時刻(new Date())を入れ込み、年,月,日,時,分,秒をそれぞれ入れ込む。そして変数ttに得られた値６つを文字列として代入する。

```javascript
        let t = new Date();
        let tt;

        let year = t.getFullYear();
        let month = t.getMonth() + 1;
        let day = t.getDate();
        let hour = t.getHours();
        let minute = t.getMinutes();
        let second = t.getSeconds();
        tt = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second;
```

その後にttを連想配列に入れることで、リロード後も同じ表示をさせることができる。

# ２．本日学んだこと
連想配列はをそのままinnerHTMLにぶち込むことはできません。innerHTMLを使用する際は、そのままではなくキーを指定(ここではmemoとdate)を指定し一つずつ書き込まないといけない。

日付を表示したいときはなるべくフォーマットを使用する。例えば`getFullYear`などを使用し、ちゃんと人が見やすいような表示方法にする。
ここでは先に文字列に変換して配列内に入れたが、日付をそのまま代入して、取り出して表示するときに文字列に直すこともできる。