Yahoo! UI Library3（YUI3）のDeveloper Tools

Yahoo! UI Library Ver.3 を使ってみよう（6）

実行を監視

　動作中のプログラムがどの処理をどういった順序で実行したかを監視するモジュールProfilerの説明を行います。監視したい関数などを、Y.Profiler.registerFunction()でプロファイラーに指定します。指定した関数は、Y.Profiler.unregisterFunction()で解放されるまで、実行回数や実行時間などが監視され、ユーザーは必要なときにデータを見ることができます。

　関数を作成し、実行回数などを表示する例題を考えてみましょう。以下、例題起動時の画面です。

図4：例題起動時画面

　グローバルな関数とオブジェクト変数を作成し、ボタンで実行させ、回数を表示します。リスト4を見てください。

［リスト4］Profilerの例題（DT_Profiler.html）

<script type="text/javascript">
var n;
function hello(){
   	alert("こんにちは！");
}
 
var myname = {
   	getName : function(){
       	return "山田花子";
   	}
};

YUI().use('profiler','node', function(Y) {

	//プロファイルに設定
    Y.Profiler.registerFunction("hello",window);	//（1）
    Y.Profiler.registerFunction("myname.getName");	//（2）
 	//処理実行
	Y.one('#button1').on("click",  function(e) {
		hello();
	});
	Y.one('#button2').on("click",  function(e) {
		n=myname.getName();
		alert(n);
	});
 
	//取り出し
	Y.one('#button3').on("click",  function(e) {
    	var callCount = Y.Profiler.getCallCount("myname.getName");//（3）
    	var report = Y.Profiler.getReport("hello");		//（4）
		
		alert(callCount);
		alert(report.calls);
	});
	//開放
	Y.one('#button4').on("click",  function(e) {
	    Y.Profiler.unregisterFunction("hello");
	    Y.Profiler.unregisterFunction("myname.getName");
	});
	
});
</script>
</head>
<body>
<h4>Profiler</h4>
    <input type="button" id="button1" value="hello実行"><br>
    <input type="button" id="button2" value="名前セット"><br>
    <input type="button" id="button3" value="実行回数"><br>
    <input type="button" id="button4" value="終了"><br>
</body>

　はじめにhello関数とmyname変数を作成しています。（1）（2）の構文は以下のようになります。

［構文］Y.Profiler.registerFunction

Y.Profiler.registerFunction(name , owner )
	name：監視したいオブジェクト（関数や変数）を指定
	owner:関数の場合、windowを指定、グローバル変数の場合は省略可

　（3）（4）で監視データを取り出しています。監視データの種類は以下の表のようになります。

Y.Profilerのメソッド

メソッド	概要
getAverage(name)	実行平均時間（ミリ秒）
getCallCount(name)	実行回数
getMax(name)	実行時間の最大値（ミリ秒）
getMin(name)	実行時間の最小値（ミリ秒）
getReport(name)	すべての情報をハッシュ形式で返す

getReport(name)が返す値

値	概要
calls	実行回数
avg	実行平均時間（ミリ秒）
max	実行時間の最大値（ミリ秒）
min	実行時間の最小値（ミリ秒）

　（5）（6）は設定データを解放しています。解放された後は監視されません。