vue3の環境構築と基礎まとめ

仕事でVue3を取り扱うことになったので、環境構築から基本的な書き方までを忘備録として本記事にまとめようと思います。

参考にさせていただいた動画は以下の動画です。
https://www.youtube.com/playlist?list=PL33OZZ24O4xDJ-_mqltklx8-9DK79iDOj

環境構築の手順

Vue3の開発をするのにあたって、事前に準備することとコマンドをまとめます。

■ 使ったもの

エディター：VScode
ブラウザ：Chrome

■ node.jsのインストール

上記のリンクからnode.jsを自分の環境に合わせてインストール。

インストールが完了したらコマンドライン or ターミナルでnode.jsがインストールされているか確認

node -v

■ Vueプロジェクトの作成

プロジェクトを作成したいディレクトリ（フォルダ）に移動して、ターミナル上で以下のコマンドを入力

npm init vue@latest

インストール途中でproject-nameを指定するように言われますが、任意の名前で問題ありません。
（今回は”vue-project”とします。）

インストールの過程でオプション指定を選択できるようになっていますが、「Add Vue Router」に関しては開発をしていく上で便利なので、最低限Vue RouterはONにしておくのがおすすめです。

インストールが完了したら、ターミナルで作成したディレクトリ（Vue-Project）に移動します。

cd vue-project

移動が完了したら以下のコマンドを入力してVue3開発を行うのにあたって必要なパッケージをインストールしていきます。

npm install

少し待つとインストールが完了するので、以下のコマンドを入力してブラウザで正しく表示されるか確認。

npm run dev

画面が切り替わり、Localの接続URLが表示されるためブラウザで表示して問題なくVue3の初期画面が表示されたら開発環境の構築完了。

Vue3の基本文法

Vue3の基本文法についてまとめます。

■ テスト用にコンポーネントを作成する

Vue3にはコンポーネントという概念があります。

コンポーネントは部品としてVueプロジェクトの中で使いまわしができるパーツとイメージするとわかりやすいです。

・ コンポーネントファイルの作成と使い方

src > components

上記のディレクトリの中に「TestComponent.vue」を作成します。

<templete>
<p>コンポーネントの動作チェック</p>
</template>

上記のように入力したら、App.vueへ追記を行います。

src > views > App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'

import TestComponent from './components/TestComponent.vue'
//↑このコードを追加する

コードの追加が終わったら、TestComponentの内容をApp.vueに表示させていきます。

<main>
　<TestComponent />
</main>

上記のようにmainタグの中にと入力すると、TestComponent.vueの中に記述した「コンポーネントの動作チェック」の文字が表示されると思います。

コンポーネントを表示させるときはApp.vueで入力した「import ◯◯◯◯ from」の◯◯◯に入力した名前を入力すると使用することができました。

■ データのバインディングについて

データのバインディングについては、Propsというものを使用してデータをバインド（当て込み）します。

TestComponent.vue

<template>
  <p>{{ textData }}</p>
</template>

<script setup>
 defineProps({ 
   text: String,
   });

 const textData = "テキストのバインド"  
</script>

scriptタグの中に「defineProps」を書いて、その中に「text: Strings」と書き、渡すデータの形式を決めます。

その後に、「const textData = "テキストのバインド"」と入力します。

templateタグ内には、textDataとして”テキストのバインド”と入力していたので、template内の文字列はブラウザで確認すると”テキストのバインド”と表示されているはずです。

別の文字に変えてブラウザを確認してみると、文字の変化が生まれるのでどのような動きをするのか実感しやすいと思います。

・ 双方向バインディングについて（ref関数とv-model）

データを入力したり消したりした際に、対象Aと対象Bの両方が同じデータ表示になることができるようになります。

<script setup>
  import { ref } from "vue";
  const name = ref("");
</script>

上記のようにscriptタグの中に記載します。
vueからrefを取り込んで、nameは空白として設定。

<template>
  <div>
    <label for="name">名前：</label>
    <input type="text" id="name" v-model="name">
    <p>入力された文字： {{ name }}</p>
  </div>
</template>

このように入力すると、inputのテキストボックスに入力した内容が{{ name }}の中に表示されます。

