10月

29

再入門JavaScript　-目次-

Filed Under (article, document) by on 29-10-2008

こんにちは、ひろきのだいちです。

JavaScriptの再発見からさらに２年がたち、モダンなWeb開発では欠かせない存在となったJavaScript。さまざまなライブラリが乱立し、言語としての基礎を得ないままでもある程度のアプリケーション開発ができるようになった現在。

再入門JavaScriptと題して、中上級者を目指すために入門書を超えてじっくりとJavaScriptを学びなおすことが重要だと考え、ここを中心にまとめていきたいと思います。

ここで掲載するトピックは本当の基礎の基礎は他の媒体にゆだねた上で、「仕事でつかえる」レベルのコードを記述するために重要で比較的高度なものを取り扱うつもりです。

また、ここでいう仕事で使えるとは”多人数で開発を進める”ことを前提とした開発環境を想定しており、他サイトのAPIの使い方やライブラリの使用方法といった枝葉のリファレンスではありません。

また、ここに書かれていることはたいてい僕のメモなので、責任はもちませんｗ

再入門JavaScript　-フロントエンドエンジニア資料集

再入門JavaScript　-JavaScriptでの中大規模開発

  • 再入門JavaScript　-　コード成長過程
  • 再入門JavaScript　-　MarkupエンジニアとScriptエンジニア、サーバサイドエンジニアとの協調
  • 再入門JavaScript　-　グレースフルデグラデーション
  • 再入門JavaScript　-　MVCモデル
  • 再入門JavaScript　-  クライアントサイドMVC
  • 再入門JavaScript　-  デザインパターン

再入門JavaScript -名前空間とスコープ

再入門JavaScript　-オブジェクト指向と関数オブジェクト

  • 再入門JavaScript　-　オブジェクトとプロトタイプチェーン
  • 再入門JavaScript　-　継承・ダックタイピング
  • 再入門JavaScript　-　引数アサーションと動的ヴァリデーション
  • 再入門JavaScript　-　動的バインディング
  • 再入門JavaScript　-　ビルドインオブジェクトのプロトタイプ拡張

再入門JavaScript　-DOM

  • 再入門JavaScript　-　イベントとバブリング
  • 再入門JavaScript　-　XHTML拡張
  • 再入門JavaScript　-　CSSの扱い

再入門JavaScript　-DOM上のDSL

  • 再入門JavaScript　- CSS Selector
  • 再入門JavaScript　- XPath
  • 再入門JavaScript　- E4X

再入門JavaScript　-テストとドキュメンテーション

  • 再入門JavaScript　-　UnitTest
  • 再入門JavaScript　-  Seleniumによる結合テスト
  • 再入門JavaScript　-  JsDocによるドキュメンテーション

再入門JavaScript　-パフォーマンス/高速化

  • 再入門JavaScript　-　プロファイリング
  • 再入門JavaScript　-　DOM描画フェーズ/タイマー
  • 再入門JavaScript　-　事前コンパイルを利用した高速化
  • 再入門JavaScript　-　VMレベルでの動作を意識する
  • 再入門JavaScript　-　メモリリークとガーベジコレクタ
  • 再入門JavaScript　-　defer属性/script後置とminifier
  • 再入門JavaScript　-　先読みと
  • 再入門JavaScript　-　Google Gears

再入門JavaScript　-通信

  • 再入門JavaScript　-　クロスドメイン制約
  • 再入門JavaScript　-　同一ドメイン通信
  • 再入門JavaScript　-　location.hashによるヒストリ管理
  • 再入門JavaScript　-　通信の効率化とサーバサイド連携
  • 再入門JavaScript　-　クロスドメイン通信方法と注意点
0 Comments
Read More
10月

29

再入門JavaScript -　名前空間篇

Filed Under (Uncategorized) by on 29-10-2008

おこんばんわ。ひろきのだいちです。
今日は、再入門JavaScriptと題して、Perlなどのサーバサイドの言語になれている方に向けて、
JavaScriptにおける大規模開発の勘所として重要な名前空間の実現方法の解説と、
それらを簡単に提供するライブラリJS.Namespaceを作成しましたので、そのドキュメントを織り交ぜてご紹介します。

JavaScriptを仕事で利用される方や、ライブラリのコピペのような書き方から一歩進みたい方に向けて記述しています。

Read the rest of this entry »

1 Comment
Read More
10月

29

再入門JavaScript -　動的ローディング

Filed Under (Uncategorized) by on 29-10-2008

