Closure Library を使用してアプリを構築する

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

このチュートリアルでは、シンプルなアプリケーションの作成を通じて、Closure Library を使った実践演習を行います。このチュートリアルでは、JavaScript の使用経験があり、Closure Library を使ってみるの演習をすでに完了している必要があります。

このチュートリアルで使用する 2 つのソースファイルをダウンロードするには、次のリンクを使用してください。

これらのファイルは、closure-library ディレクトリと同じディレクトリに保存します。

このチュートリアルでは、これらのソースファイルの各部分について順を追って説明します。提供されている notepad.html ファイルは、ダウンロードして Closure ライブラリのコピーにリンクするまで機能しません(下記を参照)。

Notes アプリケーション

このチュートリアルでは、メモを表示するシンプルなアプリを作成するプロセスについて説明します。次に例を示します。

  • アプリケーションの名前空間を作成し、
  • Closure Library の goog.dom.createDom() 関数を使用して、リストのドキュメント オブジェクト モデル(DOM)構造を作成します。
  • メモリストの Closure Library クラスを使用して、ユーザーがリスト内の項目を開いたり閉じたりできるようにします。

goog.provide() で Namespace を作成する

異なるソースから JavaScript ライブラリを使用している場合は、一部の JavaScript ファイルでは、コードで使用するグローバル変数または関数名が再定義される可能性があります。このような名前の競合のリスクを最小限に抑えるには、Closure Library の goog.provide() 関数を使用して、コードの名前空間を作成します。

たとえば、メモ アプリケーションでは、Note() コンストラクタ関数で作成された Note オブジェクトを使用します。他の JavaScript ファイルで Note というグローバル関数または変数が定義されている場合、そのコンストラクタは上書きされる可能性があります。この例では、次の goog.provide の呼び出しを使用して、このコンストラクタの名前空間を作成します。

goog.provide('tutorial.notepad.Note');

goog.provide() 関数は、その引数によって示される JavaScript オブジェクト構造が存在することを保証します。パス式に各オブジェクト プロパティが存在するかどうかをチェックし、存在しない場合は初期化します。上記の関数呼び出しは、次と同等です。

tutorial = tutorial || {};
tutorial.notepad = tutorial.notepad || {};
tutorial.notepad.Note = tutorial.notepad.Note || {};

goog.provide() は、プロパティがまだ存在しない場合にのみ初期化されるため、プロパティが上書きされることはありません。

goog.provide() ステートメントには、依存関係解決スクリプト calcdeps.py で使用できるという利点があります。calcdeps.py の使用方法については、依存関係の計算スクリプトの使用をご覧ください。

tutorial.notepad.Note オブジェクト構造が存在していると、この例ではコンストラクタ関数が Note プロパティに割り当てられます。

tutorial.notepad.Note = function(title, content, noteContainer) {
  this.title = title;
  this.content = content;
  this.parent = noteContainer;
};

Note コンストラクタが、goog.provide() で作成された tutorial.notepad 名前空間に配置されました。

goog.dom.createDom() を使用した DOM 構造の作成

この例では、HTML ドキュメントに Note を表示するために、Note クラスに次のメソッドを指定しています。

tutorial.notepad.Note.prototype.makeNoteDom = function() {
  // Create DOM structure to represent the note.
  this.headerElement = goog.dom.createDom(goog.dom.TagName.DIV,
      {'style': 'background-color:#EEE'}, this.title);
  this.contentElement = goog.dom.createDom(goog.dom.TagName.DIV, null, this.content);
  var newNote = goog.dom.createDom(goog.dom.TagName.DIV, null,
      this.headerElement, this.contentElement);

  // Add the note's DOM structure to the document.
  goog.dom.appendChild(this.parent, newNote);
};

このメソッドは Closure Library の関数 goog.dom.createDom() を使用します。 次の goog.require() ステートメントには、この関数のコードが含まれています。

goog.require('goog.dom');

コンストラクタ以外の goog.dom.createDom() などの関数を含めるには、関数を含む名前空間を goog.require(この場合は goog.dom)に渡します。クラスが必要な場合を除き、goog.require() ステートメントに関数の名前を含める必要はありません。Closure Library クラスの使用では、このケースでの goog.require() ステートメントを示しています。

関数 goog.dom.createDom() は、新しい DOM 要素を作成します。たとえば、makeNoteDom() からの次のステートメントは、新しい div 要素を作成します。

  this.headerElement = goog.dom.createDom(goog.dom.TagName.DIV,
      {'style': 'background-color:#EEE'}, this.title);

この createDom() 呼び出しの 2 番目の引数には、要素に追加する属性を指定します。3 番目の引数は、要素に追加する要素(この場合は文字列)を指定します。2 番目と 3 番目の引数は省略可能です。

