テックブログ

Lightning vs Visualforce 〜 比較検証から見えてくるLightningの可能性

Lightning

こんにちはアピリオの北嵐です。現在、昨年のDreamforce2014で発表されたLightningプラットフォームについて調べており、このテーマについてブログ投稿をしていきたいと思っています。よろしくお願いします。

Lightningはモバイル向けのSalesforce1テクノロジーを拡張していくためのツールと技術の集合であり、下記のような利用目的が異なる様々な技術要素が含まれており、かなり大掛かりな拡張と言えるでしょう。

  • Lightningコンポーネント・フレームワーク
  • Lightningアプリケーション・ビルダー
  • Lightning Connect
  • Lightningプロセス・ビルダー
  • Lightningスキーマ・ビルダー

今回はこれらの技術の中で最も中核となる「Lightningコンポーネント・フレームワーク[1]」に関して、その特徴と従来のVisualforceベースの開発スタイルとの違いについて見ていきたいと思います。

Lightning コンポーネント・フレームワークとは

Lightningコンポーネント・フレームワークはVisualforceページを含む従来のSalesforce技術とは異なる仕組みを持つアプリケーション実行環境です。ベースとなっているのはOSSとして提供されているAuraフレームワークであり、これをSalesforce環境向けに拡張・変更したものがLightningコンポーネント・フレームワークになります。最新のSalesforceサーバー環境はこのAuraフレームワークの実行環境を提供しているため、Salesforce上でAuraベースのアプリケーション(Lightningアプリケーション/コンポーネント)を開発し実行することができます。

Auraフレームワークでは、HTML/JSPに代表されるタグ型言語(Visualforceページもその一つです)による開発手法をJavaScriptベースのクライアント型アプリケーション開発に取り込んでいます。これにより開発者はWeb画面をHTML+拡張タグを使って効率的に開発できるだけでなく煩わしいDOMの操作からも解放されます(Auraでは独自のUIコンポーネントにDOMを隠蔽します)。そして画面を動的に動かしたりデータ入出力を行うロジックをJavaScriptコードで記述します。このフレームワークでは独自のイベントベースのアプリケーション・モデルを導入することにより、通常のJavaScript開発で必要となる複雑なイベント・ハンドリングを意識する必要がなくなっていることも大きな特徴です。このイベントの仕組みによりコンポーネント間をイベント処理で繋ぐコンポーネント・ベースの開発が実現されています。

Auraフレームワークではクライアント側(ブラウザ側JavaScript)とサーバー側(Apexコード)の実行環境の違いを意識することなく、クライアントからシームレスにサーバー側のRESTサービスを呼び出す機能が提供されます。通常のAuraフレームワークではサーバー側アプリケーションはJavaにより実装しますが、Lightningコンポーネント・フレームワークではこの部分をApexコントローラ・クラスとして実装できるように拡張されており、クライアントから自由にサーバー側のSalesforceデータにアクセスできます。コントローラ・クラスのメソッドをRESTで呼び出すことはJavaScript Remotingでも実現できていましたが、より簡単にクライアント側コードを実装できること、自動的に複数のRESTリクエストをまとめて呼び出す機能が追加されたことにより、これまでよりも洗練された方法となっています。

Salesforceプラットフォーム上ではLightningコンポーネント・フレームワークに関する要素として下記の5つの機能が提供されています。

  • Lightningアプリケーション/コンポーネントの開発環境(”開発者コンソール”の拡張)
  • Lightningアプリケーション/コンポーネントの実行環境
  • Auraフレームワーク(Lightning実行環境に含まれる)
  • Lightningアプリケーション・ビルダーによるノンコーディングの開発環境
  • Lightningページ[2]を使ったSalesforce1環境でのLightningコンポーネントの実行環境

Visualforceページとの違い

従来のVisualforceページとLightningコンポーネント・フレームワークを使ったアプリケーションとの最も大きな違いは、前者が全てのロジックがサーバー側で実行されるページ中心アプリであるのに対して、後者はJavaScriptベースのSPA(Single Page Application)アプリであることです(図1)。JavaScriptベースのアプリケーションであるためサーバーと通信することなくクイックにユーザーにレスポンスを返せる動的な画面構成が可能であり、よりモバイル向けのアプリを作りやすい環境と言えます。

Screen Shot 2015-03-31 at 16.53.24

図1 VisualforceベースのアプリケーションとLightningアプリケーションの構造

Visualforceベースのアプリケーションでは毎回サーバー側で静的なHTMLを生成する方式をとっているため、画面の内容を書き換えるためにはサーバー側へのリクエストが必要であり、動的な動きのあるWebページの構築には向きません。

Screen Shot 2015-03-30 at 16.38.18
[Visualforceページでの画面遷移]

一方、Lightningアプリケーションではアプリケーションの制御は全てクライアント側のJavaScriptで実装されており、必要なデータのみをRESTを使ってサーバーから取得する方式を取っています。この方式のメリットは、クライアントとサーバー間のデータ転送量を最適化できることや自由な画面構成にあり、これまでのページ中心のWebアプリケーションでは実現が難しかったネイティブ・アプリと同様なユーザー・インターフェースを持ったアプリケーションを作成することができます。

Screen Shot 2015-03-30 at 16.46.01
[Lightningアプリケーションでの画面遷移]

