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をまだインストールできてない人は、ここでインストールしちゃいましょう。

```sh
npm install -g @vue/cli
```

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

# 実行

```sh
vue ui
```

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

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

が出てきて、
⇩このようなページが勝手に開くはず
![キャプチャ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/8cf937d3-4cc9-b5d9-facc-e12aa38e0970.png)
開かなかったら、
ブラウザで http://localhost:8000 を開くと出てくる...はず

# プロジェクトの作成
## 作業場所

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/074896e4-0fcb-4392-d3f0-98f86e91394b.png)

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

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

***「フォルダーを作成したい」***
という人は、右端にある 「︙」 をクリックし、 `新しいフォルダ` を選択、
フォルダー名を入力し、右下の `作成` を押すことで、新しいフォルダの作成ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/41e92dbd-598a-906e-ebec-f67651c2c33d.png)

## プロジェクトの詳細
「ここに新しいプロジェクトを作成する」をクリックすると、このような画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/7cae4f44-de93-9282-56cb-245f99b4b261.png)
### プロジェクトフォルダ
`名前を入力` が書かれているテキストボックスにプロジェクト名を入力します。
この名前のフォルダーの中にこの後作成されるファイル等が格納されます。

### パッケージマネージャー
`デフォルト` の部分を押すと、トグルが表示されます。

- npm
- yarn
- pnpm

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

### 追加オプション
#### 存在する場合、対象フォルダを上書きする
危ないので、初めての人は ***オフ*** にしておきましょう。

#### 初心者向けインストラクションなしでプロジェクトを構築する
この記事をここまで読んでる時点で初心者なので、オフりましょう。

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

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

## プリセット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/a78e36d8-a6c1-6f1a-3778-cfd24d871fe8.png)

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

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

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

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

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

# プロジェクト作成完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/c7cca129-6c40-3af0-45e1-4ea90c69b5be.png)
お疲れさまでした。
プロジェクトの作成ができました。

# プラグインの導入
さて、今回の開発では「[Vuetify](https://vuetifyjs.com/ja/)」を導入して、作業を楽にしていこうと思います。

プラグイン導入には

```sh
vue add vuetify
```

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

1. メニューバーの上から二つ目のマークを押す
1. 右上の「＋プラグインを追加する」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/61a95b42-4f71-5731-699e-fecb4030cfe1.png)
1. 「プラグインを検索する」に「`Vuetify`」と入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/1f2627c4-a1f5-e647-279a-81c54e4fef63.png)
1. 一番上にある `vue-cli-plugin-vuetify` をクリック
1. ⇩このボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/37495f52-b85d-fe9d-99c1-510c4761a01c.png)
1. インストールが始まるので、待ちます
1. ⇩これは `Default` でOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/f1f4b7ed-8743-b727-1831-741eb82fbdda.png)
1. 「インストールを終了する」をクリック

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

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

プロジェクトリストの一番上「serve」を押すとこのような表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/d0857215-05e5-4890-c795-8e171a671147.png)

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

http://localhost:8080/ ここにアクセスし、このようなページが表示されたら成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974385/919e206c-bc09-265d-a5d8-a74523b176da.png)


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

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

# 関連記事一覧
***Comming Soon...***