マクドナルド大体1000円ガチャ作ってみた(vue.js + TypeScript)

超初心者フロントエンドエンジニアのyumiです。

プログラミングの勉強を始めて2ヶ月ほど経ったので何か楽しそうなものが作りたいと思い、
@marusho_summersさんの「サイゼリヤ1000円ガチャ」をならって「マクドナルド大体1000円ガチャ」を作ってみました。
大体1000円になってしまった理由は後ほどご説明します🥲

使ったものは
・ vue.js(バージョン2)
・ TypeScript
です

できたもの

「ガチャを回す」ボタンを押すと大体1000円くらいのマックのメニューが表示されます。

コードはこちら

色々調べて試行錯誤しながら書いたコードなので、「もっとこうした方が良い！」というアドバイス等あれば是非是非教えていただきたいです！

ちなみにメニューは2021年12月9日時点のバーガー（朝マックや夜マックは除く）とサイドメニューとドリンクに限定しており、実際のメニューよりかなり少なめです。

苦労した点

私はDBに関する知識はあまりなく自分でデータを作れなかったので、商品のデータはVuexストアのstateに直接入力しました。
商品の部品用クラスを別で作成し、stateの中の配列でそれらをインスタンス化していたので、consoleで表示させても画像のように[object Object]として表示されてしまい、まずそこでつまづきました。

ここは JSON.stringify() を使うことで中身を表示させることができました。

[JSON.stringify()の公式マニュアルはこちら]
(https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)

反省点

本当は本家のサイゼリヤ1000円ガチャのように、限りなく1000円ピッタリに近づけたかったのですが、ピッタリで止める方法が思い浮かばず、かなり余裕をもった幅の900円以上1500円となってしまいました。
次回改めて作り直すとしたら条件分岐の部分をもっと徹底的に行いたいです。
また、Twitterに結果をシェアするボタンも作ってみたいです。

おわりに

実際に作ってみてたくさんの改善した方が良い点を見つけたので、次回以降の開発に活かしたいと思います！
最後までお読みいただきありがとうございました。