altjsガチ勢のみなさんこんにちは。 TypeScriptの次期バージョンでジェネリクスが入るぜ!なんて話題になってたりしますが、Closure Compilerのテンプレートまわりも人知れず進化しているので紹介。 なぜかドキュメントにはさっぱり載ってないので、Compilerのソースとテストコードが命です。 メソッドテンプレート 去年サポートされたのがメソッドテンプレート。メソッドや関数のアノテーションで@templateが使えます。 次のサンプルコードはArrayから特定条件を満たす要素を探して返す関数。Arrayの要素の型と条件関数fのthisにバインドされるopt_thisの2つがテンプレートになってます。 /** * @param {Array.<T>} arr * @param {function(this: S, T, number, Array.<T>): boolean
Closure Compilerとは? Closure Compilerは、Googleが提供しているJavaScriptの圧縮・難読化ツールだ。JavaScriptの圧縮・難読化だけであれば他にもYUI Compressorなどのツールが存在するが、Closure CompilerはさらにJavaScriptコードそのものに変更を加えることで最適化が可能という特徴がある。 たとえば以下のようなJavaScriptコードがあるとする。 function hello(name) { alert('Hello, ' + name); } hello('New user'); このコードをClosure Compilerで処理すると、以下のようになる。空白が除去され、変数名が短いものに置き換えられることでサイズが圧縮されている。 function hello(a){alert("Hello, "
連載「JavaScript活用最前線 ── 大規模開発の現場から」第3回目の記事を書きました。 今回はClosure CompilerとClosure Linterの紹介と、コンパイル時の警告をもとにコードチェックツールとして利用する方法を解説しました。 最近は割とClosure Compilerを使ってる人が増えてきたような印象がありますが、コードチェックにまで活用している例はあまり見ないので参考になれば嬉しいです。 これはあくまで僕が経験したケースですが、JavaScriptで実際に複数人で大規模なコードを書いてみると、2〜3万行くらいまでは割と頑張ればなんとかなります。でもそれ以上の規模になってくると、型のぶれが抑えられなくなってきます。型のぶれとは、数値を期待してるとこに数値文字列がきて足し算したら文字列連結になっちゃたとか、配列を期待してたら添え字付きのオブジェクト(!!)が入っ
The latest news from Google on open source releases, major projects, events, and student outreach programs. Leak finder for JavaScript helps web application developers find memory leaks in their JavaScript programs. In garbage-collected languages, such as JavaScript, you cannot have traditional memory leaks by forgetting to free memory: when all references to an object are dropped, the object is g
Closure Library は、Googleが提供する JavaScript ライブラリです。 主な特徴は、 他の追随を許さない API の充実度 純粋なクラスベースのオブジェクト指向 Closure Compiler との組み合わせによる高圧縮性能 以下の Google のサービスで使われており、高信頼性
こんにちは、中川です。 今回は「Google JavaScript Style Guide」を気軽にチェックできるClosure Linterをご紹介したいと思います。 http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml Google JavaScript Style Guideのいいところですが、 規約だけでなく、しっかりしたツールも揃っているところが素晴らしいと思います。 コーディング規約はあったとしても、それに従っているか定期的に簡単にチェックする方法がないと、 いつしか守られないまま開発されてしまうことになりますね。 ※今回の内容はMacにて動作確認を行なっています。
増井さんの作りたいものリストを作ろうというスライドを見て「確かに『いつかやる』リストに入れてるだけじゃ発展しないから、公開しても問題ないものは公開したらいいなぁ」と思ったので早速やってみました。3つ目。 JavaScriptのコードの質を保つためのガードレール JavaScriptは柔らかい言語で、typoとか変数名の変え忘れが実行時までエラーにならない。しかもしれっとundefinedとかになって、そのままHTMLやSVGのpath文字列に埋め込まれてたりしてデバッグにコストが掛かってしまう。人間は間違える生き物だから、間違いをなくすことはできない。だから間違えた時になるべく早く気づけるようにする仕組みが必要だ。 Google Closure CompilerはJavaScriptのソースコードを静的に検証してエラーを報告してくれる。であれば自分がソースコードを編集している時にバックグラ
WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 よく見たら、今週の話題以外の記事はほぼ 3 ヶ月ぶりですね・・・久々となる本日は、 Closure Library の goog.tweak という機能のご紹介です。 Web アプリを開発する際には、皆さんデバッグ用の機能をいろいろと実装することと思います。一部の機能を変更・無効化したり、内部の状態を上書きしたりとかですね。でも、そうした機能の設定はどこに書いてい
rails3以降のWEBアプリケーションにありがちなXSS - hanagemanの日記ではない この記事を読んで、ちょうど最近使っているGoogle Closure Templatesがいい感じだったので紹介します。 コンテキストが異なる/重なるポイントでのエスケープ問題 最近のほとんどのテンプレートエンジンでは、変数埋め込みをデフォルトでHTMLエスケープしてくれます。が、元記事で指摘されているように、それでは正しくないケースがあります。HTML PCDATA以外のコンテキストで文字列を生成したり、複数のコンテキストが重なっている箇所です。 極端な例としてはこんな感じです。 <a href="{$x1}" onclick="alert('{$x2}')">{$x3}</a> <script> var x = '{$x4}'; var y = {$x5}; </script> <styl
Closure TemplateをEclipseで簡単に自動ビルドさせる方法を見つけた。Eclipse上でJavaScriptの開発を行うなら、これが最高のJavaScriptのテンプレートな気がしてきた。 JavaScriptを生成する Closure Templateを使うとテンプレートからJavaScriptが生成されるので、JavaScriptが読めれば、動作を確認することができる。 例えば、 {namespace sample} /** * Sample Template * @param name */ {template .helloWorld} <div> {$name} Hello World. </div> {/template} をコンパイルすると以下のJavaScriptが生成される。 goog.provide('sample'); goog.require('so
Closure Compilerを使用したタイプセーフJavaScriptコーディングについてまとめ。 Closure CompilerはClosure Toolsの一部で、 JavaScriptコードを解析して圧縮と最適化を行うJavaScriptToJavaScriptコンパイラです。 最適化だけでなく、シンタックスや型のチェック機能も提供。 型チェックは、JsDocコメントの形式で記載された型情報をもとに行われます。 型システムは、ECMAScript4の仕様に準拠している模様。 Closure Compilerを使用することで、ECMAScript3の世界でECMAScript4ライクな型システムが使えます。(型情報をコメントに書くので、スマートさには欠けますが・・) Closure Compilerのインストール Closure Compilerのサイトよりzipアーカイブを取得
ローカルのJavaScriptファイルをClosure Compiler ServiceのREST APIでコンパイルできるように 前に作って愛用しているClosure Compiler ServiceのREST APIを叩くPerlスクリプトにローカルのJavaScriptファイルを読み込んでコンパイルに含められる機能を付けた。Closure CompilerのJARファイルを使ってローカルで動かしても良かったんだけど、APIやWeb UIのコメントでオプション設定を書く方法(Greasemonkey的な奴)が気に入っているので@code_pathというパラメーターを追加する形にした。 コンパイルするJavaScriptファイルでは // ==ClosureCompiler== // @code_path foo.js // @code_path bar.js // @code_url
Fresh Coffee Worth Drinking Every cup of our quality artisan coffee starts with locally sourced, hand picked ingredients. Once you try it, our coffee will be a blissful addition to your everyday morning routine - we guarantee it! Our Promise To You When you walk into our shop to start your day, we are dedicated to providing you with friendly service, a welcoming atmosphere, and above all else, exc
って何? † Google が公開しているJavascriptのライブラリ。 Google 内の色んなサービスで利用されている。 他ライブラリとの違いで一番大きいのはファイル纏められたり、コンパイル出来たりするというところ。 ↑ コマンド † 依存関係 python ./lib/closure-library/closure/bin/build/depswriter.py --root_with_prefix="./js ../../../../js" --output_file=./deps.js --root_with_prefix="<js一式が入ってるフォルダ> <base.jsからの相対パス>" 詳細:http://code.google.com/intl/ja-JP/closure/library/docs/depswriter.html コンパイル python ./l
Recent entries closure libraryでplaceholder的なもの uchida 2010-11-13 S式は時代遅れ uchida 2010-10-21 goog.dom.getElementsByTagNameAndClassは配列を返さない uchida 2010-08-17 Closure Libraryのi18n/datetimesymbols.jsのファイルサイズがでかい uchida 2010-08-11 logoでハローワールド uchida 2010-06-27 Recent comments Re:goog.dom.getElementsByTagNameAndClassは配列を返さない Anonymous User 2010-09-07 Re:closure libraryのBrowserEventが微妙 uchida 2010-05-17
Google Closure Libraryを使ってると、基本的にプロトタイプベースのOOPで書かざるを得なくなる訳ですが、その中でClosure Libraryを使ってクラスを書く上で最もベースとなっている"goog.inherits"と"goog.base"は改めてよくできてると思った。 goog.provide('foo.bar.Sample'); goog.require('goog.ui.Component'); /** * @constructor * @extends {goog.ui.Component} */ foo.bar.Sample = function() { goog.base(this); }; goog.inherits(foo.bar.Sample, goog.ui.Component); /** * @override */ foo.bar.Sample
Recent entries closure libraryでplaceholder的なもの uchida 2010-11-13 S式は時代遅れ uchida 2010-10-21 goog.dom.getElementsByTagNameAndClassは配列を返さない uchida 2010-08-17 Closure Libraryのi18n/datetimesymbols.jsのファイルサイズがでかい uchida 2010-08-11 logoでハローワールド uchida 2010-06-27 Recent comments Re:goog.dom.getElementsByTagNameAndClassは配列を返さない Anonymous User 2010-09-07 Re:closure libraryのBrowserEventが微妙 uchida 2010-05-17
jQuery から Closure Library への移行を決意 jQuery は部分的に Ajax を取り入れるのには最適ですが、フル Ajax な Web アプリを開発するのは超大変。目的の UI コンポーネントを探すのも一苦労です。 その点、Closure Library は Google の Web サービスで使われている UI コンポーネントを一通り提供しているし、依存性管理やイベント機能やテスト支援機能など、大きめの Web アプリを開発するのに便利な機能が揃っています。 ただ、導入がちょっとばかり面倒なので、手順をメモしておきます。 まずは下準備 Closure Library で開発を始めるまえに、必要なツールをインストールします。 Subversion クライアントをインストール 最新の Closure Library を使うには Subversion が必要です。 開
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く