[Q&A] JavaScript オブジェクトごとに異なる値を付ける方法について

JavaScript オブジェクトごとに異なる値を付ける方法について

解決したいこと

JavaScriptでオブジェクトを使って寿司の種類ごとに値段(変数price)が決まっていてグローバル変数の残高(変数money)がなくなるか寿司の在庫が0になった種類の寿司が食べられなくなるといったプログラムをつくっています。
寿司の種類ごとに個別に値段を付けたいのですが、うまく行きません。
解決方法を教えて下さい。

発生している問題・エラー

特になし

該当するソースコード

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <script>
           //グローバル変数 残高
           let money=4000

           //寿司のオブジェクト
           function Sushi(kind, quantity){
               this.kind=kind;
               this.quantity=quantity;
               this.eat=function(){
                   this.quantity-=1;
                   money-=100;
               };
           }
           let sushiTuna=new Sushi("tuna", 10);
           let sushiSquid=new Sushi("squid", 20);
           let sushiShrimp=new Sushi("shrimp", 30);
           let sushiSalmon=new Sushi("salmon", 40);
           let sushi=sushiTuna;

           //寿司を食べる関数
           function haveAMeal(){
               sushi.eat();
               document.getElementById("kind").textContent=sushi.kind;
               document.getElementById("quantity").textContent=sushi.quantity;
               document.getElementById("money").textContent=money;
           }

           //寿司の種類を選ぶ関数
           function chooseTuna(){
               sushi=sushiTuna;
           }
           function chooseSquid(){
               sushi=sushiSquid;
           }
           function chooseShrimp(){
               sushi=sushiShrimp;
           }
           function chooseSalmon(){
               sushi=sushiSalmon;
           }
       </script>
   </head>
   <body>
       <button onclick="chooseTuna()">マグロを選ぶ</button>
       <button onclick="chooseSquid()">イカを選ぶ</button>
       <button onclick="chooseShrimp()">エビを選ぶ</button>
       <button onclick="chooseSalmon()">サーモンを選ぶ</button>
       <button onclick="haveAMeal()">寿司を食べる</button>
       <p>
           <span id="kind"></span>は残り<span id="quantity"></span>貫
       </p>
       <p>
           お金は残り<span id="money"></span>円
       </p>
   </body>
</html>

自分で試したこと

寿司の種類ごとに個別に値段を付けてみたいのですが、うまくいきません。

3Answer

@ORCHESTRA_TAPE posted at 2024-03-27

寿司の種類ごとに値段を設定するには、Sushi コンストラクタ関数に価格のパラメータを追加して、それぞれの寿司オブジェクトに対して異なる価格を設定できるようにする必要があります。また、eat メソッドを変更して、特定の寿司を食べるたびにその寿司の価格だけ残高から引かれるようにします。さらに、残高が寿司の価格未満の場合や寿司の在庫が0の場合には、寿司を食べることができないようにするチェックを追加します。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <script>
           // グローバル変数 残高
           let money = 4000;

           // 寿司のオブジェクト
           function Sushi(kind, quantity, price) {
               this.kind = kind;
               this.quantity = quantity;
               this.price = price; // 値段パラメータの追加
               this.eat = function() {
                   if (this.quantity > 0 && money >= this.price) { // 在庫と残高のチェック
                       this.quantity -= 1;
                       money -= this.price; // 寿司の値段を反映
                   }
               };
           }

           // それぞれの寿司に値段を設定
           let sushiTuna = new Sushi("tuna", 10, 200);
           let sushiSquid = new Sushi("squid", 20, 150);
           let sushiShrimp = new Sushi("shrimp", 30, 250);
           let sushiSalmon = new Sushi("salmon", 40, 180);

           // 最初に選択される寿司
           let sushi = sushiTuna;

           // 寿司を食べる関数
           function haveAMeal() {
               sushi.eat();
               document.getElementById("kind").textContent = sushi.kind;
               document.getElementById("quantity").textContent = sushi.quantity;
               document.getElementById("money").textContent = money;
           }

           // 寿司の種類を選ぶ関数
           function chooseTuna() { sushi = sushiTuna; }
           function chooseSquid() { sushi = sushiSquid; }
           function chooseShrimp() { sushi = sushiShrimp; }
           function chooseSalmon() { sushi = sushiSalmon; }
       </script>
   </head>
   <body>
       <button onclick="chooseTuna()">マグロを選ぶ</button>
       <button onclick="chooseSquid()">イカを選ぶ</button>
       <button onclick="chooseShrimp()">エビを選ぶ</button>
       <button onclick="chooseSalmon()">サーモンを選ぶ</button>
       <button onclick="haveAMeal()">寿司を食べる</button>
       <p>
           <span id="kind"></span>は残り<span id="quantity"></span>貫
       </p>
       <p>
           お金は残り<span id="money"></span>円
       </p>
   </body>
</html>

このコードにより、寿司の種類ごとに個別の値段を設定し、残高が十分であり在庫がある限り、ユーザーは寿司を食べることができます。

Comments

@consul_akihiro
Questioner
お忙しい中詳しい解説ありがとうございます!
@consul_akihiro
Questioner
できました。ありがとうございます!

@Verclene posted at 2024-03-27

現状はmoneyから100を引く処理がベタ書きです.修正方針としては至極単純で,そこにパラメータを渡してやればよいです.

@albireo posted at 2024-03-29

寿司オブジェクトとは別に価格表を用意する方法もあります。
初期在庫のみ変更したい時などに便利。

// 価格表
const PriceList = {
    "tuna": 200,
    "squid": 150,
    "shrimp": 250,
    "salmon": 180
};
// 寿司のオブジェクト
function Sushi(kind, quantity) {
    this.kind = kind;
    this.quantity = quantity;
    this.price = PriceList[kind]; // 値段は価格表から取ってくる
    this.eat = function() {
        if (this.quantity > 0 && money >= this.price) { // 在庫と残高のチェック
            this.quantity -= 1;
            money -= this.price; // 寿司の値段を反映
        }
    };
}