JavaScript（jQuery）を圧縮（minify）したら動作しない問題の原因

JavaScript（jQuery）を圧縮したら動作しない問題の原因

私がJavaScriptの記述にあまり慣れていないこともあり、JavaScriptやjQueryを使ったコードを圧縮（minify：minファイル化）したときに動作しなくなることがよくありました。

原因を調べていくとたいていはいつも同じで、原因は『;』の付け忘れです。うぅっ！恥ずかしい。

圧縮前のJavaScriptファイルでは各命令文の行末に『;』がついていなくても実行時に自動保管されるため大きな問題にはなりません。しかしファイルを一旦圧縮してしまうとすべての行末の改行が取り払われてしまうため自動保管がきかなくなりエラーにつながっています。

圧縮（minify：minファイル化）したら動作しない問題の解決方法

この問題の場合解決策は言うまでもなく命令文の行末にしっかりと『;』をつけることです。実際に私が何度かやらかした『;』の抜け落ちパターンを参考までに紹介します。ご自分のコードを見直すときのヒントにしてみてください。

1番多かったパターン

var hoge = function () {

    // 処理内容

};

// ↑ ここの;抜けていた

2番目に多かったパターン

function hogeFunc(){

    // 処理内容

};

// ↑ ここの;抜けていた

私が多くやらかしていたのは主にこの2パターンです。まずは、この2箇所を見直して圧縮し直してみてはいかがでしょうか。

私は自分の問題を解決するときにいろいろ調べていると『;』ではなく『改行コード』が原因でうまくいっていない人も見受けました。もしすべての『;』を確認した上でまだ問題が発生しているようであれば改行コードを疑ってみると良いかもしれません。

今日のdot

JavaScriptやjQueryを使って記述したコードの命令文の行末には『;』が必要です。これを忘れるとコード圧縮（minify：minファイル化）時に動作しなくなるので注意しましょう。