ゲーム作りを通してVue.jsを学べる連載記事です。
程よいボリュームなので、軽くVue.jsに触れてみたい方におすすめです。
作るゲーム
作るゲームは将棋ポーカーというオリジナルゲームです。
まずはプレイしてみてください。
https://shogipoker.net
これをVue.js(以下Vue)で作っていきます。
環境
Vue CLIを使って開発します。
https://cli.vuejs.org
Vue CLIはVueでの開発を便利にしてくれる標準ツールです。
Vue CLIのインストール方法はこちら。
(事前にNode.jsがインストールされている必要があります)
https://cli.vuejs.org/guide/installation.html
サイトにもあるようにnpmなら
$ npm install -g @vue/cli
yarnなら
$ yarn global add @vue/cli
でインストールできます。
Vue CLIのバージョンはこのコマンドで確認できます。
$ vue --version
実際のサイトは@vue/cli 4.3.1で作成しています。
対象
対象者はこのようなイメージです。
- HTML、CSS、JavaScriptを使ってWEBサイトを作ったことがある。
- コマンドラインの操作に抵抗がない。
- JavaScriptのES2015(ES6)が多少わかる。
- Vueに興味がある。
Vueの知識はなくても問題ありません。
プロジェクト作成
Vue CLIでプロジェクトを作成します。
プロジェクト名はshogipokerにします。
$ vue create shogipoker
いくつか選択する画面になりますが、defaultのままenterを押してください。
プロジェクトの立ち上げが完了したら、プロジェクトに移動します。
$ cd shogipoker
サーバーを立ち上げます。
$ npm run serve
ローカルホストにアクセスして、Vue CLIのTOP画面が表示されていればOKです。
http://localhost:8080
サーバーはctrl + cで終了できます。
TOPページの表示の仕組み
TOPページではpublic/index.htmlが読み込まれています。
<body>にあるid="app"の中身をVueで生成して、現在のTOPページが表示されています。
...
<div id="app"></div>
...
ここの処理はsrc/main.jsで行っています。
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
ざっくり解釈するとこんな感じです。
- Vueを読み込む(import)
- App.vueを読み込む(import)
- Vueインスタンスを作る(new Vue)
src/App.vueを描画する(render)public/index.htmlの#appと置き換える(mount)
というわけでTOPページはsrc/App.vueが表示されていることになります。
コンポーネント
src/App.vueを見ていく前に.vueについて補足します。
.vueというファイルはコンポーネント(部品)と呼ばれるものです。
Vueを使うプロジェクトではたくさんのコンポーネントを作って、それらを組み合わせることでアプリを完成させます。
コンポーネントはHTMLファイルに似ています。
基本はHTMLと同じで、追加でVue特有の機能が使えるという認識で大丈夫です。
<template>
<!-- HTMLを記述 -->
</template>
<script>
// JSを記述
</script>
<style>
/* CSSを記述 */
</style>
それぞれについて簡単に説明します。
テンプレート
・<template>で囲む。
・通常のHTMLの記述が可能。
・コンポーネントを埋め込める。
・{{}}で変数を描画できる。
JS
・通常のJSの記載が可能だがVueのフォーマットで記述していく。
CSS
・通常のCSSの記述が可能
・scopedを付ければ、このコンポーネントだけで適用されるスタイルを書ける。
これらを踏まえてsrc/App.vueを見ていきます。
App.vue
それではsrc/App.vueを見ていきます。
※中身はVue CLIのバージョンによって多少の違いがあるかもしれません。
テンプレート
<HelloWorld msg="....">以外は通常のHTMLです。
<HelloWorld>はコンポーネントで、JSで読み込まれています。
msg="..."はpropsといって、HelloWorld.vueに渡す変数のようなものです。
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
JS
importでsrc/components/HelloWorld.vueを読み込んでいます。
ここは相対パスで指定します。
JSは自由に書くのではなく、export defaultの中にVueで定められたフォーマットで処理を書きます。
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
nameはファイル名と同じにします。
ただnameは書かなくても動きます。
componentsは<template>の中で使いたいコンポーネントを書きます。
importで読み込んだコンポーネントを書けば良いです。
CSS
CSSは従来通りなので問題ないと思います。
<style scoped>とすることでコンポーネント内だけで適用させるスタイルにすることも可能です。
scopedはつけるのが一般的です。
その方が他のコンポーネントの影響を受けないので開発がしやすくなります。
src/App.vueを見てみると、TOPページにはassets/logo.pngとHelloWorldコンポーネントが表示されていることになります。
src/components/HelloWorld.vueはほとんどが通常のHTMLなので特に問題ないかと思います。
msgという変数を受け取っているので、JSでpropsの記載があります。
この辺りは実際にゲームを開発する時に詳しく解説していきます。
props: {
msg: String
}
本章ではVue CLIでプロジェクトを作って、TOPページの仕組みを簡単に解説しました。
次章 からゲームを実際に作っていきます。
