placehold.jp、setup や composable の return

ダミーの画像を生成したいなと思ってググったらこんなサイトがあった。

手元にダウンロードするのではなく、URL を叩くとその画像を返してくれる。

テストデータを作成するときなどにとても重宝しそう。便利なサイトを公開してくれてありがとうございます。

template で使うために setup で返す値や関数、composable のuseXxx内で返す値や関数の定義について議論した。

const useHoge = () => {
  const add10 = (num: number) => {
    return num + 10
  }

  return {
    add10,
  }
}

みたいな composable があったとして、これは以下のように書いても同様になる。

const useHoge = () => {
  return {
    add10(num: number) {
      return num + 10
    },
  }
}

後者の書き方のほうが行数も少なくて変数定義をしなくても済むというメリットがある(どのみち関数名は考えなくてはいけないけど)が、その代わりネストが深くなるというデメリットもある。

また、数が多くなってくると「今読んでいるこの関数は return されるのか？」がわかりにくくなる。

ただ、後者のように書くと定義ジャンプをしたときに一発で実装内部に飛べる(前者だと定義ジャンプをすると return 内の変数に飛ぶので、さらにそこからもう一度定義ジャンプが必要)

という感じで、どっちがいいかという話をチームでしていたんだけど、たとえばリファクタリングをするときに、↑ のadd10()を return 内部の別の関数から呼びたくなった場合にわざわざ return の外に定義し直さなくてはならないというデメリットがあることを教えてもらった。

たしかにそれならあらかじめ全部 return の外に書いて、return するものだけ return の object に突っ込むというほうが統一されるしリファクタリングもしやすいし分かりやすいなと感じた。

今後手を入れることがないコードって基本的にないはずなので、手を入れる際により分かりやすく書き換える量が少なくバグが起きにくいような書き方をしていきたいと思いました。