初稿：2007/12/3

改訂：2007/12/4

2007/12/3

それは数日前から始まった。テンプレートの更新が html 文も CSS 文も出来ないのである。

広告タグ<%ad> <%ad2>もきちんと入っているのに、更新ボタンを押すと「既にその名前のテンプレートが存在しているため名前を変更できません」と表示されるばかり。

挙げ句の果てには HTML も CSS も空白表示となり、更新ボタンを押すと表示されるが、それは先ほど更新したはずの内容ではなく、更新前のものしか表示されない。

で、今度は名前を変えてみるとやはり真っ白。そして更新ボタンを押すと、更新前のコンテンツが表示されるが、今度もエラー表示が出る。そのエラー表示とは削ってもいないのに、「広告タグ[<%ad>][<%ad2>]は削除できません。」である。

数日前までは問題なく更新できていたのに、一体どうしたことか？───同じような現象に悩んでいる人がいるのではないか、と検索を掛けてみたが皆目引っかからないし、phpbbを見てもそれらしいコンテンツはない。

つまりお手上げなのである。

2007/12/4

昨日更新できなかった、HTMLやCSSの更新したはずの箇所が、何と今日になって更新されていることに気がついた。

それでは、と他に修正したくて昨日諦めていた箇所も弄ってみた。

するとまたしても更新できないのである。

しかも何と旧管理画面に移行して、そこでブログデザインの変更を選択して修正すると、こちらでは直せるのである。修正後に更新ボタンをクリックすればそれはアップロードされ、テンプレートに反映されるのだ。

ところが、それを行えるには１つ条件がある。その条件とは別途、新管理画面が開いていると駄目なのだ。旧管理画面オンリイで作業をしなければいけないのだ。例えば、或るエントリイの修正作業を新管理画面で行いつつ、同時並行で旧管理画面でブログデザインの変更を行っていたら、その場合には旧管理画面からのブログデザイン変更は行えず、蹴られてしまうのである。

実は昨日も同じように旧管理画面を開いてそこで修正を施してアップロードしていたのだが、結果が反映されなかったのだ。

この原因は？

以上から推察するに、原因は新管理画面におけるテンプレート変更画面の仕様上の欠陥にあると思われる。

<%ad><%ad2>を厳しくチェックするようにしたこと、あるいは名称変更に係る仕様、このいずれかが原因となって、新管理画面におけるテンプレート変更が適切に作動しないものと思われる。

新管理画面の是非にまで話が及ぶ

phpbbを見ても新管理画面に関する苦情や質問はかなり沢山あるようだ。新管理画面上でテンプレートの変更が出来ない、との投稿もいくつかあった。中には旧管理画面に戻して欲しいとの要望もあったが、これは FC2 から明確な否定回答がなされていた。

phpbbにざっと目を通した印象として、FC2が新管理画面を撤回する気がないのであれば、その改良にもっと力を入れても良いのではないか、と感じた。いくら無料ブログとはいえ、ユーザーの負担や苛つきを土台に改善を進めていく、という手法は余りにおかしいと思われる。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery解読作業を進めるにつれ、Javascriptの基礎が如何に分かっていないか、ほぼ毎日のように痛感させられます。その意味ではjQuery解読は無謀なチャレンジであった訳ですが、それでも誤謬を犯すマイナスを埋め合わせて遙かに余りあるプラスがあることも毎日自覚されるので、恥を忍んで引き続きjQuery解読を進めるつもりでいます。

しかし、基礎の基礎が余りに分かってない自分に嫌気が指してきてしまい、匙を投げ出すような醜態は演じたくありません。そこで、自戒を込めて敢えて誤解していたこと、理解していなかったこと、不十分な理解に留まっていたことなどについて、つらつらと記述していきたい、と思います。

for in object loop と継承プロパティ及び固有プロパティ

先に（ this 活用──jQuery解読(17) ）、for in loop でインスタンスオブジェクトのプロパティを総覧しました。ここでその総覧について考えてみます。

この loop ではオブジェクトが持つ全てのプロパティを列挙出来る訳ではありません（※）が、プロトタイプオブジェクトからの継承プロパティが列挙対象となることをここで再確認出来ました。しかしそれさえも ECMAScript による仕様ではプロトタイプチェーンは for in loop の調査対象外、とされているようですから、いずれはこの loop でプロトタイプから継承されたプロパティも取得できなくなるかも知れません。偶々 FireFox２ や IE７ では取得できますが・・・。

