Vue.jsとは？

JavaScriptとは

全てのブラウザでサポートされているプログラミング言語のこと。
ウェブサイトを操作することができるため、リッチなUXを提供することができる。

なぜJavaScriptを使うのか？

TraditionalなWebサイトは、リンクをクリックするたびにサーバにリクエストを送ってロードするというプロセスを経てページを変遷させていた。
しかし、クライアント側で実行されるJavaScriptによってサーバへのリクエストとそれに伴うローディング時間が短縮される。

これによって、Webページはより高速に変遷することができるようになりユーザにストレスを与えることなく、リッチなUXを体現できるようになった。

Vueの用途

1. HTMLページの一部を操作して、インタラクティブにする
   サイドバーや、チャット部分だけにVueを利用する。

2. フロントエンド全体を操作する(SPA)
   サーバは１ページだけクライアントに送り、あとはクライアントサイドでJavaScriptが実行されることでページが変わっていく

Vue.js vs React.js

React.js

JavaScriptフレームワークではあるが、公式にはComponent-basedのUIライブラリである。
Vueよりも提供している機能が少なく、UIをレンダリングすることに特化している。
Reactはコミュニティーによって開発されているパッケージに依存している部分もあるが、Vueは全てbuilt in。

Vueの基礎

InterpolationとData

Vueが操作可能なHTMLファイルの中で書かれている

{{ value }}

はInterpolationと呼ばれている。
Interpolationでは、{{ }}内に書いているプロパティ名valueに一致するデータを、data()内でreturnしているデータの中から取得してきて出力する。

const app = Vue.createApp({
  data() {
    return{
      value: "Hello World!",
    };
  },
});

ただし、この記法はHTMLタグの内側（OpeningタグとClosingタグで囲われたコンテンツに当たる部分｜HTML の基本 - ウェブ開発を学ぶ | MDN）でしか使えないため、たとえば、hrefのような属性にdataを利用したいときは、別の記法が必要となる。
v-bindはVueにvalueを何かに結びつけるように指示する。

また、このままdataでreturnする値にHTMLタグを入れると、Stringとして出力されるためHTMLタグは反映されないが、v-htmlを利用するとHTMLとして反映される。
ただし、XSSの可能性があるためユーザインプットがあるケースには非推奨である。

eventはデフォルトで関数に渡される。
しかし、HTMLタグのコンテンツ部分に<p>{{ hoge() }}</p>のように「メソッド名＋（）」と書いてしまうと渡される引数がオーバーライドされてeventが渡されなくなってしまうので気を付ける。

では、eventとほかの引数を渡すにはどうするのか？
$eventを引数に渡すことで、eventを渡すことができる！

TODO:
eventで渡せるものリストを調べておく

v-on:submitにはpreventmodifierが存在して、preventDefaultしてくれる。
他にも、

• v-on:click
• v-on:keyup
  に対してもmodifierが存在する。

v-once
一回だけ実行してくれる。最初の値を表示し続けたいときに利用できる。

v-modelを利用することで、
v-bind:valueとv-on:inputを省略して書くことができる。

{{ method }}のように書くと、dataのいずれかが変更されたときに毎回呼び出されるためパフォーマンスが悪くなる。
従って、methodを{{}}に書くことは推奨されない。

代わりに、computedプロパティを利用したメソッドを定義してそれを{{}}に書く。
computedはメソッド内で利用されているdataをdependenciesとして認識してキャッシュを利用して依存しているdataの変更を検知してcallされる。

watch

data内にあるプロパティと同じ名前のメソッドを定義することで、指定したdataのプロパティの変更を検知して何かしらの処理を記述できる。

ただし、computedを利用する方が、コードが短くわかりやすい。

カウンターが50を超えたときの挙動を設定したりする際に使うと良い。

Methods vs. Computed vs. Watch

Methods

イベントやdataバインディングで利用（Interpolationで利用するなど）
Interpolationで利用されているMethodsは全て、Re-renderが実行されるときに再実行される。
→Event-bindingで利用する、もしくはRe-renderで毎回実行されたいmethodを書くのが望ましい。

Computed

data-bindingでのみ利用される。依存するデータが変更された時のみ再評価し直す。

v-bind:class="{active: isSelected}"
booleanであるisSelectedの真偽によって、classを動的に変更することができる。

Rendering Content With Conditions

v-elseやv-else-ifは必ずv-ifを利用しているHTMLタグの直下にある必要がある。
v-showはhiddenにするだけなので、頻繁にvisible⇄inbisibleを変更するような場合に使う。

Outputting Lists of Data

v-forではv-for="(item, index) in items"のようにすることで、indexを利用することができる。

A First Look Behind the Scenes

$refs

Vueは前の状態と新しい状態のVirtual DOMを比較して、差分を評価することで効率的に変更箇所をre-renderする。

Instance Lifeycle

beforeCreate(): Screenには何も描画されていない状態。
created(): データPropertyやアプリのConfigurationを認識している状態。→Compile template
beforeMount(): Dynamic placehoder, InterpolationなどのVue特有のものはこの時点で除去される。
mounted(): Screenに描画されている状態。

データの変更があったとき：
beforeUpdate(): beforeCreate()と似ている
updated(): created()と似ている

What is Component

本質的には、Vue appと同じ

What & Why we use it

app.componentでComponentを定義する際は、"xxx-yyy"のようにmulti-wordの名前をつけないといけない。
もし"h2"のようにつけてしまうと、クラッシュさせることになる。

Vuetify.js

• v-app：すべてのアプリケーションで必須のコンポーネント。Vuetifyの多くのコンポーネントや機能のマントポイントとなる。
• v-main：
• v-container

mount と shallowMountの違い

• mountは子コンポーネントを持っている場合に子コンポーネントも表示する
• shallowMountは子コンポーネントは表示されない