Vue.jsで簡単なアプリケーションを作るまでに学んだこと

Vue.jsで簡単なアプリケーションを作るまでに学んだこと

238d7e91-fd60-ce16-b071-6be3275434f2

はじめに

完全に個人用の備忘録として作りました。

udemyの「Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex)」で学習した内容のメモになります。
内容としてはsection1~4まで。

背景

仕事の関係でVue.jsを使うので、「関わりたいなら最低限これやってねー!」と言われたのがudemyの「Vue JS 2 – The Complete Guide (incl. Vue Router & Vuex)」。

合計20時間超えの講義量を見て絶望しましたが、なんとかしないとアカン!ということで、せっせとアウトプットしていきます。

作ったもの~ドラゴンスレイヤー~

スクリーンショット 2019-08-14 23.54.35.png
これが初期状態。
体力がplayer側もmonster側も100あります。

「START NEW GAME」で戦いのゴングが鳴ります!!
スクリーンショット 2019-08-14 23.54.43.png

コマンドが出てきましたね。
ATTACKで攻撃してみます!
スクリーンショット 2019-08-14 23.54.50.png
攻撃に成功しました!
playerが攻撃すると、必然的にmonster側のターンになり、monsterも攻撃してきます!

monster側の方が攻撃力は高いので、ATTACKを繰り返してみると。。
スクリーンショット 2019-08-14 23.55.05.png

あちゃー。
負けました!!
alertで「You Lost!」って出てますね。

OKを押すとNew Gameになります。
スクリーンショット 2019-08-14 23.55.30.png

今度はSPECIAK ATTACKを連発します。
10ダメージ与えているのでいい感じですね。
スクリーンショット 2019-08-14 23.55.50.png
回復も使ってみます。
10回復するので、危ないときは回復優先で。
スクリーンショット 2019-08-14 23.56.08.png
GIVE UPを押すと、また最初の状態の戻ります!

学んだ知識まとめ

v-on

DOMの購読やイベント発火時にJSの実行が可能。

v-on:@click =""でクリック時にJS実行。
本アプリでは省略版の
@clickをATTACKなどのコマンドで多用した。

v-if,v-else

条件分岐。
PHPでのif構文のように使えるので、理解は難しくない。
v-if(条件式){内容}
v-else{内容}

本アプリではゲーム中であれば、attackなどのコマンドを表示し、ゲーム中じゃなければ表示しない!という設定用に使った。

<section class="row controls" v-if="!gameIsRunning">
<div class="small-12 columns">
<button id="start-game" @click="startGame">START NEW GAME</button>
</div>
</section>
<section class="row controls" v-else>
<div class="small-12 columns">
<button id="attack" @click="attack">ATTACK</button>
<button id="special-attack" @click="specialAttack">SPECIAL ATTACK</button>
<button id="heal" @click="heal">HEAL</button>
<button id="give-up" @click="giveUp">GIVE UP</button>
</div>
</section>

v-for

v-forは配列に基づいて、アイテムのリストを表示する際に使う。
使い方としては
<li v-for="item in items">
{{ item.message }}
</li>
としてitemsの中のmessageを配列として表示できる。

本アプリではコマンドの下のダメージなどの表示をv-forで作っています。
turnsという配列の中のtextをループ処理で取り出す事で、ターン毎の両者のダメージを描画しています。

<ul>
<li v-for="turn in turns"
:class="{'player-turn': turn.isPlayer, 'monster-turn': !turn.isPlayer}">
{{ turn.text }}
</li>
</ul>

まとめ

Vue.jsを勉強し始めて3日目。
勉強時間にして20時間ほどを費やしたと思います。

「インプット量が多すぎて処理できない!とりあえずまとめよう!!」的な考えで今回のQiitaを執筆するに至りましたが、実際にまとめてみると、そんなに多くも難しくもない量しかまだ触れていないことが分かりました。

udemyの講義自体はまだ全体の1/6なので、またインプットが溜まってきたらqiitaに吐き出します。

Leave A Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Color
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Compare
Wishlist 0
Open wishlist page Continue shopping