吉野家1000円ガチャをJavaScriptで作ってみた.

超初心者プログラマーの平岡です(本当です).
ネットではAKRという名前をよく使っていて,本業は予備校講師で,おいしい数学 という,月間10万PV程の高校数学のサイトを運営しています.
さて,Twitter上で,サイゼリヤ1000円ガチャというサイトが流れてきて,これならプログラミング勉強中(JavaScriptを勉強して半年)の私でも作れるのではないか??と思い,思いきって大好きな吉野家バージョンをネイティブのJavaScriptのみで作ってみることにしました.

それが吉野家1000円ガチャです.


JavaScriptを勉強して半年の私のコードに大して価値があると思えないので,イートインのHTMLとJavaScriptのコードを全公開します.
なお,初心者なので,もっと上手くコードが書ける可能性大ですし,この後コードを変える可能性もありますが,是非私にアドバイス頂けると嬉しいです.

yoshinoya1000-eatin.html

<h1 style="text-align: center; font-size: x-large">吉野家1000円ガチャ</h1>
   <p style="text-align: center; font-size: large"><b>イートイン</b></p>
   <p style="text-align: center"><a href="yoshinoya1000-eatin.html" class="btn-square">イートインガチャを回す</a></p>
   <div id="result" class="waku" style="background-color: #FFE7BF "></div>
   <p style="text-align: center">
      <a class="share-7" id="getResult" >
         <i class="fab fa-twitter"></i>
      </a>
   </p>
   <script src="jsfile/gacha-yo-eatin.js"></script>
   <br><br>
   <p style="text-align: center; font-size: small"><a href="yoshinoya1000.html">吉野家1000円ガチャ</a></p>
   <p style="text-align: center; font-size: small">respect for <a href="https://saizeriya-1000yen.herokuapp.com" target="_blank">サイゼリア1000円ガチャ</a></p>
   <p style="text-align: center; font-size: small">made by <a href="https://twitter.com/akr_trader" target="_blank">AKR</a></p>

上のCSSのコードは割愛します.凝った事はしてないので.
続いてJavaScriptです.

gacha-yo-eatin.js

let getResult = document.getElementById('getResult');
let result =document.getElementById('result');

var menu = {
   "牛丼(小盛)" : 332,
   "牛丼(並盛)" : 352,
   "牛丼(アタマの大盛)" : 452,
   "牛丼(大盛)" : 452,
   "牛丼(特盛)" : 632,
   "牛丼(超特盛)" : 722,
   "豚丼(小盛)" : 318,
   "豚丼(並盛)" : 338,
   "豚丼(アタマの大盛)" : 438,
   "豚丼(大盛)" : 498,
   "豚丼(特盛)" : 618,
   "豚丼(超特盛)" : 708,
   "牛カルビ丼(小盛)" : 528,
   "牛カルビ丼(並盛)" : 548,
   "牛カルビ丼(アタマの大盛)" : 648,
   "牛カルビ丼(大盛)" : 708,
   "牛カルビ丼(特盛)" : 828,
   "牛カルビ丼(超特盛)" : 918,
   "牛皿定食(並盛)" : 498,
   "牛皿定食(大盛)" : 598,
   "牛皿定食(特盛)" : 698,
   "牛カルビ定食" : 598,
   "炙り塩鯖定食" : 598,
   "鯖みそ定食" : 598,
   "牛鮭定食" : 548,
   "豚鮭定食" : 548,
   "鰻重(一枚盛)" : 788,
   "スパイシーカレー(並盛)" : 328,
   "スパイシーカレー(大盛)" : 418,
   "チキンスパイシーカレー(並盛)" : 514,
   "チキンスパイシーカレー(大盛)" : 604,
   ライザップ牛サラダ: 500,
   ライザップ牛サラダエビアボガド: 600,
   とん汁: 186,
   しじみ汁: 158,
   あさり汁: 158,
   味噌汁: 65,
   生野菜サラダ: 102,
   ポテトサラダ: 130,
   ごぼうサラダ: 130,
   エビアボガドサラダ: 198,
   牛小鉢: 167,
   玉子: 65,
   半熟玉子: 75,
   ねぎ玉子: 102,
   チーズ: 102,
   お新香: 102,
   キムチ: 102,
   鮭: 195,
   ご飯: 139,
   のり: 65,
   のり: 65,
   納豆: 84,
   "牛皿(並盛)" : 302,
   "牛皿(大盛)" : 402,
   "牛皿(特盛)" : 502,
   "豚皿(並盛)" : 288,
   "豚皿(大盛)" : 388,
   "豚皿(特盛)" : 488,
   "牛カルビ皿" : 458,
   "鰻皿(一枚盛)" : 698,
   "瓶ビール" : 417,
   "冷酒" : 315,
}

