Vue.jsの基本と教材まとめ

はじめに

Vue.jsに関してまとめました。

※5/7　新しく学んだことの追記を含め、過去記事を大幅に編集しました。

✅関連記事

【Vue.js】Vue CLIのまとめ【関連チュートリアル含む】

Nuxt.jsの基本と学習メモ

✅参考教材
📚基礎から学ぶ Vue.js
📚Vue.js&Nuxt.js超入門　Nuxtに関してはSPAでSSRは使わない。
📚Vue.js入門　バックエンドAPIにNode.js(Express)を使っている点はFirebase、Laravel以外の新たな視点を得られてよかった。(サンプルが途中で終わってしまうのが少し残念。)📰Vueコンストラクタ　公式。マストチェック！！なコンストラクタ関数に関して。

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トランジションやアニメーションを容易に適用できる。

✅thisコンテキスト

メソッド内で付ける必要がある。このthisはnew Vue()で作成されたインスタンス(new Vue()の返り値と同じ)を指す。
コンポーネント内であればコンポーネントのインスタンスを指す。※ここに関しては公式を参照するとわかりやすい。

※アロー関数で定義すると関数が定義されているスコープを参照するので注意。

オプション

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

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

//main.js

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

👉new Vue()でインスタンスを複数作ることも可能だが、基本的には操作したい全ての部分を包括する要素に対して1つだけnew Vue()を行い、そこにコンポーネントとしてUI部品を追加していくことで連携や再利用がしやすくなる。

✅イベントハンドリング(イベント修飾子)　公式

.prevent：リンクの遷移など元の処理をキャンセルする。※event.preventDefault()を呼ぶ。

参考：JavaScriptのpreventDefault()って難しくない？preventDefault()を使うための前提知識

コンポーネント

再利用可能なVueインスタンス(JSの関数やメソッドに加えテンプレート/スタイルも含めることが可能)のこと。この分割の単位をコンポーネントという。

再利用や管理を容易にする。

※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>

<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>

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

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

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

✅コンポーネントオプション　公式

Vue.compoment()メソッド：アセット登録メソッド。
※Vueオブジェクトのcomponentメソッド。

Vue.extend()メソッド：クラス継承メソッド※サブクラスコンストラクタ

📝上の例では記載してないですが。。。dataはVueオブジェクトではオブジェクトを用意するだけでOKですが、Vue.componentや.vueファイルではdataオプションに対して関数の形で値を用意します。

✅データの受け渡し

基本的にpropsと$emitを使って行う。

propsはネストでオブジェクトをつかしてバリデート機能を使うことができる。validator関数で細かく設定も可能。

✅スロットの活用

コンポーネントタグ内に記述されたコンテンツを配置することができる特殊タグ。

✅ミックスイン

Vueインスタンス・コンポーネント間で共有できる機能を抜き出す。コンポーネントと違ってテンプレートを含まないのがポイント。

✅VNode

仮想DOMを構成する仮想の要素(ノード)。内部ではVNodeと呼ばれている

プラグイン(Vuex/Vue Router)

✅Vue.jsプラグイン

VuexやVue RouterなどはVue.jsプラグインとして作成されている。

📝使い方(グローバルメソッドのVue.useで登録する。)

※new Vue()する前にする必要がある。また、npmなどでインストールする外部ライブラリはVue.useを記載する必要はない。

～Vuexでの例～

store.js

👉Vuex.Storeコンストラクタを使ってストアのインスタンスを作成。オプションでstateやgetters、メソッドでcommitやdispatchなどが使える(Vuexのメイン機能)。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // プラグインとして登録

const store = new Vuex.store({
  ~~処理~~
})
export default store

main.js

👉ストアインスタンスをVueインスタンスのルートに登録することで、コンポーネントのインスタンスプロパティ$storeとしてどこからでも使用可能になる。(他のファイルからthis.$storeで呼び出し。)登録しない場合は、各ファイルでimport store from ‘@/store.js’の記述が必要になる。

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'

new Vue({
  el: '#app',
  store,
  render:h => h(App) 
})

render: function(createElement){return createElement(App)}をアロー関数で極限まで略。hはcreateElementのエイリアス。JSXの慣習。

📚Vueオブジェクトのrenderプロパティ　Vue.js&Nuxt.js超入門P89、P245参考

HTMLのエレメントを生成し埋め込むことができる。またrenderでJSX記法を用いることも可能(コンポーネントやdataオプションの内容なども埋め込むことができる)。

またelプロパティを使わない場合は、$mountメソッドを活用してVueオブジェクトを手動でマウントすることも可能。
($mountメソッドを使うメリットは、インスタンス生成後の任意のタイミングでマウントを実行できる点。)

new Vue({}).$mount('#app')

※createElement() ()内の名前でタグ要素を生成する(※小文字で生成なので上記の例では<app>が生成)。

App.vue

export default {
  created() {
    console.log(this.$store.state.count) // ストアの状態を取得。
  }
}

参考：
Vue.jsのrender: h => h(App)について調べた
Vuex.Storeコンストラクタ(公式)

📝ヘルパー関数　公式

コンポーネントからストアにアクセスするための関数。

mapState：複数のストアのステートプロパティやゲッターを必要とする際に活用。

