Zenn
🦁

【vue3】<script setup>を利用してコードを簡易化する

2023/06/17に公開
Vue 3
tech

目標

CompositionAPIを使った記述に変更する
Vue3で使えるようになった便利な機能でこれ１つでVueの世界が一気に変わると言っても過言じゃないほどの機能だと思ってる
https://vuejs.org/api/sfc-script-setup.html

事前準備

vue3に事前準備uetify3が導入されたProject
記事では下記Git hub Repositoryを使用する
https://github.com/viviomega/vue-viviomega

App.vueを修正

比較的修正箇所が少ないApp.vueから修正してみる

src/App.vue[修正前]
import { firebaseApp } from "./firebase";

export default {
  name: "App",

  data: () => ({
    title: "びびおめがサイト", //サイトのタイトル
    // HOMEアイコン
    home: {
      icon: "mdi-home",
      link: "", //今回は設定しない
    },
    // コピーライトp
    copyright: {
      icon: "©",
      date: "2023",
      name: "ViviOmega",
    },
  }),
};

script setupタグを使う事でシンプルかつ、通常のJavaScriptを扱ってる人にも馴染みのある形に記述する事ができる

src/App.vue[修正後]
import { firebaseApp } from "./firebase";

//サイトのタイトル
const title = "びびおめがサイト";

// HOMEアイコン
const home = {
  icon: "mdi-home",
  link: "", //今回は設定しない
};

// コピーライト
const copyright = {
  icon: "©",
  date: "2023",
  name: "ViviOmega",
};

Git commit情報

SHA commit message
8019486 script setupを利用してコードを簡易化する App.vueを修正

LoginView.vueの修正

サインイン/サインアップの処理は複雑で全てを解説を難しいのでCompositionAPIで重要になりそうな場所をピックアップしていきます

リアクティブなデータを宣言

リアクティブが何かは下記を参照
https://v2.ja.vuejs.org/v2/guide/reactivity
OptionsAPIでdataオプションで宣言していた値を示します。
ただし、定数としてOptionsAPIに宣言していたものは再計算されないのでリアクティブから外します

ref()によるリアクティブなデータ宣言

ref()の返り値はオブジェクトになるのでリアクティブな値参照する場合はvalueプロパティを参照します
サインイン/サインアップデータを例にします

src/LoginView.vue[修正前]
data: () => ({
    email: "",
    password: "",
})
src/LoginView.vue[修正後]
//インポートが必要
import { ref } from "vue";

const email = ref("");
const password = ref("");

//リアクティブな値を参照する場合
email.value

methodsの修正

CompositionAPIでは単純なJavaScriptの関数として宣言します

プロパティにアクセスする際にthisが不要

以前までのVueではこのthisの制約によりアロー関数で記述することが敬遠されていたのですが、CompositionAPIではアロー関数により記述が可能

src/LoginView.vue[修正前]
methods: {
  // サインイン処理
  signin() {
    ...
  },
}
src/LoginView.vue[修正後]
// サインイン処理
// アロー関数で宣言
const signin = () => {
  // メールアドレスとパスワードが入力されているかを確認
  // .valueで値を参照、this不要
  if (email.value == "" || password.value == "") return;

  // 処理自体に変更はないため省略
  ...
};

ライフサイクルmountedの修正

CompositionAPIのライフサイクルメソッドはonというプレフィックスがつけられました
ライフサイクルの詳細に関しては下記参照
https://ja.vuejs.org/api/composition-api-lifecycle.html

src/LoginView.vue[修正前]
mounted() {
  // 処理省略
  ...
},
src/LoginView.vue[修正後]
// インポートが必要
import { onMounted } from "vue";
onMounted(() => {
  //処理省略
  ...
})

Git commit情報

今回の修正は量が多いので全体を確認したい場合はcommit履歴を確認しましょう

SHA commit message
3949cdf script setupを利用してコードを簡易化する LoginView.vueの修正

あとがき

script setupの登場は画期的で素晴らしいとは思いましたが、公式ドキュメントの誘導が不親切なためOptionsAPIを使い続けてる人も多いと思います
また、スクラップにメモを残しているので暇なら確認してみてください
https://zenn.dev/viviomega/scraps/652c656ca268ab

Discussion