JUN.16.2017
SOCIAL NETWORK SHARE :

Vue.jsでインタラクション Interaction with Vue.js

今年に入ってから、Vue.js(https://jp.vuejs.org/)を重宝しているDevelopperの小見です。

最近は、プロモーションサイトのような小規模のサイトでもVue.jsを使って書いてみたのですが、

表現の部分でもいい感じに使うことができたので、個人的な感想をまとめました。

 

Vue.jsのいいところ

導入する敷居が低い

Vue.jsはコードを読み込んだらすぐに試すことができます。CDNから読み込んでもOKです。

webpackを入れてコンパイルしたりする必要もなく、試してみようと思えばすぐに始めることができます。

 

他のライブラリと組み合わせやすい

Vue.jsはViewの部分にフォーカスした作りになっているので、他のライブラリと併用することがとても簡単です。

たとえばAjaxをするのに、jQueryを使っても良いし、superagentやaxiosを使っても良いですし、

TweenMaxや、Create.jsなどのアニメーションライブラリをあわせて使うことも簡単にできました。

transition

Vue.jsにはtransitionというコンポーネントがあり、これを使うとDOMの変更を監視して、CSSのtransitionに応じてクラスを付け替えてくれます。

なので、自分でDOMの状態の管理を、しなくて済むので結構楽。要素の出現、削除とかのアニメーションがすごくやりやすいです。

どうやって覚えた?

Code Gridさんの記事(https://app.codegrid.net/entry/2016-vue-1)を一通りやってみた後は、公式ドキュメントを見ながら使い方を覚えました。

日本語のドキュメントは、どのフレームワークよりも情報がまとまっていてわかりやすい気がします。

簡単に試してみる

お試しならCodePenでCDN読み込みすれば、簡単に試せます。

今回はスクロールの値をとって、アニメーションさせてみました。

 

デモはこちらから (https://codepen.io/Im0-3/pen/yXYogL)

 

何かの入力(スクロールや、ホイール、マウスカーソル)の値をうまく管理しながら実装が

できるので、インタラクションのあるものを作る時にも向いているなと感じました。

今回は小さく使う方法でしたが、vuexとvue-routerをつかってSPAサイトを作ったりとかも

他のフレームワークと比べるとすんなりとできた(個人の感想です)ので、もし良ければ使ってみてください。

Hi, I am Omi. I found the usefulness of Vue.js(https://jp.vuejs.org/) earlier this year and I have been using it a lot since. I recently used it for a smaller website – a promotion website to be exact, and found that it works very well for expressions. Today, I would like to share my review on it with you.

The beauty of Vue.js

Easy to use

Vue.js is ready to be used as soon as its source code is read. It could run with CDN as well. Initial work does not require a tool chain of WebPack or anything like that, so basically you can just use it immediately whenever you want.

Easy to combine with other libraries

Vue.js is focused on the view layer only, and is easy to pick up and intergrade with other libraries.
For example, you can use jQuery, superagent or axios to use Ajax, and you can easily use it along with animation library such as TweenMax and Create.js.

Transition

Vue.js has a transition component that manipulates the DOM during transition hooks and automatically applies classes for CSS transitions for you. This makes it very easy for us to add entering/leaving transitions for any element or component.

How did I learn abut Vue.js?

First of all, I tried everything that are explained on the article written by Code Grid(https://app.codegrid.net/entry/2016-vue-1,) then I read the official guide for more details. Its Japanese guide is very well written and easy to understand in my opinion.

Give a test run

You can give it a try by using a CDN on CodePen. You can see the sample I created on the url below. On the sample page, you can see how I measured the scrolling behaviour and applied it to trigger the animation.

View the demo here:(https://codepen.io/Im0-3/pen/yXYogL)

Since Vue.js allows you to implement whilst managing the component of any types of input (scroll, wheel, mouse cursor) at the same time, I think it works great for creating something that has interactions.

I used it for a small feature this time, but there are many possible ways to use it, for instance to create SPA using vuex and vue-router. Now this is just my personal preference and opinion, but I actually find it easier to use Vue.js than other frameworks, so I recommend you to give it a try.

 JUN.16.2017
SOCIAL NETWORK SHARE :