動的ロード

サーバサイドにおいては、フレームワークなどの汎用的に使われるライブラリやプラグイン機構などでしか目にすることが
あまりないモジュールの動的ロードですが、クライアントサイドのようにユーザインタフェースと直結したプログラミング環境においては
動的ローディングは重要な技術です。

Perlにおいてコンパイルフェーズ以外でモジュールのロードを行いたい場合、UNIVERSAL requireを用いることが多いです。

PLAIN TEXT
PERL:
  1. use UNIVERSAL qw(require);
  2. sub get_class{
  3.    my $package = shift;
  4.    $package->require;
  5. }

JavaScriptにおいて動的ローディングを行うためには2つの方法があります。
ひとつはDOM操作によってscriptタグを埋め込む方法で
もうひとつはXML.HTTPRequestによって取得したTextをEvalする方法です。

DOM操作による動的ロード

PLAIN TEXT
JAVASCRIPT:
  1. $$('head')[0].appendChild(new Element('script',{src:'/static/js/dynamic/load.js'}));

XHRによる動的ロード

PLAIN TEXT
JAVASCRIPT:
  1. new Ajax.Request('/static/js/dynamic/load.js',{
  2. evalScript:true,
  3. onSuccess:function(e){
  4.   // 
  5. },
  6. onException:function(e){
  7.   //
  8. }
  9. });

ライブラリによる動的ロード

動的ロードの縛りとして、

* 確実に終了と例外を補足できるXHRのみでのダイナミックロードに限定する
* urlでなく完全限定名を引数としてそれをファイルパスに自動変換した場所のファイルを取得する
* 内部でそのモジュールが作成されている

をもうけることで安全な動的ロードを提供する。

PLAIN TEXT
JAVASCRIPT:
  1. JS.Namespace.dynamic('XXX.YYY.ZZZ',function(aaa){
  2.     aaa();
  3. });

1 Comment
Read More
10月

29

再入門JavaScript – 名前空間上の関数をExport

Filed Under (Uncategorized) by on 29-10-2008

名前空間上の関数を利用する

Perlの場合、Exporterなどの仕組みを使えば

PLAIN TEXT
PERL:
  1. use XXX::YYY::ZZZ qw(aaa bbb);
  2.  
  3. aaa();

のように記述するだけで、Current Packageにそれぞれの関数を貼り付けることができます。

あるいは

PLAIN TEXT
PERL:
  1. use XXX::YYY::ZZZ;
  2.  
  3. &XXX::YYY::ZZZ::aaa();

のように、完全限定名(Full Qualified Name)でアクセスすることでもその名前空間上のメソッドを利用することができます。

jsの場合では完全限定名を利用すれば同じように利用することができます。

PLAIN TEXT
JAVASCRIPT:
  1. XXX.YYY.ZZZ.aaa();

一方、Exporterのように現在のスコープに貼り付けるにはwithブロックを使います。

PLAIN TEXT
JAVASCRIPT:
  1. (function(){with(XXX.YYY.ZZZ){
  2.    aaa();
  3. }})();

しかし、withの動作をしっかり把握できない場合にwithを多用することはjavascriptのプログラム作法からは
推奨されません。

そのかわりに一時的にその名前空間をテンポラリな変数に別名をつけて利用することもできます。

PLAIN TEXT
JAVASCRIPT:
  1. (function(){
  2.    var ns = XXX.YYY.ZZZ;
  3.    ns.aaa();
  4. })();
  5.  
  6. (function(){
  7.    this.aaa();
  8. }).apply(XXX.YYY.ZZZ);

どちらも、問題なく動作します。

JS.Namespaceライブラリではこれらの利便性を考えて

PLAIN TEXT
JAVASCRIPT:
  1. JS.Namespace.using('XXX.YYY.ZZZ',function(){
  2.    this.aaa();
  3. });
  4.  
  5. var ns = JS.Namespace.using('XXX.YYY.ZZZ');
  6. ns.aaa();

などの記述を可能にします。

またネームスペース自体に追記がなく、use XXX qw(hoge)のようにただ関数やオブジェクトを利用するだけの場合

PLAIN TEXT
JAVASCRIPT:
  1. var ns = JS.Namespace.using('XXX.YYY.ZZZ',$w('aaa bbb'));
  2. ns.aaa();
  3. ns.test = "test"; // XXX.YYY.ZZZは汚染されない
  4.  
  5. //クロージャの引数として宣言したオブジェクトを引き渡す
  6. JS.Namespace.using('XXX.YYY.ZZZ',function(aaa,bbb){
  7.     aaa();
  8. });

