jmblog.jp » javascript

innerHTML あるいは jQuery.html() は HTMLをそのまま取得できるわけではない

Yoshihide — Mon, 21 Mar 2011 13:17:38 +0000

ご存知でしょうが、element.innerHTML を使うと HTML を取得することができます。Mozilla Developer Network (MDN) にも次のように書いてあります。

innerHTML は、与えられた要素に含まれる全てのマークアップと内容を設定または取得します。

element.innerHTML – MDC Doc Centerより

また、jQuery.html() も、innerHTML と同様、HTML を取得することができます。

Get the HTML contents of the first element in the set of matched elements.

.html() – jQuery APIより

でも、場合によっては、HTML のソースをそのまま取得できるわけではないことをご存知でしたか？私は知りませんでした。

例えば、以下の例では、期待通りの HTML が返ってきます。

しかし、以下の場合はどうでしょうか？

を期待するかもしれませんが、実際は少し異なる値が返ってきます。
Chrome や Safari などの Webkit 系のブラウザであれば、

Firefox の場合は、

という HTML が取得されます。jQuery.html() の場合も同じ結果が得られます。

なぜこのようなことが起こるのでしょうか？不思議に思い、Quora で質問を投げてみました。すると、すぐにどなたかが答えてくれました。（Quora すげー！）また、Twitter でも同様の質問を投げてみたところ、@hogenishi1122 さんが答えてくれました。（感謝！）

innerHTML や jQuery.html() は HTML のソースをそのまま返すわけではなく、ブラウザが一度 DOMツリーに変換したものを返すとのこと。従って、invalid な HTML コードだと、それぞれのブラウザが解釈したDOMツリーが返ってくるというわけでした。

invalid な HTML を書かなければ、さほど問題にはならないかもしれませんが、必ずしも世の中がすべて valid だとは限りません。記憶の片隅に留めておけば、無用な苦労をすることもないかと思います。

jQuery 1.5 の Deferred オブジェクトについてのメモ

Yoshihide — Wed, 23 Feb 2011 17:13:17 +0000

jQuery 1.5 から Deferred オブジェクトというものがサポートされるようになりました。jQuery.ajax() も Deferred オブジェクトを拡張した jqXHR オブジェクトを返すようになったし、Deferred オブジェクトとは何か知っておいたほうが、何かと便利なのではないかと思ったので、調べたことをメモっていきます。（あまり理解出来ていないかもしれないので、誤りがあったらフィードバックをお願いします！）

deferred.done(), deferred.fail(), deferred.then() について

以下の3つは同じ処理になる。つまり、deferred.done() は成功時、deferred.fail() は失敗時のコールバック処理を実装する。また deferred.then() は第一引数に成功時のコールバック関数、第二引数に失敗時のコールバック関数を指定することができる。

$.get("test.php")
.success(function(){ console.log("succeeded", arguments); })
.error(function(){ console.log("failed!", arguments); });

$.get("test.php")
.done(function(){ console.log("succeeded", arguments); })
.fail(function(){ console.log("failed!", arguments); });

$.get("test.php").then(
function(){ console.log("succeeded", arguments); },
function(){ console.log("failed!", arguments); }
);

jQuery.when() について

jQuery.when() は Deferred オブジェクトを返す。なので、

$.when( ... ).done( ... ).fail( ... );
$.when( ... ).then( function() { ... }, function() { ... });

ってな感じで使う。

引数には、1つ以上の Deferred オブジェクト（jqXHR オブジェクトを含む）、もしくは JavaScript のプレーンなオブジェクトを指定できる。
1つの Deferred オブジェクトを指定するのはあまり意味がないっぽい？
複数の Deferred オブジェクトを引数に指定することで真価を発揮する。

$.when( $.ajax("/page1"), $.ajax("/page2"), $.ajax("/page3") )
.done ( function( res1, res2, res3 ) { ... } )
.fail( ... );

このように、$.ajax() を複数指定すると、最初の $.ajax() が成功したら、次の $.ajax() を実施、と続き、すべての $.ajax() が成功したら done() に進む、という流れになる。どこかの $.ajax が error になったら、その先の $.ajax() は実行されず、即、fail() が実行される。res1, res2, res3 は $.when() の引数で指定した複数の $.ajax() の成功時の戻り値がそれぞれセットされる。ここでは、$.ajax() を例にしたが、Deferred オブジェクトを返す関数なんかを引数に指定することも当然可能。

（随時、更新予定…）

JavaScript を書く人は「JavaScriptパターン」必読だと思う

Yoshihide — Fri, 18 Feb 2011 05:26:16 +0000