Lightningアプリケーションの開発で注意すべきなのは、アプリケーション実装のコアな部分はJavaScriptで実装されているため、開発者にはJavaScript開発/デバッグのスキルが必要不可欠なことです。標準的なVisualforceページの開発がSalesforceのスキルに閉じていたことと比べるとこの点は大きな違いと言えるでしょう。

Visualforceベースのカスタム・アプリケーションの開発方法

上記で説明したVisualforceページを使ったアプリケーションの形態は最も標準的なものであり(初期に導入された方式)、最近のダイナミックなWebページ開発の隆盛と共にハイブリッドな方式がこれまでに提供されてきています(参考:Salesforce開発の未来は・・・JavaScript?)。Lightningアプリケーションを理解し開発方式として選択するためには、これらの方式についても理解しておいた方がよいので簡単に紹介しておきます。

1. 標準的なVisualforceページ

これは上記で説明したVisualforceページのみを使ってページを作成する方式です。Salesforceが提供するスタイルシートを使って画面を作成するため、画面の見た目もフルサイト版のSalesforceと同様であり下記のようになります。

Screen Shot 2015-03-30 at 17.45.33

→ Visualforceページのソースコード

2. Visualforceページ + HTML + カスタムCSS

このアプローチではVisualforceページのデータ表示部分を<apex:pageBlock**>タグを使わずに通常のHTMLを使って作成します。具体的にはフォーム要素を作成するために<apex:form>, <apex:inputField>, <apex:input>, <apex:outputLabel>のみを使用し、下記のpageBlockタグは使用しません。

– <apex:pageBlock>
– <apex:pageBlockButtons>
– <apex:pageBlockSection>
– <apex:pageBlockSectionItem>
– <apex:pageBlockTable>

Apexタグによる自動レイアウト機能はOFFになりますので、CSSスタイルシートを使って画面レイアウトをデザインする必要があります。画面表示の仕組み自体は1. の標準的なVisualforceページと変わりはなく、画面のルック&フィールに自由度がある点が違いとなります。最低限のApexタグのみを使用するためSalesforce1環境でも表示可能です。下記はオープンソースのBootstrapスタイルを使った画面です。

Screen Shot 2015-03-31 at 09.52.33

→ Visualforceページのソースコード

3. JavaScriptリモーティング + HTML + カスタムCSS

このアプローチはLightningアプリケーションと同じくSFAアプリケーションを作成するための方法です。Salesforceからは各モバイルプラットフォーム向けのモバイルパックが提供されていますので、これらを使うことでHTML5、CSS3、最新の各種JavaScriptフレームワークの実行環境を簡単に構築することができます。この方式ではVisualforceページは単なるページの器として使っているだけでアプリケーションは全てJavaScriptを使って開発する必要があります。そのためSalesforce開発の技術に加えてHTML、CSS、JavaScriptといったクライアント・サイド開発の技術が必要になり、開発するコード量や難易度も通常のVisualforce ページ開発と比べて大幅に上がります。開発の自由度は高くなりますがデメリットや考慮点も増えますので、採用にあたってはこの辺りを十分に検討する必要があるでしょう。
LightningはこのJavaScriptリモーティングを使うよりは技術的な難易度が低く生産性が高い方法と考えられます。そのため今後は特定のJavaScriptフレームワークの利用に強く固執しないケースでは、Lightningを使う方法がSPAアプリケーションを作成する時の標準的な選択肢になっていくのではないでしょうか。

下記はモバイルパックで提供されているスタイルシートを使ったJavaScriptリモーティングの実装例です。コードの実行にはSalesforce OrgへのMobile Design Templatesの導入が必要です。

Screen Shot 2015-03-31 at 09.39.23

→ Visualforceページのソースコード

 

Lightningコンポーネント・フレームワークはVisualforceページによるカスタム・アプリケーション開発を拡張するために新たに導入された技術です。PCプラットフォームからも使用することはできますが、動的にアプリケーションを構築できること、画面のルック&フィールを自由にデザインできるといった特徴からモバイル・プラットフォーム向けに強くフォーカスされています。そのためSalesforce1 Lightningと表現されていることも多いです。Salesforce1向けにはLightning アプリケーション・ビルダーというコンポーネントを組み合わせるだけでLightningアプリケーションを構築できるツールの提供も開始されています。まだ提供されたばかりであり利用できるコンポーネントの種類も少ないですが、今後提供されるコンポーネントの数が増えてくればノンコーディングでモバイル向けのページ開発が行える有用なツールとなる可能性を秘めています。Salesforce上ではLightningコンポーネント部品を独立して使うための方法も提供されるようですので、今後はSPAアプリケーションに限らずSalesforce開発の様々なシーンでLightningコンポーネントを使った開発ができるようになりそうです。
Lightningコンポーネントはまだベータ・リリースの段階ではありますが、アプリケーション開発を行い実行するためのリソースは一通り提供されていますので、皆さんも是非Lightningアプリケーションの開発にトライして、その違いを実感してみて下さい。

 

脚注:

1. 2015年3月30日時点でLightningコンポーネントはベータ版として提供されている

2. LightningページはSalesforce1環境で実行される画面部品であり、Lightningコンポーネントとアクションを組み合わせて構成される。Lightningアプリケーション・ビルダーを使って開発を行う

 

About Kitaarashi Naoki

Kitaarashi Naoki

某大手SIベンダーを退職し2015年3月からアピリオの一員としてクラウド業界に身を投じています。クラウドという広大な技術の波に翻弄されつつも一流のクラウド技術者を目指して日々悪戦苦闘中です。

Appirio