はじめに

こんにちは。エンジニアの仕事をしている、たかふみです。

本日は、vue3より正式導入された、Composition APIを使用した共通関数の作り方についてまとめたいと思います。

Composition APIを共通化する際に、参考としてください。

mixisは共通関数としてどうなのか

vue.jsには、mixinsという機能がありますが、mixinsには以下のデメリットがあります。

Options APIで動く想定なのでComposition APIでは使いにくい。
オブジェクト指向的に考えると複数のインスタンスを持てない。
グローバル定義した場合、どこで定義されているのかわかりにくい。

共通関数としては不便ですね。使い勝手がよくありません。

vue.jsで共通関数をどう作るか

export default functionで関数を外出ししてしまいましょう。
関数を外出しすると、reactiveを使用してオブジェクト指向のメンバ変数のように扱うこともできます。

仮に、ユーザー情報をセットする処理、ユーザー情報を取得する処理、ユーザー情報を編集する処理を定義し
returnします。

/functions/userHelper.js

import {reactive} from 'vue'
export default function (){
    /**
     * メンバ変数的なリアクティブデータです
     */
    const user = reactive({
        id:0,
        name:'',
    })
    /**
     * ユーザーをセットします
     * @param data
     */
    const setUser = (data) => Object.keys(data).forEach(key => user[key] = data[key])
    /**
     * ユーザーをゲットします
     */
    const getUser = () => user
    /**
     * ユーザーを編集します
     * @returns {string}
     */
    const editUser = () => user.name = user.name + 'さん'
    return {
        setUser,
        getUser,
        editUser,
    }
}

呼び出す側のコンポーネントでは、このようにimportで関数を読み込んで、分割代入で関数を定義することが可能です。

<script setup>
import UserHelper from '../../functions/UserHelper'
// 分割代入で関数定義
const {getUser,setUser,editUser} = UserHelper()
// 値をセット
setUser({id:1,name:'ひかきん'})
// 値を取得してみる
console.log(getUser()) // {id: 1, name: 'ひかきん'}
// 値を編集してみる
console.log(editUser())
// 再び値を編集してみる
console.log(getUser()) // {id: 1, name: 'ひかきんさん'}
</script>

共通関数のメリット

Composition APIで使用可能

Composition APIで使用可能になったのは、かなり大きいメリットですね。
Composition APIiを使用すると、かなりコードがスッキリしますので、
それに合わせて共通関数を使用したいです。

オブジェクト指向的に考えられる

このような共通関数を作ると、オブジェクト指向で言うと、別インスタンスで共通関数を作成することが可能になります。

export default functionを、importして関数を使用しているので、関数名を別名定義すれば他の関数として使用可能です。

メンバ変数を持たせて共通関数を別定義したい場合にたいへん便利ですね。

<script setup>
import UserHelper from '../../functions/UserHelper'
// 別定義としてインポート
import UserHelper2 from '../../functions/UserHelper'
const {getUser,setUser,editUser} = UserHelper()
// 関数名を別名定義できる
const {getUser:getUser2,setUser:setUser2,editUser:editUser2} = UserHelper2()

setUser({id:1,name:'ひかきん'})
console.log(getUser())
console.log(editUser())
console.log(getUser())


setUser2({id:2,name:'ひかる'})
console.log(getUser2())// {id: 2, name: 'ひかる'}
console.log(editUser2())
console.log(getUser2())// {id: 2, name: 'ひかるさん'}
</script>

どこから呼び出したのか分かりやすくなる

mixinsはどこから処理を呼び出したのかわからないことがデメリットでした。

しかし、このような共通関数を使用すれば、どこから定義された処理なのか一目瞭然となり、可読性が上がります。

まとめ

以上です。Composition APIを使用するに場合は、ぜひともこのような共通関数を使用していきたいですね。

皆様の開発のお役に立てたら光栄です。ありがとうございました。

プログラマーノート

プログラマーの学習や雑記のメモです

【Vue.js】Composition APIを使用した共通関数の作り方