【プログラミング】チンチロハイお得度チェッカー作ってみた！【期待値】

2022.05.04

“期待値”でチンチロハイがどれほどお得なのか考える！

みなさん、お酒は好きですか？

安くて楽しくお酒が飲めたら最高ですよね…！？

そこで！

期待値という考え方を用いて、チンチロハイがどれほどお得なのかがわかる「チンチロハイお得度チェッカー」を作ってみました！

チンチロハイお得度チェッカー
チンチロリンハイボールのお得度を判定します。
cee-lolin-checker.yomiaki.com

紹介動画も作ったのでぜひご覧ください！

この記事では、

そもそもチンチロリンハイボールとは何なのか？

チンチロハイお得度チェッカーで“お得度”を算出している“期待値“という考え方の紹介と、

アプリの使い方の説明を行っています！

楽しく期待値を学びましょう！

チンチロリンハイボールとは？

チンチロリンハイボールとは、サイコロをふり出た目の数によってハイボールの量や価格が変動するもの。エンターテイメント性をもったハイボールの飲み方とでもいおうか。この量や価格は店によって異なるものの多くの場合、ゾロ目は何らかの特典を楽しむことができる。

チンチロリンハイボールとは何？居酒屋の定番を自宅で楽しむのもアリ？

いっぱい飲むことになるか、安く飲めるかのギャンブル性のある飲み方、サービスですね。

期待値とは？

確率論において、確率変数の期待値（きたいち、英: expected value）とは、確率変数のすべての値に確率の重みをつけた加重平均である。確率分布に対して定義する場合は「平均」と呼ばれることが多い。

https://ja.wikipedia.org/wiki/期待値

Wikipediaにはこんな感じで難しそうに書いてあるので、例を考えてみましょう！

一回サイコロを振ったときに出る目の期待値を考えてみましょう。

これを言い換えると、“一回サイコロを振ったときに出る目の平均の値”となります。

サイコロのそれぞれの目が出る確率は1/6です。

1が出る確率は1/6、2が出る確率も1/6とすべての目が出る確率は1/6であるので、この1/6と出る目をそれぞれかけたものの総和が、一回サイコロを振ったときに出る目の平均の値となります。

1 × 1 6 + 2 × 1 6 + 3 × 1 6 + 4 × 1 6 + 5 × 1 6 + 6 × 1 6 = 3.5

よって、3.5という値が出ます。

これはもし「○○円払って、一回サイコロを振って、出た目×10000円がもらえる」というクジ？があったら、一回サイコロを振って大体35000円がもらえるということになります。

35000円以下でやらせてもらえるなら、お得！というわけですね。

どういう風に計算にする？

チンチロハイのお得度を計算するということで、安く、いっぱい飲める！という場合がお得ということだとすると、

「払う値段」と「飲める量」のそれぞれがどうなっているかを考える必要があります。

ただ、「飲める量」というのは直接求めるのは難しいので、「それぞれ単品で頼んだ時の値段」で考えることにします。

つまり「それぞれ単品で頼んだ時の値段」から「（チンチロリンをしたときに）払う値段」の期待値との差が、大きければ、それだけお得ということになります。

例えば、以下の表のような、ハイボールの値段、チンチロリンハイボールの条件があったとします。

商品名値段
ハイボール（並）300円
メガハイボール600円
ハイボールの値段
サイコロの出た目の和飲めるもの払う値段備考起こる確率
奇数メガハイボール600円メガハイボールを普通の値段で飲む１/2 (18/36)
偶数ハイボール（並）150円ハイボール（並）を半額の値段で飲める1/3 (12/36)
ぞろ目ハイボール（並）0円ハイボール（並）を無料で飲める1/6 (6/36)
チンチロリンハイボールの条件

次にこのチンチロリンハイボールで「払う値段」の期待値を求めます。

(奇数の時払う値段) × 　(奇数が出る確率)
+ (偶数の時払う値段) × (偶数が出る確率)
+ (ぞろ目の時払う値段) × (ぞろ目が出る確率)
= (払う値段の期待値)
600 × 1 2 + 150 × 1 3 + 0 × 1 6 = 350

350という値が出たので、チンチロを一回すると大体350円払うことになります。

次に「それぞれ単品で頼んだ時の値段」の期待値、つまり飲める量の期待値を求めます。

(奇数の時飲むものの単品の値段) × 　(奇数が出る確率)
+ (偶数の時飲むものの単品の値段) × (偶数が出る確率)
+ (ぞろ目の時飲むものの単品の値段) × (ぞろ目が出る確率)
= (飲める量の期待値)
600 × 1 2 + 300 × 1 3 + 300 × 1 6 = 450

450という値が出たので、チンチロを一回すると大体450円分のお酒が飲めることになります。

つまり、このお店でチンチロハイボールを行うと450円分の量のお酒が、350円で飲める！ということになり、100円お得ですね！

こんな感じで、(飲める量の期待値)と(払う値段の期待値)の差からお得度を算出します。

