Reactにおけるアロー関数の省略について

はじめに

アロー関数の省略方法たくさんありすぎて分からなくなったのでまとめる。

アロー関数とは

Reactではhooksの登場によりクラスコンポーネントではなく関数コンポーネントが主流になっている。関数コンポーネントでもfunctionを使うか、アロー関数を使うかで分かれる。アロー関数は短く書くことが可能であり、定義された時点でthisが固定されるためバグが少なくなるなどの理由からアロー関数が使われることが多い。しかし、アロー関数の省略の仕方がいろいろあって逆にややこしい。正直省略しなくても統一した方が見やすいのでは？と思うが、webの人はとにかく楽に書きたがる傾向があるので省略と可読性のバランスとは一生付き合っていくことになりそう。

ということでcodesandboxでいろいろ試してみようと思います。

Javascriptにおける省略しないアロー関数

const Hello = () => {
  return "Hello";
};

document.getElementById("app").innerHTML = Hello();

普通のアロー関数。Helloが出力されます。

Javascriptにおける省略したアロー関数

const Hello = () => "Hello";

document.getElementById("app").innerHTML = Hello();

こちらが省略したアロー関数。知っている人は多いでしょうが、何を省略しているのかを再確認しましょう。アロー関数では1行でreturn文が書ける場合returnが省略できます。また{}も絶対省略しなければなりません。

const Hello = () => {"Hello"};

document.getElementById("app").innerHTML = Hello();

この出力はundefinedとなり、このような記述は出来ませんでした。codesandboxで実行したのですが、なぜか正直理解していません。まあこんな風に書くことはないので大丈夫でしょう。

追記：コメントで指摘していただいた通り、構文が違うので{ }は利用できないようです。ご指摘ありがとうございます。

要するに１行のみの場合、returnと{ }を省略できます。

Reactにおける省略しないアロー関数

export const Hello = () => {
  return (
    <>
      <h1>Hello</h1>
      <h2>World</h2>
    </>
  );
};

Reactによくある普通の関数。

Reactにおける省略するアロー関数

export const Hello = () => (
  <>
    <h1>Hello</h1>
    <h2>World</h2>
  </>
);

これが一番分からなくなる省略の仕方です。これもreturnと{ }を省略しているのですが、Reactで複数行のJSXを返す場合は( )で括ります。その結果returnと{ }が消えて( )だけが残り、あたかも{ }の代わりに( )が用いられているように見えます。この書き方はそんなに楽になっていないのに、可読性は低くなってるように思うので個人的には使いたくないです（出来れば使ってほしくもない）。

export const Hello = () => <h1>Hello</h1>;

これは返すJSXが一行のみの場合で、returnと{ }も省略してます。これはなしではないかなと思います

export const Hello = () => {
  return <h1>Hello</h1>;
};

これは返すJSXが一行の場合で、( )のみを省略し、returnと{　}は省略していません。C言語をやっていたので、個人的にはこっちの方が「関数！」って感じがして分かりやすいと思うのですがどうなんでしょう。コードが長くなるのは事実ですし、現場によって変えていくのが理想でしょうか。

おわりに

複数行のJSXを返すアロー関数を書く際にreturnと{ }を省略しないでほしい。

参考文献

[1]:【JavaScript】function()ではなくアロー関数を使うメリット