makeNoteDom() メソッドは、単一の Note 引数を作成するだけです。この例には、メモのリストを作成するために、メモデータの配列を受け取って各アイテムの Note オブジェクトをインスタンス化し、NotemakeNoteDom() メソッドを呼び出す makeNotes() 関数が含まれています。

tutorial.notepad.makeNotes = function(data, noteContainer) {
  var notes = [];
  for (var i = 0; i < data.length; i++) {
    var note =
      new tutorial.notepad.Note(data[i].title, data[i].content, noteContainer);
    notes.push(note);
    note.makeNoteDom();
  }
  return notes;
};

Closure Library クラスの使用

この例では、わずか 2 行のコードで、各メモに Zippy を記載しています。Zippy は、コンテンツを非表示にする、または表示するために折りたたみまたは展開できる要素です。

まず、Zippy クラスの新しい required() ステートメントを追加します。

goog.require('goog.dom.TagName');
goog.require('goog.ui.Zippy');

次に、makeNoteDom メソッドの末尾に次の行を追加します。

tutorial.notepad.Note.prototype.makeNoteDom = function() {
  // Create DOM structure to represent the note.
  this.headerElement = goog.dom.createDom(goog.dom.TagName.DIV,
      {'style': 'background-color:#EEE'}, this.title);
  this.contentElement = goog.dom.createDom(goog.dom.TagName.DIV, null, this.content);
  var newNote = goog.dom.createDom(goog.dom.TagName.DIV, null,
      this.headerElement, this.contentElement);

  // Add the note's DOM structure to the document.
  goog.dom.appendChild(this.parent, newNote);

  // NEW LINE:
  return new goog.ui.Zippy(this.headerElement, this.contentElement);
};

コンストラクタ呼び出し new goog.ui.Zippy(this.headerElement, this.contentElement) は、ユーザーが headerElement をクリックしたときに contentElement の表示を切り替える切り替え機能をメモ要素に追加します。

HTML ドキュメントでメモ帳を使用する

このサンプル アプリケーションの JavaScript コード全体は次のとおりです。

goog.provide('tutorial.notepad');
goog.provide('tutorial.notepad.Note');

goog.require('goog.dom');
goog.require('goog.ui.Zippy');

/**
 * Iterates over a list of note data objects, creates a Note instance
 * for each one, and tells the instance to build its DOM structure.
 */
tutorial.notepad.makeNotes = function(data, noteContainer) {
  var notes = [];
  for (var i = 0; i < data.length; i++) {
    var note =
      new tutorial.notepad.Note(data[i].title, data[i].content, noteContainer);
    notes.push(note);
    note.makeNoteDom();
  }
  return notes;
};

/**
 * Manages the data and interface for a single note.
 */
tutorial.notepad.Note = function(title, content, noteContainer) {
  this.title = title;
  this.content = content;
  this.parent = noteContainer;
};

/**
 * Creates the DOM structure for the note and adds it to the document.
 */
tutorial.notepad.Note.prototype.makeNoteDom = function() {
  // Create DOM structure to represent the note.
  this.headerElement = goog.dom.createDom(goog.dom.TagName.DIV,
      {'style': 'background-color:#EEE'}, this.title);
  this.contentElement = goog.dom.createDom(goog.dom.TagName.DIV, null, this.content);
  var newNote = goog.dom.createDom(goog.dom.TagName.DIV, null,
      this.headerElement, this.contentElement);

  // Add the note's DOM structure to the document.
  goog.dom.appendChild(this.parent, newNote);
  return new goog.ui.Zippy(this.headerElement, this.contentElement);
};

このコードを取得するには、notepad.js ファイルをダウンロードします(クリックしてダウンロードします)。

次の HTML は、このメモ帳コードを使用してウェブページにメモリストを表示します。

<html>
<head>
<title>Notepad</title>
<script src="closure-library/closure/goog/base.js"></script>
<script src="notepad.js"></script>
</head>
<body>

<div id="notes">
</div>

<script>
function main() {
  var noteData = [
    {'title': 'Note 1', 'content': 'Content of Note 1'},
    {'title': 'Note 2', 'content': 'Content of Note 2'}];

  var noteListElement = document.getElementById('notes');
  var notes = tutorial.notepad.makeNotes(noteData, noteListElement);
}
main();
</script>
</body>
</html>

このページを取得するには、notepad.html ファイルをダウンロードします(クリックしてダウンロードします)。

このページ

  • Closure Library ファイル base.jsscript タグが含まれています。このタグの src 属性は、HTML ファイルからライブラリの base.js ファイルのパスです。
  • これには、メモ帳コードを含むファイルの script タグが含まれます。
  • makeNotes() の呼び出しでメモのリストを初期化するスクリプトがページに含まれています。makeNotes() 関数は 2 つの引数を取ります。1 つはオブジェクト用の配列(それぞれがメモのデータを含む)で、もう 1 つはメモリスト用の DOM 構造を構築する DOM 要素です。