🚀

JSXでreturn省略したくない派だけど皆さんの意見聞いてみたいってお話

2024/10/12に公開

React

JSX

実装

idea

しばらくエンジニアリングのお仕事から離れてたけど、最近久しぶりにエンジニア業やってるのでお久しぶりな投稿ですm
今回のお話はJSXに限らずJavaScript全般のお話ですが、私がよく遭遇するのがJSXなのでJSXの例で進めていきます。

 どういうののお話？こういうのです。
return (
  <div>
    {todos.map((todo) => (
      <p key={todo.id}>{todo.title}</p>
    ))}
  </div>
);
アロー演算子でreturnを省略するパターンです。

お仕事で色々な会社様と関わらせて頂いてますが、かなりよく見かけます。

文法的に間違っておらず、シンプルで読みやすいコードだと思います。

 でも私の性格が邪魔をする私はシステム開発のお仕事をする際に、「基本的に他人のコードは信じない。自分が触るとこは先に既存実装を一度検証する」を割とモットーにしています。

誤解してほしくないのは、チームメンバのことを信じてないということではなく、個人的に常にこの心構えで取り組んだ方が無難だと思ってる、というだけですm
そしてこの検証（デバッグ）時によくやるのが、printデバッグ（JSの場合はconsole.log）です。ブレークポイント機能使っても同じことできるのですが、システムが動いてるのがDocker内かどうかだったり、言語によってはLSPの設定に手間取ったりで面倒なので、私はまだ慣れてない環境ではprintデバッグを好んで使います。
このときに、先述の例を見てみると、以下のように書き換える必要があります。return省略するパターンだとconsole.logを埋め込めないからです。
return (
  <div>
    {todos.map((todo) => {
      console.log('todo', todo);
      return <p key={todo.id}>{todo.title}</p>;
    })}
  </div>
);
この書き換えが地味に面倒くさい。なので個人的には最初からreturn省略せずに書いておきたい、という主張です。
先述のreturn省略形に対して私がメリットを感じれてないという背景です。読みやすさは誤差だろうと。
今回の例はアロー演算子内がpタグ1行のみなのでデバッグするまでもないですが、実現場ではアロー演算子内が結構長くなってて、引数に大きめのオブジェクトが渡されてるときにデバッグしたくなることがあります。

 さいごに本音を言うとあまり真剣に考察したことはないですが、考察するより他の方に意見聞いたが早いなって思ったので投稿した次第です。他人任せですみませんm
あとめっちゃ関係ないのですが、最近システム開発の会社を立ち上げまして（私ひとりの会社です）、なにかお仕事あればご連絡いただけますとめちゃくちゃ喜びます。

どういうののお話？

でも私の性格が邪魔をする

さいごに

Discussion