【React(TypeScript)】Utilityの作り方

概要

React(Typescript)でUtilityクラスを作りたいけど、どう書けばいいのか今までしっくりきてなかったのですが、やっとしっくりした書き方が分かりましたのでマイベストプラクティスとして共有させていただきたいと思います。

Badな書き方

メソッドを直接exportする。この方法だと使用時にメソッドの数だけimportが必要になるのと、呼び出し元にあるメソッドとの区別がつきにくい。

AlertUtil.ts

export const showAlert = (message: string) => {
    ...(省略)
}

export const showConfirm = (message: string) => {
    ...(省略)
}

使用する時

import { showAlert, showConfirm } from 'utils/AlertUtil'

showAlert("テスト")

showConfirm("テスト")

Goodな書き方

Utilをexportして、この中にメソッドを定義する。この方法だとUtilの中にあるメソッドを使っているのが一目で分かる。

AlertUtil.ts

export const AlertUtil = {
    showAlert(message: string) {
        ...(省略)
    },
    showConfirm(message: string) {
        ...(省略)
    }
}

使用する時

import { AlertUtil } from 'utils/AlertUtil'

AlertUtil.showAlert("テスト")

AlertUtil.showConfirm("テスト")