Furyu

[フリュー公式] Tech Blog

フリュー株式会社の技術ブログです

2016年10月28日

SatoKeita

Vue.jsを使ってみよう

こんばんは、フリューのジョンです。普段はサイト開発をしており、最近Mithril.jsからVue.jsに移行しています。

今回はVue.jsのお話です。
JavaScriptのフレームワークっていっぱい聞くけどどういうところが嬉しいんだろう、というレベルの方にお伝えしたいと思います。

概要

Vue.jsはReact.jsやAngular.jsと同じようにMV*系のフレームワークです。
近年はJavaScriptのフレームワークは飽和していますが(React.js、Angular.js、Riot.js、Aurora.jsなどなど)
それではなぜそのようなフレームワークを使うのでしょうか?jQueryじゃダメなのでしょうか?

 

いえ、jQueryでもできます。しかし、既存のフレームワークのほうが楽をすることができる可能性が高いです。

  • view周りをフレームワークに任せることができるので、logicに集中できる。
    • jQueryのみで大きなページを作成すると、logicとview部分が複雑になる。
  • 要素をJavaScriptで作成している複雑なページは、仮想DOMを使用しているフレームワークを使うと、描画速度が早くなる

一つ目の利点について考えてみます。
例えば以下のようにselectタグの値によってコンテンツの表示切り替えを行いたい場合、どのようにjQueryを使えば良いのでしょうか?

おそらく、コード量を抑えるとしたら以下のように書くと思われます。他を消してから、選択されたものを表示するということになると思います。

では、少し意地悪な変更が加えられたとしましょう。現状idを使って選択していますが、このidは一般的すぎて変更したいですね。
その場合、JavaScript側のセレクタも変更しなければいけません。それに加え、optionタグのvalueを使って切り替えられると思っていたlogicの前提が崩れてしまいます。*1

フレームワークを使うと、このような画面切り替えなどもフレームワーク側が対応してくれるのです。(後にこの問題をVue.jsではどう記述するかを説明します)

そこでVue.jsです

では他のフレームワークではなく、Vue.jsを使う利点はなんでしょうか?私としては、以下だと考えられます

  • viewをhtmlに書くことができるので、viewを分業しているプロダクトではデザイナさんが変更しやすい

Angular.jsでも同じようなことができるのでは?となりますがVue.jsではよりデザイナさんが理解しやすいhtmlの書き方になっています。また、軽量な画面に関しては、少量のコード量で済みます。
そして、仮想DOMを用いているため描画スピードも早いです。

Vue.jsを使ってみよう

先ほどのselectタグの値によってコンテンツの表示切り替えを行いたい場合を題材にします。

各コンテンツにidを書かないようになりました。その代わりにv-showという表示、非表示を切り替える際に使う「ディレクティブ」をつけています。
selectタグにもidを書いていません。その代わりにv-modelという双方向のデータバインディングを行うディレクティブをつけています。

JavaScript側では、Vueに、rootとなるタグのセレクタと他のデータを渡しています。これだけです。

  1. Vueのコンストラクタに渡したオブジェクトにあるdataにはcontentが1で入っています。これがselectタグに渡り、どのoptionタグを表示するかを決めています。
  2. selectタグのonchangeイベントが走るとoptionタグのvalueがcontentに入ります。
  3. contentの値が変化すると、各コンテンツに書いてあるv-showの評価が行われます。その評価値がtrueになった場合、そのコンテンツが表示されるという仕組みになっています。

どうでしょうか?
idの変更やデザインの変更がある場合もこれならば影響はありません。

まとめ

jQueryだけでもできるページは少なくありませんし、広く一般的になっていると思われます。しかし、少し複雑度が増してくると、途端にコード量が増えていきます。

これまでの例からもVue.jsはかんたんに導入できることがわかりましたので、何か面倒だなと感じたときには、ぜひライブラリやフレームワークを使ってみてください。

次はVue.jsを使った少し複雑な例をお送りしたいと思います。

おまけ

今回のソースコードについてはjsfiddleにあげておりますのでご確認ください。
https://jsfiddle.net/satojohn/x9fjajuL/

参考

Vue.jsのドキュメント : https://vuejs.org/

 

*1 もちろんdata属性を使うなど回避策はありますが、ここではわかりやすいようにしています。


2013年08月21日

いしはら

enchant.jsを触ってみた

HTML5+JavaScriptベースのゲームエンジンenchant.jsを触ってみて覚えておきたいことをまとめました。

enchant.jsとは?

ゲームやアプリを開発できるHTML5 + JavaScriptのフレームワークです。
わずか30KBのソースコードで、PC・iPhone・iPad・Android すべてで動作する、クロスプラットフォームなアプリケーションを開発することができます。

覚えておきたいキーワード

スプライトシート

複数の画像を1枚の画像にまとめ、タイル状に配置した画像のことです。
enchant.jsのフォルダの中に入っている、この画像がまさにスプライトシートです。
1


スプライト

操作する画像のことです。
スプライトシートの一部分を表示させているのもスプライトになります。

使い方

下記の記述でシートをどの範囲で区切るかを指定します。

イメージ的にはこんな感じ
2

表示したいキャラクターの位置指定は下記のようにします。

この数字は左上から横に012345…と数えて指定します。
3

これを応用してフレームをずらしていくコードを書けば
このように、熊を走らせたり、表情を変えたりすることができるようになります。

parapara

熊を走らせる

フレームイベントを追加し、そこにフレームを動かすコードを書くと熊が走るようになります

});


シーン

場面を表す単位です
enchant.jsではタイトル画面・スタート画面・プレイ画面・ゲーム終了画面といった単位で 関数を用意することが多いです。 enchant.jsゲーム作成の主な流れは、
「スプライトシートを用意する → シーンの関数を用意 → 関数の中でスプライトの操作などを書く」となります。


上記3点を抑えておけば、あとはどのようにしてゲームの内容を作っていくかになってきます。
今度ゲームを作った時はここで発表したいと思います!