このように記述することができます。

jsには予約語としてnamespaceが定義されているけどブラウザじゃ使えませんし、Rhinoなどの一部の処理系を除いて、意味を成さないんですが、var namespace = hogehoge;みたいな記述は避けてください。

0 Comments
Read More
10月

29

再入門JavaScript – 名前空間

Filed Under (Uncategorized) by on 29-10-2008

ネームスペース

ネームスペースとはwikipedia先生いわくこんな感じです。

名前の集合を分割することで衝突の可能性を低減しつつ参照を容易にする概念である。

Perlであれば

PLAIN TEXT
PERL:
  1. package XXX::YYY::ZZZ;
  2.  
  3. sub aaa{
  4.  
  5. }
  6. sub bbb{
  7.  
  8. }

とすれば、aaa,bbbはシンボリックテーブルXXX::YYY::ZZZ::において
XXX::YYY::ZZZ::aaa,XXX::YYY::ZZZ::bbbとして記録されグローバルに参照することができます。

なので仮に

PLAIN TEXT
PERL:
  1. package AAA;
  2.  
  3. sub aaa{
  4.  
  5. }
  6. sub bbb{
  7.  
  8. }

というモジュールをロードしても、名前は衝突することがありません。

JavaScriptの場合、シンボリックテーブルのようにstrictプラグマで保護されているようなグローバルハッシュは存在しないので
window以下のグローバルオブジェクトを使い名前空間を構築するほかありません。

PLAIN TEXT
JAVASCRIPT:
  1. (function(){
  2.     window.XXX = XXX || {};
  3.     window.XXX.YYY = XXX.YYY || {};
  4.     window.XXX.YYY.ZZZ = XXX.YYY.ZZZ || {};
  5.     window.XXX.YYY.ZZZ.aaa = function(){};
  6.     window.XXX.YYY.ZZZ.bbb = function(){};
  7. })();

しかし、このように記述していては冗長すぎるので、

PLAIN TEXT
JAVASCRIPT:
  1. var XXX = XXX || {};
  2. XXX.YYY = XXX.YYY || {};
  3. XXX.YYY.ZZZ = XXX.YYY.ZZZ || {};
  4.  
  5. (function(){
  6.     this.aaa = function(){};
  7.     this.bbb = function(){};
  8. }).apply(XXX.YYY.ZZZ);

のように書くことで、クロージャ内のスコープにおいて、thisがXXX.YYY.ZZZとなり、冗長な記述を避けることができます。

また、Prototype.jsのObject.extendを利用すれば

PLAIN TEXT
JAVASCRIPT:
  1. (function(){
  2.     Object.extend(this,{
  3.         aaa:export_aaa,
  4.         bbb:export_bbb
  5.     })
  6.     function export_aaa(){};
  7.     function export_bbb(){};
  8.    
  9. }).apply(XXX.YYY.ZZZ);

明示的にレキシカルスコープ中のどのメソッドを名前空間オブジェクトにバインドするかを記述することができます。

一方、

PLAIN TEXT
JAVASCRIPT:
  1. var XXX = XXX || {};
  2. XXX.YYY = XXX.YYY || {};
  3. XXX.YYY.ZZZ = XXX.YYY.ZZZ || {};

この部分の記述の冗長さは付きまとってしまうので、

これら名前空間に関する処理をひとつにまとめるメソッドをJS.Namespace

PLAIN TEXT
JAVASCRIPT:
  1. var ns =JS.Namespace.createNamespace('XXX.YYY.ZZZ');
  2. ns.aaa=function(){};
  3. ns.bbb=function(){};
  4.  
  5. or
  6.  
  7. JS.Namespace.createNamespace('XXX.YYY.ZZZ',function(){
  8.     Object.extend(this,{
  9.         aaa:export_aaa,
  10.         bbb:export_bbb
  11.     })
  12.     function export_aaa(){};
  13.     function export_bbb(){};
  14. });

のように記述することができます。

createNamespaceは新しいネームスペースを定義することを明示している関数です。
なので、すでにそのネームスペース/オブジェクトが存在している場合エラーを出力します。

これはファイル名とパッケージの結びつきの小さいjsにおいて、

* 名前空間を定義する場面
* その空間に関数/クラスを追加する場面
* その名前空間上の関数を利用する場面

というのをある程度明示しておくことで、開発上の混乱を避けるためです。

