はじめに
Yahoo! UI Library 3（YUI3）は5月5日に3.1.1にバージョンアップしました。3月31日に3.1.0にバージョンアップしたあと、細かいバージョンアップが続いているようです。
今回は、開発時に便利なツールをまとめた、Developer Toolsのモジュールについて説明して行きたいと思います。
対象読者
Webアプリケーションに興味があり、Yahoo! User Interface Libraryに注目している人。HTMLとJavaScriptを使える人を対象にしています。
必要な環境
HTMLとJavaScriptが作成できるエディターとインターネットにつながっているパソコンがあれば、例題の作成、確認ができます。
作成時に便利なツール
デベロッパーツール（Developer Tools）は、ページ作成時に便利な開発用ツールの集合です。
logメッセージを表示するモジュールConsole、動作中のプログラムがどの処理をどういった順序で実行したかを監視するモジュールProfiler、変数の型や値の確認を行うモジュールTestがあります。モジュールTestには、テストする対象以外のオブジェクトに仮に値を設定できるMockObject、テスト結果をレポートできるReporterが備わっています。
logメッセージの表示
開発時テスト用に使用する、logメッセージ表示をサポートするモジュールConsoleの説明を行います。指定した場所に表示することも、ページから独立させて表示することもできます。
入力した文字をコンソールに表示する例題を見て行きましょう。実行画面は図1のようになります。
図1は、実行画面を立ち上げて、info／warning／errorのlogを表示したところです。以下のリスト1を見てください。
<script type="text/javascript">
YUI().use('console', function(Y) { //（1）
basic = new Y.Console({
style: 'separate' //（2）
}).render();
Y.one('#info').on("click", function(e) {
Y.log(Y.one('#infoT').get('value'),'info'); //（3）
});
Y.one('#warn').on("click", function(e) {
Y.log(Y.one('#warnT').get('value'),'warn'); //（4）
});
Y.one('#error').on("click", function(e) {
Y.log(Y.one('#errorT').get('value'),'error'); //（5）
});
});
</script>
</head>
<body class="yui3-skin-sam"> //（6）
<h4>Console</h4>
<div>
<h4>表示メッセージを入力してください。</h4>
<p>
<input type="text" id="infoT" value="info メッセージ">
<button type="button" id="info">ログ info</button>
</p>
<p>
<input type="text" id="warnT" value="warning メッセージ">
<button type="button" id="warn">ログ warning</button>
</p>
<p>
<input type="text" id="errorT" value="error メッセージ">
<button type="button" id="error">ログ error</button>
</p>
</div>
</body>
（1）でモジュールConsoleを指定しています。（2）がlogメッセージを表示する部分の指定です。以下、Y.Console({})の構成を表にしました。
| 構成 | 概要 | デフォルト |
| logLevel | "warm"／"err"／"info"で標準表示指定 | "info" |
| newestOnTop | 以前のlogの上に新しい行を追加 | true |
| consoleLimit | 表示文字の最大値 | 300 |
| height | 表示枠の高さ | "300px" |
| style | 表示スタイル（下表参照） | separate |
| 値 | 概要 |
| inline | 表題表示なしで場所指定 |
| block | 表題に、Log Console 表示で場所指定 |
| separate | ページから独立して右上に表示 |
.render()で表示します。内容の表示には（3）（4）（5）のY.log()を使用します。Y.log()の構文を以下に示します。
Y.log（message,logLevel） message：表示するメッセージ logLevel："warm"／"err"／"info"（省略はinfo）
各logLevel設定時の表示は図1のようになります。logメッセージウィンドウのCSSは（6）bodyにclass="yui3-skin-sam"を指定しています。ページ内に表示したいときは、リスト2のように書きます。
basic = new Y.Console({
style: 'block'
}).render("#demo");
styleにblockかinlineを指定して.render(id名)と書きます。以下はページ内に指定して表示させた図です。body内の<div id="demo"></div>で指定した所に表示しています。
また、Y.Plugin.ConsoleFiltersを指定することで、現在どのlogLevelを表示しているかをコンソール上で指定することもできます（図3、リスト3）。
YUI().use('console-filters', function(Y) {
basic = new Y.Console({
style: 'separate' ,
plugins:[Y.Plugin.ConsoleFilters] //（1）
}).render();
モジュールにconsole-filtersを指定して、（1）のpluginでY.Plugin.ConsoleFiltersを指定します。チェックボックス（info、warn、error）のオン／オフを切り替えることで、表示がフィルタされることを確認してください。
