SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

Yahoo! UI Library3(YUI3)のDeveloper Tools

Yahoo! UI Library Ver.3 を使ってみよう(6)

実行を監視

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

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

図4:例題起動時画面
図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)は設定データを解放しています。解放された後は監視されません。

次のページ
型や値の確認

この記事は参考になりましたか?

Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧

もっと読む

この記事の著者

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

WINGSプロジェクト 横塚 利津子(ヨコツカ リツコ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/5239 2010/06/30 14:27

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー