進行状況の追跡を始めよう
Trailhead のホーム
Trailhead のホーム

基本的なスキルの確認

学習の目的

この単元を完了すると、次のことができるようになります。
  • Aura コンポーネントの準備が本当にできたかどうかを評価する
  • Aura コンポーネントは何かを説明する
  • Aura コンポーネントを使用する場合と理由を述べる

Visualforce 開発者向けの Aura コンポーネント

このモジュールと、このトレイルの他のモジュールは、Visualforce の経験があり、Lightning プラットフォームの専門知識を活かして Aura コンポーネントの学習に弾みをつけようという人を対象としています。おそらく (9 単元もある)「Aura コンポーネントの基本」モジュールにはすでに目を通しており、「するべきことはわかったけれど、Trailhead はちょっと違うぞ。もっと速い手段はないのか?」と思った人もいるでしょう。

このモジュール (およびこのトレイル) はそのような人向けに設計されています。

開始する前に注意すべき点があります。Aura コンポーネントプログラミングモデルは Visualforce よりも大規模であり、洗練され、複雑です。つまり、まだまだ習得すべきことがあるうえに、Visualforce の予備知識が必ずしもメリットになるとは限りません。

メモ

メモ

Spring '19 リリース (API バージョン 45.0) では、Lightning Web コンポーネントモデルと従来の Aura コンポーネントモデルの 2 つのプログラミングモデルを使用して Lightning コンポーネントを作成できます。Lightning Web コンポーネントと Aura コンポーネントは、ページ上に共存可能で、同時に使用できます。このコンテンツでは、Aura コンポーネントについて説明します。Lightning Web コンポーネントについての詳細は、「Introducing Lightning Web Components (Lightning Web コンポーネントの概要)」を参照してください。

具体的に考えてみましょう。子供のころに「シュートと梯子」 (古くは「蛇と梯子」という名前でも知られる) というゲームをしたことがありますか? ゴールはジグザグボードの頂点にたどり着くことです。マスを移動しながら、梯子のマスに止まると頂点の方向に前進できます。一方、シュートのマスに止まると振出しの方向に戻されます。頂点に早くたどり着くには、梯子のマスに止まり、シュートのマスを避けなければなりません。

Aura コンポーネントの学習をこのようなボードゲームになぞらえてみましょう。上に向かう梯子は、Lightning Platform や Visualforce の専門知識です。下に滑り落ちるシュートは、まだ習得していないことや、Visualforce のスキルが活かせない領域です。Lightning Platform の予備知識がある場合、ボードには上に向かわせてくれる梯子がたくさんあるものと期待することでしょう。

Visualforce の予備知識をもつ人が思い描く Lightning コンポーネントの学習

ですが残念なことに、Visualforce に関する予備知識の多くは梯子にはなりません。Aura コンポーネントは大きく異なります。Visualforce の予備知識に基づいて想定したばっかりに、その知識が滑り落ちるシュートに変わってしまう可能性もあります。そんなわけで、このボードゲームで頂点への道を見つけることは、なかなかどうして厄介なのです。

実際の Lightning コンポーネントの学習はこのようなもの

このモジュールと、このトレイルの他のモジュールの目標は、このような滑り落ちるマスを避けるためのサポートを提供することです。具体的に言うと、22 個のヒントがこのアイコン シュート! で示されています。

ただし、「Aura コンポーネントの基本」モジュールでは、さらに多くのことを避けるためのサポートを提供します。一見すると小さなことで行きづまった (シュートを滑り落ちてしまった) ように感じた場合は、より長いモジュールの受講に時間を充てたほうがよいかもしれません。特に深い意味はありませんが(さらに 26 個のヒントに 梯子! のようなアイコンを付けています)。

基本: Aura コンポーネントとは?

Aura コンポーネントは何かと問われたら、通常、次のように答えます。

Aura コンポーネントプログラミングモデルとは、モバイルデバイス用およびデスクトップデバイス用の Web アプリケーションを開発する UI フレームワークです。これは、Lightning Platform アプリケーション用の動的な反応型ユーザインターフェースを使用して単一ページアプリケーションを構築するための最新のフレームワークです。クライアント側では JavaScript、サーバ側では Apex を使用します。

どうです、この見事なまでに専門用語を駆使した説明は。

オーケー、忘れてください。Visualforce 開発者にとって実際に意味をなす言葉で表すなら、これはいったいどういう意味でしょうか? 重要なことは、クライアント側の JavaScript コードを記述し、Salesforce からデータを取得したり Salesforce にデータを保存したりする必要が生じるまで、ユーザインターフェース処理をできる限りクライアント側で実行するということです。

この詳細は、「Aura コンポーネントの基本概念」モジュール (このトレイルの次のモジュール) で説明します。Aura コンポーネントをこのように設計した理由の根底にある動機に興味がある場合は、「Lightning Experience の開発」モジュールの「ユーザインターフェース開発の考慮事項」を参照してください (「リソース」セクションにリンクがあります)。

基本: JavaScript

Visualforce では JavaScript は省略可能でした。Aura コンポーネントでは、これは当てはまりません。Aura コンポーネントプログラミングモデルは、クライアント側で JavaScript を使用してより多くの作業を行うユーザ向けに特別に設計されています。この点で、これは Visualforce とは意図的にまったく異なります(詳細はこのトレイルの次のモジュールで説明します)。

JavaScript が含まれない Aura コンポーネントを記述することは事実上不可能です。実際のところ、重要なコンポーネントには、数十または数百もの JavaScript コード行が含まれます。それほど機能的でない Aura コンポーネントアプリケーションを記述する場合でさえ、JavaScript に精通している必要があります。

