現状

これまで見よう見まねで書いてきた「普通の」Javascriptコードに較べて、コンストラクタやクラスの定義におけるコードは勝手が違って手こずっています。

オブジェクト指向をマスターしようと思い立ち、コンストラクタ関数を理解し、さてprototypeオブジェクトに取り込もうと意気込んだまでは良かったのです。

そしてprototypeをマスターする方法を探している内に、prototype.jsの存在を知り、これを理解する過程を通じてprototypeオブジェクトの理解ができると考え、prototype.jsの解読に取組み始めました。

prototypeオブジェクトがどの様な機能を有しているのか、と言う点については直ぐにすっきり理解できたのですが、いざ自分でオブジェクト指向なコードを書こうとすると、なかなか先に進まないのです。進めないのです。

何故すんなりオブジェクト指向なコードが書けないのか？

これまでは常にウェブ頁内の様々な要素を対象としてコードを書いてきました。そこで登場するthisは要素を指すキーワードでしかなかったから、thisが何を指すのか悩まされることはなかったのです。また常にウェブページ内の要素が対象だったために、抽象的な概念であるクラスなるものを考える必要もありませんでした。オブジェクトを作成してからそれをウェブページ内の特定の要素に結びつける苦労もありませんでした。

こうした経緯から、オブジェクト指向なコードとは無縁だったわけで、「全くの新境地に踏み込んだことに戸惑っている」わけです。

しかし、いつ迄も戸惑っているだけでは先に進めないし、ウェブ頁と無縁なコードをいくら書き進めても、実質的に意味がありません。そもそもウェブ頁を色々コントロールするためにJavascriptを使おうとしているのですから。

そんな訳で、引き続き学習を進める以外に、現状を打開する道はない──ということになるのですが・・・。

• prototype 関連エントリイ一覧 in this Blog

thisとは何か？

直前のエントリイでいきなりprototype.jsを題材にしてthisを理解しようとしました。しかし、それは方法として間違っていたようです。

クラスというJavascriptには存在しない概念を、恰も存在するかのように設定するのがprototype.jsだということを、真正面から受け止めていなかったからです。prototype.jsで定義されるvar Classも明らかにオブジェクトですが、それはnew演算子で生成されるオブジェクトとは異なるレベルの、特異なオブジェクトと理解すべきなのでしょう。コンストラクタ関数の定義で定立される左辺のvar ○○と同等のオブジェクトがClassのようですから...。

そこで方向を変えて、改めてthisについて考えてみることにしました。

或る書籍（「まるごとJavaScript & Ajax ! Vol.1」）に「thisは（或る）関数オブジェクトを呼び出した時に、その関数オブジェクトを格納したオブジェクトを指す」という説明がありました。様々な書籍でthisの解説を探ってみましたが、この定義が最も分かりやすい表現でした。（Javascript第3版（日本語訳）の説明は非常に分かりにくいものでした。「コンストラクタは（new演算子によって）新たに生成された空のオブジェクトへの参照を特殊なthisキーワードの値として受け取る」）

つまり、「或る関数が呼び出された場合において、当該関数内に記述されているthisは、当該関数を格納していたオブジェクトを参照する」と表記するのが適切かと思います。正しく理解される日本語は難しいものですね。

• prototype関連エントリイ一覧 in this Blog

遅々として進まないprototypeの学習──キーワード：thisが難しい

遅々として進まない原因はJavascript半可通なるが故です。これまではあちこちのサイトや本でゲットしたコードを、このブログ用に微修正してコードを書いてきました。つまりオブジェクト指向風のコード記述は一切行わず、必要に応じて関数を作り、イベントハンドラーはその殆どをHTML要素内に記述してきました。

その際、当初はキーワード「this」の扱いに苦慮しましたが、html要素内にイベントハンドラーを記述する古典的な方法を採用する限り、「this＝当該イベントハンドラーを属性として有する当該要素」であり、それ以外の意味はないので、一度慣れてしまえばthisの利用は容易なことでした。

ところが、コンストラクタ関数とprototype Objectを活用してコードを書こうとすると、途端にこの「this」が重くのし掛かってきました。

