tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Trailheadの『Lightning Components』をやってみました

SalesforceのTrailheadにLightning Componentsのカテゴリが追加されているので、ちょっとやってみました。

f:id:tyoshikawa1106:20150317203803p:plain


次の内容が用意されています。

  • 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

f:id:tyoshikawa1106:20150317204514p:plain


英語ですが、イメージ画像とGoogle翻訳を参考に進めていける感じです。実際に試してみた時の内容をまとめてみました。

Getting Started with Lightning Components

Lightning Componentsの概要についてです。Lightning ComponentsがどのようなものかとVisualforceページとの違い、使用できる場所について解説されています。

f:id:tyoshikawa1106:20150317204937p:plain


最後に選択問題が用意されています。Developer環境にログインして回答すると100Point入るようになっています。

f:id:tyoshikawa1106:20150317205125p:plain


問題は次のような感じです。

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を作成する方法について解説されています。

f:id:tyoshikawa1106:20150317210233p:plain


各ファイルの概要についても解説されています。

f:id:tyoshikawa1106:20150317210520p:plain


最後にComponent, CSS, Tabの3つを作成して完了です。
作成するComponentやタブなどは名称が固定で決められているので注意してください。

f:id:tyoshikawa1106:20150317212207p:plain

Defining Component Attributes

attributeなどで値の受け渡しについて解説されています。

f:id:tyoshikawa1106:20150317212549p:plain


最後は実際にComponentを作ってみて完了です。

f:id:tyoshikawa1106:20150317213514p:plain

Using Expressions

条件式についてとブラウザ判定について解説されています。

f:id:tyoshikawa1106:20150317214033p:plain


以下の3つが重要なポイントです。

Value Providers

f:id:tyoshikawa1106:20150317214134p:plain

$Browser

f:id:tyoshikawa1106:20150317214209p:plain

$Locale

f:id:tyoshikawa1106:20150317214248p:plain


最後は『aura:if』などを使った判定処理を実装して完了です。
f:id:tyoshikawa1106:20150317224351p:plain

Using Standard and Force.com Components

input / outputのComponentなどについて解説されています。

f:id:tyoshikawa1106:20150317224726p:plain


Input Control Components / Visual Components / Field Componentsといろいろ用意されています。

Input Control Components

f:id:tyoshikawa1106:20150317232340p:plain

Visual Components

f:id:tyoshikawa1106:20150317232404p:plain

Field Components

f:id:tyoshikawa1106:20150317232431p:plain


最後は紹介されたInput Componentを使ったComponentを実装して完了です。

f:id:tyoshikawa1106:20150317232548p:plain

Handling Events with Client-Side Controllers

Lightning Eventなどについて解説されています。
f:id:tyoshikawa1106:20150317232749p:plain


最後はLightning Eventをつかった連携処理を実装して完了ですが、ベースとなるComponentはGistに用意されていました。

f:id:tyoshikawa1106:20150317233241p:plain


Lightning Eventは少しややこしいですが次のような感じで実行できます。

PhoneNumber.evt

f:id:tyoshikawa1106:20150317235843p:plain

PhoneNumberInput.cmp

f:id:tyoshikawa1106:20150317235922p:plain

PhoneNumberInputController.js

f:id:tyoshikawa1106:20150317235951p:plain

PhoneNumberOutput.cmp

f:id:tyoshikawa1106:20150318000034p:plain

PhoneNumberOutputController.js

f:id:tyoshikawa1106:20150318000050p:plain

Using JavaScript Controllers with Components

JavaScriptについて解説されています。細かいところは確認しきれていませんが、重要そうな内容がたくさんありました。

f:id:tyoshikawa1106:20150318000553p:plain


最後に実装するのはこんな感じです。

CalculateTotal.cmp

f:id:tyoshikawa1106:20150318003842p:plain

CalculateTotalController.js

f:id:tyoshikawa1106:20150318003908p:plain

Using Apex in Components

LightningとApexについて解説されています。

f:id:tyoshikawa1106:20150318004135p:plain


最後の実装は次のような感じです。

f:id:tyoshikawa1106:20150318011741p:plain

f:id:tyoshikawa1106:20150318011750p:plain

f:id:tyoshikawa1106:20150318011758p:plain

Debugging your Components

デバッグ方法について解説されています。

f:id:tyoshikawa1106:20150318011949p:plain

  • 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』は実際に試してはいませんが一時停止ができる処理みたいで、デバッグの際に便利そうです。


全て終わるとバッチが手に入ります。
f:id:tyoshikawa1106:20150321012006p:plain


『Lightning Components』カテゴリの内容はこんな感じです。TrailheadにはLightning以外にも沢山のチュートリアルが用意されています。ポイントやバッチとゲーム間隔で進めることができるのでなかなかおもしろいと思います。また、今まで知らなかった便利機能なども見つかるかもしれません。