同じファイル内で同じ名前のものを分割代入したときの解決策

はじめに

こんにちは、エンジニアのkeitaMaxです。

reactで実装していた時に困ったことがあったので、それの解決策を記事にさせていただきます。

困ったこと

以下のように、同じファイル内で同じ名前のもの分割代入した時に、名前が被ってエラーになってしまいました。

const { isLoading, getQuestion, question } = useGetQuestionAPI()
const { isLoading, postUser, user } = usePostUserAPI()

解決策

分割代入の際に呼び出す側で変数を変更できる機能が、JavaScript(TypeScript)にはあるらしいです。

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。
(参考URL：https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%E6%96%B0%E3%81%97%E3%81%84%E5%A4%89%E6%95%B0%E5%90%8D%E3%81%B8%E3%81%AE%E4%BB%A3%E5%85%A5)

下記のようにすると変数名を使用する側で変更することができるので、変数の衝突の問題が解決しました。

const { isLoading, getQuestion, question } = useGetQuestionAPI()
const { isLoading: postUserIsLoading, postUser, user } = usePostUserAPI()

おまけ

おまけとしてimportするときは以下のようにします。

import { usePutUserAPI as usePutUserAPIFirst } from "@/api/usePutUserAPI";

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！