コンストラクタ関数やprototype オブジェクトでは「this」を効果的に利用しない限りコードは殆ど記述出来ないので、thisについて半可通なままで先に進めないことを痛感したのです。

因みに prototype.js では、随所に沢山の「this」が登場します。

prototype.jsの根幹を為す Class Object の定義において早くも this が２回登場するし、thisを拘束するために便利な bindメソッドを利用しようと思えば、当該定義においては関数自身を指すthisについて、しっかり理解しない限り思うようにはいきません。

簡単なコードからthisを理解する

実際にコードを分析することが好ましいので、prototype.jsの学習を兼ねて、そこからthisキーワードが含まれているコードを抜粋して、考察を加えることにします。まずは何はさておき、次のClass定義から。

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

いきなり大変難しい構文です。Classと言う名のオブジェクトを、createなるプロパティ名と或る関数をプロパティ値として設定し、しかもその関数の返値として別の関数自体を設定しています。

ここにthisは２回使われています。これらのthisが何を意味するのか理解したいと思います。

まず最初のthisです。───未完───

関連エントリイリスト in this Blog

• 何と16日のユニーク閲覧者は555！
• 大晦日の閲覧者が237人！過去最高の記録

それは記念すべきことです

昨年末に200台を突破、つい先日500台を突破したと思ったら、18日は何と1,100越えを記録しました。このユニークビューの急増現象はどうしてなのか、それをアクセス解析を通じて調査してみました。

その結果、あるサイト（カトゆー家断絶）からの訪問者が激増したためであることが判明しました。

カトゆー家断絶はカウンター数8千万overのサイト、このサイトからのアクセスだけで、18日に600over/日を記録していたのです。

そして上記サイトを訪問させていただいて、標準のブラウザを徹底してSleipnir2に設定するエントリイにアクセスが集中しているらしい、と言うところまで突き止めました。

その後19日のアクセスは400台にダウンしましたので、ユニークビュー1000オーバーは「真夏（ではないなぁ（苦笑））の夜の夢」となったようです。しかし、カウント数を得る為にエントリイを投稿している訳ではないので、結果を目的とする必要はないから、一喜一憂するほどのことではないでしょう。

何はともあれ多くの方に閲覧してもらえることは嬉しいこと！

そうなのです。ある意味ではマニアックなこんな拙ブログでも毎日数百人の方々が閲覧してくださっている、ということはそれだけで励みになります。拙文でも、見ず知らずの方々に目を通してもらえるということは嬉しいことです。

そんな訳で1000カウントオーバー記念として、このエントリイを書いた次第です。

• prototype.js 関連エントリイ一覧 in this Blog

それは衝撃の連続だった（苦笑）

3277行（prototype.js Ver1.5.1.1）の全行を見て痛感したのです。そこにはこれまで我流で頭を痛めてきて、一定の解決に至ったものの、決して美しくなく、また合理的でもなかったMyコードの各種課題の全て───イベントObject関連の各種コード、要素属性取得・マウス位置取得コード、配列に係るコード等々───が、極めて包括的・根源的なコードで記述され、解決されているということを！

これをベースとして、複数のLibraryが登場し、Javascript Librariesの中で圧倒的な人気を博しているのも頷けます。All about等で話題となっている後発のYUIとの比較なども興味深いところです。

更に、こうした Library全盛の今日にあって、この8月に日本語訳が出版される、『Javascript第5版』（原著は昨年8月に出版済みらしい）に興味津々です。Javascript1.5に準拠した詳細な解説を今から心待ちにしてます。なお、第３版和訳では、おかしな日本語が散見されましたが、今度はそのようなことがないと良い。のですが・・。

全面的にMyCodeの修正をしていきたい

prototype.jsを学びつつ、その神髄を理解し、MyCodeを全面的に見直してみようかと思い始めています。

MyCodeの全体をprototype.jsの全面採用Codeに書き換える道もありますが、しばらくは部分的な改変を重ね、一歩ずつ修正していくことにしようと思います。「千里の道も・・・」ですから。

