JS 追加ボタンを押した時のデータ操作の考え方

<h1>目次</h1>
<ul>
<li>書く目的</li>
<li>勉強したコード</li>
<li>コードの登場人物一覧</li>
<li>学んだ考え方</li>
<li>配列のデータを操作してるコード</li>
<li>データを管理するときの考え方</li>
<li>理解に苦労したコード</li>
</ul>

<h2>書く目的</h2>
 <p>配列に入っているデータを、JSが操作するときの考え方を理解するのに苦労した。考え方を理解できたとき、忘れないようメモに残しておきたいため作成。</p>

<h2>JSの画面</h2>

![スクリーンショット 2024-01-16 11.59.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/628823/994eab51-8c43-af63-2fd3-0443638ad4b3.png)


<h2>勉強したコード</h2>

```index.js
<script>
      const products = [
        {
          id: 1,
          name: "オリジナルブレンド200g",
          price: 500,
        },
        {
          id: 2,
          name: "オリジナルブレンド500g",
          price: 900,
        },
        {
          id: 3,
          name: "スペシャルブレンド200g",
          price: 700,
        },
        {
          id: 4,
          name: "オリジナルブレンド200g",
          price: 1200,
        }
      ]
      const priceElement = document.getElementById("product");
      const numberElement = document.getElementById("number");
      let purchases = [];
      function add() {
        const targetId  = parseInt(priceElement.value);
        const product = products.find(item => item.id == targetId);
        const number = numberElement.value;

        let purchase = {
          product: product,
          number: parseInt(number),
        };

        const newPurchase = purchases.findIndex((item) => item.product.id === purchase.product.id)
        if(purchases.length < 1 || newPurchase === -1) {
          purchases.push(purchase)
        } else {
          purchases[newPurchase].number += purchase.number
        }

        window.alert(`${display()}\n小計${subtotal()}円`);
        priceElement.value = "";
        numberElement.value = "";
      }
```

<h2>コードの登場人物一覧（わかってる範囲で）</h2>
  <ul>
     <li>product: 個数・金額・idがしまわれてる配列</li>
     <li>id: 個数・金額を管理してる人</li>
     <li>number: 個数</li>
     <li>price: 金額</li>
     <li>purchases: 追加ボタンが押されたら、データを入れて保管する追加ボタン専用の配列</li>
     <li>newPurchase: 配列にデータがあるかないか判定してる人</li>
  <ul>

<h2>学んだ考え方</h2>
<ul>
<li>追加ボタンを押したら、データをしまう<font color="#ff0000">追加ボタン専用の配列</font>を新しく用意することになる</li>
<li>追加ボタン機能とは、データを一端配列に保存しておき、データを入れた配列から、データを取り出して表示すること</li>
<li>新しく配列を作ったら、新しい配列にデータをいれる時、<font color="#ff0000">入れるデータが正しいか違ってるか判断するコード</font>がいる</li>
</ul>

<h2>配列のデータを操作してるコード</h2>

```index.js
 function add() {
   products.find(item => item.id == targetId);
     const newPurchase = purchases.findIndex((item) => item.product.id === 
       purchase.product.id)
     if(purchases.length < 1 || newPurchase === -1) {
       purchases.push(purchase)
       } else {
        purchases[newPurchase].number += purchase.number
        }
```



<h2>データを管理するときの考え方（データベース未使用）</h2>
<ul>
<li><font color="#ff0000">idを振っておき、idからデータを取り出す</font>のがやりやすい</li>
<li>データにidが振られてない時のデメリット : 配列のデータが正しいか判定するnewPurchaseさんに、データが正しいか判定しないとデータを入れた時の処理が正しくできなくなり、<font color="#ff0000">コードが長くなる</font></li>
</ul>

```index.js:データにidが割り振られてない時のコード
let newPurchase=true;

  purchases.forEach((item)=> 
if(item.price=== purchase.price) {
      newPurchase=false;
    }
  })
```

```index.js:データにidが割り振られてる時のコード
const newPurchase = purchases.findIndex((item) => item.product.id === purchase.product.id)
```


<h2>理解に苦労したコード2つ</h2>

```index.js:
        if(purchases.length < 1 || newPurchase === -1) {
          purchases.push(purchase)
```
<h2>このコードの考え方</h2>

```index.js:理解に苦労したコード①
        if(purchases.length < 1 
```
<ul>
<li>
<p>配列にデータがない(データを初めて入れる)→つまり配列の要素番号が０から始まる=要素番号が１以下</li>
</ul>

```index.js　:理解に苦労したコード②
        newPurchase === -1
```
<ul>
<li>既にデータが入ってる →配列の要素番号が１以上
</li>
</ul>