概要

編集

Google Closure は、JavaScriptアプリケーションを効率的に開発するためのツールセットです。コンパイラ、ライブラリ、テンプレートなどが含まれています。

主要コンポーネント

編集

Closure Compiler

編集

JavaScriptコードを最適化・圧縮するコンパイラです。

特徴

編集
  • デッドコードの除去
  • 名前の短縮化
  • インライン展開
  • 型チェック

使用例

編集
// 入力
function hello(name) {
  return 'Hello, ' + name;
}
console.log(hello('World'));

// 出力(ADVANCED_OPTIMIZATIONS時)
console.log("Hello, World");

Closure Library

編集

モジュール化された再利用可能なJavaScriptコードのライブラリです。

主要機能

編集
  • DOM操作
  • イベント処理
  • UI コンポーネント
  • 非同期処理

使用例

編集
goog.require('goog.dom');

const element = goog.dom.createDom('div', 
  {'class': 'example'},
  'Hello, World!'
);
goog.dom.appendChild(document.body, element);

Closure Templates

編集

再利用可能なHTMLテンプレートを作成するためのテンプレートシステムです。

特徴

編集
  • クライアントサイドとサーバーサイドの両方で使用可能
  • 国際化対応
  • XSS対策
  • 型安全性

使用例

編集
{namespace examples}

/**
 * グリーティングを表示するテンプレート
 * @param name 挨拶する相手の名前
 */
{template .hello}
  <div class="greeting">
    Hello, {$name}!
  </div>
{/template}

ベストプラクティス

編集

コード編成

編集
  • 機能ごとにモジュール化
  • 依存関係の明示的な宣言
  • JSDocによるドキュメント化

パフォーマンス最適化

編集
  • ADVANCED_OPTIMIZATIONSの使用
  • 不要なコードの削除
  • モジュールの遅延読み込み

デバッグとテスト

編集
  • Closure Inspectorの活用
  • 単体テストの作成
  • ソースマップの利用

参考文献

編集