夏にぴったり！BBQ串ガチャを作ってみた！

はじめに

こんにちは、フクロウです。
　最近は夏バテで寝つきが悪く、二、三時間に一回は起きてしまう寝不足な日々を送っています。毎年こうなるので「ああ、夏がやってきたな」と変なところから季節を感じています。
　それはそれとして、今年はまだ一回もセミの鳴き声を聞いていないんですが、奴らはどこに消えたのでしょうか。静かで良いことですけどね。

今回はこれからの夏にぴったりなBBQで使える串ガチャを作ったので、その紹介をしたいと思います！

きっかけ

4月から始まった新卒研修、その最後の一つとしてVueを使ったアプリの作成がありました。
「vueの研修、何作ろう…？」と頭を悩ませていた頃、ちょうど部署でキャンプに行こう！という話が上がりました。キャンプといえばBBQ！そのまま食べられるものでも無駄に焼いてみたくなりますよね。
「串焼きの食材ガチャとか面白いんじゃない？」という一言であっというまに作るものが決まりました。とてもありがたい。

機能

このガチャは主に以下の三つの機能で構成されてます
・参加者登録
・食材登録
・ガチャ
コンポーネントはこんな構成になっています(命名センスの無さを思い知りました。なんだkusiviewって)
App
　|-entry
　　　|-Itemset
　　　　　|-gacha
　　　　　　　|-random
　　　　　　　|-kusiview

それぞれの担当機能
entry：参加者登録
Itemset：食材登録（名前と個数）
Gacha：ガチャ画面全体　人の切り替えもここ（これは分けても良かったかも）
Random：ガチャボタン　色々遊んだところ
kusiview：結果表示　アニメーションとか画像表示とかやってみたところ

こだわったところ

1.「数制限」
　BBQの食材には数制限があります。
　Itemsetで数を入力させ、その数しか排出されないように設定しています。
　Itemsetで取得した食材のリストは{name:肉, count:3}のようになっているので、countの数だけ”肉”を入れたlistをrandomコンポーネント内で生成しています。ガチャで出たものはこのリストから削除されていくので、元の食材リストは変更されません

2.「フィーバーモード」
　ただのガチャでは面白くないので、低確率でフィーバーモードを実装しました。
　フィーバーモードは、残っている食材から好きなものを選べるという機能です。
　ガチャボタンを押すたびに乱数が計算され、0.05以下の乱数が生成されるとif分岐で切り替わるようになっています。
　5％ですがテストプレイだと案外出るなという感じです。普段のガチャもこれくらい出れば良いのに

3.「苦手なものを省く」
　とある名前を参加者に入力すると、マシュマロがでないようになっています。またある人の名前ではピーマンがでないようになっています。
　アプリ上は特に何も表示が変わらないので、他人にはバレない仕様です。
　ただ、特定の文字列を含まないとその人だと認識しないので、本人がその名前をドンピシャで入力しないと使えません。また、食材に限りがあるので、残りがそれだけになると流石に逃げられないようになっています。

4.「確率2倍」
　フィーバーモードと同じ確率で、引いた食材が2個排出されるようになっています。
　食材が2個以上残っていないと成立しないので、いくつかの条件分岐を通しています。なので、体感はフィーバーモードより出にくいかなという感じです。
　簡単な機能かと思っていたのですが、数制限があることによりいろんな条件をかける必要がありました。ここでかなりコードが複雑になった気がする。

5.「二本目以降の表示」
　初めは一本だけのガチャにしようと思っていたのですが、実用性を考えると複数本作れた方が良いのは明白。上記の機能を一通り作り終えてから、元のコードを活かす形で実装しました。

学び

• initializeLists()←これめちゃくちゃ便利
  　たくさんある制限のカウントを記録している変数をまとめて管理できるので、リセット時やcreatedで同じコードを書く必要がなくなってスッキリします（それ以外の部分はごちゃごちゃしていますが…） - Randomがpropsで受け取っているものがかなり多いので、このコンポーネントわけは成功だったのだろうか…？と思いつつ、画面のブロックごとに分かれてるからまぁいいか、という気持ちです。
  

感想

• 分かりやすいコードを書くのって本当に難しい。
  　「〜List」やら「〜Index」やら似たような変数が乱立していて、おそらく機能を追加するときに書いた代入式がまったく意味を成していなかったりします。
• ちまちま機能作るの楽しい
  　個人的にはほとんど同じようなコードでいろんな機能を実装していくのが工作みたいで楽しかったです。
• CSS大暴れ
  　特に二本目以降の機能を作った時は大苦戦でした。gachaでは親に対して2つの子コンポーネントがあり、それぞれの表示を司るgachaのstyleと、そのコンポーネント内のstyleをうまく噛み合わせるのがなかなか難しいところです。一本用に整えていたので、うまく行くはずもなく…最初は大暴走していました。根気が必要ですね。
  

色々苦労はしましたが、とても楽しく作成することができました。研修の一環でやったことなので、少しでも学んだことを活かせると良いな〜とぼんやり考えています

追加できそうな機能

• 出たものを他の人に押し付ける
• その場で苦手なもの入力