はじめに

2か月程前、Vue.jsに関して以下の本を用いて学習を始めました。

2週間ほど勉強して、少しだけアレンジして作成したToDoリストが以下になります。(Bootstrapでデザインして、状態ボタンを1つ追加しただけだけど)

その後、Laravelと組み合わせたポートフォリオ作成を目指して、Laravelの勉強に専念。

やっとこさ最近LaravelとVueの連携について理解できてきたので、とりあえずVue.jsで新しいポートフォリオのフロントサイドを作り始めようと思ったのですが。。。

手が一切動かない。全然覚えてない。悲しい。。。泣　

2週間程度勉強したのですが、1か月経ち、気づけば頭からすっぽり抜けてしまっていました。。。~~(記憶力なんてこんなもん)~~

ってことで改めて復習がてらVue.jsの基本を記事にまとめてみました。(今後の備忘録も兼ねて)

※WordPressで体裁を整えたものをコピペしたところ、テーブルの形が崩れてしまいました。。。もし当記事が気になりましたら、以下よりご覧いただけますと幸いです。。。

Vue.jsの表示

まずはVue.jsでHello worldしてみる。

index.html

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>

#appの内側にテンプレートを書き込んでいく。

インターネットに接続できる環境であれば、Vue.jsのインストールにCDNが利用可能。

マスタッシュ記法を用いて{{}}内にプロパティ名を記述するとその値が描画される。

main.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
})

コンストラクタ(クラスのインスタンス生成時に実行されるメソッド)関数Vueを使ってルートとなるVueインスタンスを作成。

data内のデータをテンプレート側に送っている。変数化するとコンソールからもアクセスできるが必須ではない。

実際の描画

<p>hello</p>

基本機能(ディレクティブ/組み込みコンポーネント)

v-bind

クラス、スタイル、属性などタグ内のバインドに使用。※Mustache{{}}はテキストコンテンツ特有の記法のため、タグ内で使用することができない。

<input type="text" v-bind:value="message">

省略パターン

<input type="text" :value="message">

v-for

リストデータを用いて要素を繰り返し描画する際に、繰り返したいタグに対して使用。

v-on

「クリックしたとき」「要素が変わったとき」などDOMイベントのハンドリング(イベント)を受け取り、処理を行う際に使用。

※猫本では、イベントに紐づける処理の内容を「イベントハンドラ」、イベントハンドラをイベントと紐づけることを「ハンドル」と呼んでます。

<button v-on:click="handleClick">クリック</button> <!--handleClickはコンポーネントのmethodsオプションに定義-->

省略形「@」

<button @click="handleClick">クリック</button>

v-model

データとフォームの入力項目をバインド(同期)する際に使用(双方向データバインディング)。

下記でフォームの文字を編集すると、同期して画面のメッセージも更新される。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello'
  }
})

v-if

プロパティがTrueの時だけ条件分岐でテンプレートを描画したい際に使用。条件を満たさなかった際はコメント化。似たディレクティブにv-showがあり、こちらはstyle="display: none;"のスタイルが付与されて描画。

<templete>タグを使うと複数の要素をグループ化できる。

<templete v-if="ok">
  <h1>タイトル</h1>
  <p>コンテンツ</p>
</templete>

また、v-else-if、v-elseを組み合わせることで複数の条件を指定できる。

<transition>タグ

組み込みコンポーネント。CSSトランジションやアニメーションを容易に適用できる。

基本的なオプションの構成

Vueクラスのインスタンスの生成テンプレート

//main.js
vue = Vue.new({
el: '#app',
data: {
message: "Hello Vue.js"
},
computed: {
computedMessage: function(){
return this.message + "!"
},
},
created: {
// アクションフック
},
methods: {
myMethod: function(){
},
},
})

el: mountする要素

アプリケーションを紐づけるセレクタ。

data:

アプリケーションで使用するデータの登録。

computed:

算出プロパティ。関数によって算出されたデータ。メソッド内ではthis(Vueインスタンスを指す)を付ける。テンプレートの可読性を保つためにここに記述。

created:

ライフサイクルハック。特定のタイミングで自動的に呼び出す。呼び出したいタイミングによってメソッドは変える。処理を割り込ませる仕組みのことを「フック」と呼ぶ

methods:

アプリケーションで使用するメソッド。コードを管理しやすくするために処理を分けたり、イベントハンドラなど細かな実装を担当する。

コンポーネント

機能をもつUI部品ごとにテンプレートとJavaScriptを1つのセットにして、ほかのUI部品とは切り離した開発、管理をできるようにする仕組み。設計図。再利用が容易になる。

※UI(User Interface)とは、ユーザーがPCとやり取りをする際の入力や表示方法などの仕組み。

index.html

<h1>Vue.js</h1>
<div id="app">
  <hello />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('hello',
{
  template: '<p>Hello!</p>'
})
var app = new Vue({
  el: '#app',
});
</script>

コンポーネントの定義

Vue.component(名前,{設定情報});

コンポーネントの出力

<コンポーネント名 />

<h1>Vue.js</h1>
<div id="app">
  <mycomponent />
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var component = {
  template:'<p>localcomponent</p>'
}
new Vue({
  el: '#app',
  components: {
    'mycomponent':component
  }
});
</script>

ローカルコンポーネントの登録

Vueオブジェクトの「components」プロパティに登録すると、そのコンポーネントのスコープ内だけで使用するように制限できる。

components:{'コンポーネントタグ':コンポーネント名}

※Vue.componentsはグローバルコンポーネント

親子間のコンポーネントデータフローは、「props(親から子)」と「カスタムイベント$emit(子から親)」を使用する。

拡張フレームワークには「Nuxt.js」や「VuePress」がある。

「Vuex」や「Vue Router」といった拡張ライブラリを導入することで効率よく目的に応じたスケールアップも可能。

また、UIコンポーネントサイトとしては「Element」や「Onsen UI」がある。

用語

ディレクティブ

テンプレートとロジックを関連付ける機能。テンプレート内で「v-if」など独自の属性で記述する。オプションで引数や修飾子を扱うことも可能。

マウント(mount)

配置する要素とアプリケーションを紐づけること。

データバインディング

データと描画を同期させる仕組みのこと(JavaScriptのデータとそれを使用する場所を紐づけ、データに変化があれば自動的にDOMを更新する)。リアクティブシステムによって実現している機能の1つ。

DOM(Document Object Model)

JavaScriptでhtmlの要素を操作するための仕組みのこと。(ファイルの特定の部分に目印を付けて「この部分」に「こういう事をしたい」という処理を可能にするための取り決め。)

オプション

Vueインスタンスの中で使用するデータやメソッドを定義する場所。

今回まとめで割愛したこと

テンプレート制御ディレクティブ(v-preやv-htmlなど)

各ディレクティブの修飾子

スクロールイベントの取得(スムーススクロール)　P114

算出プロパティ詳細(ゲッターとセッター、キャッシュ機能、watchオプション)

コンポーネントの親子間のデータフロー　P154

トランジション　P194

Vue CLI P216

Vuex P252

Vue Router P282

予備知識

jQueryとの併用

Vue.jsを使用すると、jQuery(DOM操作系ライブラリ)を併用する機会は減る。マウントした要素内のDOMを直接操作しても仮想DOMは更新されず、データが変わらないため。

DOMを直接参照したい際は、$elや$refsなどカスタムディレクティブを使用する。

所感

復習してみて、今回割愛した各ディレクティブの修飾子がかなり重要な役割を果たす上に、数が多いので把握するのが大変だなと感じた。まずはポートフォリオにトランジションを用いたテキストアニメーションを実装しながら学んでいこうかな。

Vue RouterでSPAも憧れるけどVue CLIの導入が必須っぽいので、まずはVue CLI導入せずにできるところからポートフォリオ制作に活かしつつ、勉強していこうと思います。

参考サイト

猫本公式サポートページ

猫本ソースコードgithub

JavaScript初心者でもすぐわかる！DOMとは何か？

Vue.js童貞がネコ本読んで得たもの①

今後活用したいチュートリアルなど

Vue.js/Vuexを使ってTrello風アプリを作成しよう！

Vue CLI活用

Vue.js & FirebaseでTwitterライクなSNSアプリを作ってみよう！

Vue CLI活用 (Vue Routerアリ、Vuexは使用しない)

Nuxt.js & Contentfulでハイスペックなポートフォリオサイトを超簡単に公開しよう！【JAMstack】