SalesforceのTrailheadにLightning Componentsのカテゴリが追加されているので、ちょっとやってみました。
次の内容が用意されています。
- Getting Started with Lightning Components
- Creating Components
- Defining Component Attributes
- Using Expressions
- Using Standard and Force.com Components
- Handling Events with Client-Side Controllers
- Using JavaScript Controllers with Components
- Using Apex in Components
- Debugging your Components
英語ですが、イメージ画像とGoogle翻訳を参考に進めていける感じです。実際に試してみた時の内容をまとめてみました。
Getting Started with Lightning Components
Lightning Componentsの概要についてです。Lightning ComponentsがどのようなものかとVisualforceページとの違い、使用できる場所について解説されています。
最後に選択問題が用意されています。Developer環境にログインして回答すると100Point入るようになっています。
問題は次のような感じです。
1,Which of the following descriptions about the Lightning Components framework is true?
Lightning Componentフレームワークの概要についてです。クライアント側でJavaScript 、サーバ側でApexを使用することと、コンポーネント間でデータ通信するのにイベントを使用しています。
2,How is the Lightning Component framework different from Visualforce?
LightningとVisualforceの違いについてです。Visualforceは、サーバ呼び出しに依存していますが、Lightningフレームワークはクライアント側の中心になっています。
3,What can you build with the Lightning Components framework?
Lightningでどのようなことができるかについてです。以下の3つのことができます。
- スタンドアローンのアプリ。
- SalesForce1にアプリのためのコンポーネント
- 上書きできるSalesforce1アプリを拡張するカスタムコンポーネント。
Creating Components
開発者コンソールからComponentを作成する方法について解説されています。
各ファイルの概要についても解説されています。
最後にComponent, CSS, Tabの3つを作成して完了です。
作成するComponentやタブなどは名称が固定で決められているので注意してください。
Defining Component Attributes
attributeなどで値の受け渡しについて解説されています。
最後は実際にComponentを作ってみて完了です。
Using Expressions
条件式についてとブラウザ判定について解説されています。
以下の3つが重要なポイントです。
Value Providers
$Browser
$Locale
最後は『aura:if』などを使った判定処理を実装して完了です。
Using Standard and Force.com Components
input / outputのComponentなどについて解説されています。
Input Control Components / Visual Components / Field Componentsといろいろ用意されています。
Input Control Components
Visual Components
Field Components
最後は紹介されたInput Componentを使ったComponentを実装して完了です。
Handling Events with Client-Side Controllers
Lightning Eventなどについて解説されています。
最後はLightning Eventをつかった連携処理を実装して完了ですが、ベースとなるComponentはGistに用意されていました。
Lightning Eventは少しややこしいですが次のような感じで実行できます。
PhoneNumber.evt
PhoneNumberInput.cmp
PhoneNumberInputController.js
PhoneNumberOutput.cmp
PhoneNumberOutputController.js
Using JavaScript Controllers with Components
JavaScriptについて解説されています。細かいところは確認しきれていませんが、重要そうな内容がたくさんありました。
最後に実装するのはこんな感じです。
CalculateTotal.cmp
CalculateTotalController.js
Using Apex in Components
LightningとApexについて解説されています。
最後の実装は次のような感じです。
Debugging your Components
デバッグ方法について解説されています。
- debugger;で一時停止
- $A.log("This is a log message")でログメッセージ
最後は選択問題になっていました。間違えても何度でも挑戦できます。
1,Name a tool you can use to debug your components.
- Chrome Developer Tools
- Force.com Developer Console and debug logs
- Web browser console
- All of the above
回答は『All of the above』になったと思います。
2,What does the debug mode provide?
- Minified JavaScript code
- Obfuscated method names and code
- Readable JavaScript code
- JavaScript code parsed through Google Closure Compiler
2問目は確かこれです。『Readable JavaScript code』
3,What statement can you use to display a message in the browser console for your JavaScript code?
- $A.log()
- $A.warning()
- console.log()
- All of the above
3問目は『All of the above』だったはずです。
4,How do you cause app execution to stop at a desired location?
- console.log()
- debugger;
- $A.log()
- None of the above
4問目は『debugger;』です。
実際にやってみるとといろいろ参考になる情報が見つかりました。『debugger』は実際に試してはいませんが一時停止ができる処理みたいで、デバッグの際に便利そうです。
全て終わるとバッチが手に入ります。
『Lightning Components』カテゴリの内容はこんな感じです。TrailheadにはLightning以外にも沢山のチュートリアルが用意されています。ポイントやバッチとゲーム間隔で進めることができるのでなかなかおもしろいと思います。また、今まで知らなかった便利機能なども見つかるかもしれません。