Vue Options API を Composition APIに書き換えてみた

はじめに

Vueを触り始めて4ヶ月の著者が、意図せずOptions API でコードを書いてしまいました。Composition APIに書き直していく中で感じたことをまとめています。
本記事のコードでは、ログインページを作成しており、ログインの処理はcognitoで行なっています。
筆者がComposition APIで作成をしたいと思い書き換えただけでOptions APIがよくない書き方ではないです。

Options APIとComposition APIについて

Composition APIはVue3が登場した時に追加された機能です。
Options APIはVue2の時から書くことができる方法で、Vue3でも使用することができます。
Vue3がリリースされたのは2020年9月なので、Composition APIでコードを書き進めている人でこれ以前の記事を見て参考にする際は、違いを押さえておかなければいけません。（2020年9月以降でもOptions APIで書くことができるので、コードを見て理解できるようになるのが一番ですが、、、）
今回は、ログインページを作成するにあたって2019年の記事を参考にログインページの実装をしていたので、この機会に書き換えてみました。

Options API で書いていたコード

<template>
  <h3>ログイン</h3>
  <button type="button" class="signin" @click="login
  ">ログイン</button>
</template>
<script lang="ts">
//ライブラリのインポート
import {
  CognitoUserPool,
  CognitoUser,
  AuthenticationDetails,
} from "amazon-cognito-identity-js";

export default {
  name: "Login",
  data() {
    return {
      username: "#####",
      password: "#####",
    };
  },

  methods: {
    logout() {
      //cognito設定
      var poolData = {
        UserPoolId: import.meta.env.VITE_APP_POOL_ID,
        ClientId: import.meta.env.VITE_APP_CLIENT_ID,
      };
      console.log(poolData);
      var userPool = new CognitoUserPool(poolData);

      //cognitoパラメータ設定
      var username = this.username;
      var password = this.password;

      var authenticationData = {
        Username: username,
        Password: password,
      };

      var authenticationDetails = new AuthenticationDetails(authenticationData);

      var userData = {
        Username: username,
        Pool: userPool,
      };

      var cognitoUser = new CognitoUser(userData);
      cognitoUser.authenticateUser(authenticationDetails, {
        onSuccess: function () {
          var result = "/home";
          location.assign(result);
        },
        onFailure: function (err) {
          alert(err.message || JSON.stringify(err));
        },
      });
    },
  },
};
</script>

Composition API で書き直したコード

<template>
  <div>
    <h3>ログイン</h3>
    <button type="button" class="login-button" @click="login()">
      ログイン
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
//ライブラリのインポート
import {
  CognitoUserPool,
  CognitoUser,
  AuthenticationDetails,
} from "amazon-cognito-identity-js";

const inputname = ref("######");
const inputpassword = ref("#####");
var poolData = {
  UserPoolId: import.meta.env.VITE_APP_POOL_ID,
  ClientId: import.meta.env.VITE_APP_CLIENT_ID,
};
var userPool = new CognitoUserPool(poolData);

//cognitoパラメータ設定
var username = inputname.value;
var password = inputpassword.value;

var authenticationData = {
  Username: username,
  Password: password,
};

var authenticationDetails = new AuthenticationDetails(authenticationData);

var userData = {
  Username: username,
  Pool: userPool,
};
var cognitoUser = new CognitoUser(userData);
const login = () => {
  //cognito設定

  if (cognitoUser) {
    //   ログイン処理
    cognitoUser.authenticateUser(authenticationDetails, {
      onSuccess: function () {
        var result = "/home";
        location.assign(result);
      },
      onFailure: function (err) {
        alert(err.message || JSON.stringify(err));
      },
    });
  }
};
</script>

書き換えてみて感じたこと

refが便利ということ

ref()で用意した変数は値の変化に応じて、表示内容が自動で変わる仕組みになっており、今回は名前とパスワードで使用しており、あまり便利さを感じないが、時刻など毎秒変化するものを扱う時は非常に便利です。
（現在別のコードを書いており時刻の表示に使っています。）

dateやmethodsなどを使ってまとめる必要がなくなった

optionsAPIではブロックごとに管理をしていたがそれがなくなり、処理の順番を自由に記述することができるようになりました。
これは初心者の自分にとってはややこしい部分でした。
どこで何をしているかというのが自分の中でもわかりにくくなってしまったので、自分にとっても読む人にとってもわかりやすい順番で書くことが重要だと思いました。

まとめ

今後、vueを使って新しくコードを書く際はComposition APIで書くことが多くなると思うので、Options APIについて深く知る機会は少ないと思います。
しかし今回の私の失敗の原因でもある『古い記事』を参考に書き始める人も少なくないと思います。例えばChatGPT4はComposition APIでコードを記述してくれますが、ChatGPT3.5はComposition APIの書き方では教えてくれないです。なので書き換えることができるようになる程度の知識は必要だと思います。一度書き換えてみると2回目以降はスムーズにできるかと思いますので、時間のある際にぜひやってみてください！