var menucalorie = {
   "牛丼(小盛)" : 488,
   "牛丼(並盛)" : 652,
   "牛丼(アタマの大盛)" : 741,
   "牛丼(大盛)" : 863,
   "牛丼(特盛)" : 1030,
   "牛丼(超特盛)" : 1169,
   "豚丼(小盛)" : 530,
   "豚丼(並盛)" : 707,
   "豚丼(アタマの大盛)" : 797,
   "豚丼(大盛)" : 931,
   "豚丼(特盛)" : 1172,
   "豚丼(超特盛)" : 1319,
   "牛カルビ丼(小盛)" : 618,
   "牛カルビ丼(並盛)" : 802,
   "牛カルビ丼(アタマの大盛)" : 1019,
   "牛カルビ丼(大盛)" : 1136,
   "牛カルビ丼(特盛)" : 1327,
   "牛カルビ丼(超特盛)" : 1502,
   "牛皿定食(並盛)" : 739,
   "牛皿定食(大盛)" : 797,
   "牛皿定食(特盛)" : 968,
   "牛カルビ定食" : 966,
   "炙り塩鯖定食" : 830,
   "鯖みそ定食" : 895,
   "牛鮭定食" : 712,
   "豚鮭定食" : 800,
   "鰻重(一枚盛)" : 670,
   "スパイシーカレー(並盛)" : 539,
   "スパイシーカレー(大盛)" : 691,
   "チキンスパイシーカレー(並盛)" : 747,
   "チキンスパイシーカレー(大盛)" : 898,
   ライザップ牛サラダ: 404,
   ライザップ牛サラダエビアボガド: 430,
   とん汁: 176,
   しじみ汁: 42,
   あさり汁: 51,
   味噌汁: 20,
   生野菜サラダ: 25,
   ポテトサラダ: 122,
   ごぼうサラダ: 70,
   エビアボガドサラダ: 83,
   牛小鉢: 130,
   玉子: 76,
   半熟玉子: 76,
   ねぎ卵: 103,
   チーズ: 98,
   お新香: 13,
   キムチ: 26,
   鮭: 133,
   ご飯: 386,
   のり: 5,
   のり: 5,
   納豆: 98,
   "牛皿(並盛)" : 257,
   "牛皿(大盛)" : 315,
   "牛皿(特盛)" : 486,
   "豚皿(並盛)" : 320,
   "豚皿(大盛)" : 394,
   "豚皿(特盛)" : 634,
   "牛カルビ皿" : 416,
   "鰻皿(一枚盛)" : 242,
   "瓶ビール" : 215,
   "冷酒" : 185,
}
var menulength = 0;
var menucalorielength = 0;
var ary = [];
var arycalorie = [];
for(i in menu){
   menulength++;
   ary.push(menu[i]);
}
for(i in menucalorie){
   menucalorielength++;
   arycalorie.push(menucalorie[i]);
}
var rand = Math.floor(Math.random() * menulength);
var key = Object.keys(menu);
let total = ary[rand];
let totalcalorie = arycalorie[rand];
var key1 = key[rand];
result.innerHTML =  '<p style="text-align: center"><b>イートインガチャ結果</b></p><p><strong style="font-size: large">' + key[rand] + '</strong>:'+ ary[rand] + '円 ' + arycalorie[rand] + 'kcal</p>';
while (total <= 1700){
   var rand2 = Math.floor(Math.random() * menulength);
   total = total + ary[rand2];
   totalcalorie = totalcalorie + arycalorie[rand2];
   key1 = key1 + ',' + key[rand2];
   if (total <= 844) {
       document.getElementById('result').innerHTML += '<p><strong style="font-size: large">' + key[rand2] + '</strong>:'+ ary[rand2] + '円 ' + arycalorie[rand2] + 'kcal</p>';
   } else if (total <= 909){
       document.getElementById('result').innerHTML += '<p><strong style="font-size: large">' + key[rand2] + '</strong>:'+ ary[rand2] + '円 ' + arycalorie[rand2] + 'kcal</p>';
       break;
   } else {
       total = total - ary[rand2];
       totalcalorie = totalcalorie - arycalorie[rand2];
       key1 = key1.replace(',' + key[rand2], '');
   }
}
document.getElementById('result').innerHTML += '<br><p style="text-align: center">税抜合計:' + total + '円<br><b>税込合計:' + Math.floor(total *1.1) + '円<br>カロリー合計:' + totalcalorie + 'kcal </b></p>';

getResult.addEventListener('click',function twitText() {
   var s, url;
   s = "吉野家1000円ガチャの結果は………" + key1 + " で税込合計" + Math.floor(total *1.1) + "円で,カロリーの合計は" + totalcalorie + "kcal です。";
   url = 'hiraocafe.com/yoshinoya1000.html';
   if (s != "") {
       if (s.length > 140) {
           //文字数制限
           alert("テキストが140字を超えています");
       } else {
           //投稿画面を開く
           url = "http://twitter.com/share?url=" + escape(url) + "&text=" + s;
           window.open(url, "_blank", "width=600,height=300");
       }
   }
}
                         )

解説します.
まず,連想配列を使って,吉野家の商品の名前と値段,名前とカロリーが対応したものを用意します.
この値段とカロリーを順に配列に格納していきます.
乱数を使って,ランダムに番号を選ぶようにし,let total = ary[rand];とlet totalcalorie = arycalorie[rand];で,最初の商品の値段とカロリーをそれぞれ,total と totalcalorie に代入します.同時にinnnerHTMLを使って,結果をHTMLに出力します.

その次はwhile文です.totalが1700以下で繰り返すとありますが,1700でなくていいです.大事なのは,税抜844円以下で,ランダムに商品を選ぶことを繰り返し,909円以下であればbreakで繰り返し処理を中止します。そして909より上であれば,最後に追加した商品の値段を引き,replaceで名前を削除することです.
なぜ税抜845円以上909円以下で中止するかというと,一番安い商品が税抜65円(例えば味噌汁)なので,この価格だと味噌汁すら買えません.なぜ買えないかというと,消費税が10%なので税抜価格だと合計909円までが限界だからです.
最後に苦労したのは,ガチャの結果を,twitterに引き渡すことです.
実用的には,玉子関連が多く出ますし,定食が出て味噌汁が出るのも避けたいので,のりを少し多めに登録したのがポイントです.


以上です.吉野家1000円ガチャは,初心者がプログラミング(特にwhile文や,関数,変数の置き方)のいい練習になると思います.