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

超初心者プログラマーの平岡です(本当です)．
ネットではAKRという名前をよく使っていて，本業は予備校講師で，[おいしい数学](https://hiraocafe.com) という，月間10万PV程の高校数学のサイトを運営しています．

さて，Twitter上で，[サイゼリヤ1000円ガチャ](https://saizeriya-1000yen.herokuapp.com)というサイトが流れてきて，これならプログラミング勉強中(JavaScriptを勉強して半年)の私でも作れるのではないか？？と思い，思いきって大好きな吉野家バージョンをネイティブのJavaScriptのみで作ってみることにしました．

それが[吉野家1000円ガチャ](https://hiraocafe.com/yoshinoya1000.html)です。

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文や，関数，変数の置き方)のいい練習になると思います。