画面構成

入力前

画面構成はこんな感じです。

ここに先ほどの例と同じ値段を入力してみましょう！

入力後

そして「チェック！」のボタンを押すと…

モーダルウィンドウ

このように、どれだけお得かというモーダルウィンドウが出てきます。

これは「VueJS」と「Bootstrap」というライブラリを用いて、構成しました。

下の動画を主に参考にして制作しました。とてもわかりやすくて、楽しくVue JSを学べました。

ソースコード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>チンチロハイお得度チェッカー</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="loading.css">
<link rel="icon" href="image/logo.png">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
  <div class="shutter">
    <img src="image/logo.png" alt="ロゴ" class="logo"/>
  </div>
  <div class="img"></div>
<body class="bg-light">
<div id="app" v-cloak >
<div class="container">
    <div class="px-4 py-5 my-5 text-center"> <img class="d-block mx-auto mb-4" src="image/logo.png" alt="" width="100" height="100">
      <h1 class="display-5 fw-bold">チンチロハイお得度チェッカー</h1>
      <div class="col-lg-6 mx-auto">
        <p class="lead mb-4">チンチロリンハイボールのお得度を判定します。</p>
      </div>
    </div>
    <h3 class="mb-3">値段入力</h3>
    <div class="row g-3">
      <div class="col-sm-6">
        <input type="number" v-model="highball_s"　class="form-control" placeholder="ハイボール（並）の値段" />
      </div>
      <div class="col-sm-6">
        <input type="number" v-model="highball_m"　class="form-control" placeholder="メガハイボールの値段" />
      </div>
      <p>ハイボール（並）の値段：{{ highball_s }}円</p>
      <p>メガハイボールの値段：{{ highball_m }}円</p>
    </div>
    <hr class="my-4">
    <h3 class="mb-3">サイコロの目の合計が<strong>奇数</strong>のとき</h3>
    <input type="radio" v-model="odd" class="form-check-input" value="1" id="radio1">
    <label for="radio1">ハイボール（並）を普通の値段</label><br/>
    <input type="radio" v-model="odd" class="form-check-input" value="2" id="radio2">
    <label for="radio2">メガハイボールを普通の値段</label><br/>
    <input type="radio" v-model="odd" class="form-check-input" value="3" id="radio3">
    <label for="radio3">ハイボール（並）を半額の値段</label><br/>
    <input type="radio" v-model="odd" class="form-check-input" value="4" id="radio4">
    <label for="radio4">メガハイボールを半額の値段</label><br/>
    <hr class="my-4">
    <h3 class="mb-3">サイコロの目の合計が<strong>偶数</strong>のとき</h3>
    <input type="radio" v-model="even" class="form-check-input" value="1" id="radio5">
    <label for="radio5">ハイボール（並）を普通の値段</label><br/>
    <input type="radio" v-model="even" class="form-check-input" value="2" id="radio6">
    <label for="radio6">メガハイボールを普通の値段</label><br/>
    <input type="radio" v-model="even" class="form-check-input" value="3" id="radio7">
    <label for="radio7">ハイボール（並）を半額の値段</label><br/>
    <input type="radio" v-model="even" class="form-check-input" value="4" id="radio8">
    <label for="radio8">メガハイボールを半額の値段</label><br/>
    <hr class="my-4">
    <h3 class="mb-3">サイコロの目の合計が<strong>ゾロ目</strong>のとき</h3>
    <input type="radio" v-model="doublet" class="form-check-input" value="1" id="radio9">
    <label for="radio9">ハイボール（並）無料</label><br/>
    <input type="radio" v-model="doublet" class="form-check-input" value="2" id="radio10">
    <label for="radio10">メガハイボール無料</label><br/>
    <hr class="my-4">
<br><br>
    <button v-on:click="clickCheckButton" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary">チェック!</button>
<br><br><br><br>    
<div id="overlay" v-show="showContent" v-on:click="closeModal">
	<transition name="bounce">
      <div id="content"  v-show="showContent" class="px-4 py-5 my-5 text-center">
		   <transition name="rotating">
		 <img class="d-block mx-auto mb-4" v-show="showContent" src="image/saikoro_145.png" alt="" width="72" height="72">
		</transition>
        <h2 class="jumbotron">{{Math.trunc(deltaPrice)}}円お得！</h2>
		 <br/>
        <p>支払いの期待値：{{Math.trunc(expectedPrice)}}円</p>
        <p>飲める量の期待値：{{Math.trunc(expectedQuantity)}}円</p>
        <p>
          <button v-on:click="closeModal" class="w-100 mb-2 btn btn-lg rounded-4 btn-primary">閉じる</button>
	  <button v-on:click="twitterShare"><i data-v-0837f313 class="fab fa-twitter"></i>ツイッターでシェアする</button>
        </p>
      </div>
	</transition>
    </div>
  </div>
