Vue使ってゲーム作ってみる - 【準備編】

初めに

どうも、初めまして。
普段、PythonでDiscord botを、Javaでマイクラプラグインを作ってる人です。

Webサイトを作ってるときに、「そろそろJavascriptをやらなきゃなー」と思い、Vue.jsを使ってゲームの開発をしたので、その過程を話していこうと思います。

あ、日本語が変なのは気にしないでください。

この記事は 【準備編】 ということで、vue-cliを使って開発の準備を行っていきます。
vue-cliの仕様の話を大量にしているので、
「そんなこと、知ってるよ」
という人は、読み飛ばしてもらって構いません。

ゲーム概要

• Vocaloid界隈(Discord)用のクイズゲーム
• Discordのコマンドで制御可能にする
• 楽曲の歌詞を表示し、タイトルを入力
• 正誤をわかりやすいように表示する
• 正解者には1ポイントあげる

開発環境

検証日：2021/09/20

• Windows 10 Pro
• Windows Terminal
• node.js 16.8.0
• npm 7.20.0
• @vue/cli 4.5.13

インストール

vue-cliをまだインストールできてない人は、ここでインストールしちゃいましょう。

npm install -g @vue/cli

インストールには若干時間がかかるから、気長に待つ

実行

vue ui

これを実行すると、
コンソール上に

🚀  Starting GUI...
🌠  Ready on http://localhost:8000

が出てきて、
⇩このようなページが勝手に開くはず

開かなかったら、
ブラウザで http://localhost:8000 を開くと出てくる...はず

プロジェクトの作成

作業場所

上にある Vue プロジェクトマネージャ の下の 作成 をクリック

ここで、プロジェクトの作業用ディレクトリに移動します。
プロジェクト作成時に勝手にフォルダーが作成され、その中にファイル等が格納されるので、
「ユーザーフォルダー直下でいい」
という人は、そのまま ここに新しいプロジェクトを作成する をクリック

「俺は作業用ディレクトリに作るんだ！」
って人は、ペンマークを押して、ディレクトリのパスを入力することで、移動ができます。

「フォルダーを作成したい」
という人は、右端にある 「︙」 をクリックし、 新しいフォルダ を選択、
フォルダー名を入力し、右下の 作成 を押すことで、新しいフォルダの作成ができます。

プロジェクトの詳細

「ここに新しいプロジェクトを作成する」をクリックすると、このような画面が表示されます。

プロジェクトフォルダ

名前を入力 が書かれているテキストボックスにプロジェクト名を入力します。
この名前のフォルダーの中にこの後作成されるファイル等が格納されます。

パッケージマネージャー

デフォルト の部分を押すと、トグルが表示されます。

• npm
• yarn
• pnpm

の三種類が使用できるので、好みのパッケージマネージャーを選択してください。

追加オプション

存在する場合、対象フォルダを上書きする

危ないので、初めての人は オフ にしておきましょう。

初心者向けインストラクションなしでプロジェクトを構築する

この記事をここまで読んでる時点で初心者なので、オフりましょう。

Gitリポジトリ

バージョン管理・Githubの使用 等をしたいのであれば、オンにした方がいいでしょう。
オンにしたときに表示される
「Overwrite commit message (optional)」
は、最初のコミットメッセージを入力する欄です。
書かなくてもいい。

以上の設定が完了したら、「次へ ➡」を押しましょう。

プリセット

このような画面が出てきましたね。

正直、この記事を読んでる人の作りたいアプリを知らないので、何とも言えませんが、
中・小規模プロジェクト、もしくは、ちょっとした実験であれば、 Vue 3 を選択してもいいと思います。

ただ、最終更新日(2021/09/20) の時点では、主用プラグインが完全に Vue3 に対応していないため、大規模プロジェクト走らせたい人は、 vueapp を選択するのが妥当だと思います。

今回は vueapp を選択しました。

「プロジェクトを作成する」をクリックしましょう
（ 手動 の説明をしようとしたけど、書き始めたら止まらなくなったので、この記事での紹介は省きます。）

プロジェクト作成完了

お疲れさまでした。
プロジェクトの作成ができました。

プラグインの導入

さて、今回の開発では「Vuetify」を導入して、作業を楽にしていこうと思います。

プラグイン導入には

vue add vuetify

こんなコマンドをターミナル等で入力する必要がありますが、
vue uiを利用するので、これはしません。

1. メニューバーの上から二つ目のマークを押す
2. 右上の「＋プラグインを追加する」をクリック
   
3. 「プラグインを検索する」に「Vuetify」と入力
   
4. 一番上にある vue-cli-plugin-vuetify をクリック
5. ⇩このボタンをクリック
   
6. インストールが始まるので、待ちます
7. ⇩これは Default でOKです。
   
8. 「インストールを終了する」をクリック

これで「Vuetify」の導入が完了しました。

実行してみよう！

ちょっと実行してみましょう。
メニューバーの一番下のアイコンをクリック
「プロジェクトタスク」というところに飛びます。

プロジェクトリストの一番上「serve」を押すとこのような表示になります。

緑色の「タスクの実行」と書かれたボタンを押しましょう。

http://localhost:8080/ ここにアクセスし、このようなページが表示されたら成功です。

もし、この画面と違うものが表示されていた場合、
Vueのバージョンが3.xになっていたり、
Vuetifyがvue3用になっていたり、
環境に問題がある場合が多いので、
コンソールに出ているエラー等をみたり、プロジェクトを再度作成するなどしてみてください。

次回予告

とりあえず、クイズゲームらしきものを作成する！

関連記事一覧

Comming Soon...