※　コードによって追加されたプロパティは列挙対象となるが、組み込みオブジェクトにあらかじめ定義されたプロパティ（例えば配列のメソッドなど）は通常は列挙できない。───Javascriptクィックリファランスp.101）。

さて、ここで何が問題かというと、$("a").size() あるいは $("a").length を実行すると当該サイトのリンクタグの個数が取得できますが、この場合の要素数に何故、プロトタイププロパティ＝継承プロパティが含まれないのだろうか、とふと疑問に思ったのです。しかし、継承プロパティは配列として格納されている訳ではないから、当然数えられないはずだ、と直ぐに納得しました。そして、そもそも継承プロパティは、恰もインスタンスオブジェクトのプロパティであるかのように見えているだけ（『Javascript第５版p.154』）で、決してコピーされている訳ではないことを、改めて思い起こしました。継承プロパティはインスタンスオブジェクトの固有のプロパティではないことを、期せずして再確認しました。

jQuery.js は何故配列形式で取得値をインスタンスオブジェクトに返すのか？

次に、 jQuery.js が処理値をインスタンスオブジェクトに配列形式で返すことの意味を考えてみました。

そしてその理由は、逆の場合を想定して直ぐに明らかになりました。つまり、配列にしないでノードのまま（テキストノードの場合を含む）で返すとすると、length で数を数えることが出来ません。また script によって、継承プロパティと返値であるプロパティを区別することも出来ないと思われます。

つまり、スクリプトによって取得したノード（値を含む）をスクリプトで自在に扱うためには、それを配列の中に取り込んで受け取ることが必要不可欠である、ということになります。

愚問のお陰で、改めて配列の重要性に思いを馳せました。

jQuery()関数を呼び出した直後のインスタンスオブジェクトの状態

さて、主題です。「インスタンスオブジェクトからどの様にしてその値を取り出すか」ですが、ユーザーから呼び出された直後のインスタンスオブジェクトの状態は下図のようになっています。インスタンス＝this は空の配列オブジェクトとして「出発」します。

左図は $("p") によって jQuery()関数を呼び出した直後の、init()メソッド内の変数の状態を示しています。

this（つまりインスタンスオブジェクト）は空の配列として定義され、変数 selector には文字 p が、その他の変数にはまだ値が付与されていません。

左図は 当該 this のプロパティを見たものです。

this＝インスタンスオブジェクトは、既に prototype オブジェクトから継承された沢山のプロパティをもっていることが分かります。

その後 jQuery.js 内の処理の結果、ユーザーが指示し目的とした要素ノードがインスタンスオブジェクトに返され、これがreturn連鎖を通じて最終的にユーザーが入力したAPIに返されます。

インスタンスオブジェクトの値を取り出す方法

以上を踏まえれば、返値であるインスタンスオブジェクトは配列オブジェクトなのですから、一般的な配列要素の取り出し方法によって、インスタンスオブジェクトの値を取り出すことが出来ます。

まず、jQuery,js のコード実行過程においては、 this[num] ( num は 0,1,2,･･･であり、コード進行過程の当該段階における取得要素数マイナス 1 まで有効 ) によって、インスタンスからDOMノードが取り出されるシーンがいくつもあります。

一方、ユーザーがインスタンスオブジェクトから値を取り出すには、配列に格納されている要素が DOM ノードであることをきちんと踏まえないといけません。

例えば、配列要素を文字列表示で一覧する join() メソッドではエラーとなります。DOMノードは直接文字列に変換できないからでしょう。また $("p").toString()では"[object Object]"しか返されません。

$("p")を例に取れば、コード進行過程と同様に、$("p")[num] で、配列に格納されているノードが取得出来ることは言うまでもありません。

この場合、例えば FireFox では [object HTMLParagraphElement]と、FireBugでは <p> と表示されます。

しかし、これでは具体性がありません。具体的に値を表示させたい場合には、
$("p")[0].nodeName、$("p")[0].firstChild 等の DOM プロパティを利用することにより、タグ名や内容等を取得することになります。

他方、jQuery()においてインスタンスオブジェクトを取り出す方法が提供されています。それはget()インスタンスメソッドです。

