Vue.js + Typescriptでマインスイーパーを作る

少しずつ湿度が落ち着いてきて、過ごしやすい日が増えてきました。

元々めちゃくちゃな天然パーマで、数年前から髪形を変えて両サイドを刈り上げているのですが、
学生のころはモジャモジャな髪形をしていました。
湿度が高いと特に、全体的に髪が爆発しておりました。デラックスボンバー。

爆発......　爆弾......

というわけで今回は、マインスイーパーを作ろう！！！

Webアプリとして、Vue.jsとTypeScriptを使用したマインスイーパーを作成したので、
どのような利点があったのかを記載いたします。

Vue.js と TypeScript

まず、Vue.jsについて。

Vue (発音は /vjuː/、view と同様) は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。

要するに、コンポーネント（再利用できるパーツ）を使ったりできるようにして、すばやく開発できるようにしてくれるやつです。

いろいろな機能が入っていますが、個人的に好きなのは『リアクティブな実装ができる点』です。
例えば、「生年月日を入力したら年齢が自動的に計算される」みたいなものを簡単に作れます。

また、現在Vue.jsには Vue 2 と Vue 3 があります。
Vue 2 は2023年12月31日にサポートが終了してしまうので、これからVue.jsで開発を行う場合には基本的には Vue 3 を使うことになります。

次に、TypeScriptについて。

TypeScriptのオープンソース解説書より、引用いたします。

TypeScriptはJavaScriptを拡張して作られたプログラミング言語です。トレンドが示すとおり、TypeScriptはJavaScriptに代わって第一に選択される言語になりました。TypeScriptが提供する静的型システムは、コードの保守性と可読性を大幅に向上させます。またブラウザ等の互換性を心配することなく、モダンで便利なJavaScriptの機能を利用できます。

例えば、JavaScriptでは、「この入力は数字だよ」「これは文字列だよ」というような情報が、実際にコードを動かしてみるまで確かめられませんでした。
そのような不便な状態だったので TypeScript が登場し、開発の時点で不具合をある程度見つけることができるようになりました。

これらの技術を組み合わせることで、開発を効率化していくことができます。

作ったもの

完成したものは、こちらになります。

また、下記のサイトを参考にさせていただきました。
JavaScriptでマインスイーパを作ってみる
 Vue.js でマインスイーパーをつくる

ゲームプレイ画面が、こんな感じです。

設定画面は、このようになっております。

普通のマインスイーパーですね！

どんなところで技術が活用できたか

Vue.jsを活用した点としては、設定画面と各マスの関連性です。
各マスをコンポーネントとして定義することで、設定画面の縦横の長さの設定に応じて、増やしたり減らしたりすることが出来ます。

また、上記には載せていませんでしたが、vue router というものを使っています。
これによって、ゲーム画面と設定画面の画面遷移を簡単に実装することが出来ます。

TypeScriptに助けられた点としては、タイプミスの検出があります。
縦の長さに height という変数名を付けていたのですが、heigth のような間違いを検出して教えてくれるので、簡単に修正ができます。
JavaScriptだとテストして動かないときに、どこで間違えたのか探すところから修正作業が始まるので、この差はかなり大きいです。

最後に

弊社では、Webアプリの開発も行っております。

上述していませんが、Vue.js+TypeScriptは小規模なWebアプリの開発に適しています。
大規模なアプリを作成する場合は、ASP.NET Coreを使用するなど、
開発の規模や現在のトレンドに応じて様々なフレームワークを使い分けて、サービスを提供いたします。

Webアプリの開発ベンダーをお探しの際は、ぜひ弊社にご相談いただけたらと思います！