• prototype 関連エントリイ一覧 in this Blog

prototype.jsでClass.create()はどう使われているか？

3277行に及ぶprototype.js(ver1.5.1.1)の中でClass.create()は16回使われています。次の16個のClassオブジェクトが定義されています。

• PeriodicalExecuter、
 
• var Template、
 
• ObjectRange、
 
• Ajax.Request、


• Ajax.Updater、
 
• Ajax.PeriodicalUpdater、
 
• Insertion.Before、


• Insertion.Top、
 
• Insertion.Bottom、
 
• Insertion.After、


• Element.ClassNames、
• var Selector、
 
• Form.Element.Observer、


• Form.Observer、
 
• Form.Element.EventObserver、
 
• Form.EventObserver

これらの16個のオブジェクトが何故Classとして定義されなければならないのか、他のオブジェクトとどのような差異をもたせたいためにClassとして定義されたのか、それが分からないのです。

オブジェクト指向で、敢えて問題を複雑にするメリットは何？

var myObj = {};

たったこれだけでObjectは生成出来てしまうのに、どうしてClass定義が必要なのでしょうか？

あるいはコンストラクタ関数を

var myObj = function (a, b){this.a=a; this.b=b;}

または、

function myObj(a,b){this.a=a; this.b=b;}

のように定義すれば、これでObjectの初期化が可能なのに、どうしてClassを定義する必要があるのでしょう？

以上の極めて初期的な疑問をまず解決したいと考えています。

最初のボタンを掛け違えてしまうと、prototype.js の理解は決して深まらないでしょうし、今までのJavascriptコード利用がそうであったように、取りあえず動けばよい、とばかりに半可通のままでそれを使いたくないからです。

Javascript２ ではClassが導入されるらしい

待望されているJavascript2がいつ登場し、例えばFireFoxに搭載されるのか知らないのですが、近々登場するであろうJavascript2ではClass概念が導入されるようです。そうだとするとClassを使いこなせるようになっておいた方が、後々Javascript利用上の応用度、自由度は間違いなく高まると思われます。

そこでまず、オブジェクト指向なJavascriptについて記述されているWebサイトを探してみました。

オブジェクト指向Javascript関連WWW

1. JavaScriptによるオブジェクト指向プログラミング
2. Javascriptを洗練させるprototype.js
3. Core JavaScript 1.5 Guide:Class-Based vs. Prototype-Based Languages - MDC
4. Core JavaScript 1.5 Guide - MDC

上記のサイトを概観しても、Class定義を敢えて行う必要性についてはピンと来ません。Class 定義の必要性が十分理解できないのです。

上記Webサイトの2番において、Class定義のメリットについてさらっと触れられていますが、あっさり過ぎて、敢えてClass定義を利用する意義や重要性の認識は深まりません。

まだまだ道は遠い！

▲ToTop

関連エントリイリスト in this Blog

• 大晦日の閲覧者が237人！過去最高の記録

7月16日のユニーク閲覧者数が何と555！

数日前から閲覧者数が増加していることは把握していました。しかしこれまでの数ヶ月間ずっと200台だったユニーク閲覧者数が突然一昨日あたりから急増し始め、ついに昨日7/16には555人となったのです。

トータルアクセス数では914回と一千の大台に近づいてしまいました。

こんな拙ブログの何がそれ程の閲覧者を獲得しているのか？　アクセス解析を見ても決して特定のエントリイに集中してアクセスされている訳ではないのです。

7月の約２週間の検索ワードを調べてみると、相変わらず「Yahoo解約」関連検索結果としての閲覧がダントツで多く、これにDRM解除が続いています。今盛んにエントリイしているJavascript関連の検索語による訪問は決して多くはありません。最も多いoffsetParentで検索して閲覧してくれた方でも、7月中のユニーク訪問者数累計＝4,164人（参考：6月-6015人、5月-5199人、4/22〜30で1147人）の内、わずか26人に過ぎません。

つまり今集中して書いているJavascript関連のエントリイが注目を浴びている訳ではなく、以前に書いたいくつかの話題が関心を集めているようです。

