初めまして、Vue.js

こんにちは！
最近、Vue.jsに入門したので、その内容について書いていきたいと思います。

そもそもなぜ学ぶのか？

社内の取り組みで必要だから

1つ目の理由が社内の取り組みで必要だからです。
JSフレームワークを仕事で使う機会は今のところ多くはないのですが、時代の流れとともに必要になる時が必ずきます。
その時に備えて、Webアプリ制作の知見を貯めておく取り組みを社内で行なう予定です。
この取り組みでVue.jsを使用するので、最低限の知識をインプットしておく必要があります。

理由もなく使ってこなかったから

2つ目の理由が、特にこれといった理由もなくVue.jsに触れてこなかったからです。
Vue.jsよりもReactが人気なイメージがあるからReactの勉強だけをすれば良いかー、といった感じで今まではReactのみを勉強していました。
ただ、それぞれに良いところ悪いところがあるはずなので、今回の勉強を通してその辺りを明確にしていければと思っています。
ということで、さっそく内容に入ります。

Vue.jsの特徴

ディレクティブ

Vue.jsにはディレクティブという機能があります。
ディレクティブは接頭辞にv-がついたVue.jsの特別な属性のことです。
Vue.jsでは、このディレクティブが便利な機能を提供してくれます。
今回は3つほど紹介したいと思います。

v-if

まず、v-ifです。
v-ifを使うと条件分岐によって要素の有無の切り替えを簡単に行えます。
ディレクティブの式がtrueを返す場合に描画がされます。
ReactではJavaScriptのif文を使うのでReactを勉強してきた自分にとっては、すごく新鮮でした。

<h1 v-if="awesome">Vue is awesome!</h1>

下記のようにv-else、v-else-ifもあります。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-bind

次にv-bindです。
v-bindを用いると、要素の属性を束縛することができます。

<a v-bind:href="url">リンク</a>

下記のような省略記法もあります。

<img :src="imageSrc">

v-show

最後に、v-showです。
v-showは真偽値によって、要素の表示・非表示を切り替えることができる、ディレクティブです。
これだけ聞くとv-ifと何が違うの？という感じですよね。
v-showとv-ifでは非表示の時の挙動に違いがあります。
v-ifの場合、非表示の時にはDOMごと削除されます
しかし、v-showの場合、非表示の時にはdisplay:none;で非表示になるため、DOM上には常に存在しています。

<h1 v-show="ok">Hello!</h1>

コンポーネントシステム

コンポーネントはVue.jsに用意されている、機能の1つです。
Vue.jsは便利ですが、Vue.jsで値を操作して表示を行う時に毎回インスタンスを作成するのは面倒くさいですよね？
そんな時に利用するのがコンポーネントです。
コンポーネントではVueのインスタンスを作成して、特定のタグにレンダリングを適用するという操作が可能になります。
下記のドキュメントから引っ張ってきた例では、button-counterというコンポーネントを定義しています。

// Vue アプリケーションを作成します
const app = Vue.createApp({})

// グローバルな button-counter というコンポーネントを定義します
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

しかし、大概のVueプロジェクトでは文字列のテンプレートではなく、vueファイルを作成して、その中にロジックやスタイルを全部書いていくようです。
詳しくはこちらをご覧ください。

Vue3で何が変わったの？

Vue.jsについて全く知らない僕ですが、Vue3で大きな変化があったことは知っています。
では、どういったところがVue2から変わったのでしょうか。

コードがシンプルに書けるようになった

Vue3からは<script setup>という記法を使うことでコードがより簡単に書けるようになリました。
<script setup>で以前までの形式的な記述を削減でき、コード量やネストを減らすことができます。
詳しくはこちらの記事が分かりやすかったので、よければみてください。

TypeScript全面サポート

また、Vue3からTypeScriptの本格的なサポートが始まりました。
Vue2でも使えないことはないみたいですが、サポートは限定的だったようです。
最近、TypeScriptの勉強も進めているので、ガンガンTypeScriptで書いていきたいと思います。

パフォーマンスの向上

そして、Vue2と比べるとパフォーマンスも向上しました。
高速のノーバンドルツールのViteを使用して、簡単にプロジェクトを開始できるようになったようです。
自分も最近の開発環境はViteで作ることが多いので、こちらもガンガン使っていきたいと思います。

Vue.jsを触ってみた感想

軽く触った感想としては、独自の書き方が多く、覚えるの大変そう！という感じです。
特にディレクティブは使い方や書き方を覚える必要があり、なんじゃこれっと現在進行形でなっています。
ただ、使いこなせると強力な武器になる（？）と思ってしっかりこの辺りも勉強を進めていきたいと思います。

まとめ

Reactしか触ったことのない自分にとっては、Vue.jsは少しクセがあるように感じました。
Reactと同じ感じでしょ？と思っていたので、全然違って驚きました。
個人的にディレクティブという機能に興味を持ったので、もっと深掘りしてみたいと思います。
最後まで読んでいただきありがとうございました！