では次に名前空間に定義された関数を利用する場面での記述を考えて見ましょう。

1 Comment
Read More
10月

28

再入門JavaScript – モジュールの依存関係

Filed Under (Uncategorized) by on 28-10-2008

依存関係のチェック

AAAというモジュールを利用して、BBBというモジュールを作成したいケースを考えてみると

PLAIN TEXT
PERL:
  1. use AAA;

Perlでは上記のように書けば、動的にincludeパスを探索し、モジュールのロードと依存関係の解決を
してくれますが、Jsではそんな便利な仕組みは存在しません。

また、HTTPリクエスト数の問題などからファイル名とモジュール名とを完全に同期させることも
非常に難しい課題です。

だからといって、jsのモジュールに

PLAIN TEXT
JAVASCRIPT:
  1. /*
  2. * require BBB
  3. *
  4. */

と書いたところで、このコメントはプログラムから解釈されないのですぐにエラーを出してくれませんし、
コメント自体の正しさを保障してくれません。

なので、

PLAIN TEXT
JAVASCRIPT:
  1. if( !BBB )throw('ERROR!');

のようにコード中に依存関係を明示的に書くようにすれば、そのモジュールがロードされて無い場合すぐに気付くことができます。

JS.Namespaceライブラリでは

PLAIN TEXT
JAVASCRIPT:
  1. JS.Namespace.depends('BBB','AAA.WWW');

このように記述することで、依存関係のチェックをコード中に埋め込むことができます。

1 Comment
Read More
10月

28

再入門JavaScript – Scopeを作る

Filed Under (Uncategorized) by on 28-10-2008

スコープ

javascriptにはPerlのようにレキシカルブロックが明示的に提供されていません。
なので、

PLAIN TEXT
JAVASCRIPT:
  1. var i = 0;
  2.  
  3. {
  4.     var i = i;
  5.     i++;
  6.     i++;
  7.     console.log(i);　// 2であってほしい
  8. }
  9. console.log(i); // 0であってほしい

このようにはかけません。
もしレキシカルにスコープを生成したい場合にはクロージャを使います。

PLAIN TEXT
JAVASCRIPT:
  1. var i = 0;
  2.  
  3. (function(){
  4.     var i = window.i;
  5.     i++;i++;
  6.     console.log(i);
  7. })();
  8. console.log(i);

上記のプログラムはfunction(){}として、無名のクロージャを生成してそのまま実行しています。

ちなみにPerlのレキシカルスコープと少し異なるのは関数の宣言に関してです。

PLAIN TEXT
PERL:
  1. # in perl
  2. package XXX;
  3.  
  4. {
  5.   my $val = undef;
  6.   sub get_val{
  7.      return $val;
  8.   }
  9. }

この場合、get_valはCurrent Packageである、XXXのシンボリックテーブルに記憶されますが

PLAIN TEXT
JAVASCRIPT:
  1. (function(){
  2.     var val = undefined;
  3.     function getValue(){
  4.         return val
  5.     }
  6.  
  7. })();
  8.  
  9. getValue(); // 関数が見つからない。

javascriptの場合、packageの概念は無いので、レキシカルスコープにはりつきます。

PLAIN TEXT
JAVASCRIPT:
  1. var XXX = {};
  2. (function(){
  3.     var val = 11;
  4.     function getValue(){
  5.         return val
  6.     }
  7.     XXX.getValue = getValue;
  8.  
  9. })();
  10.  
  11. XXX.getValue();

レキシカルスコープ上の関数を外部から参照可能にするためにはグローバルから参照可能な
オブジェクトに対して明示的に貼り付けてやる必要があります。

また、
JavaScriptの場合、ファイルベースのレキシカルスコープは存在しないので、
複数のJSの読み込まれているページの場合、それぞれのJSは明示的に
レキシカルスコープを作成する必要があります。

2 Comments
Read More
10月

15

クロスブラウザチックなonbeforeunload。

Filed Under (Uncategorized) by on 15-10-2008

どうも。ひろきのです。

Prototype.jsといえばクロスブラウザでDOMの足回りを提供してくれているすばらしいフレームワークですが、ちょっとばかり不満があります。

Event.observeで、あたえたeventHandlerの戻り値を完全に無視しているところです。
具体的には