ちょっと残念ですが，それでも沢山の方々に閲覧されていると言う事実は、大変嬉しいことです。

そして大いに励みになることでもあります。引き続き頑張りたい、との決意を新たにしている今日この頃です。

閲覧者の皆さん、ありがとうございます。

• prototype 関連エントリイ一覧 in this Blog

Ajax Libraryを概観し、いくつかの書籍を読みました

そこで思い付き、到達した学習方法をまとめておきたいと思います。

何度も書いているとおり、Libraryをそのままincludeして利活用する方法はとりたくないのです。そうすれば少なくとも Libraryの利用方法は分かるでしょうし、それだけでも一定の価値と意味はあります。しかし、それではJavascript本体のObject指向的なコード記述方法、つまりJavascriptそのものを十分には理解し得ないと思うのです。

愚劣ではあっても、丁度鉛筆でなぞる奥の細道のように、たとえ一字一句転写することになったとしても、オブジェクト指向的なJavascriptコードを自分で納得して書いてみるべきだと考えるのです。

まず Event Object の拡張を行ってみたい

イベントObjectは、Javascript本体に装備されているObjectの中でも大変分かりにくいものです。おそらく、今でも私は十分にそれを理解仕切れてはいません。

だからこそ、Event Object（以下EO）への理解をきちんとしたものにするためにも、EOの拡張にチャレンジしてみる必要があるし、もしかしたらprototype.jsで実装されているEOを更に拡張することが出来るかもしれません。

prototype.jsにおけるEvent Objectの更なる拡張について
例えば、prototype.jsにおけるEOの拡張は、まだ勧告に至っていないW3CのDOM Level 3で規定されるはずのキーボードイベント監視や、イベント発生元要素の取得、左クリックされたか否か、マウス位置取得、デフォルトアクションの停止、リスナーの停止、Listenされているかいないか、リスナー履歴（Cache）取得などです。

ここで欠落しているのはイベント発生先要素の取得、及び当該イベントのリスナーが設定されている要素の取得などです。

▲ToTop

次には訪問履歴（どのサイトから来てくれたのか）の取得です

アクセス解析を一々見なくても、document.referrerプロパティを活用して、訪問前サイトのリストを作成してみたい。単に今のこのブログに装備されていないから、オブジェクト指向Javascriptの練習台とし、取り組んでみたいというのが動機ですが、リファラー履歴をエントリイに取り込むということは、当該エントリイが表示される際に取得できるdocument.referrerの値を累積していくことであり、同じサイトから来てくれた場合のリストアップをどうするか、自サイト内のindex頁からの訪問も取得するのか、不定期に閲覧されるその都度、取得されるreferrer値をどのようにして累積するか、等の問題があり、結構挑戦し甲斐のある課題なのではないか、と考えています。まだ分からないこともありますが、チャレンジしてみようと思います。

幸いなことに、最近はユニーク訪問者数が200カウント台から300、日によっては400オーバーに乗ることもありますが、どんなルートから訪問してくれたのか、知っておくことは意義があると思うのです。

また、その情報が訪問者にも見えることにも意義があるはずです。リファラーはある意味で重要な関連情報ですから。

このリファラー履歴を各エントリイの末尾に掲載出来たらいいな、と考えた訳です。もしかしたらFC2のプラグインツールで既にあるかも知れないが、敢えて自前で作ってみようと思います。

関連エントリイリスト in this Blog

• TigraMenu───関話及題：『Javascript第3版』

経緯

これまでの1年間以上は『Javascript第３版』と『Javascript ＆ DHTMLクックブック』（共にO'Reilly社刊）の２冊を、Javascript学習上のいわば Bibleとして利・活用してきました。

しかし、prototypeの学習を始めた結果、これらの書籍の価値そのものへの絶大な信頼は低下することはないものの、それらの内容が今日ではないことに改めて気がついたのです。

前書は200年12月に日本語版初版がだされたままで、手元にあるのも初版ですし、後書も今から３年以上前の2004年1月に日本語版初版が刊行されています。共に翻訳書ですから原書はもっと早い時期に刊行されている訳で、「秒進分歩」のIT界においては、共に大昔の書籍と言わざるを得ません。

しかも、今を時めくAjaxは、これらの書籍が刊行された後に一世を風靡し始めました。Ajaxは2005年2月18日にJesse James Garrettにより名付けられたものですし、数あるLibraryの中で最も利用され、かつ先駆けとなったprototype.jsが登場したのも2005年でした。

むしろ強調すべきことは、これらの名著２冊の内容が今日的でないことに、今更気がつくこと自体が問題なのでしょう。つまり、私の「時代」へのキャッチアップが余りに遅れていた、と言わざるを得ません。

この度購入した４冊の書籍

上記２冊のBibleに埋没している状況から、今日的水準にキャッチアップしようとしている今、どうしてもネット検索から得られる情報だけでは不十分で、整理された一定のまとまった情報がどうしても必要です。つまり書籍が必要です。

そこで何冊かの本を急遽購入して乱読してみました。ここではそれらの書籍リストをまとめておきます。

• DOMに関するまとまった書籍は読んだことがなかったので、この際改めて体系的に学習しようと思い立ち、購入しました。期待に違わない内容に満足しています。

• おそらく何かの雑誌に連載された記事を集約した書籍と思われますが、体系的な学習のためよりも How To 本としての利用が向いていると思います。

• 掲載ライブラリ数14（勿論prototype.jsもYahoo!UIも取り上げられている。）は圧巻です。こんなことやあんなことが出来る、と言うことを知るには最適ですが、初心者向きではなく理解している人の実用書と言うところでしょう。

• 左記のリファランスを購入したにも拘わらず購入したのは、単に例題の列挙ではなくその説明があると思ったためでした。しかし、ほんの障りだけの内容でちょっとがっかりしています。

なお、これらの書籍を購入するに当たり、Amazon.comの「中身検索」が大変役立ちました。ネット内で立ち読みが出来るようになったのは大歓迎です。Googleによる「立ち読み」も、著作権問題を孕みながら、つい最近日本語版が利用できるようになったようですが、立ち読みできる書籍がまだまだ限定されているのが残念です。（立ち読み可能書籍数は今後急速に拡大するでしょうけど・・・）

• prototype関連エントリイ一覧 in this Blog

今までのJavascriptへの取組み方を変えるべきだ！

ブログ作成上で遭遇した個々の課題に対応して、あちこちのサイトを調べながら独自にコードを書いていく───この3年弱の私のJavascript学習は、こうして遅々たる歩みを歩んできました。

しかし、Ajaxライブラリイズをざっと概観し、2冊の書籍を購入し、prototype.jsに関するいくつかのサイトを探訪して気がついたのです。それらのJavascript Librariesは、悉く包括的で、汎用的なコード体系で構成されており、これまでの私のJavascript学習方法のままではいけない、と。そして、もっと先端的情報に接し、かつそれをキャッチアッップしつつ、自己の糧とし、同時に活用するようにしなければならない、と思い始めたのです。

これまでの私のJavascript学習は、いわば「時代に数年遅れて」歩んでいたのでした。

しかし、様々なlibrariesを利用するだけでは、真にマスターすることは出来ない

必要なLibraryをIncludeして、如何に活用するか───それを考えることも楽しいと思う。しかし、それではJavascriptの神髄を理解することにはならないし、それはJavascriptそのものを理解する最善の道でもないだろう、と思います。

だからといって、折角ある素晴らしいLibraryを活用しないのも、おそらくは愚行だと思われます。

そこで、例えばあるLibraryをIncludeして利用しつつ、独自にprototypeオブジェクトを作成していったらどうだろう、と思い始めました。

利活用すると同時にオリジナルのprototypeコードも書く。あるいは比較的小さなLibraryを「分析解剖」しながら、prototypeの深奥を深めていく。こんな方法で学習を進めようかと考え始めているのです。

• prototype関連エントリイ一覧 in this Blog

関連サイトリスト（2007/7/15-）

• Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications
• prototype.js v1.5.0 の使い方
• prototype.js リファレンス
• JavaScriptによるオブジェクト指向プログラミング
• Javascriptを洗練させるprototype.js
• Backstage of theater.js
• Don't use the Prototype 1.5.1 !! (hPod)
• 【コラム】そろそろきっちりJavaScript (7) prototype.jsを読む(1) | エンタープライズ | マイコミジャーナル
• prototype.js逆引きサンプル集 - JavaScriptist
• prototype.jsを使ってみる 1[to-R]
• prototype.jsを10KBにする方法 : 亜細亜ノ蛾 - Weblog
• naoyaのはてなダイアリー - prototype.js でデザインパターン - Iterator
• ハタさんのブログ : 私は如何にしてJavascriptのprototypeを身につけたか。
• prototype.jsベースの画像切抜き用JavaScriptライブラリ:phpspot開発日誌
• prototype (Object.prototype プロパティ)
• [を] prototype.js の getElementsByClassName の挙動

• prototype関連エントリイ一覧 in this Blog

作業のパースペクティブ───学習方法の改訂

つい数日前迄は次のように考えていました。

───絶対配置div要素objectを用意し、それを自在にコントロールするコードを書くことを目的として、そのprototype Objectに次々とメソッドやプロパティを追加する。それを他者のライブラリを転用するのではなくゼロから独自に行う───。

しかし、それは全く無謀な学習方法であることを直ぐに悟らされました。歯が立たないのです。prototype Objectは簡単に胸襟を開いてくれるほど、単純でも底の浅いものでもありませんでした。

もっとも、それはprototype Objectの概念や利用方法が難解だからではなく、まだまだ私がJavascriptの半可通であることに由来しているのですが...。

次に、もうすぐ第５版が刊行されるらしい『Javascript第３版』に掲載されている、DynElをベースとして学習を進めようとしたことも、大きな過ちでした。何故ならば、それは対象とするbrowserが余りに古すぎたのです。NN4とIE4ですから。それらは今や"太古の"遺物でしかありません。

そして第三に、何よりも致命的だったのは、今をときめく各種のAjax libraryこそ、学習素材として最高であることに、もっと早く気がつくべきでした。

どのライブラリを学習素材にするか？

07/1/23 午前9時現在、"Open Space"によれば、次の19種類のライブラリが知られているようです。

Ajax library 一覧

Behaviour、bytefx、glayer.js、GreyBox、Highslide、JKL、jQuery、Lightbox、LITBox、MiniAjax、moo.fx、prototype.js、PrototypeWindowClass、reflection、Rico、script.aculo.us、SimpleJS、ThickBox、YahooUI

※　上記リストは Ajax (JavaScript) Library Reference (Ajaxライブラリリファレンス) から入手しました。

このリスト外にも・・・

dojo.js,wrapScroll等々多数あるようですが、現時点ではそれ以上知りません。

さて、これらのライブラリの中からどれを学習素材として選択するのか、それが問題です。まさか全部に目を通すことは出来ないし、また不必要でしょう。そこでそれぞれの機能を概観した上で、総合性や関連サイトの多さからprototype.jsを選択することにしました。YUIも魅力的ですが、prototype.jsの歴史的意義に敬意を表したいと思います。

株式会社ガイアックスの 天野 仁史 氏は次のように書いてます。（[ThinkIT] 第1回：Prototype.jsを使う準備など。）

• 現在のJavaScriptの発展はPrototype.jsがあってこそだ、と言っても過言ではない・・。
• Prototype.jsは、JavaScriptの最高のツールであり、最高の教材でもあるのです。あなたも、Prototype.jsを「使い」Prototype.jsを「読む」ことによってJavaScriptハッカーになりませんか？（2007/3/14）

ライブラリを使いこなすことよりも、その学習を通じてJavascriptへの理解を深めたい

各種ライブラリを使いこなす術に関するサイトは沢山存在しているようです。だからそれらを利用して、目的を達するための使い方をマスターすればよい、との利用方法もあるでしょう。

しかしそれではJavascriptへの理解は十分に深まらないでしょう。理解し納得してから、必要ならばライブラリを利用する───そんな風に学習を重ねたいと思っています。

