Vue.jsとBulmaを使ってカードカウンティングアプリ(PWA)を作ってみました。Vue.js環境でBulmaを使うための手順をメモしておきます。
完成したアプリは動作確認用にこちらで公開しています。
カードカウンティングとは
ブラックジャックの攻略法です。
細かい説明はここではしませんが、「カードカウンティング」で検索するとたくさん見つかります。自分は以下のページを参考にしました。
How To Count Cards in Blackjack and Bring Down the House
Bulmaとは
CSSフレームワークです。過去記事で紹介しています。
作業手順
今回は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は書かずにアプリを作ることができます。今後も使っていきます!