jQueryで時間が止まっている人向けVue.jsをライトに使う方法

jQueryで時間が止まっている人＝私です。はい。

もともとサーバー側の仕事ばっかりだったので、jQueryが使えりゃ十分でした。

訳あってぷちSPA（Single-page Application）を作ることになり、機能の多さとアクションさせる要素の多さにうんざりしてカッとなりjQueryを（とりあえず今回は）捨てることにしました。

そして選んだのがVue.jsです。

最先端なJavaScriptにはついていかずに、ライトな範囲でVue.jsを使う方法が今回の内容になります。

Vue.jsとは何か

JavaScriptのフレームワークです。

ここ最近、JavaScriptのフレームワークはたくさん（本当にたくさん）ありますが、Vue.jsを選んだのは学習コストが少なくて済む≒jQueryで時が止まっていても大体扱えるからです。

Vue.jsは公式が素晴らしいので（日本語ドキュメントが充実しています！）、まずは公式を読みましょう。

jp.vuejs.org

ライトな範囲とは

一言で言うと、「vue.min.jsを読み込むだけ」の範囲内でできる。です。

node.jsしらなーい、webpackしらなーい、ばべるってなーにー？　なレベルでも使えます！安心！！

具体的に言うと、下の１行をHTML内に書くだけで、Vue.jsを使う準備は整います。jQueryと同じ感覚で使えますね。

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

Vue.jsでHello World

下の例はほぼ公式からの転載です。ライトな範囲の前提なので、HTML1ファイルになるようにしてます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>VueでHello world</title>
</head>
<body>
<div id="app">
  {{ message }}
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>
</body>
</html>

app.data.message の中身が変わると、自動的に{{ message }}で表示されている文字も変わります。

HTMLの構造を崩さずに、データとDOMが関連付けられています。

HTMLのタグしか知らなくても、だいたいどんな画面になるのか想像がつきますよね。

ブラウザのコンソールからapp.data.messageの値を変えると、画面上の文字列も変わります。すごいですね！

条件分岐とループ

次の例も公式ガイドからの（雑な）転載です。何度でも重ねて言いますが公式が大変充実しています。公式をまず読みましょう。「公式が最大手です」。

https://jp.vuejs.org/v2/guide/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>VueでHello world</title>
</head>
<body>
<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});
</script>
</body>
</html>

これは条件分岐の例になります。seenがfalseになると、<span>タグごと表示されなくなります。

jQueryの.hide()と違う点は、レンダリングされたHTMLソースからも消えることです。

.hide()と同じように動作するv-showというのもあります。

次は繰り返し文です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>VueでHello world</title>
</head>
<body>
<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
</script>
</body>
</html>

配列todosの中身分、<li>が繰り返されています。便利ー！

もちろん後からtodosの中身を変えると<li>の数や中身も変わります。

算出プロパティ

とはいえ、データをそのまま表示するだけではjQueryでセレクタで選んで要素に値を流し込むのとあまり変わりません。

ましてや繰り返す使うとなると、その度計算がはしって出れば出るほど遅く……。

繰り返し出てくるような計算結果や複雑なロジックは、算出プロパティを使うことで解決します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>VueでHello world</title>
</head>
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script type="text/javascript">
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    reversedMessage: function () {
      // `this` は vm インスタンスを指します
      return this.message.split('').reverse().join('')
    }
  }
});
</script>
</body>
</html>

算出プロパティは依存関係にもとづきキャッシュされるという特徴があります。もととなるmessageが変わらない限り、何度reversedMessageが呼び出されても再計算されることはありません。

逆に、呼び出されるたびに計算してほしいような値（Date()とか）は更新されません。

まとめ

長くなったのでいったんまとめます。

Vue.jsは最新のフロントエンド事情に疎くても使える。
Vue.jsはHTMLの構造に影響せずに、データを流し込める。
Vue.jsべんりー！たーのしー！

次はもうちょっと踏み込んでコンポーネントとaxiosについてまとめたいと思います。

しぃぶろぐ。

仕事とか技術関係のこと。他色々