<< ポイント(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の赤い色の個所の「->」を「=>」に書き換えた場合のコンパイル結果

この先は会員の登録が必要です。有料会員(月額プラン)は登録月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら