Home > Latest topics

Latest topics > JavaScript 1.7のyield文ってなんじゃらほ

宣伝1。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! シス管系女子って何!? - 「シス管系女子」特設サイト

宣伝2。Firefox Hacks Rebooted発売中。本書の1/3を使って、再起動不要なアドオンの作り方のテクニックや非同期処理の効率のいい書き方などを解説しています。既刊のFirefox 3 Hacks拡張機能開発チュートリアルと併せてどうぞ。

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック
浅井 智也 池田 譲治 小山田 昌史 五味渕 大賀 下田 洋志 寺田 真 松澤 太郎
オライリージャパン

JavaScript 1.7のyield文ってなんじゃらほ - Aug 07, 2006

JavaScript 1.7 の yield が凄すぎる件についてを見てもyieldってそもそも何なのかちいとも分かっとらんかったのでそこから調べてみた。

yieldはreturnの仲間?

そもそもこのyield文というのは、JavaScriptと同じくスクリプト言語のPythonから持ち込まれた仕組みらしい。ジェネレータとは何ぞやで読める例を見た感じでは、どうやら、関数内での使い方としてはreturn文の仲間というかそういうもののように読める。

return文は知ってのとおり、関数の実行をその場で終了して、引数として与えられた変数の値を返すというもの。「yield文が登場する関数」の中から見たら、yieldもそれと似たような動作をする、すなわち「yield文に引数として渡した変数の値が返される」ということ。

yield文がreturn文と違うのは、yield文が登場する関数の外から見たときの挙動だ。

return文の場合、return文が含まれる関数を実行すると、return文に渡された変数の値が返ってくる。これは分かりやすい。


function test() {
  var value = 'hoge';
  return value;
}

alert(test()); // "hoge"と表示される

yield文の場合、yield文が含まれる関数を実行しても、yield文に渡された変数の値は返ってこない。じゃあ何が返ってくるかというと、「ジェネレータ」と呼ばれる特殊なオブジェクトが返ってくる。


function test() {
  var value = 'hoge';
  yield value;
}

alert(test()); // "[object Generator]"と表示される

ジェネレータ(「ジェネレータ・イテレータ」が正式な名前らしい)とはnext()というメソッドを持つオブジェクトの型で、イテレータの一種だ。

イテレータって何よ

イテレータとは、内部に複数の要素を持つ配列と「どの要素にフォーカスしているか」の情報を保持しているようなオブジェクトで、next()メソッドを実行するたびに、「現在フォーカスしている要素」を返しつつ内部のカウンタを一つ進める、というふうな振る舞いを見せるオブジェクトのデザインパターンの一種だ。DOM3 XPathで型としてXPathResult.ORDERED_NODE_ITERATOR_TYPEを渡したときのXPathResultの挙動なんかもまさにそれにあたるし、例えば以下のようなものもイテレータと言える。


var iterator = {
      next     : function() {
        if (this.count >= this.elements.length) {
          throw 'もう全部見たよ!';
        }
        return this.elements[this.count++];
      },
      count    : 0,
      elements : [
        'hoge', 'hage', 'foobar'
      ]
    };

alert(iterator.next());
alert(iterator.next());
alert(iterator.next());

ちなみにイテレータで最後の要素まで参照し終えた後でさらに次の要素を参照すると、普通はエラーになる。上の例でもthrow文でそれを再現してみた。まあ、わざわざエラー処理を書かなくても配列の未定義の要素へのアクセスが発生した段階でエラーになるわけだけど。

(なお、上記の例では配列を内部に保持しているけれども、イテレータというデザインパターン自体は、配列を使う必要があるというものではない。というより、「長さ(要素の数)」が決まっていないといけない「配列」と違って、「全体の数は分からないけど該当する要素の条件は分かっているので、その条件にマッチするものを一つ一つ順番に渡り歩いていく」ということが可能なのがイテレータだ。そもそも、配列とループを使った処理といえば、一つ一つ順番に配列の要素を処理していって最後の要素にきたら終了するというものがほとんどで、必ずしもループ開始の時点で配列の全体の数を把握している必要はないのだから、イテレータとして実装した方が効率は良いというわけ。)

ジェネレータ

内部でyield文を使った関数は、ただの関数ではなくてジェネレータを生成するための特殊な関数(ファクトリー)という扱いになる。この関数を実行すると、帰り値はジェネレータオブジェクトとなる。よって、実際に使うときは以下のような感じになる。


function test() {
  var value = 'hoge';
  yield value;
}

var generator = test();
alert(generator.next()); // "hoge"と表示される

next()なんてメソッドの定義はどこにも書いた覚えがないのに、勝手にそういうものが生成される。強いて言うなら、yield文を含んだ関数の定義内容がそのままnext()メソッドの内容になる、みたいな感じ?

「イテレータの例」で書いたようなカウンタだとか内部的な配列だとかの定義をあれこれ用意しなくても、JavaScriptエンジンの方で勝手にイテレータちっくな挙動にしてくれる……というのがたぶんジェネレータの便利なところの一つだと思う。このおかげで、例えばそのイテレータをカウンタと配列を使って実現しているのであれば、カウンタや内部の配列を外部から操作される心配もなくなる(例えば、上記の例の実行中にiterator.count = 0;とかされたら処理が狂うけれども、ジェネレータではカウンタも要素も不可視なので、こういう問題は起こらない……はず)。

でも、イテレータは配列とカウンタを使わないで実装することもできる。そこでyield文が活躍することになる。

yield文の面白いところ