一見したところ、JavaScript は、Apex を含め、使い慣れている可能性のある多くの言語に似ています。これは梯子でしょうか? いいえ、シュート! です。これらには、学習する必要がある十分な違いが存在します。たとえば、オブジェクトと継承、範囲ルール、真と偽を分ける予測不能な動作などです。

では、「精通」とは何を意味するのでしょうか。このモジュールの読者なら、Speaking JavaScript (JavaScript について)」の第 1 章 (オンラインで無料で閲覧可能) で説明されている概念には十分に習熟していることでしょう。特に次の点について完全に理解しているはずです。

  • 変数宣言および範囲ルール
  • 等価の比較ルール、および真と偽の評価ルール
  • JavaScript での「オブジェクト」と「継承」の意味 (これは Apex と同じではありません)
  • undefinednull の違い、およびそれらを確認する方法とタイミング
  • 変数などの関数の処理方法。パラメータとして他の関数に渡す (コールバック) など
  • 以上に加えて、フレームワークを本当に使いこなすには、クロージャを理解する必要があるということ。少なくとも、即時実行関数式 (IIFE) パターンを認識して使用できるだけの十分な理解が必要です。

前置きはこれくらいにして、ずばり要点を言いましょう。JavaScript のイディオムを使用しているときに動作が流れてこない場合 (JavaScript をまだ数百行も記述したことがない場合)、更に学習することをお勧めします。

梯子! 特に、Lightning Platform エキスパートの Dan Appleman による秀逸なビデオコース「Getting Started with JavaScript in Salesforce (Salesforce での JavaScript の使用開始)」(Pluralsight で視聴可能) を視聴し、(その後) 以下の書籍を参照することを強くお勧めします。

  • Speaking JavaScript (JavaScript について) (著者: Axel Rauschmayer)
  • Object-Oriented JavaScript (オブジェクト指向 JavaScript) (著者: Stoyan Stefanov)
  • The Principles of Object-Oriented JavaScript (オブジェクト指向 JavaScript の原則) (著者: Nicholas C. Zakas)
  • Eloquent JavaScript (説得力のある JavaScript) (著者: Marijn Haverbeke)、無料

基本: 最新の HTML および CSS

フレームワークには、Lightning 基本コンポーネントと呼ばれる多くの組み込みコンポーネントが含まれます。これらのコンポーネントは、最新かつ軽量であり、Lightning Experience の設計に適合します。

ただし、コレクションは急速に成長しているものの、まだ Visualforce ほど完全ではないため、多くのコンポーネントを最初から作成することになります。HTML および CSS の最新のスキルを維持するようにしてください。HTML5 と CSS3 を使いこなすことができ、応答型の、モバイル向けに最適化された、アクセス可能な、ブラウザ間の互換性があるページを構築できる必要があります。flexbox、メディアクエリ、ARIA、および REM 単位が何であって、どのように使用するのかを知っていることが前提になります。

基本: Salesforce Lightning Design System

梯子! CSS のヒント。コンポーネントの記述はできるだけ小さくして、Salesforce Lightning Design System (SLDS) を使用します。

ざっくり言うと、SLDS を正しく使用することは簡単です。

  • 可能な限り、Lightning コンポーネントのマークアップで lightning: 名前空間の組み込みコンポーネント (前述の Lightning 基本コンポーネント) を使用します。これらのコンポーネントは SLDS で構築されており、SLDS を自動的に使用します。
  • HTML マークアップを記述する場合、SLDS ユーティリティクラスを適切な要素に追加して、スタイルを設定します。
  • さらにいいのは、マークアップを SLDS サイトから直接コピーして JavaScript 機能を追加することです。
  • コンポーネント独自の CSS スタイルは、最終手段として、または限定された特別なケースでのみ記述する必要があります。

注意点が 1 つあります。SLDS サイト (Design System の詳細な使用方法を習得するための優れたリソース) にアクセスすると、「コンポーネント」という用語が頻繁に使用されていることに気づきます。「コンポーネント」専門のライブラリがあります!

シュート!これは Lightning コンポーネントではありません!

SLDS サイトでは、Salesforce、Ruby on Rails、PHP などのどれを使用するかに関係なく、任意の Web アプリケーションのコンテキストで SLDS を使用する方法が記述されています。サイトで記述されている「コンポーネント」は、Web アプリケーションのユーザインターフェース要素の理想的な形式です。コンポーネントは静的 HTML と CSS のみで定義されます。どの SLDS コンポーネントにも実行可能な側面はありません。

さらに重要なことは、Lightning 組み込みコンポーネントよりもさらに多くの SLDS「コンポーネント」があるということです。SLDS は、Salesforce が目指している未来の世界を表します。現在のところ、SLDS サイトで Activity Timeline (活動タイムライン)「コンポーネント」が記述されているからといって、その機能を実行する Lightning コンポーネントが存在するとは限りません。また、バッジ、ボタン、またはモーダル用の SLDS「コンポーネント」があるからといって、バッジ、ボタン、またはモーダルを提供する Lightning コンポーネントが同じであることを意味するものでもありません(同じである可能性もそうでない可能性もあります。また、今後変わる可能性もあります)。

要約: SLDS コンポーネントは Lightning コンポーネントではありません。Lightning 組み込みコンポーネントの中で必要なものが見つからない場合、自分でコンポーネントを作成するための開始点として SLDS サイトを使用します。