Vue.jsのフレームワーク

はじめに

まずVue.jsに取り組もうと思った理由としては，友人とのプロジェクトの際にフロント開発をVue.jsを用いて開発していこうという話になったからである．名前は聞いたことはあるけど，使ったことはないし，jQueryとの違いも理解していないため，そこもとりあえず抑えていけるようにしていきたい．
また今回の課題の一つとしてはVue.jsのフレームワークである，"ElementUI"と"Vuerify"についても調べていき，今回の実装に関してどちらを用いるかまで検討していきたい次第である．

Vue.jsについて

まずjQueryはセレクタ操作に特化したものであるため，HTMLの一部を少し弄る分には十分すぎる機能を持っている(そこまでしっかり使ったことはないため，そんな感じなのか，みたいなイメージです笑)．ただし，複数UIを連携させる場合などは，セレクタ操作であるため同期の面で困難が生じる．簡単な処理をする分には，低コストでの実装できるため，そこまでこだわる必要もないイメージを感じた．

次に肝心のVue.jsについてだが，仮想DOMを構成することにより，JSとHTMLを紐づけている様子．したがって，データ変更に対して勝手に表示するようになるため同期させる処理を書かなくてもよくなる．更新が多いページや状態管理が頻繁に起こるページなどに向いている．

実際のコーディングの違い

実際のコーディングがどうなるのか，簡単なもので考えていく．

jQuery

HTML

<div>
  Hello <span id="message">World</span> !
  <button id="update">change</button>
</div>

JavaScript

$(document).on('click', '#update', function() {
  $('#message').text('jQuery')
})

変更する部分をタグで囲むことによって，そこにJavaScriptを適用するようにしている．

Vue.js

HTML

<div id="app">
  Hello {{ message }} !
  <button @click="update">change</button>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'World'
  },
  methods: {
    update() {
      this.message = 'Vue.js'
    }
  }
})

変化させたい部分を変数として持っておく．
@click="式・メソッド"とかくと，jQueryの$(element).on('click', ...)と同じ動きをする．

まとめ

Vue.jsについてはもう少し詳しく調べる必要がある．とりあえずはVue.jsの公式ページに記載．

フレームワーク

本題としてフレームワークである"Element"もしくは"Vuetify"のどちらかを用いたい．
したがって，まずはフレームワークについてまとめる

Element

フレームワークの一つであり，昔から使われているもの．コンポーネントを定義し，HTMLに記述することで利用することができる．コンポーネントにより，機能とUIを分離・再利用できるようになる．

導入

vue-clを使ってVue.jsをプロジェクトの準備をする．まずはグローバルにてvue-clをインストールする．

npm install -g vue-cli

webpackベースのプロジェクトを作成する．

vue init webpack my-project

最終的に，./my-project/ディレクトリが作成され、Vue.jsがインストールされる．
そのままプロジェクトに含まれるパッケージ群もインストールしておく．

cd my-project
npm install

次に，待望のElementをインストールする．

npm install element-ui -S

これで利用可能となるため，my-project/src/main.js以下でElementを読み込み日本のロケールをセット，ElementのCSSをを読み込む．

import Vue from 'vue'
import ElementUI from 'element-ui'
import locale from 'element-ui/lib/locale/lang/ja'
import 'element-ui/lib/theme-default/index.css'
import App from './App'

Vue.use(ElementUI, {locale})

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

ここまでで準備が整ったため，my-project/src/App.vueでコンポーネントを利用することでElementを使うことができる．

まとめ

簡単な機能などは，特に苦労することなく実装することができそうである．

Vuetify

マテリアルデザインが浸透してきた現在でこそ，Vuetifyも最近使われてきている．VuetifyはVue.jsで使われるマテリアルデザインをベースとしたCSSのフレームワークである．ちなみに，同様のものとしてVue Materialもあるようだが，どうやらVuetifyの方がドキュメントの見やすさの点で優れている様子．

まとめ

どうやら，マテリアルデザインが主流となってきている現状，どうやらVuetifyの方がよく使われるそうである．
引き続きそれぞれの利点や実際に使って見た感想などを見ていきたいところである．