AngularJS TIPS
ログをコンソールに出力するには？（$log）
AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示／非表示の切り替え方法も紹介する。
ブラウザー標準の開発者ツール（例えばDevTools）にログを出力するには、$logサービスを利用します。誤解のしようもないサービスなので、さっそく、以下に具体的な例を見てみます。以下は、ボタンクリック時に、決められた文字列をログ出力するサンプルです。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<button ng-click="onclick()">クリック</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', '$log', function($scope, $log) {
// ボタンクリック時にログを出力
$scope.onclick = function() {
$log.debug('デバッグ');
$log.error('エラー');
$log.info('情報');
$log.log('一般ログ');
$log.warn('警告');
};
}]);
</script>
</body>
</html>
|
$logサービスで利用できるメソッドは、以下の通りです。
| メソッド | 概要 |
|---|---|
| debug | デバッグメッセージ |
| error | エラーメッセージ |
| warn | 警告メッセージ |
| info | 一般的な情報 |
| log | 一般ログ |
メソッドに応じて、カラー／アイコンの異なるログが出力されます。ブラウザーに付属の一般的な開発者ツールでは、ログの種類に応じて出力をフィルターできますので、目的や状況によって適切なメソッドを使い分けることで、ログの量が増えた場合にも確認が容易になります。次の画面は、エラーログだけに表示をフィルターしている例です。
デバッグログの表示／非表示を切り替える
debugメソッドによって出力されるデバッグメッセージは、$logProviderプロバイダーを利用することで表示／非表示を切り替えることもできます。以下は、先ほどのリスト1を修正して、デバッグメッセージを非表示にした例です。
|
angular.module('myApp', [])
.config(['$logProvider', function($logProvider) {
// デバッグメッセージを非表示に
$logProvider.debugEnabled(false);
}])
.controller('MyController', ['$scope', '$log', function($scope, $log) {
$scope.onclick = function() {
$log.debug('デバッグ');
$log.error('エラー');
$log.info('情報');
$log.log('一般ログ');
$log.warn('警告');
};
}]);
|
デバッグメッセージを非表示にするには、$logProviderプロバイダーのdebugEnabledメソッドにfalseを設定するだけです。果たして、結果を確認すると、debugメソッドによる出力だけがスキップされていることが確認できます。
$logProviderプロバイダーによる設定は、$logサービスが有効になる前に終えていなければなりませんので、configメソッド配下で呼び出している点にも注目です。configメソッドは、サービスのインスタンス化に先立って実行されるメソッドです。
API：$log カテゴリ：ng（コアモジュール） > service（サービス）
API：$logProvider カテゴリ：ng（コアモジュール） > provider（プロバイダー）
※以下では、本稿の前後を合わせて5回分（第32回～第36回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
33. ng-repeat要素でさまざまな繰り返しを表現するには？（ng-repeat）
ng-repeatディレクティブの応用的な使い方として、「重複した値を含んだ配列」「ハッシュ（連想配列）」「複数の要素セット」の内容を順に処理して出力する方法を説明。
34. 【現在、表示中】≫ ログをコンソールに出力するには？（$log）
AngularJSで開発者ツールのコンソールにログを出力する方法を説明。また、ログの種類や、デバッグログの表示／非表示の切り替え方法も紹介する。
35. サーバーサイドと非同期通信するには？（$http）
AngularJSでサーバーサイドのWeb APIと非同期通信する方法を説明。また、ログの種類や、ショートカットメソッドについても紹介する。
36. サーバーサイドとHTTP POSTで非同期通信するには？（$http）
AngularJSでHTTP POSTで非同期通信する方法を説明。また、送信データをJSONではなくjQuery形式にする方法や、PHPでJSONデータをデコードする方法も紹介する。
