Help us understand the problem. What is going on with this article?

Vue.jsをほんの少し触ってみた

More than 1 year has passed since last update.

Vue.jsを触る

Vue.jsが最近アツいみたいなので、今のうちに触っておこうと思います。
導入から特徴など、自分が30分程度(短い)触った間に書いたメモ書きを晒します。

ちなみに読み方は「ヴュージェイエス」です。下唇を上手く使って発言しましょう。

そもそもVue.jsってなに??

ざっくりというとJavaScriptのフレームワーク。
同じ立ち位置のものは、Angular JSとか、React とかがある。

入門 - Hello World を出してみる

公式サイトのはじめるで紹介されていChris Fritz氏のVue 2.0 Hello Worldを参考に、まずはプログラム入門でお馴染みのHello Worldをだしてみる。

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>
</div>

JS

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

ぱっと見た感じ、HTML側のIDをVue側で指定して、datamessageがHTML側の{{ message }}に対応しているのがわかる。PHPのSmartyみたいなテンプレートエンジン的な動きをするっぽい・・・?
と思っていたら、公式ページにこんな内容が・・・

一見するとただテンプレートを描画しているように見えますが、Vue.js は内部で多くの作業を行っています。データと DOM は関連付けられ、そして全てがリアクティブになっています。

かなり噛み砕いて言うと、el: '#app'と指定したDOM要素をVueの制御配下とし、データはリアルタイムですぐに反映する用になっています!…といったところでしょうか??

このままだとただのテンプレートエンジンになってしまうので、次はもう少し有意義な使い方をします。

v- を使ってみよう

属性をバインドするv-bind

まずは以下のソースを見てみる。

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app-2">
  <span v-bind:title="message">
    マウスをホバーしてね!!
  </span>
</div>

JS

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'あなたがこのページを読み込んだ時間は ' + new Date().toLocaleString()
  }
})

HTMLのv-bind:titleという部分で、span要素のtitle属性を、Vueのmessageプロパティで更新する。というソースになります。

条件分岐もさわってみる

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

v-if は、対象のプロパティの真偽に応じて、その要素の表示有無を切り替えます。
上記のコードでseen:falseとするか、コンソールからapp3.seen = falseと入力すると、この要素が消えます。

ここで、本家いわく、

この例は、テキストをデータに束縛できるだけではなく、 DOM の構造にデータを束縛できることを示しています。

こういう強気な文章かっこいいですね。

コンポーネントという考え方

上記では簡単にVue.jsの超超入門をしました。でも本当の特徴はここからです。
Vue.jsはコンポーネントというHTMLタグのようなものを作成することができ、一度定義することで、再帰的にコンポーネントを利用することが出来るようになります。

例として

// todo-item と呼ばれる新しいコンポーネントを定義
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

このように記述すると、HTMLで

<ol>
  <todo-item></todo-item>
</ol>

と書くだけで、todo-itemに定義されている内容がliタグで生成されます。
これだけでなんだかとてもワクワクしてきますね!!

少しだけ触ってみて

JSのフレームワークはあまり使ったことがなく、基本的にjQueryで実装を行っていた僕ですが、Vue.jsを使うと、描画部分の実装にあまり気を使わなくて良くなるため、よりロジカル的な部分に集中できるのかなと思いました。

ユーザ操作や、APIとの通信などで画面側の表示がどんどん変わっていったりするWebアプリに向いていたりするのでしょうか・・・?

言えることは触っていて楽しいということです。
今までの実装では、ロジックの部分、描画の部分と対極の2面を考える必要があったので、実装してプロパティを更新するだけで描画側に反映されていくのがとても楽しいです。
どんどん勉強したくなるJSフレームワークです。

少しでも多くの人がVue.jsに興味を持ってくれればいいなと思います。
またもう少し触ってわかってきたらもっと深い記事を作ろうと思います。

私のブログもよろしく(^o^)

参考にさせていただいたサイト

Yuta_spade
福岡・天神でWebエンジニアをしています。 上流から下流まで、フロントからバックエンド、サーバ整備まで何でもやります。 最近はReact-NativeとVueで開発やってます。
https://spadeloves.tk
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away