Vue.jsでカードカウンティングアプリを作ってみた

Vue.jsとBulmaを使ってカードカウンティングアプリ（PWA）を作ってみました。Vue.js環境でBulmaを使うための手順をメモしておきます。

完成したアプリは動作確認用にこちらで公開しています。

ソース：tdomy/card-counter

カードカウンティングとは

ブラックジャックの攻略法です。

細かい説明はここではしませんが、「カードカウンティング」で検索するとたくさん見つかります。自分は以下のページを参考にしました。

How To Count Cards in Blackjack and Bring Down the House

Bulmaとは

CSSフレームワークです。過去記事で紹介しています。

CSSフレームワーク Bulmaを試してみた

作業手順

今回はVue CLIをインストールしている前提になります。Vue CLIのインストールに関しては、以下の過去記事を参照してください。

Vue.jsで作ったPWAをGithub Pagesで公開する

プロジェクト作成

Vue CLIで作成します。

$ vue create vue-app

プリセットの選択でCSS Pre-processorsを選択状態にして、プロジェクトを作成します。

Bulma（Sass）のインストール

以下のコマンドでインストールします。

$ npm install bulma --save-dev

ソース

node_modules/bulma/bulma.sassをimportしたsrc/assets/sass/main.scssを用意します。以下はサンプルです。

@charset "utf-8";

$green: #009000;
$light: #fafafa;

$body-background-color: $green;
$text: $light;

$body-min-width: 320px;
$widescreen-enabled: false;
$fullhd-enabled: false;

@import "node_modules/bulma/bulma.sass";

src/main.jsに次の1行を追加します。

require('@/assets/sass/main.scss')

Bulmaに関係する部分はこれだけです。

動作確認

ページを表示して、動作確認します。

デザインに問題ありません。今回作ったのはPWAなので、PCにインストールして確認してみます。

きれいに表示されました！

PCだけでなく、自分のスマホにもインストールしてみましたが、よりアプリ感があって良いです。

まとめ

Vue.jsとBulmaを使ってカードカウンティングアプリを作ってみました。

Bulmaはユーティリティクラスが豊富なので、今回のように小規模なものであれば、独自のCSSは書かずにアプリを作ることができます。今後も使っていきます！