スタンドアロン Lightning アプリケーションを作成する
このチュートリアルでは、開発者コンソールを使用して簡単な経費追跡アプリケーションを作成します。
このアプリケーションの目的は、多くの標準 Lightning コンポーネントを利用することと、JavaScript と Apex を使用したクライアントとサーバのやりとりを示すことです。式を使用して動的にデータを操作したり、イベントを使用してコンポーネント間でデータをやりとりしたりする方法をアプリケーションを構築しながら学習していきます。
「経費オブジェクトを作成する」で説明されている経費カスタムオブジェクトを作成してあることを確認します。経費データを保存するカスタムオブジェクトを使用して、アプリケーションでレコードを操作する方法、クライアント側のコントローラアクションでユーザ操作を処理する方法、および Apex コントローラでデータ更新を保持する方法を学習します。
コンポーネントを作成したら、「Salesforce1 への Lightning コンポーネントの追加」の手順に従って、Salesforce1 にそれを追加できます。コンポーネントとアプリケーションのパッケージ化および AppExchange での配布については、「アプリケーションとコンポーネントの配布」を参照してください。
次の画像に、スタンドアロンアプリケーション、Lightning Experience、Salesforce1 での経費追跡を示します。

- フォームには、[実行] ボタンが押されたときにビューおよび経費レコードを更新する Lightning 入力コンポーネント (1) が含まれます。
- 経費の総額と数でカウンタが初期化され (2)、レコードの作成または削除で更新されます。合計が $100 を超えると、カウンタが赤になります。
- 経費リスト (3) の表示には Lightning 出力コンポーネントが使用され、経費が追加されるたびに更新されます。
- 経費リストに対するユーザ操作 (4) により、レコードの変更を保存する更新イベントがトリガされます。
経費追跡アプリケーションで作成するリソースは次のとおりです。
| Resources | 説明 |
|---|---|
| expenseTracker バンドル | |
| expenseTracker.app | 他のすべてのコンポーネントが含まれる最上位コンポーネント |
| Form バンドル | |
| form.cmp | ユーザ入力を収集する Lightning 入力コンポーネントのコレクション |
| formController.js | フォームに対するユーザ操作を処理するアクションが含まれるクライアント側のコントローラ |
| formHelper.js | コントローラアクションによってコールされるクライアント側のヘルパー関数 |
| form.css | フォームコンポーネントのスタイル |
| expenseList バンドル | |
| expenseList.cmp | 経費レコードのデータを表示する Lightning 出力コンポーネントのコレクション |
| expenseListController.js | 経費リストの表示に対するユーザ操作を処理するアクションが含まれるクライアント側のコントローラ |
| Apex クラス | |
| ExpenseController.apxc | データの読み込み、経費レコードの挿入または更新を行う Apex コントローラ |
| イベント | |
| updateExpenseItem.evt | 経費リストの表示から経費項目が更新されるときに起動されるイベント |