未経験のVue.jsをキャッチアップしてオリジナルのカードゲームを作ってみる

Vue.js とは?

2014 年に誕生したフロントエンドフレームワーク。

React と同じような機能を持ちますが扱いやすさに重点をおき学習コストの低さが売り。

また公式サイトでのドキュメントの情報量が多いためそちらの手順にしたがってキャッチアップすることができる。

公式サイトによる解説 https://jp.vuejs.org/v2/guide/index.html

キャッチアップした手順

  1. 公式ドキュメントを読んでみる
  2. 本を読んでみる
  3. 実際に触る
  4. 簡単なアプリを作ってみる

公式ドキュメントを読んでみる

上記でも述べたように Vue.js は公式ドキュメントが豊富なのでこちらだけでもかなり学ぶことができる。

https://jp.vuejs.org

本を読んでみる

『基礎から学ぶ Vue.js』を読みながら触ってみる。

基本的な書き方から Vuex などひと通り触ってみることができる。

基礎から学ぶ Vue.js https://cr-vue.mio3io.com/

実際に触る

なにか作ってみるのがプログラミングを学ぶ上で一番の近道だと思うので今回は簡単なゲームを作ってみる。

今回はスマートフォンで遊べるカードゲームを作ってみる。

カードゲームにした理由はカード(コンポーネント)や HP や攻撃力と行った数値制御(Vuex)など

Vue.js の様々な機能に触れられると考えたためです。

簡単なアプリを作ってみる

実際にカードゲームを作ってみました。

ゲームを作ってみたかったので今回の題材を考えたのですが Vue.js の基本機能をキャッチアップするのにいい課題だったと思います。

成果物 https://github.com/couragenki/DCG

frontendの記事一覧へ戻る