【５日目】メモ帳アプリの作成 [２]

# １．本日の課題
本日は前回作ったメモアプリを、一つだけ保存できるものから複数を保存できるものに改良する。
まずは前回作ったプログラムのおさらい。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNdzgoB" 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/WNdzgoB">
  Untitled</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>

このプログラムだと、saveを押すとデータは上書きされ、ページをリロードするとデータの履歴はすぐ消えてしまう。そこで保存したデータをlocalStrageにすべて保存し、履歴もページ上にすべて保存するプログラムを作る。
ちなみに今回はloadボタンを撤廃し"イベントリスナー"を使う。イベントリスナーの仕組みは後程。

```html
<html>

<head>
    <title>メモ</title>
</head>

<body>
    <input type="text" id="writeMemo" value="" />
    <input type="button" value="save" onclick="saveMemo()" />
    <hr>
    <div>
        メモ記録領域
    </div>
    <p id="outputMemo"></p>
</body>

<script>
    // localStorage.setItem("memoCount", 0);
    function saveMemo() {
        let writeMemo = document.getElementById('writeMemo');
        let memoCount = localStorage.getItem("memoCount");
        if (!memoCount)
            memoCount = 0;
        localStorage.setItem(`writeMemo${memoCount}`, writeMemo.value);
        console.log(localStorage);
        localStorage.setItem("memoCount", memoCount + 1);
        outputMemo.innerHTML += `<p>${writeMemo.value}</p>`;
    }
    document.addEventListener('DOMContentLoaded', (event) => {
        let outputMemo = document.getElementById('outputMemo');
        let memoCount = localStorage.getItem("memoCount");
        let count = 0;
        while (count < memoCount) {
            console.log(localStorage);
            outputMemo.innerHTML += `<p>${localStorage.getItem(`writeMemo${count}`)}</p>`;
            count++;
        }
        console.log(memoCount);
    });
</script>

</html>

```
`document.addEventListener('DOMContentLoaded', (event) =>`は「HTMLが読み込まれてDOMが作成されたら動作する」という意味です。簡単に言えばページをリロードできたときに動作されます。
上のプログラムの流れを説明すると、

 1.メモ内容が`writeMemo0`のキーにに保存される。
 2.localStrageからmemoCountの0を持ってきて、1を足す。
 3.saveボタンを押す。
 4.メモ内容が`writeMemo1`のキーにに保存される。

という風に、キーの値が少しずつ変わり、それぞれにメモ内容が格納されるようになっている。しかしこのままではエラーでページのリロードが出来なくなってしまった。

原因はmemoCountの数字の増え方にあった。このままでは文字列として認識されているため、+1をし続けると`0, 1, 11 ,111, 1111....`というように桁が一つづつ追加されてしまっている。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="qBpbLgd" 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/qBpbLgd">
  Memo</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>

上記の原因を修正するために`parseInt`を使用した。使い方としては、
parseInt(値, 進数)という風にあらわす。

これらを`let memoCount = parseInt(localStorage.getItem("memoCount"),10);`と表すことで10進数の数字として扱うことができ、このプログラムは正常に動いた。

# ２．本日学んだこと
localStrageを扱うときの注意点として「そのまま扱ってしまうと数式も文字列になってしまう」ということ。また、こういったエラーの原因を見つけ修正する際は、「数値が合っているか」「正しく取り出せているか」などを一つずつ見つけ出すことが重要になってくる。
- 数値を扱いたい際には「parseInt(値, 進数)」を活用する。

次回は日付と時間、削除ボタンを実装する。