nyarn.tech

にゃーん

おすすめのVue.js入門チュートリアル

この記事の対象者

Vue.jsとは

Vue.jsはユーザの入力やデータによる振る舞いといったインタラクティブなページを実装するためのJavaScriptライブラリです。
よくプログレッシブなフレームワークだと言われます。プログレッシブを辞書で引いてみると

進歩的な、革新的な、進歩主義の、(段階的に)前進する

progressiveの意味 - 英和辞典 Weblio辞書 より と出てきます。
つまり実装上の解決したい課題において段階的に進歩しながら(progress)対応できるフレームワークということです。これはVue.jsの拡張性の高さや、一方で導入のしやすさに由来するものと思われます。

おすすめのチュートリアル

laracasts.com

基本的なVueの概念から、応用的なフロント⇄サーバサイドと通信するアプリ作りまでかなり贅沢な内容でおすすめです!英語なのが少し難点ですが、聞き取りやすいのとコードを見れば学べると思います。

  • Vue.js公式

vuejs.org

または

https://jp.vuejs.org

公式のページも一通りの記法が載っており、技術的な解説もあるので深く動作を理解したい人は必読です!難しい概念では画像付きの解説があったり、versionによる違いもきちんとコメントされており、Vueの最新で最も良い書き方を学べる場所になっています。

  • Gihyo.jpのVue入門の連載

gihyo.jp

2016年の10月から連載が始まり、今も更新が続いています。上の2つはいきなり多くてちょっと・・・という方の入門におすすめです。

個人的な感想ですがVueの情報を調べるときはまだまだ日本語の情報が少なくて 英語が必要になることが多いので、初めから英語で学ぶのもありだと思います。

最近の動向

Vue.js 2.0が2016年の9月末に公開されたりと活発に開発が続けられています。
ちなみに2.0のコードネームは Ghost in the Shell で、1.0は Evangelion です。 日本のアニメが好きなんでしょうかね。

Vueを導入したページ

フロントの操作で状態が変わって、状態に応じて表示が変わるというよくある感じなページを作りました。
jQueryで頑張っても良かったのですが、新しいことに挑戦したい + jQueryだと表示したり隠したりvalidateしたりが辛そうだなと思ってVueにしました。
もともとVue使いたいアピールをしていたのと、新技術の導入に理解のある感じなのですんなり入れられました。あとはVueが他のライブラリと共存しやすいことも理由のひとつです。

実際に使ってみて

楽しい!!JS書いていて楽しいと思ったのは初めてかもしれないっていうくらい良かったです。 データドリブンという考え方は強力だよってLaracastsでも言っていたのですがその通りでした。

「ユーザの名前がフォームに入っていないとボタンを押せない」みたいな状況を例に挙げると

  • 今まで
イベント💥
→状態変化
→ボタンを押せるかどうかを確認
→ボタンの状態変化

みたいなコードを書いていました。

$('#form').on('keypress', function () {
  $text = $('#form').val();
  if ($text) {
    $('#button').show();
  } else {
    $('#button').hide();
  }
});

たぶんこんな感じです。加えて姓名両方のフォームのデータを見ないといけない、みたいなことを考え始めると・・・
悪い夢のようですね 😨

  • Vueを学んだあと
フォームのテキストのデータ✎
→should_showプロパティが決まる
→should_showに応じてボタンの表示切り替え

イベントによって他のデータや状態が決まるのではなく、データによって状態を決めるイメージでしょうか。表現するのがむずかしいですが。
コードだとこんな感じです(elなど一部省略)

<form>
  <input v-model="firstName">
  <input v-model="lastName">
  <input type="submit" v-show="should_show">
</form>
new Vue({
  data: {
    firstName: '',
    lastName: '',
  },
  computed: {
    should_show: function () {
      return this.firstName && this.lastName;
    }
  }
});

なんと!イベントとロジックが混在していないのでとてもすっきりしていますね。v-XXという記法も一度覚えると直感的でとても使いやすいです。
学習コストという点では、ハマりポイントも少なく(まだ踏み抜いていないだけかも)はじめてのJSフレームワークにぴったりだと思っています。

決してjQueryが悪いと言っているわけではないのですが、適材適所なのかなあと思っています。
データに依存しない、イベントドリブンな記述をしたいときはjQueryも素敵な選択の一つだと思います。
Vueにも v-on:click といったディレクティブがあるので一部イベントドリブンな書き方も可能です。

さいごに

この記事をきっかけにVueに興味を持ってくれる人が一人でもいると嬉しいなあという思いです。またVueコミュニティをにぎやかすためにも日本語チュートリアル的なのをいつか用意できたらなーと考えています。