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

目次

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

書く目的

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

JSの画面

勉強したコード

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 = "";
      }

コードの登場人物一覧（わかってる範囲で）

• product: 個数・金額・idがしまわれてる配列
• id: 個数・金額を管理してる人
• number: 個数
• price: 金額
• purchases: 追加ボタンが押されたら、データを入れて保管する追加ボタン専用の配列
• newPurchase: 配列にデータがあるかないか判定してる人

学んだ考え方

• 追加ボタンを押したら、データをしまう追加ボタン専用の配列を新しく用意することになる
• 追加ボタン機能とは、データを一端配列に保存しておき、データを入れた配列から、データを取り出して表示すること
• 新しく配列を作ったら、新しい配列にデータをいれる時、入れるデータが正しいか違ってるか判断するコードがいる

配列のデータを操作してるコード

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
        }

データを管理するときの考え方（データベース未使用）

• idを振っておき、idからデータを取り出すのがやりやすい
• データにidが振られてない時のデメリット : 配列のデータが正しいか判定するnewPurchaseさんに、データが正しいか判定しないとデータを入れた時の処理が正しくできなくなり、コードが長くなる

データにidが割り振られてない時のコード

let newPurchase=true;

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

データにidが割り振られてる時のコード

const newPurchase = purchases.findIndex((item) => item.product.id === purchase.product.id)

理解に苦労したコード2つ

index.js

        if(purchases.length < 1 || newPurchase === -1) {
          purchases.push(purchase)

このコードの考え方

理解に苦労したコード①

        if(purchases.length < 1 

• 配列にデータがない(データを初めて入れる)→つまり配列の要素番号が０から始まる=要素番号が１以下

理解に苦労したコード②

        newPurchase === -1

• 既にデータが入ってる →配列の要素番号が１以上