PR
<< ポイント(6)-(7)へ<<

 CoffeScriptを3時間で理解するための10のポイントのうち、ポイント8から10までを解説します。ポイント8は「変化するthisを追跡できる」こと、ポイント9は「クラス型オブジェクト指向に対応」していること、ポイント10は「jQueryなどの外部ライブラリも利用できる」ことです。

POINT8 変化するthisを追跡できる

★「自分自身」にアクセスする「@」キーワード「=>」キーワードでthisの変化を防止できる

 CoffeeScriptの「@」は、「自分自身」にアクセスするための機能を提供するキーワードで、その時どきの文脈によって指すものが変わるのが特徴です。JavaScriptのthisキーワードに相当します。例えば、メソッド(コンストラクタ)の中では@はインスタンス自身を指しますし、イベントハンドラの中であればthisはイベントの発生元(要素ノード)を指します。

 もっとも、この自在さゆえに、「@」は思わぬ混乱の原因にもなります。リスト37(Coffee Script)では、コンストラクタの中でイベントハンドラを定義しています。id="result"である要素をクリックしたときに、nameプロパティの値をもとに「こんにちは○さん!」というメッセージを表示することを意図したコードですが、結果は「こんにちは、undefinedさん!」となります。イベント発生元となる要素オブジェクトにnameプロパティがないので、undefined(未定義)が返されてしまうのです。

リスト37●@(this)キーワードは文脈によって変化する
リスト37●@(this)キーワードは文脈によって変化する

 こうした場合、CoffeeScriptでは「->」ではなく「=>」で関数を定義します。これによって、関数の外側のthisをそのまま、関数の内側に引き継げるようになります。リスト37の赤い色を敷いた個所を「=>」に変更してみると、「こんにちは、山田さん!」と表示されるはずです。

 コンパイル済みのJavaScriptコード(リスト38(JavaScript))を見てみましょう。イベントハンドラの外側で、現在のthisの内容を変数_thisに退避させています。この_thisにはイベントハンドラの中からもアクセスできますので、イベントハンドラの中ではthisではなく、_thisにアクセスしています。これはイベントハンドラの内外でthisを引き渡すための定番のコードです。

リスト38● リスト37の赤い色の個所の「->」を「=>」に書き換えた場合のコンパイル結果
リスト38● リスト37の赤い色の個所の「->」を「=>」に書き換えた場合のコンパイル結果

この記事は会員登録で続きをご覧いただけます

日経クロステック登録会員になると…

新着が分かるメールマガジンが届く
キーワード登録、連載フォローが便利

さらに、有料会員に申し込むとすべての記事が読み放題に!
有料会員と登録会員の違い