例えば $("p").get() によってjQuery("p")インスタンスを取り出すことが出来ます。但し配列として、と言う制限付きであり、かつその要素は String ではないのでalert("$('p').get()")などで取り出すことは出来ません。

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

this の何たるかが一応分かったことを踏まえて・・・

直前のエントリイでthisを分析しました。これを踏まえて早速jQuery()インスタンスメソッド内で、縦横無尽に活用されている this に注目して、挙動解読を行いたいと思います。

ここでは get()、pushStack()、 setArray()、index() を順に取り上げてみようと思います。とりあえず内容が簡単ですから（苦笑）。

なお、以下において共通して InsObj とはインスタンスオブジェクトの意味です。

また、以下のコードリストでは jQuery UI の resizable を利用していますので、サイズは縦横自由に変更できます。W3C の仕様を守らない IE 以外では、このブログに設定されているコンテナ幅を飛び出すリサイズは出来ないので、pre タグの overflow スタイルを auto に設定し、W3C仕様の場合でも全文が見えるようにしました。

get()……取得した要素から num番目を抽出取得する、あるいは取得した要素ノードを配列に格納する。

95: get: function( num ) {　// 目的とする num 番目の n を引数とし
93: 　return num == undefined ?　//numが未定義ならば
94:
95: 　　// Return a 'clean' array
96: 　　jQuery.makeArray( this ) :　//InsObj の中の対象要素ノードの全体を配列
97: 　　　　　　　　　　　　　　　 //に変換して返値とし
98: 　　// Return just the object
99: 　　this[num];　//num が与えられていれば InsObj 配列から num 番目を
　　　　　　　　　　//抽出して返値とする。
100: },

この get() は２つの役割を担っています。まず、取得したノード配列を、まさに配列として取り出す為に機能します。引数を与えずにget()メソッドを実行すればよい訳です。但し、返される配列の要素はノードですから、そのまま alert しても [Object HTMLPagraphElement] のように表示されるだけです。nodeNameなどのDOMメソッドで展開しないと意味のある結果は表示されません。

例えば次のボタンをクリックすると、このサイト上で alert($("p").get();) が実行されます。このページ上にある p タグの一覧を取得する訳ですが、どの様な結果が表示されるのか試すことが出来ます。alert($("p").get();)

他方、整数値を引数としてget(num)を実行すれば、取得したノード配列から num 番目を抽出した結果が返されます。

pushStack()……対象オブジェクトの変更とバックアップ

102: pushStack: function(a) {　//所与の第一引数を受け取り、
103: 　var ret = jQuery(a); //それを第一引数とするjQuery(a)を起動して
    　　　　　　//別のInsObjを作成して、それを ret 変数に代入する。
104: 　ret.prevObject = this;　//その時の this を
　　　　　　　　//retのプロパティに代入し、this をプロパティとして
105: 　return ret;　//持つ新規 InsObj を呼出し元に返す。
106: },

この pushStack() は大変興味深いメソッドです。新しいインスタンスオブジェクトの その名も prevObject プロパティに、直前のthisオブジェクトが格納されるようにコーディングされています。このメソッドは jQuery.js で７箇所利用されています。なお、 pushStack()解読──jQuery解読(21) にて pushStack() の必要性、役割について考えてみました。よろしければご覧ください。

setArray() ……インスタンスデータの初期化と更新

108: setArray: function( a ) {
109: 　this.length = 0;　//InsObjに代入されている値を全て削除して空にする。
110: 　Array.prototype.push.apply( this, a );　//空のInsObjに a 配列の要素を挿入
111: 　return this;　// a の各要素が代入された InsObj 配列を呼出し元にreturnする。
112: },

index()……取得したノード内でobjが何番目にあるか？

118: index: function( obj ) {　//目的のオブジェクトを引数とする
119: 　var pos = -1;　//pos変数を初期化する。
120: 　this.each(function(i){　//InsObj からeach()メソッドを起動
121: 　　if ( this == obj ) pos = i;　//定義からthis＝InsObjであり、
122: 　});　　//その各要素をobjと比較して、objと一致すればその位置を
　　　　　　　//示す i を pos 変数に代入する。
123: 　return pos;　//合致した位置が代入された pos の値を呼出し元に return する。
124: },