PLAIN TEXT
JAVASCRIPT:
  1. function createWrapper(element, eventName, handler) {
  2.     var id = getEventID(element);
  3.     var c = getWrappersForEventName(id, eventName);
  4.     if (c.pluck("handler").include(handler)) return false;
  5.  
  6.     var wrapper = function(event) {
  7.       if (!Event || !Event.extend ||
  8.         (event.eventName && event.eventName != eventName))
  9.           return false;
  10.       Event.extend(event);
  11.       handler.call(element, event) //ここでハンドラの戻り値を返してない。
  12.     };
  13.  
  14.     wrapper.handler = handler;
  15.     c.push(wrapper);
  16.     return wrapper;
  17.   }

このぐらい書き換えろとか思うかもしれませんがこれらの重要なライブラリについて元自体をいじってしまうのが難しい環境もあるかもしれません。

そもそもEventObjectのevt.returnValueを使えばいいじゃんとかありますが、WebKitのevt.returnValueの挙動が他のブラウザとちがい、実際にハンドラからreturnしないと受け付けないというものがあるため、コレ自体を完全にクロスブラウザにするのは難しかったりします。(evtオブジェクトのreturnValueを上書きできないのかも。。)

そもそもOperaにはonbeforeunloadが存在しませんし・・・

このハンドラからの戻り値をダイレクトに使用しなければならない場面はそう多くはありませんが、最近のWebアプリケーションでは一般的になっている編集中にページ遷移しようとするとでるメッセージ（Gmailなどで書きかけで移動するとでてくるやつ）を実現するためにはこの機能が必須になります。

ちなみにOperaの場合はステートが保存されているので、
戻るボタンを押せば編集中の内容が復帰します。

PLAIN TEXT
JAVASCRIPT:
  1. Event.observe(window,'beforeunload',function(e){
  2.     return e.returnValue = 'このままページを移動すると編集中の内容は保存されませんがよろしいですか？';
  3. });

のようにしたい場合、現行のPrototype.jsでは上手くいきません。

そこで、Webkitでbeforeunloadの場合に限り、Event.observeをフックすることを考えました。

以下コードです。

実用上は、Webkitの場合にはaddEventListenerを用いればよいのですが、透過的に行えたほうが自然といえば自然なので。

同様のテクニックで、Prototype.jsのカスタムイベントをよりリッチにすることができますが、それについてはまた今度。

PLAIN TEXT
JAVASCRIPT:
  1. if(Prototype.Browser.WebKit)(function(){
  2.    
  3.     Event._observe = Event.observe;
  4.     Event.observe=function(element,name,func){
  5.         if(/beforeunload/.test(name)){
  6.             element.addEventListener('beforeunload',function(evt){
  7.                 return func.bind(element)(evt);
  8.             });
  9.         }else{
  10.             Event._observe(element,name,func);
  11.         }
  12.     }
  13.     Object.extend(window, {
  14.         observe: Event.observe.methodize()
  15.     });
  16. })();

0 Comments
Read More
10月

13

IEの腐ったEventを直す方法

Filed Under (article) by on 13-10-2008

こんにちは。ひろきのだいちです。

今日はブラウザ界のやんちゃボーイ　Internet ExplorerのEvent実行順序を調整する方法を考えたんでつらつら書きます。

ただ、すべてのDOMイベントを他のブラウザと互換を取るのはむずかしいので、prototype.js（1.6 or later）のdom:loadedイベントとwindow のloadイベントの実行順序を整列させます。

その後、単一のイベント間の実行順序がattach順にならないというIEのバグをDOM準拠のAPIを追加することで修正します。

Read the rest of this entry »

0 Comments
Read More
9月

23

Javascript でHTML::Template

Filed Under (Uncategorized) by on 23-09-2008

どうも、ひろきのだいちです。こんにちは。

昨今のWeb開発ではAjaxやDHTMLを用いた大規模なプロジェクトが増えてきているようです。
大掛かりにDOMを書き換える際にまいどまいど、文字列連結やらなにやらを繰り返していたら
デザイナー/コーダとの連携などがむずかしく製作者以外、何をしているんだかわかりにくいコードができあがってしまいます。

一方、サーバサイド言語では多くのテンプレートライブラリやフレームワークが多数存在していて
phpやerubyのように埋め込みで言語を記述することができたりPerlであればTemplateToolkitやHTML::Templateを用いることでviewを分離することができたりとなにかと便利です。

TTのjavascript実装はJemplateとしてすでに存在しているようなので
HTMLTemplateをjavascriptで実装してみました。
Read the rest of this entry »

1 Comment
Read More
« Older Entries
Newer Entries »

tag cloud