Vueを学習してみる①

バックエンドとフロントエンドの境が曖昧になってきたのは、悪魔的javascriptが誕生してからだそうですね。javascriptフレームワークであるVue,React,Angularのおかげでフロントエンドの魅力がより増えたとのこと。現在はNext.jsが最先端だと聞きます。以前VercelをホストにしてNext.jsのブログも作ったことがあります。今回は、Javascriptフレームワークの中でも、Vue.jsにフォーカスして学んでいきたいと思います。

 

 

Vue.jsって何?

Evan Yuが作ったjavascriptフレームワークです。部分的にVueで実装することもできるため、他のライブラリや既存のプロジェクトと統合させるのは容易とのこと。

ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。Core + Vuex + Vue Routerの組み合わせで使われることが多いです。

ん?Vuexとは?

Vue.js アプリケーションのための 状態管理パターン + ライブラリ。

予測可能な方法によってのみ状態の変異を行うというルールを保証し、アプリケーション内の全てのコンポーネントのための集中型のストアとして機能している。

下記のように記述している。

const store = new.Vuex.Store({
	state:{ #データを管理している
		...
	},
	mutation:{ #actionsの変化を察知し、stateを変化させる仲介役
		...
	},
	actions:{ #Vuexのデータをアップデートしている backendのapiを叩いている。
		...
	},
	getters:{ #データにアクセスしている
		...
})

Vueの特徴は?

大きく下記4項目が特徴としてあげられる。

リアクティブ

Vue.jsのアプリケーションではデータが変化すると、変化した内容が即座にDOMに反映される。Vue.jsが持つこの仕組みを「リアクティブシステム」と呼ぶ。

「リアクティブである」とは、「その値が監視され、変更が検知される状態のこと」を指します。

主に下記三つで構成されている。

  • ref
  • effect
  • computed

(https://qiita.com/hareku/items/41c42554e7718aa17483)

コンポーネント

タグそのものを自分で命名することができる。今までは、p,div,h2,aなどのタグしか知らなかったが、もう、タグ毎名付けられちゃう。コンポーネントという名前の通り、他の画面で呼び出してコンポーネント同士を組み立ててページを作成することもできる。

HTML

<div id="components-demo">
  <button-counter></button-counter>
</div>

JS

# button-counter と呼ばれる新しいコンポーネントを定義している。
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ el: '#components-demo' })

トランジション

Vue は、transition ラッパーコンポーネントを提供しています。このコンポーネントは、次のコンテキストにある要素やコンポーネントに entering/leaving トランジションを追加することを可能にします:

https://jp.vuejs.org/v2/guide/transitions.html#単一要素-コンポーネントのトランジション

一番Javascriptっぽいやつきた!

使用例

ボタンを押したらラッピングされている対象が徐々に消えていくメソッド。

HTML

<div id="demo">
  <button v-on:click="show = !show">
    押すとhelloに変化が生じるよ♪
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
# transitionで対象をラッピングしている。
</div>

JS

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
# インスタンスの作成

SCSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

拡張性

既存サイトの1コンテンツとして新たな機能を追加するような部分的な導入や、サイト全体をVue.jsで構築していくような大きな開発にも対応できる。

また、Vue専用のライブラリが豊富に存在しているので、拡張性が高い。

https://github.com/vuejs/awesome-vue#components--libraries

どんな記法をしている?

マスタッシュ構文

HTML

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

JS

const app = new Vue({
  el: '#app',
  data: {
    msg: 'Hello!'
  }
});
  • データとDOMが関連付けられ全てがリアクティブ。

マスタッシュ構文とデータバインディングを使った一例

<div id= "app"> --①
<p>{{product}} are available now.</p> --②
</div>
<script src="<https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js>"></script>--③
<script>
	const app = new Vue({ --④
		el:'#app',--①
		data: {
				product: 'T-shirts' --②
}

# <div data-v-〇〇 id ="app">
# <p data-v-〇〇>T-shirts are available</p>
# </div>

①テキストをバインディングするために、idタグをつけている。

el: どのタグに対してjavasctiptの処理を付与するかを決めている。elementの略。

v-modelが省略されている形。

② Vueを使うメリットの一つである、コンポーネントの定義をしている。

data: コンポーネントの定義をしている。viewで表示する時には定義したコンポーネントを{{}}で囲む必要がある。

③vueをCDNで読み込んでいる。

これによってVueが使えるようになる。Jqueryでもあった。

インスタンスを作成している。他の場所で使い回すことができる。

下記のように、複数の要素をループさせることもできる。

<div id= "app"> 
  <ul>
    <li v-for= "product in products">
      {{ product }}
    </li>
  </ul>
</div>
<script src="<https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js>"></script>
<script>
	const app = new Vue({ 
		el:'#app',
		data: {
				product: 
				'T-shirts' ,
				'Boots',
				'Jackets'
}})
</script>

# <div data-v-〇〇 id ="app">
# <p data-v-〇〇>T-shirts are available</p>
# <p data-v-〇〇>Boots are available</p>
# <p data-v-〇〇>Jackets are available</p>
# </div>

コンポーネントを登録することができる

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
#カウントアップボタンが3つ作成される。

HTML,CSS,Javascriptを一気に書くことができる点、やっぱり悪魔的ですね。もっと勉強して一つアプリを作ってみたいです。

参考文献


コンポーネントの基本 - Vue.js

Vue インスタンス - Vue.js

https://jp.vuejs.org/v2/guide/transitions.html#単一要素-コンポーネントのトランジション

大規模アプリケーションの構築

ルーティング - Vue.js

GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js

Vuex とは何か? | Vuex

Vue.js

基礎から学ぶ Vue.js