はじめに
モンティホール問題をご存知でしょうか？
アメリカのテレビ番組で以下のようなゲームがあったそうです。
司会者と挑戦者がいる。
会場には３つのドアがある。
３つのうちどれか１つの後ろに景品（高級車）がある。残り２つの後ろはハズレとしてヤギがいる。
まず挑戦者は３つのうちどれか１つのドアを選ぶ。
次に司会者（モンティホール氏）が、挑戦者が選んでいない２つのうち１つのドアを開けてくれる。そこには必ずヤギがいる。つまりハズレである。
挑戦者は最初に選んだドアを開けてもよいし、ドアを選びなおして別のドアを開いてもよい。さて、どちらを開けるか？？
……ここで直感的にはどちらのドアを選んでも確率5分5分で、どっちでも同じのように思えてしまうのですが、実はここで別のドアを選びなおしたほうが、景品（高級車）が当たる確率が２倍になるそうです。
はたして、本当でしょうか？
私は本当かどうかを確かめるために、まずは家にあるお椀３つと豆で実験してみたところ、確かに選びなおしたほうが正解の確率が高くなる状態になっていました。
皆さんも試してみたいと思いませんか？
そんなわけで、「モンティホール問題を手動で検証する」サイトを作ってみました。
モンティホール問題を手動で試してみる
(step1 ドアを選ぶ・・)
(step2 次へボタンを押すと・・)
(step3 ヤギが現れる。別のドアを選んで「ドアを開ける」と・・？）
(step4 不正解！！)
というなんとも力技に近い検証方法になりますが、これを30回くらい（手動で）一生懸命に繰り返すと、
- ドアを選び直さなかった場合 正解数: 11, 不正解数: 19, 正解率: 36.7 %
- ドアを選びなおした場合 正解数: 24, 不正解数: 6, 正解率: 80 %
という結果になりました。理論上は選び直さなかた場合が33.3%、選びなおした場合が66.6% になるらしいです。
技術面について
上記ページですが、ソースコードは以下になります。
Vue.jsを使ったものになります。それほどきれいなコードではないかもしれませんが、Vue.jsの基礎レベルとして以下のような技術を使っています。
- 算出プロパティとウォッチャ
- クラスとスタイルのバインディング
- 条件付きレンダリング
- リストレンダリング
- コンポーネントの基本
- propsを通して親componentから子componentへデータを渡す
- $emitを通して子componentから親componentの関数を呼ぶ
- $storeを使ったデータの保存
私はVue.jsを学習するにあたって、まずは公式サイトを「読んで」, 気になるところは入力して動作を試してみたりしたのですが、文章を読むだけでいまひとつ「何に使われるのか」イメージしづらいことがありました。
モンティホール問題の検証サイトを手を動かして作ってみることによって、それぞれの技術の使いどころを把握することができましたし、ある程度Vue.jsに慣れることができました。
SPAの初期学習の段階では、上記のようなサイトを自力で作ってみることをオススメします！
ちなみに
他の方々もモンティホール問題を解くサンプルが様々あるようです。ご参考までに。