CreateJS新バージョンの大きな変更

リスナー関数のthis

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
リスナー関数のthis参照は、イベントハンドラとは異なります。
講師:
06:40

字幕

イベントハンドラーを書いたスクリプトを EventListener に書き換えるには 基本的には on 何とかというイベントハンドラーを addEventListener の メソッド呼び出しに変えて その第 1 引数に イベントを渡してあげれば 大体済むことが多いです ただし動かないこともあります this 参照をそのハンドラーの 関数に使っている時はご注意ください 先ず今書かれている この JavaScript コードの動きを確認しましょう ファイルから ブラウザでプレビューします ステージの左上に 青い四角のシェープが置かれました これにオンクリックイベントハンドラーが 定められていますので クリックしてみましょう クリックすると 回転します 30度ずつ回転するように定めてあります では確認できましたので ブラウザのウインドウは閉じましょう このスクリプトの イベントハンドラーの部分を確認します 青い四角がこの変数に入っています その onClick イベントに rotate という関数を ハンドラーとして定めました これがその関数です その中で this という参照を使っています イベントハンドラーに定めた関数で this というのは何かというと このイベントの持ち主 イベントハンドラーを定めた オブジェクトになります ですからシェープのオブジェクト あの青い四角ですね そのローテーションを 30 度回転するということで クリックする度に 30 度回転したということです では このイベントハンドラー onClick を 原則に従って EventListener に書き換えます もっとも ここにコメントアウト してあるのですが これを入れ替えて 原則通りというのは オブジェクトに対して addEventListener そして onClick は イベント Click に対応しますので 関数は同じものを定めています ではファイルを一旦保存して ブラウザで確かめてみましょう ブラウザでプレビューです イベントハンドラーの時と同じように 左上の青い四角いシェープを クリックしてみます イベントハンドラーの時には 回転したんですが 今クリックしてみます でも何も起こりませんね これが注意点dす ではブラウザウインドウは閉じましょう では this 参照を確かめるために alert メソッドを加えてみましょう alert this とします ファイルは保存して ブラウザで確かめましょう ファイルメニューから ブラウザでプレビューです もう 1 度青い四角のシェープを クリックしてみましょう alert メソッドを入れましたので クリックすると 警告ダイアログが表示されます 拡大してみましょう object Window となっています では元に戻します OK を押して ブラウザは閉じましょう オブジェクトというのは 今このスクリプトを書いている中の グローバルな領域になります イベントハンドラーの場合には その関数を 誰のイベントハンドラーに 定めたかということによって this 参照が変わってきます その関数を定めたイベントの持ち主が this になります ところが EventListener の場合には それを誰に定めたか ということには左右されず 常にグローバルなオブジェクトを 参照することになっています では EventListener の場合 そのイベントが起こった オブジェクトというのは どう捉えたら良いかと言いますと それは eventObject に聞きます この eventObject に聞くんですが ドラッグしておきましょう ドラッグコピーです その target というプロパティがあります これでイベントの起こった インスタンスが分かりますので それを 変数に入れます そして この変数にとった 参照 値をコピーして そしてプロパティ内内部の 設定をすれば言い訳です ファイルを保存して確かめてみましょう ファイルを保存 そしてブラウザでプレビューです もう 1 度インスタンスを クリックしてみます ちゃんと回転しますね ではブラウザは閉じましょう この EventObject の target プロパティというのは イベントハンドラーでも使えます 念のため試してみましょう 今度はこちらを 有効にして EventListener を コメントアウトします 改めてファイルを保存して ブラウザでプレビューしてみましょう インスタンスをクリックすると ちゃんと回転します ですから初めから EventObject のターゲットを 使ってあげれば良かったのですが 古いことについて今更 考えてもしょうがないですね ですから this を使った時は 気を付けましょうということです もう一度おさらいをします ブラウザを閉じます イベントハンドラーを EventListener に書き換える際には 文法として オブジェクトに on 何とか という形であったものを オブジェクトに対して addEventListener とし イベントを第 1 引数 関数を第 2 引数と変えれば 原則的には良いのですけれども イベントハンドラーの関数に その中に this を使っていた場合は お気を付けください イベントハンドラーの  this というのを使っていた場合は そのハンドラーを設定したオブジェクトを 参照するために使っていたんでしょうけれども もしそれを そのまま EventListener の方に 書き換えてしまうと EventLister では this が その EventLister を 登録したオブジェクトを参照しません そうならないためには EventObject のターゲットを 使っていけば良いのですけれども 今後は是非使うようにしましょう

CreateJS新バージョンの大きな変更

2013年2月にCreateJSがアップデートされました。このコースではイベントリスナーの採用やPreloadJSとSoundJSの変更など特に影響が大きいと思われる変更点をいくつかかいつまんで解説し、それらをどのように修正すればよいのか説明します。

43分 (8 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2014年04月01日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。