Yahoo! UI Library3（YUI3）のDeveloper Tools
Yahoo! UI Library Ver.3 を使ってみよう（6）
ダウンロード サンプルファイル (4.1 KB)
YUI3（Yahoo! UI Library 3）は処理をモジュールという形で提供しています。前回は、開発時によく使用されるユーティリティ内のモジュールについて紹介しました。今回は、開発時に便利なツールをまとめた、Developer Toolsのモジュールについて説明して行きたいと思います。
はじめに
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）のオン／オフを切り替えることで、表示がフィルタされることを確認してください。
この記事は参考になりましたか？
- Yahoo! UI Library Ver.3 を使ってみよう連載記事一覧
-
- Yahoo! UI Library 3（YUI3）プラグイン
- Yahoo! UI Library 3（YUI3）のウィジェット
- Yahoo! UI Library3（YUI3）のDeveloper Tools
- この記事の著者
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、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
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