ジェネレータを実際に動かすときに、yieldとreturnのもう一つの違いがはっきり出てくる。return文はそこで関数の実行を強制的に終了させてしまう。それに対してyield文は、yield文が実行されたとき、渡された引数の値を返すと同時に、ビデオの「一時停止」ボタンを押したようにその行で処理を一時停止する。そして、次にnext()メソッドが呼ばれたときに、その次の文から処理を再開する。(そして、次のyield文に辿り着いた所でまた一時停止して、値を返す。)一時停止してから再開するまでの間、処理の状態や変数の内容も完全に保持される。関数にとっての「一時停止」文としても作用するというわけだ。

だから極端な話、こんなこともできる。


function test() {
  var i = 0;
  yield 'hoge ' + (i++);
  yield 'hage ' + (i++);
  yield 'foobar ' + (i++);
}

var generator = test();
alert(generator.next()); // "hoge 0"
alert(generator.next()); // "hage 1"
alert(generator.next()); // "foobar 2"
alert(generator.next()); // これはエラーになる

yieldのこの機能とループと組み合わせると、無限数列を求める処理なんかを書くことができる。以下はフィボナッチ数列を求める例。


function test() {
  var a = 0;
  var b = 1;
  while (true) {
    yield a;
    var temp = b;
    b = a + b;
    a = temp;
  }
}

var generator = test();
alert(generator.next()); // "0"
alert(generator.next()); // "1"
alert(generator.next()); // "1"
alert(generator.next()); // "2"
alert(generator.next()); // "3"
alert(generator.next()); // "5"
alert(generator.next()); // "8"
alert(generator.next()); // "13"

このように単純な例だと、ジェネレータを使わずに以下のように書いても大して手間は変わらない。


var a = 0;
var b = 1;

function test() {
  var tempA = a;
  var tempB = b;
  b = a + b;
  a = tempB;
  return tempA;
}

alert(test()); // "0"
alert(test()); // "1"
alert(test()); // "1"
alert(test()); // "2"
alert(test()); // "3"
alert(test()); // "5"
alert(test()); // "8"
alert(test()); // "13"

しかし、IT戦記のエントリで挙げられているアニメーションの例のように幾つものカウンタが回る複雑な処理になってくると、ジェネレータでyield文を使ってその都度「一時停止」できたほうが便利な場合も出てくる。

あと、amachang氏が仰っているように、yieldとジェネレータの機能の副産物として、これらを使うと処理のスレッド化(適当なところで処理を一時停止して、他の処理に制御を移し、そっちの処理もまた適当なところで一時停止して、また一番最初の処理に戻ってくる、という感じのこと)もできる。

……というのが、ジェネレータの使いどころなんだと思う。僕は頭が悪いんで、有効に活用できる場合というのを自分ではさーっぱり思いつかないんだけど。なので、せめて、頭のいい人がこの解説みたいな文章を見てyieldの有効な使い道をたくさん考えてくれることを期待します。

分類:Web技術 > JavaScript, , , 時刻:18:05 | Comments/Trackbacks (6) | Edit

Comments/Trackbacks

fiberとかcoroutineとかmicrothreadとか

そういう話ですねぇ。
-> http://d.hatena.ne.jp/shinichiro_h/20040106#p1
# ほかの言語での話

Commented by Knagi at 2006/08/07 (Mon) 19:06:17

test_generators.py

http://www.koders.com/python/fid270B911474234F621AA2D953BA499805DB5AF0A8.aspx
python での generator を使った技法の集大成のようです。
generator を理解するには JS で書き替えてみるのがいいんじゃないかと思ってやっているところ。

以下の send は python 2.5 待ちですが。
js> function foo () {print(yield);print(yield);print(yield);}
js> x=foo()
js> x.next()
js> x.send(10)
10
js> x.send(20)
20
js> x.send(30)
30
uncaught exception: [object StopIteration]

Commented by mal at 2006/08/07 (Mon) 23:55:38

なつかしい

yieldを最初に導入したのは CLUだと思いますよ。ただ、ちょっと使い方がちがうけど。
JS1.7のは初耳ですが、semanticsがややこしくなりそう。returnと組み合わせて使われたらとか...

Commented by hujikojp at 2006/08/08 (Tue) 16:26:11

return

> returnと組み合わせて使われたらとか...
yield とともに return を使うと関数から抜けることはできますが、値を返せなくなるようです。
エラーみればすぐわかりますが、ついやっちゃいそうですね。

Commented by mal at 2006/08/08 (Tue) 16:34:20

[Mozilla][JavaScript]イテレータの使いどころ (vimperatorのソース読書会?)

ブックマークは溜めるばかりでは意味がないですね。たまには検索をして引き出さないと。 一年半前ほどにつけたブクマで思わぬ拾い物をした。 http://d.hatena.ne.jp/amachang/20060805/1154743229:title=[javascript] JavaScript 1.7 の yield が凄すぎる件について - IT戦

Trackback from hogehoge at 2008/01/17 (Thu) 22:11:41

IEでのyield

IEでも yield の使えるフレームワークを構築しました。
仕様に付いてご意見等頂けると嬉しいです。

ホーム: http://www.ab.auone-net.jp/~kotemaru/
ブログ: http://blogs.dion.ne.jp/kotemaru/

Commented by こて丸 at 2009/11/07 (Sat) 11:48:31

TrackBack ping me at


の末尾に2014年1月19日時点の日本の首相のファミリーネーム(ローマ字で回答)を繋げて下さい。例えば「noda」なら、「2006-08-07_yield.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。

Post a comment

writeback message: Ready to post a comment.

2014年1月19日時点の日本の首相のファミリーネーム(ひらがなで回答)

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のつぶやき

オススメ

Mozilla Firefox ブラウザ無料ダウンロード