最近ハマっているReact / TypeScriptの書き方

こんにちは。開発部のY.Oです。

最近ハマっているReact / TypeScript の書き方を5つ、簡単にご紹介します。

詳細は参考文献の方を見ていただければと思います。

弊社で開催したテックカンフで紹介した内容となります。

どれも実際の開発の中で見つけた「ちょっとラクになる」アイデアばかりなので、よければぜひ取り入れてみてください！

① オブジェクトリテラルで条件分岐を減らす

こんなふうに if 文や switch が増えてくると、読みにくいなぁって思うことありませんか？ 🙄

if (type === 'foo') return 'FOO';
if (type === 'bar') return 'BAR';
if (type === 'baz') return 'BAZ';

オブジェクトリテラルで書き換えるとスッキリします。

const LABEL_MAP: Record<string, string> = {
  foo: 'FOO',
  bar: 'BAR',
  baz: 'BAZ',
};
return LABEL_MAP[type];

型の恩恵も受けられるし、条件が増えても怖くない！

参考文献

qiita.com

② ジェネレータ関数で複雑な配列作成をシンプルに

配列を動的に組み立てるときって、意外とロジックがごちゃつきがちです。

const list = [];
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    list.push(i * 2);
  }
}

そんなときに便利なのが ジェネレータ関数。

function* createList() {
  for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) yield i * 2;
  }
}

const list = Array.from(createList());

あまり使う場面はないかもですが、「条件に合ったときだけ返す」という書き方は、読みやすさ・メンテナンス性ともに良しです。

参考文献

qiita.com

③ Ref コールバックで useRef と useEffect を消す

画面表示時に特定の要素にフォーカスしたい、なんてとき。

const inputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
  inputRef.current?.focus();
}, []);

これ、Refコールバックを使うと useRef も useEffect も不要になります。

<input
  ref={(el) => {
    el?.focus();
  }}
/>

再レンダリングのたびにコールバックが走るのが気になる場合は useCallback でメモ化するとさらに安心。

参考文献

zenn.dev

④ Render Props パターン

今ではあまり使われなくなった印象もある Render Props パターン。でも、サーバーコンポーネントとクライアントコンポーネントを組み合わせた実装ではまだまだ現役です。

<ServerComponent>
  {(data) => <ClientComponent data={data} />}
</ServerComponent>

データ取得と表示をうまく分けられます。

参考文献

zenn.dev

⑤ Render Hooks パターン

「UIとロジックをまとめてカスタムフックで提供する」書き方です。

function useCoolFeature() {
  const state = useSomething();

  const view = <div>{state.value}</div>;

  return { state, view };
}

const { view } = useCoolFeature();
return view;

UIの再利用性も高く、Hook の設計もスッキリします。

参考文献

engineering.linecorp.com

まとめ

どれも小さなテクニックですが、積み重ねると開発の快適さは大きく変わります。 ただ、こう言った書き方を知らない方が初見だと分かりづらいため、しっかり共有することが大事かと思います。

皆さんの「最近よかった書き方」も、ぜひ教えてください 🙌 ご覧いただきありがとうございました！

おわりに

KENTEMでは、様々な拠点でエンジニアを大募集しています！ 建設×ITにご興味頂いた方は、是非下記のリンクからご応募ください。 recruit.kentem.jp career.kentem.jp