はじめに#
Next.jsアプリケーションをVercelにデプロイしようとしたところ、ローカルでは成功するのにVercelでは失敗するという問題に遭遇しました。エラーメッセージは曖昧で、原因の特定に苦労しました。
この記事では、問題の発見から解決までの過程を共有し、JavaScriptの演算子優先順位について学んだことをまとめます。
問題の症状#
エラーメッセージ#
特徴的な現象#
- ローカルビルドは成功 するが、Vercelでは失敗
- 毎回異なるページ でエラーが発生（22-03、24-03、25-04など）
- エラーの詳細が本番ビルドでは隠される
原因の発見#
複数のファイルを調査する中で、以下のコードパターンを発見しました：
一見問題なさそうに見えますが、ここに演算子優先順位の罠 が潜んでいました。
演算子優先順位とは#
JavaScriptでは、演算子には優先順位があります。数学で「掛け算は足し算より先に計算する」のと同じです。
優先順位の例#
問題のコードを分解#
このコードは以下のように解釈されます：
環境変数が未定義の場合#
'' + undefined は文字列 'undefined' になります。これはJavaScriptの型変換の仕様です。
なぜローカルでは成功したのか#
ローカル環境では環境変数が設定されていたため、問題が発生しませんでした：
Vercel環境では環境変数が未設定だったため、'undefined' という文字列が生成され、後続の処理でエラーが発生していました。
解決方法#
修正前#
修正後#
不要な '' + を削除することで、意図した通りのフォールバック処理になりました。
より明示的な書き方#
括弧を使って優先順位を明示することもできます：
学んだこと#
1. 演算子の優先順位を意識する#
| 演算子 | 優先順位 |
|---|
() | 21（最高） |
+ (文字列連結) | 13 |
| ` | |
?? (Nullish coalescing) | 4 |
2. ローカルとサーバーの環境差異に注意#
- ローカルで動いてもサーバーで動くとは限らない
- 環境変数の有無を常に意識する
- デフォルト値の設定を慎重に行う
3. 型の暗黙的変換に注意#
0
JavaScriptは型変換を自動で行うため、意図しない結果になることがあります。
まとめ#
今回のバグは、一見シンプルなコードに潜む演算子優先順位の問題でした。
1
JavaScriptの演算子優先順位は、普段あまり意識しないかもしれません。しかし、複数の演算子を組み合わせる際には注意が必要です。迷ったら括弧を使って明示的に記述することをお勧めします。
参考リンク#