Posted at

LightningのJavaScriptの調べ方

More than 3 years have passed since last update.


外部リソース



  • Lightning コンポーネント開発者ガイド 読んでいるかと思いますが、一箇所だけに簡単にしか触れられていないような内容もあるので注意が必要です。Winter '15だと、ドキュメント通りに記述しても動かない部分もあります。


  • auraのソース コンポーネントのソースがためになりそうですが、かなり読み応えがあります…。


  • aura Reference Documentation 一部オブジェクトのリファレンスが簡単にわかります。ただし、呼び出し方がわかりにくいものや、プライベートメソッドなども記述されているので要注意です。


JavaScriptコンソールでの調査

JavaScriptでの調査に慣れている方にとっては普通のやり方です。Salesforce側の開発コンソールではなく、ブラウザーのデベロッパーツールなどにあるものです。

まずは$A.のように、適当なグローバル変数を入力し、ピリオドを打ちましょう。すると、呼び出せるメソッドが出てくると思います。あとはリファレンスに記載してあるクラスなどもグローバル変数になっているものも幾つもあります(グローバル汚染し過ぎでは…)。

適当なソースの実装を見たい場合、例えば$A.errorというメソッドの実装を見たい場合、コンソールに$A.errorと入力しエンターを押しましょう(括弧は不要です)。そうすると、コンソールに当該関数のソースが出力されます。

スクリーンショット 2014-12-30 1.41.38.png

更に中身を見たい場合は、そのソースの右上に表示されているファイル名 aura_proddebug.js:11018 などというところをクリックしましょう。そうするとソースコードの当該部分を見ることができます(デバッグモードが有効化されていない場合、難読化されたソースが表示されます)。ここで、ブレークポイントを設定することも可能です。

スクリーンショット 2014-12-30 1.40.21.png

aura_proddebug.jsは全文ローカルにも保存しておくと良いでしょう。


Componentの確認

Componentオブジェクトのインターフェイスを手軽に見るには、$A.getRoot()を使うと良いでしょう。

特定のコンポーネントの確認をする場合は、当該コンポーネントのinitイベントを<aura:handler name="init" value="{!this}" action="{!c.doInit}" />のようにフックした上でdoInit内でdebugger;で止めるか、window.component = component;としておいて、後でJavaScriptコンソールからゆっくり解析するのが良いと思います。


その他

console.log();$A.trace();debugger;辺りを使って頑張って行きましょう。