このページは Cloud Translation API によって翻訳されました。

Closure Library を使ってみる

この Hello World 演習では、ウェブページで Closure Library を使用するプロセスを紹介します。この演習を行うには、JavaScript、Git クライアント、Node.js にある程度習熟している必要があります。

Hello クロージャ

Closure Library を使い始めるには、次の手順でシンプルなウェブページで Closure JavaScript 関数を使用します。

ステップ 1: Closure Library をダウンロードして設定する

コマンドラインから次のコマンドを実行して、Closure ライブラリを Git リポジトリからダウンロードします。

git clone https://github.com/google/closure-library

このコマンドを実行するには Git クライアントが必要ですが、すでにクライアントがあるかもしれません。コマンドを試します。コマンドが機能しない場合は、Git クライアントをダウンロードしてインストールします。

このコマンドを実行すると、Closure Library コードを含む closure-library という名前のディレクトリが作成されます。

続行する前に、Closure Library リポジトリを初期化する必要があります。この演習の一部は、deps.js という名前のファイルに依存しています。そのため、このファイルは初回チェックアウト時にリポジトリに含まれません。このファイルを生成するには、このディレクトリを入力して npm install を実行します（npm は Node.js にバンドルされています）。

cd closure-library
npm install

ステップ 2: Closure Library を使用する JavaScript ファイルを作成する

次の JavaScript を hello.js というファイルに保存します。このファイルは closure-library ディレクトリの隣に配置します。

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

function sayHi() {
  var newHeader = goog.dom.createDom(goog.dom.TagName.H1, {'style': 'background-color:#EEE'},
    'Hello world!');
  goog.dom.appendChild(document.body, newHeader);
}

ステップ 3: HTML ファイルを作成する

次の HTML を hello.html というファイルに保存します。このファイルは、closure-library ディレクトリと hello.js ファイルの横に配置します。

<html>
  <head>
    <script src="closure-library/closure/goog/base.js"></script>
    <script src="hello.js"></script>
  </head>
  <body onload="sayHi()">
  </body>
</html>

ステップ 4: Closure Library の挨拶をする

ブラウザで HTML ファイルを開きます。「Hello world!」という単語が表示されます。

この例の仕組み

hello.js JavaScript は、定義されない 2 つの関数（goog.dom.createDom() と goog.dom.appendChild()）を使用します。これらの関数はどこから提供されますか。

これらの関数は、ステップ 1 でダウンロードしたファイル Closure ライブラリの closure-library/dom/dom.js ファイルで定義されています。

これらの関数を使用するために、この例では 2 つのことを行っています。

ステップ 2 の JavaScript の先頭に goog.require('goog.dom') ステートメントが含まれています。
ステップ 3 の HTML に Closure Library ブートストラップファイル base.js が含まれています。

base.js ファイルは、関数 goog.require() を定義します。関数呼び出し goog.require('goog.dom') は、goog.dom 名前空間内の関数を定義する JavaScript ファイルと、それらの関数が必要とする Closure Library の他のファイルを読み込みます。

Closure Library は、必要な Closure Library ファイルごとにスクリプトタグをドキュメントに動的に追加して、これらのファイルを読み込みます。たとえば、ステートメント goog.require('goog.dom') によって次のタグがドキュメントに追加されます。path-to-closure は、HTML ファイルから base.js を含むディレクトリへのパスです。

<script src="path-to-closure/dom/dom.js"></script>

通常、1 つの goog.require() ステートメントは Closure Library のコードベースの一部のみを読み込みます。

注: goog.require 関数またはクラスを使用するコードのエントリポイントと同じスクリプトタグに goog.require() ステートメントを追加しないでください。goog.require() 呼び出しは、呼び出しを含むスクリプトタグの後にコードをドキュメントに追加します。たとえば、次のコードは機能します。

<script src="closure-library/closure/goog/base.js"></script>
<script>
  goog.require('goog.dom');
</script>
<script>
  var newHeader = goog.dom.createDom(goog.dom.TagName.H1);
</script>

goog.require() 呼び出しは、var newHeader = goog.dom.createDom(goog.dom.TagName.H1) という行を含む script タグの直前に goog.dom.createDom() のコードを追加します。

一方、次のコードはエラーを生成します。

<script src="closure-library/closure/goog/base.js"></script>
<script>
  // DON'T DO THIS.
  goog.require('goog.dom');
  var newHeader = goog.dom.createDom(goog.dom.TagName.H1);
</script>

この goog.require() 呼び出しにより、goog.dom.createDom() の呼び出しが実行されるまで解釈されない goog.dom.createDom() のコードがスクリプトタグに追加されます。

Closure Library のコードを含める方法は base.js だけではありませんが、最も簡単な方法です。ただし、Closure Library のコードを取得する方法にかかわらず、goog.require() を使用して必要な Closure Library の部分を常に宣言します。

次のステップ

次の例は、必要な Closure ライブラリの部分のみを取得する 1 つの方法を示しています。具体的には、ウェブページに base.js を含めて、その関数 goog.require() を呼び出します。

より高度な使い方には、Closure Compiler を使って、JavaScript を 1 つのファイルにまとめることをおすすめします。