とはいえ、挫折してしまって「何よりもまず使うことが先決」との結論に頓挫しない保証はありませんが・・・(^_^;)

このエントリイはprototype Object コードを書いて取りあえず何かできないか、私でも可能なことはないか、との思いから書いたものです。

このため、不十分な点が多々あり、今では、愚劣にもいきなり我流でprototype Objectのコードを書き、それを公開してしまったことを「後悔」しています。

それでも１つの愚かしい記念として意味があるので、このままにしておこう、と思います。（苦笑）

一気に移動する 初期の場所に戻す 右下に50pxずらす 左上に50pxずらす

右下にスライドする 左上にスライドバックする

　

9日未明に、templates（HTML内）に気づかぬうちにたった一箇所のミスを行ってしまった（一箇所だけ"が多かった）まま、確認しないで就寝してしまい、10日未明に再び開いたところtop頁が開けないので、吃驚して調査しました。

その結果上記のことが判明し修正した次第です。

9日に閲覧してくださった方々には、大変ご迷惑をお掛けしました。

深くお詫びします。

prototypeこそ合理的なJavascriptコードを記述するキーワード

ではないか、と最近思えてきた。

少なくとも、各種のネット上から得られる有名なコード（群）においては、それらの殆どがprototype Objectを利用している。TigraMenu、YUI、Tween等々、総合的なコードには悉くprototype Objectが使われている。だからこそ、それらを理解し使いこなすためにはprototypeについて熟知する必要がある。

しかし・・・。その概念はプログラムの素人には難しく、これまで何度かチャレンジしようとしたが、歯が立たなかった。

この間、今年に入ってからの約半年の間、特に体調が悪化したこの春以来、コード作成くらいしか休日に出来ることがなくなったので、Javascriptへの理解がかつてよりも深まってきた。

そして色々とコードを書き、修正し、Javascript解説本（といってもO'Reilly社刊本だけだが）を読み漁る中で、全く歯が立たない状態だったかつての状態から、ぼんやりとしていた霧が晴れ、先が見通せるようになり、ついにprototypeについて、一通り理解する段階にまでステップアップすることが出来た。

問題はその活用にある

しかし理解できたことと利用できることとでは、おそらくは天地の開きがある。

コンストラクター、インスタンス、プロトタイプ、クラス、クラス変数、クラスメソッド等々、理解出来たものの、それらを利用してみなければ、理解の程さえ図ることが出来ないだろう。

ということで、このブログ上でprototype学習過程を綴ってみようか、と思っている。

確かに、素人の愚昧なチャレンジを敢えて綴ることに、おそらく社会的意味はない。つまりは自己満足であり、自己陶酔に他ならないが、それでも敢えてそうしようと思う。

何故ならば、そうすること（自己の対象化、客観化）こそが、真の理解への賢明な道の一つだからである。

• innerWidth 関連エントリイ一覧 in this Blog

FireFoxやOperaとIEとではwindow.innerWidthの定義が異なる

主としてSleipnir2でブラウジングしているので、今までそのことに気がつかなかった。

偶々、 Cross-Browser.com - xClientWidth サイトでFFの場合のwindow.innerHeightに関する修正行（if(document.height>window.innerHeight) window.innerWidth -= 16;）をみて、初めてそのことを知った次第である。

その差異とは、IEはスクロールバーを含まない内寸を与えるが、FFとOperaはスクロールバーを含む値としてwindow.innerWidthが定義されているということである。

早速我がscriptにCross-Browser.comの方法を取り入れたことは言うまでもないが、Operaの場合にはFFの方法が使えない、ということを本日発見した。具体的にはOperaにはdocument.heightが定義されていない、否正確に言えば、（FFではそれが可能であるが）宣言されていないdocument.height値を取得することが出来ないのだ。

そこで document.heightの変わりにdocument.body.offsetHeightを使うことで問題に対処した。

また、Operaのスクロールバーは幅が18pxある。最終的には次の式でwindow.innerWidth値を修正した。

if(document.body.offsetHeight>window.innerHeight)window.innerWidth-=18;