JavaScript に触れるようになって早10数年。人に「JavaScript は書けますか？」と聞かれたら、とりあえず「書けます」とは答えていた私ですが、実はあまり自信がなく、いつも「これってスタンダードなコーディング記法なんだろうか？」「きれいなコードの書き方を知りたいなぁ・・・」と心のなかで思っていました。特に、最近になって node.js などサーバーサイドでも JavaScript が使われるようになってきたため、ここらへんで本格的にスキルアップをしておいたほうがいいんじゃないかと思うようになっていました。

そんな思いを見事に解消してくれる本が、オライリーから発売されました！

» JavaScriptパターン ―優れたアプリケーションのための作法

帯には「JavaScriptはこう書け！」とあります。そう、まさに知りたかったのはそこなのですよ。

さっそく読んでみたのですが、「へー！知らなかった！」という新たな発見と、「あの書き方はこういうことだったのか！」と膝を打つことの連続で、一気に読んでしまいました。

はっきり言って、この本の内容を知らない人は「JavaScript書けます」って公言しちゃダメ、っていうぐらい、これまで漫然と JavaScript を書いてきた人にはかなりおすすめの本です。

例えば、次の質問にはっきりと答えられない人は今すぐ読んだほうがいいと思います！（ちなみに私は全部知りませんでした。）

/*
【質問】console に出力される値は？
*/
var myname = "global";
function func() {
console.log(myname); // "global" ? "local" ? それとも・・・
var myname = 'local';
console.log(myname);
}
func();

/*
【質問】 func1 と func2 の違いは？
*/
var func1 = function () {
console.log('called');
return 2 + 2;
}

var func2 = (function () {
console.log('called');
return 2 + 2;
}());

/*
【質問】 (1) と (2) の違いは？
*/
function myFunc(callback) {
console.log("1");
callback();
console.log("3");
}

function myCallback() {
console.log("2");
}

myFunc(myCallback); // ... (1)
myFunc(myCallback()); // ... (2)

/*
【質問】jQuery でよく見るこのコード、どういう構文かわかる？
*/
(function($) {

// ...

})(jQuery);

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティスもあわせて読むと JavaScript のレベルがさらにアップすること間違いなし！

preventDefault() と stopPropagation()

Yoshihide — Thu, 24 May 2007 16:11:09 +0000

先日公開した「投稿スラッグ（Post slug）が空白なら警告してくれるWordPress用Greasemonkeyスクリプト」を開発しているときに、JavaScriptでのイベントのキャンセルまわりで見事にハマってしまいました。そのときに調べてわかったことをまとめてみようと思います。（間違いがあれば是非ご指摘ください！）

やりたかったこと

WordPressの投稿画面で「公開（Publish）」ボタンをクリックしたときに、「投稿スラッグ（Post slug）」のテキストボックスに値が入っていなければ、確認ダイアログを出す。そこで「キャンセル」ボタンが押されたら、フォームの submit を中止する。

最初に思いついた方法

まず頭に浮かんだのは、submit ボタンに対して HTML でイベントハンドラを記述するという、とても古典的な方法でした。

<input name="publish" type="submit" id="publish" tabindex="5" accesskey="p" value="公開" onClick="return CheckPostSlug();" />
<script type="text/javascript">
function CheckPostSlug() {
if (document.forms[0].post_name.value == '') {
return confirm("WARNING!\n\n" + "Post slug is blank. Are you OK?\n");
}
}
</script>

しかし、今回開発するのは Greasemonkey スクリプトです。直接 HTML を書き換えるわけにはいきません。DOM 操作で無理やりできないことはないかも知れませんが、あまりにもダサい。もっとスマートな方法を探ってみました。

submit がキャンセルできない・・・

まずは、

addEventListener()

メソッドを使って次のように書いてみました。

$('publish').addEventListener('click', function() {
if ($('post_name').value == '') {
if(!confirm(msg)){
// eventをキャンセル（してるつもり）
return false;
}
}
}, true);
function $(id){
return document.getElementById(id);
}

しかし、この方法ではうまくいきませんでした。（何度テスト用のエントリを投稿したことか・・・）いろいろ試してみたところ、clickイベントはキャンセルできているのですが、フォームのsubmitイベントがキャンセルできていないようです。では、submit 時のイベントをなくしてしまえということで、

$('publish').addEventListener('click', function() {
if ($('post_name').value == '') {
if(!confirm(msg)){
// submit を無効に（してるつもり）
$('post').onsubmit = function() { return false; }
}
}
}, true);

としたかったのですが、これは Greasemonkey のセキュリティ的な制限でできません。むむ・・・

Event.stopPropagation() ?

行き詰って Greasemonkey Hacks に載っているサンプルをあれこれ眺めていると、

Event.stopPropagation()

というメソッドを見つけました。Google で調べてみたところ、

stopPropagation メソッドは、イベントフローにおいてこれ以上イベントが伝えられるのを止めるために使用します。

Event (共通 DOM API)

とあります。おぉ、これかぁと思ったのですが、これもダメ。むむむむ・・・

Event.preventDefault() !!

結局、

