『基礎から学ぶVue.js』で、Vue.jsに入門した

仕事の都合でNuxt.jsを触る機会が出てきたので、Vue.jsを勉強しています。 React.jsとAngularの開発経験はあるのですが、Vue.jsは未経験なので新鮮です。

まだ勉強2日目なので、にわかではありますが、現時点のVue.jsの感想を書きます。

読んでいる本

『基礎から学ぶVue.js』を読んでいます。 最新の3.x系ではなく2.x系の本なのですが、本のサイズと分量的にちょうど良かったので選びました。

本自体の感想としては、すでにWeb系エンジニアでJavaScriptを業務で書いたことある人が、基礎からVue.jsを学びたいときに読むレベル感だと思います。 HTMLやWebの基礎レベルは飛ばして書かれており、自分には合ってました。

改訂2版 基礎から学ぶVue.js [2.x対応! ]

書籍のサポートサイトが良い感じ

書籍のサポートサイトがあるのですが、単なるサンプルコード集を超えるレベルの充実ぶりで、見やすいサイトです。

cr-vue.mio3io.com

本書のサポートサイトでもオンラインエディターが紹介されているのですが、私も序盤（CHAPTER1〜6）はCodePenのOnline Code Editorを使って学習しました。 ただ、CodePenは長く使っているとセッション切れが何回か発生したため、長時間の学習には不向きかもしれません。 （おそらく、本を読んでいる間にセッション切れを起こしたと思われる）

Vue.jsの良さそうなところ

デザイナーとの協業に向いてそう

Vue.jsを使った第一印象としては、ごぐ普通のHTMLにVueをあてていく感覚なので、非エンジニア層にも使いやすそうです。

とくにデザイナーがウェブサイトにJSを組み込みたいケースにおいて、Vue.jsが選ばれそうだと感じました。

<div id="app">
  <!-- countプロパティを表示する -->
  <p>{{ count }}回クリックしたよ！ </p>
  <!-- このボタンをクリックするとincrementメソッドが呼び出される -->
  <button v-on:click="increment">カウントを増やす</button>
</div>

transitionがおもしろい

transitionタグをはじめて使ったのですが、滑らかな動きが良い感じで楽しいです。 要素の切り替えやリストのソートをアニメーションで演出してくれるので、動きをつけたいサイト制作で活用できそう。

<div id="app">
  <p><button v-on:click="show=!show">切り替え</button></p>
  <transition>
    <div v-show="show">
      トランジションさせたい要素
    </div>
  </transition>
</div>

Vuexはそこまで複雑ではなさそう

基礎から学ぶVue.jsのCHAPTER 8はVuexだったのですが、本書の30ページほどでVuexの基本は理解できたので、自分が想像していたほど複雑ではなかったです

• State
• Getter
• Mutations
• Actions
• Dispatch

この辺りを抑えておけば大丈夫そう。Action経由でMutationsを実行し、Stateを更新します。ActionはDipatchで呼び出すことができます。

さいごに

Vue.jsの基本を学んだら、Nuxt.jsをはじめてみる予定です。 React.jsやAngularとは違う感覚なので、しばらく楽しみたいと思います。