React で BINGO っぽいものを作った

React の勉強の一環で BINGO ゲームっぽいサイトを作りました。サイトの名前は 麻雀役 dé BINGO です。

ソースコード: OldBigBuddha/ma-jan-bingo - GitHub

内容

麻雀の役名をビンゴカード風にランダムに並べるサービスです。偶然役（一発とか）や役満を含めるか否かを選ぶことができるので、そこらへんで難易度を調節することが可能です。

天和・地和は抜いてあります。いくら役満とは言え出るものじゃないので…。

作成理由

最近 Vtuber 界隈で麻雀企画が流行ってるので、麻雀ビンゴ的なものがあったら面白そうだなと思って React の勉強がてら作りました。

使った技術

React を使って作りました。楽しいです React。あと、 React Router も少し使いました。とても楽ですね。

デザイン面に関しては Bootstrap を利用しました。のちのち独自のスタイルシートに置き換えていきたいなと思っています。どうやら Styled Component というライブラリがあるらしいので、そっちに手を出そうかなと思っています。

インフラに関しては安定の Netlify を使っています。GitHub にリポジトリがあれば数クリックでホスティング環境ができてしまうという超すぐれものです。

わざわざドメインを取るのがめんどくさかったので .dev 解禁日に買った fuga.dev からサブドメインをはやしています。ドメイン自体が短いのであまり違和感ない字面かなと思っています。 DNS は CloudFlare です。

今後の展望

今は保存機能がないのでなんかの拍子でリロード等を挟んでしまうと BINGO シートが変わってしまいます。 LocalStorage でも使ってブラウザにデータを保存できるようにしたいです。あと、生成した BINGO カードを画像に出力したり、ローカル役を追加したり、役に難易度をつけて BINGO シートの難易度を決めれるといいなとか思ってます。

なにはともあれ、ポートフォリオに載せられる成果物がひとつ増えてよかったです。

この記事を読んだ麻雀好きの方いらっしゃいましたらぜひ使ってみてください。結構楽しいですよ。

もしバグとか提案とかあったら Twitter で教えて下さい。