アジェンダ
JavaScriptやTypeScriptを使用して開発を行う際、コードの書き方がエラーの発生に大きく影響を与えることがあります。
私が遭遇したものでは、CSS-in-JSライブラリ（私の場合では、@emotion/react）を使ってスタイリングを行う際に、改行を適切に使うことがエラー回避に役立つ場合がありました。
本記事では、なぜ改行が重要なのか、簡単にまとめます。
実際の例(CSS-in-JSとテンプレートリテラル)
次のコードは、@emotion/react の css 関数を使用してボタンのスタイルを定義しようとしたものです。
import { css } from "@emotion/react";
<button className={css`${hogeStyle}; ${!hogeCheck ? hoverStyle : ''}; ${fogoFlag ? fogoFlagStyle : ''};`} onClick={onHogeClick}>
{value}
</button>
このコードは一見問題がなさそうに見えますが、JavaScript/TypeScriptのパーサー（コードを解析するプログラム）は、この記述を正しく解釈できず、エラーを引き起こしました。
エラーの発生: colon expected
先ほどのコードで、以下のようなエラーメッセージが発生しました。
colon expected ts-styled-plugin(9999)
これは、JavaScriptやTypeScriptのコードで構文エラーが発生しており、CSS-in-JSの記述において、コロンが期待される場所で欠如しているか、記述が誤っている場合に発生するものになります。
解決法: 改行によるエラー回避
上記のコードでエラーが発生する理由は、テンプレートリテラルの中で複数な式が混在しているため、パーサーがそれを適切に解釈できないからのようです。JavaScript/TypeScriptのパーサーは、コードを解析する際に文法や構文に基づいてコードを分解しますが、複雑なテンプレートリテラルが一行で書かれていると、その境界を正確に認識できなくなるそうです。
この問題を解決するために、次のようにコードを改行して記述します。
<button
className={css`
${hogeStyle};
${!hogeCheck ? hoverStyle : ''};
${fogoFlag ? fogoFlagStyle : ''};
`}
onClick={onHogeClick}
>
{value}
</button>
この改行により、パーサーは各部分をより正確に解析できるようになり、エラーがなくなりました。
改行があることで、CSSの各スタイルルールが明確に区切られ、パーサーがそれを誤解する可能性が減ります。
改行が重要な理由
この教訓から以下のような理由で、改行が重要だと言えます。
1. 構文の明確化
改行により、テンプレートリテラル内の構文が明確に区別されます。これにより、パーサーが各部分を正しく解析できるようになります。
2. 可読性の向上
改行を適切に使用することで、コードの可読性が向上します。複雑な条件分岐やスタイル設定が行われる場合、一行で書かれていると理解しにくくなりますが、改行することで視覚的に把握しやすくなります。
3. エラーの回避
改行を使用することで、特定のエラー（例えば colon expected エラー）を防ぐことができます。これは、コードの構造が明確になり、パーサーが誤解する余地が少なくなるためです。
まとめ
コードを書いていく中で、意図しないエラーが発生した場合、単に改行を入れることで問題が解決することがあります。
特に複雑なテンプレートリテラルを使用している場合は、このテクニックを活用することで、エラーの発生を防ぐことができるかもしれません。