🤮

【初心者】Uglifierとは

2025/01/30に公開

状況

  • 記事を一括で作成するために新たにJavaScriptファイルを作成
  • 動作確認やテストは通過したものの、deploy時にエラー発生
  • 予想外だったため慌ててしまった。今後の注意も含めて記録

Uglifierについて

Uglifierとは?

  • Uglifierは、JavaScriptコードを最適化・圧縮するためのツール
  • 主な機能は:
  1. コードの圧縮
  • 空白や改行の削除
  • 変数名の短縮化
  • コメントの削除
  1. 最適化
  • 不要なコードの削除
  • コードの結合
  • 実行速度の向上

例えば以下のようなコードを:

function calculateTotal(price, quantity) {
    // 合計金額を計算
    var total = price * quantity;
    return total;
}

このように圧縮する:

function c(p,q){return p*q}

エラーの内容

本番環境へのデプロイ中に rake assets:precompile の処理が失敗している
エラーログの内容を見ると、Uglifier::Error: Unexpected character ''` というエラーが発生

(省略)

このエラーは、バッククォート (`) を使ったテンプレートリテラル が原因で発生とのこと

エラーの発生原因

  1. Uglifier が ES6+ の構文をサポートしていない

    • デプロイ環境の uglifierES6 のテンプレートリテラル (バッククォート `) を適切に処理できていない
    • Uglifier はデフォルトでは ES5 のみ をサポートしており、ES6 以降の構文が含まれるとエラーになる
  2. JavaScript コード内で ES6 の構文を使用している

    • 本番環境では rake assets:precompile の際に Uglifier を使って JavaScript を圧縮・最適化する
    • Uglifier の設定が ES6 に対応していない場合、テンプレートリテラルlet/const などの ES6 の構文があるとエラーになる

解決方法

方法 1: Uglifier の設定を変更する

config/environments/production.rbconfig.assets.js_compressor の設定を変更します。

  1. config/environments/production.rb を開く
  2. 以下のコードを修正する
config.assets.js_compressor = Uglifier.new(harmony: true)

harmony: true を指定することで、Uglifier が ES6+ の構文をサポートできるようになる

  1. 変更を反映
git add config/environments/production.rb
git commit -m "Enable ES6 support in Uglifier"
git push

方法 2: ES6 の構文を ES5 に書き換える

エラーが発生している バッククォート () を使ったテンプレートリテラル** を **従来の文字列結合 (+`) に修正 する

(省略)

最適な対応

  • config.assets.js_compressor = Uglifier.new(harmony: true) に変更するのが 一番簡単な修正方法 です。
  • ES6 の構文を ES5 に書き換える のは、ES6 の機能を使いたい場合は非推奨

今後の注意点

  1. アセット関連
  • 新しいJavaScript機能を使用する際は、必ずプリコンパイルをテスト
  • 必要に応じてharmony: trueオプションの追加を検討
  1. セキュリティ
  • 機密情報(APIキーなど)は環境変数で管理
  • エラー表示は必要最小限に
  1. パフォーマンス
  • キャッシュの設定を適切に管理
  • 不要なログ出力を制限
  1. モニタリング
  • ログレベルの適切な設定
  • エラー通知の確実な設定

これらの設定を適切に管理することで、安全で安定した本番環境を維持できる

所見

  • 最初見た時、何じゃそりゃ。こんなの予想できないわ。。と思ったが、
    テスト環境でもプリコンパイルテストができると理解。そのテストはしてなかったことが行動としての原因と判明。防げるエラーだったと反省。
  • 今後はJavaScriptファイル修正後はプリコンパイルテストも忘れないようにしたい

Discussion