JSX 内に複数行の日本語を書こうとした瞬間 prettier が取った衝撃の行動とは！？

Posted at 2025-02-09

何が起きたか

HTML では半角空白を含めないようにするため、以下のように書くことがある。少なくとも昔はあった。

HTML

<div>
  長いテキスト<!--
  -->長いテキスト
</div>

それと同じノリで、日本語の文章に半角空白を含めないようにするため、

<div>
  長いテキスト{/*
  */}長いテキスト
</div>

というコードを書いた。しかし、その後 prettier によって

 <div>
-  長いテキスト{/*
-  */}長いテキスト
+  長いテキスト
+  {/*
+   */}
+  長いテキスト
 </div>

と修正されてしまった。にもかかわらず、レンダリング結果に半角空白は表示されない。これはどういうことなのか？と思ったところ、タグに隣接する改行は削除されるらしい。

JSX は行の先頭と末尾の空白文字を削除し、また空白行も削除します。タグに隣接する改行も削除され、文字列リテラル内での改行は 1 つの空白文字に置き換えられます。
https://ja.legacy.reactjs.org/docs/jsx-in-depth.html

確かに考えてみれば今までもずっとそうだったかもしれない。HTML では（デフォルトの状態では）段落内の改行やインデントは半角空白として出力されていたと思うので、これは意外だった。

なので、こういう書き方でも十分らしい。

<div>
  <>長いテキスト</>
  <>長いテキスト</>
</div>

またはこれでも良い。色々なパターンが考えられそうだ。

<div>
  長いテキスト{''}
  長いテキスト{''}
</div>

ちなみに、そもそもではあるが、JavaScript 内の文字列リテラルになってしまっても良いなら別にこれでも構わない。

<div>
  {'LONG T&XT (>_<)'}
  {'LONG T&XT (>_<)'}
</div>

{' '} でOK。

<div>
  <a href="#">Hello</a>
  {' '}
  <s>World</s>
</div>