※ 補足

ref関数は双方向のデータが変化したときに、対象Aと対象Bをモニタリングする橋みたいなイメージ

v-model,v-on,v-forなどの”v-◯◯”がつくものはディレクティブという名称

##ディレクティブについて

ひとつ前に出てきた双方向データバインディングで使用したv-modelのようなディレクティブについてまとめます。

・ v-forの使い方

v-forは繰り返しデータを取り出して表示させるときに使用する。

<template>
  <ul>
    <li v-for data in dataList :key="data.id">{{ data.name }}</li>
  </ul>
</template>

<script setup>
  const dataList = [
    {id:0, name:"cloud"},
    {id:1, name:"Squall"},
    {id:2, name:"Tidus"},
  ]
</script>

liタグの中に「v-for data in dataList :key="data.id"」と書きました。

dataの中に入れる内容は、dataListの内容。その内容をidの番号順で表示する。
そして、idの番号順に表示させる内容はdataListの中にあるnameの内容を表示する。

dataListの中身はscriptタグの中にあるdataListと定義しているテーブルの内容。

例えば、今の内容はidとnameしかない状態ですが、内容の中に「data: "◯◯"」という項目があった場合、dataの中に入力されている内容は繰り返し処理で表示されない結果となります。

そのため、id:0の中に入っている配列データの中身が複数あった場合は、表示させたい内容のみを{{ data.◯◯ }}と書くことで表示させることが可能となっているようでした。

・ v-ifとv-elseの使い方

v-ifとv-elseはワンセットで使われるようです。

v-ifで指定した条件と一緒だった場合は表示。
逆に指定した条件と異なっていた場合は、v-elseの内容として表示されます。

<template>
  <div>
    <p v-if="number < 10">数字は10より小さい。</p>
    <p v-else>数字は10よりも大きい。</p>
  </div>
</template>

<script setup>
  const number = 5;
</script>

script部分でnumberは5と定義しているので、「v-if="number < 10"」と書いている部分の条件に当てはまるため、v-ifを使用しているpタグの中に書いている「数字は10よりも小さい」が発動する。

逆に10よりも大きい数字がnumberとして定義されていた場合は、v-else用に用意していたpタグの「数字は10よりも大きい」が発動するイメージ。

■ scriptタグ内の「setup」について

Vue2からVue.jsを触っているのですが、Vue3になってScriptタグ内に「setup」を書くことが大半になりました。

・ setupについて

setupは簡潔に書くと、今まで定義していた記述方法を短縮して書けるようになった便利なものです。

Vue2までの記述方法

<script>
    export default {
      data() {
        return {
          message: "Hello",
        };
      },
      methods: {
        messageUpdate() {
          this.message = "新着メッセージ";
        },
      },
    }
</script>

Vue3でsetupを使用した場合

<script>
  const message = ref("Hello");

  const messageUpdate = () => {
    message = "新着メッセージ";
  };
</script>

上記のような感じで超短縮されます。
scriptタグ内の中がかなり短縮された形になるので、時短になるというよりかは視覚的に分かりやすくなった恩恵のほうが個人的には大きかったです。

■ ライフサイクルフックについて

何やら難しそうなMAPが出てきましたが、注目するべきは左に表示されている英語の文字。

・beforeCreate
・created
・beforeMount
・mounted
・beforeUpdate
・updated
・beforeUnmount
・unmounted

真ん中がプログラムが動く道筋だとしたら、その道筋のタイミングに合わせてプログラムを仕込んでおくためのものと考えると理解しやすいと思いました。

実際にライフサイクルフックを使用してプログラムを書いていないため、詳しくは記述できませんがプログラムを書いているうちに書かざるを得ない状況になると思うので、実践で覚えていけばいいかなと思っています。

・ まとめ

初めてVue3の環境構築から基礎まで勉強をしてみましたが、Vue2と比較してかなり書きやすく理解しやすい状態になったなと思いました。

これから、実践的に多くのパターンでコードを書いていくことになると思いますが、今後なにかの気付きがあったりした際や、躓いた部分の改善策などが展開できればと思うので、今後も継続して学習しつつ技術力の高い姿を目指したいですね。