</div>
<script src="vue.js"></script> 
<script>
	new Vue({
		el:'#app',
		data:{
			highball_s:null,
			highball_m:null,
			odd:null,
			even:null,
			doublet:null,
			oddPrice:null,
			evenPrice:null,
			oddQuantity:null,
			evenQuantity:null,
			doubletQuantity:null,
			expectedPrice:null,
			expectedQuantity:null,
			deltaPrice:null,
			showContent: false,
	},
	methods:{
		clickCheckButton:function(){
			if(this.highball_s!=null&&this.highball_m!=null){
			if(this.odd!=null&&this.even!=null&&this.doublet!=null){
			if(this.odd==1){
				this.oddPrice=this.highball_s;
				this.oddQuantity=this.highball_s;
			}
			if(this.odd==2){
				this.oddPrice=this.highball_m;
				this.oddQuantity=this.highball_m;
			}
			if(this.odd==3){
				this.oddPrice=this.highball_s/2;
				this.oddQuantity=this.highball_s;
			}
			if(this.odd==4){
				this.oddPrice=this.highball_m/2;
				this.oddQuantity=this.highball_m;
			}
			if(this.even==1){
				this.evenPrice=this.highball_s;
				this.evenQuantity=this.highball_s;
			}
			if(this.even==2){
				this.evenPrice=this.highball_m;
				this.evenQuantity=this.highball_m;
			}
			if(this.even==3){
				this.evenPrice=this.highball_s/2;
				this.evenQuantity=this.highball_s;
			}
			if(this.even==4){
				this.evenPrice=this.highball_m/2;
				this.evenQuantity=this.highball_m;
			}
			if(this.doublet==1){
				this.doubletQuantity=this.highball_s;
			}
			if(this.doublet==2){
				this.doubletQuantity=this.highball_m;
			}
			this.expectedPrice=this.oddPrice*(1/2)+this.evenPrice*(1/3);
			this.expectedQuantity=this.oddQuantity*(1/2)+this.evenQuantity*(1/3)+this.doubletQuantity*(1/6);
			this.deltaPrice=this.expectedQuantity-this.expectedPrice;
			
			this.showContent = true;
			}
			else{
			alert("選択肢を全て埋めてください");
			}
			}
			else{
			alert("ハイボールの値段を入力してください");
			}
		},
		   closeModal:function(){
			this.showContent = false;
    },
		twitterShare:function(){
				 //シェアする画面を設定
				 var shareURL = 'https://twitter.com/intent/tweet?text=' + "【"+Math.trunc(this.deltaPrice)+"円お得に飲めました！】" + "%20%23チンチロリン" + '&url=' + "https://cee-lolin-checker.com";  
        		//シェア用の画面へ移行
				window.open(shareURL, '_blank');
			},
		
	}
	})
	</script> 
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

.bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  color: #fff;
}

.bg.-visible:before {
  transform: translate(0, 0);
}

.bg:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #a33e46;
  transform: translate(0, 100%);
  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) .6s;
  content: '';
}

.bg.-visible {
  opacity: 1;
  transform: translate(0, 0);
}

#overlay{
	
  /*　要素を重ねた時の順番　*/
  z-index:1;

  /*　画面全体を覆う設定　*/
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);

  /*　画面の中央に要素を表示させる設定　*/
  display: flex;
  align-items: center;
  justify-content: center;


}

#content{
  z-index:2;
  width:50%;
  padding: 1em;
  background:#fff;
　text-align:center;
}

.bounce-enter-active {
  animation: bounce-in .5s;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

.rotating-enter-active {
  animation: rotating-in 1s ease;
}

@keyframes rotating-in {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(2160deg);
  }
}

  [v-cloak] {
      display: none;
    }

.shutter{
  width: 100%;
  height: 100%;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  background-color:#fff;
  z-index:99;
  -webkit-animation: byeShutter 2.4s forwards;
  animation: byeShutter 2.4s forwards;
}
.logo {
  position: absolute;
  width: 120px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: logo 0.8s forwards;
  animation: logo 0.8s forwards;
	
  animation-delay: 0.2s;
}
@keyframes byeShutter {
70% {
  opacity: 1;
}
100% {
  display: none;
  opacity: 0;
  z-index: -1;
}
}
@keyframes logo {
0% {
  opacity: 1;
}
  
50% {
  transform: rotate(0deg);     
}
  100% {
  transform: scale(0.8);
  }
}
チンチロハイお得度チェッカーにOP画面とTwitter共有機能つけた。（2022/07/10）
この前作った「チンチロリンお得度チェッカー」にOP画面とTwitterでの共有機能つけました。OPは、このページにアクセスした際に画面の中央にロゴがひょこっと出てくる感じになってます。OP以下の記事を参...
yomiaki.com
2022.07.10

ぜひ居酒屋で使ってみてください！！

チンチロハイお得度チェッカー
チンチロリンハイボールのお得度を判定します。
cee-lolin-checker.yomiaki.com

コメント

タイトルとURLをコピーしました