今回も、恥ずかしながら、作業をしていての「失敗」がきっかけの記事になります。
はじめに / やりたいこと
AngularJSに限らないのですが、スクリプトの中にconsole.logやconsole.traceを埋め込んで動作チェックを行う場合があります。
ただし、LiveReloadやbrowserSyncでのプレビュー時や、手元の環境でのみに限ってはデバッグ目的で有効にしておき、本番環境（リリース環境）では、こういったconsole.logは外してしまいたい。
その理由は？
consoleオブジェクトにはいくつか種類がありますが、非推奨のものを使っていたり、ブラウザが対応していないメソッドを利用したりすると、やはりエラーで止まってしまいます。
console.tableを使おうと思ったら、古いブラウザでは対応していなくてエラーになるとか、もうほとんど使われることは無いかと思いますが、IE9の場合はconsole.log(...)がJavaScript中に含まれていると、エラーで止まってしまうことがありました...。
（開発者ツールを起動していると問題ないのですが、そうでない場合はエラーで止まる）
また、実際には不要な出力を挟むことで、処理速度が遅くなるのも良くありません。
おすすめの記事
もし開発がこれからとか、着手したばかりの場合は、こちらの方法が良いのかなと思います。
-
console.log()を使うときのおすすめ記述方法
- console.log()をラップしたメソッドを使って出力
- 本番環境時にはモードを切り替えることで出力を抑止
JavaScriptに限らず、いろんな言語でも同様にできる方法ですね。私はこちらに気がついたのが恥ずかしながらだいぶ進めた後でした...。
使ったもの
さて、上記の方法に気がつかないまま、だいぶ作業を進めてしまったのですが、どうやらブconsole.log関連でエラーになってしまう状況が発生。
ということで、とりあえず調査・確認を目的として、使ってみたのがこちらです。
- strip-debug
- gulp-strip-debug / 上記のモジュールをgulpで使えるようにしたもの
利用方法
ドキュメントにある通りですが、単体でコマンドラインからでも、gulpの処理に挟むことでも利用できます。
$ strip-debug src/app.js > dist/app.js # 単体での場合
とすると、jsファイルからconsoleやalertが除去されます。
gulpでの例はこちら。
gulp.task('default', function () {
return gulp.src('src/app.js')
// ソースのjsをdistにコピーして配置の際に除去
.pipe(stripDebug())
.pipe(gulp.dest('dist'));
});
私の場合は、gulpでの処理時は、このようにしていました。
- 基本の記述はCoffeeScriptで記載
- ローカル環境でのbrowserSyncでのプレビュー時には、Coffee -> JSの変換時点でもconsole.logは除去しない
- デプロイ用にビルドする際は、Coffee -> JSの変換時にはそのままで、難読化&minify（サイズを小さくする）処理の間に、gulp-strip-debugを挟む
おかげさまで、こちらで目的は達成できました！
＃もし、ビルドはCIで行っているのであれば、処理途中でシェル (perlやsed, awkなど)を挟んでconsole.log / alertを除去するといった方法も取れるかと思います。
その他の参考
AngularJSの場合は、ログ出力のため、$logサービスが利用できますが、こちらについては、console.log との違いがありますので、下記が参考になります。
-
AngularJSの$logを使用する際に注意する3つの点
- console.logでは、JavaScriptコンソール画面に、出力が埋め込まれている行数が表示されますが、$logでは記述されているファイルと行数がangular.jsのものになってしまいます。
雑感
デバッグ目的でのconsole.logやalertの取り扱いは、経験を積んでいればわかってくることかと思います。
恥ずかしながら、わたしはそれまでまったくそういった意識がなかったのと、フロントでのデバッグ経験があまりなかったので、実際にブラウザチェックで不具合に遭遇して、ようやく『ああ、こういう目にあうのね...』と判った次第です。