Event.preventDefault()

を使えばうまくいったのでした。

$('publish').addEventListener('click', function(e) {
if ($('post_name').value == '') {
if(!confirm(msg)){
// click も submit もキャンセルできた！
e.preventDefault();
}
}
}, true);

preventDefault()

について調べてみると、

preventDefault メソッドを使用するとイベントのキャンセルを通知できるため、そのイベントの結果として通常は実装により実行されるデフォルトのアクションが実行されません。

Event (共通 DOM API)

とあります。サブミットボタンの click イベントのあとには、フォームの submit イベントがデフォルトのアクションとして実装されているようなので、今回はこのメソッドが正解だったようです。

では、

stopPropagation()

は何だったのでしょう？これを理解するには、まずイベント伝播 (event propagation) という概念を理解する必要があります。

イベント伝播

私も完全に理解しているわけではないのですが、誤りを恐れずにざっくりと説明すると（JavaScript本を参考にしたのでたぶんあってるはず）、例えば、フォームのあるボタンをクリックしたとき、実は、

まず、最上位である Window オブジェクトの Click イベントが発生。
ここで例えば

window.onclick = function() { alert('window was clicked'); }

などと定義しているとアラートが表示される。
次に、その下位（例えばForm オブジェクト）の Click イベントが発生。
ここで例えば

document.forms[0].onclick = function() { alert('form was clicked'); }

などと定義しているとアラートが表示される。
最後に、クリックした Button オブジェクトの Click イベントが発生。

ということが起こっているのです。これが「イベント伝播」です。しかし、これは Firefox や Opera に限った話で、Internet Explorer の場合は、イベントの伝わり方が逆になります。つまり、

まず、クリックした Button オブジェクトの Click イベントが発生。
次に、その上位（例えばForm オブジェクト）の Click イベントが発生。
最後に、最上位である Window オブジェクトの Click イベントが発生。

となります。Firefox や Opera のように「上から下に」伝わっていくのを「イベントキャプチャリング方式」といい、IE のように「下から上に」伝わっていくのを「イベントバブリング方式」と言います。「バブリング」は「泡（バブル）」なので、下から上に伝わっていくと覚えればよいかと思います。IE なんて泡のように消えてし（ry

さきほどうまくいかなかった

stopPropagation()

は、このイベント伝播を途中で止めるときに利用するメソッドなのです。

[追記 2010-05-17]

はてブのコメントにて「addEventListenerの第3引数に false を指定すれば「イベントバブリング方式」で動作する」との情報をいただきましたので、追記しておきます。

IE でのイベントキャンセル

なお、IE は

Event.preventDefault()

と

Event.stopPropagation()

に対応していません。その代わりに、グローバル変数 event のプロパティである returnValue と cancelBubble を使います。

Firefox, Opera	Event.preventDefault();
IE	event.returnValue = false;

Firefox, Opera	Event.stopPropagation();
IE	event.cancelBubble = true;

まとめ

イベント伝播が理解できれば効率のよいコードを書くことができます。例えば、「プルダウンリストの中をマウスホイールで知らずに変えちゃうことがあるので、すべてのプルダウンリストでマウスホイールが効かないようにしてほしい」という要望がユーザーからあったとします。（実際あったんですが。）この場合、すべての select 要素にイベントハンドラを定義していくとえらい大変ですが、

というふうに、上位の document オブジェクトで、伝播されてくるすべてのイベントを監視して、イベントの発生元が select 要素だったらキャンセルする、と書くことができるのです。ね、便利でしょ？

イベントまわりは、ブラウザごとに仕様が異なるせいもあり、よくわかっていないとはまりますが、使いこなせるようになれば、かなり強力な武器になり得ると思うので、しっかり見につけたいと思います。

TinyURLのリンク先を取得するAPI

Yoshihide — Sun, 29 Apr 2007 14:08:08 +0000

Twitter 用に TinyURL のリダイレクト先URLを取得する Greasemonkey スクリプトを作ったんですが、すでに同じものを作っておられる方がいたので、公開はこっそりと行うこととして、このエントリでは、このGreasemonkey スクリプトを作るときに見つけた、TinyURL のリンク先を取得する API をご紹介。

» TinyURL Callback API

使い方はカンタン。

http://remysharp.com/tinyurlapi?callback=CallbackFunc&url=http://tinyurl.com/2acavb

というふうに、コールバック関数名とTinyURLを渡すだけ。すると、

CallbackFunc("http://jmblog.jp/download/tinyurl_restorer.user.js");

というふうにリンク先のURLがコールバック関数と共に返ってくるので、

var orginal_url;
function CallbackFunc(url) {
original_url = url;
}

という感じに、事前に定義しておいたコールバック関数で受け取ればOK。

しかし、どうしてこの手の API を TinyURL.com が公開していないのか不思議です・・・ニーズはいっぱいあるのにね。