📝vuex-persistedstate

Vuexのステートをローカルストレージに保管することができるプラグイン。プラグインをstore内任意のファイルに追記するだけでローカルストレージにstateの値が保存される。

npm i vuex-persistedstate

👉使用する際はnuxt.config.jsでmodeをSPAにする必要あり(※ローカルストレージはクライアント側で実行されるため、SSRによるサーバー側の処理と連動できない)。

～Vue Router～

📝$router　公式

routerインスタンスを使用するのと同じ。全てのコンポーネントにルーターをインポートする必要をなくすためVueインスタンス直下に登録しているので、このような記載になる。(※変数の接頭辞として慣例的に使用されているらしい)

📝$route　公式　

Routeオブジェクト。現在のルートをthis.$routeとすることでアクセスすることができる。オプションも多数ある。例として$route.params(ルートのパラメータのオブジェクト)。猫本P288が参考になる。

※Vue.js入門P144に代表的なプロパティとメソッドが記載されてる。

用語

✅ディレクティブ

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

✅マウント(mount)

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

✅データバインディング

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

✅DOM(Document Object Model)

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

✅オプション

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

✅JSX(JavaScript Syntax eXtension)

JavaScriptにXMLのような文法を追加する。Reactに用意されていた機能だったがVue.jsでも対応するようになった。

主にrenderを使ったスクリプトを簡易化する際などに使われる。

✅非同期処理

コンピュータの処理は同期処理で「処理を実行し、完了する」が基本。

非同期処理は「処理を実行したら、完了する前に次に進む」で、時間のかかる処理部分をバックグラウンドで他の処理と並行して進めることができる。

JavaScriptではAjaxを使うが、Vue.jsではaxiosというパッケージが用意されている。

👉以下、axiosのインストール方法。

インストール

npm install --save axios

ライブラリのインポート

const axios = require('axios');

getで指定したアドレスにアクセスしてデータを受け取る。dataプロパティに保管されている。
awaitで非同期処理を実行(axync関数/メソッド内でしか使えない)。

変数 = await axios.get(アドレス);

✅Firebase

データベースの機能をサービスとして提供するWebサービス。JSON形式で保存される。axiosでアクセスすることが可能。
Firebase APIを活用すると、ソーシャルログイン機能も実装可能。

APIパッケージのインストール

npm install firebase --save

インポート。その後apiKeyなどをコピペして変数に代入すればOK。

import firebase from "firebase";

以下を参考にすれば、ログイン有無によるアクセス権限制御、さらにはLaravelでいう認可(管理者権限)的機能まで実装できそう。

GoogleのFirebaseが面白いかもしれない　〜Database Rules〜

firebase realtime database でよく使う rule

Nuxt.jsの利用

Vue.jsは基本的にSPAであり1枚のページだけで完結する形になっています。多数のページを利用したい場合は、ルーティングの仕組みも備えたNuxt.js(Vue.jsの拡張フレームワーク)の活用がおすすめです。

SSRという特徴に加え、Vuex、Vue routerも標準で組み込まれている。

✅SSR(サーバーサイドレンダリング)

SPA(シングルページアプリケーション)と対。Vue コンポーネントをサーバ上の HTML 文字列に描画、ブラウザに直接送信し、最終的に静的なマークアップとして表示する。ユニバーサルとも。

チュートリアルまとめ

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

Vue CLI活用

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

Vue CLI活用 (Vue Routerアリ、Vuexは使用しない)
FirebaseのDBを活用するので、Firebaseの紐づけありきで制作&デプロイまで。LocalStorageなど使うなら別教材で。

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

以下デモサイト
https://jam-portfolio.netlify.com/

JAMstack(Javascript, API, Markupの略)で、ウェブサーバーやデータベースに依存しないサイト作りを体験できる。
APIファーストなCMSであるcontentfulを利用。(データベース的役割を果たす。)
CSSにはTailwindというフレームワークを使用。
デプロイはNetlifyを用いて無料で公開。

contentfulの参考記事
【Contentful】入門。Conentfulとは？導入方法・設定手順の解説

その他

✅jQueryとの併用

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

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

おわりに

(3/28時点)

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

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

✅参考

猫本公式サポートページ
猫本ソースコードgithub
JavaScript初心者でもすぐわかる！DOMとは何か？
Vue.js童貞がネコ本読んで得たもの①
import Vue from ‘vue’の意味を研究して、分かってきたもの　’vue’はnode_modules/vueの内容をインポートしてる！！

備忘録

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

【Vue.js】ネコ本チュートリアルのToDoリストを少しアレンジしてみた

割愛部分メモ

・5/7時点

猫本

P86 $el、$refs
p138 Vue.directive()メソッド

Vue.js入門

P43~P78　難しくて頭が付いていけなくなる(集中力が。。。)

・記事作成時点

テンプレート制御ディレクティブ(v-preやv-htmlなど)
各ディレクティブの修飾子
スクロールイベントの取得(スムーススクロール)　P114
算出プロパティ詳細(ゲッターとセッター、キャッシュ機能、watchオプション)
コンポーネントの親子間のデータフロー　P154
トランジション　P194
Vue CLI P216
Vuex P252
Vue Router P282