Kitaarashi共有するFacebookTwitterEmailLinkedIn皆さん、こんにちは。LWC入門の3回目となる今回は簡単なサンプル・コンポーネントを通して、LWCの基本的な実装方法とSalesforceサーバーからのデータ取得方法を見ていくことにします。Serviceというノンコーディングでサーバーからデータを取得できる便利な方法が導入されており、いくつかのパターンでサーバーからデータを取得できます。本稿ではその特長と使い分けについて解説してみます。LWC導入の背景や基本的な構成については、LWC入門(1)および(2)を参照してみてください。開発環境のセットアップLWCはSpring'19時点では開発者コンソール等のSalesforceサーバー環境で作成・開発することができません。CLIを使って新規作成・デプロイを行う必要があります。推奨エディタとなっています。CLIは開発およびビルドの自動化を行うためのコマンドライン・インターフェースであり、従来はメタデータAPIを使わないとできなかったSalesforceサーバーに対する様々なオペレーションをコマンドラインから実行できます。CLIの使い方についてはLWC入門(4)で紹介しています。Windows環境への開発環境の導入手順についてはこちらを参照してみて下さい。開発環境でのコンポーネント開発を効率化するために、こちらの手順に従って開発組織に対してクライアントキャッシュの無効化とデバッグモードの有効化の設定を行ってください。*Lightningコンポーネントの開発を行うためには組織の「私のドメイン」の設定が必要です。サンプル・コンポーネント今回作成するコンポーネントは下記のようにログインユーザーの情報を表示するシンプルなものです。比較のために、同じ機能をAuraコンポーネントとして実装したコードを載せておきます。})[JSファイル]DXプロジェクトの作成コンポーネントの開発を始めるには、まず下記のCLIコマンドでローカル環境にDXプロジェクトを作成してください(lwcProjectはプロジェクトの名前です)。lwcProject下記のようなフォルダ構成のプロジェクトが作成されます。classesフォルダを追加しておいてください(自動では作成されないため)。新規のコンポーネントは下記のCLIコマンドで作成します(プロジェクトのルートフォルダ(上記の例だとlwcProjectフォルダ)でコマンドを実行しないと正しい場所にファイルが作成されません)。force-app/main/default/lwclwcフォルダの下に、指定したコンポーネント名のフォルダが作成されます。3つのファイルがフォルダ配下に生成されています。CSSファイルはオプションなのでデフォルトでは作成されません。必要な場合は手作業で追加する必要があります。コンポーネントを作成することもできます。Component"が表示されますので、ここをクリックしてコンポーネント名を指定します。配置されるフォルダ)でプロジェクトを開かないとこのメニューは表示されないことに注意してください。自動生成されたメタデータ・ファイルに対して下記を修正してください。</LightningComponentBundle>[メタデータファイル]HTMLファイルの実装Auraコンポーネントとの違いは、LWCではシンプルにHTMLテンプレートのみを記述することです。HTMLを拡張する表記法を比べると、プロパティの参照方法、IF文、繰り返し、Lightningコンポーネントの表記法など細かい点でAuraコンポーネントと差異があります。値がundefined(データの取得に失敗した場合)だとエラーになることです。表記されたコードは属性recordがundefinedでもエラーになりませんでした。サンプルコードでは、データ取得に失敗した時にJavaScriptエラーが発生しないようにするために、下記のIF文を入れて表示を制御しています。if:true={record.data}>JavaScriptファイルの実装JavaScriptコードの実装形式は大きく変わっています。Auraコンポーネントではcontrollerとhelperファイルに関数を定義していく形でしたが、LWCではクラスとしてコンポーネントの要素(プロパティ、getter/setter、イベント処理)を定義します。Salesforceサーバーからのデータの取得方式が大きく変更されており、より簡単な方法で実装できるように進化しています。Serviceを使ってApexクラスを呼び出してデータを取得しています。}[JavaScriptコード全体]LWC固有の拡張機能を使用するために、lwcモジュールから共通機能をimportする必要があります。必要に応じてimportします。Apexクラスの実装サーバー側Apexクラスの実装は、AuraコンポーネントとLWCで基本的に差異はありません。必要であることだけ覚えておいてください。}12|[Apexクラス]SalesforceサーバーへのアクセスLWCではJSコンポーネントからSalesforceサーバーへのアクセス方法として下記の3つの方法が提供されています。順で増えますが、その分処理の自由度も上がります。使うのが良いと思います。複雑なデータの更新処理や、任意のタイミングでサーバーアクセスを行いたい場合のみ、3のコード内から呼び出す実装方法を取ります。Service(LDS)LDSはAuraコンポーネントで提供されていた機能と同じで、サーバー側にコードを記述することなく、クライアントサイドのJavaScriptコードのみでSalesforceオブジェクトを取得可能です。提供されるAPIは随時更新されていますので、最新の状況については公式リファレンスを参照してください。下記は同じlwc_userInfoコンポーネントをLDSを使って書き直したコードになります。使ってUserオブジェクトのレコードを参照しています。(XXXは項目API名)形式で参照することができます。Serviceはデータ取得のコードを記述せずに、@Wireアノテーションを使った設定のみでサーバーからデータを取得できるLWCで導入された新しいデータ取得方式です。取得したデータを直接プロパティにセットするプロパティ方式とメソッドを呼び出すメソッド方式の2つが準備されています。プロパティ方式のコード例はさきほど紹介したので、ここではメソッド方式のコードを紹介します。サーバー呼出の結果を引数として16行目のwiredUserInfo()関数が呼び出されます。下記の例では正常に値が取得できた場合はdataプロパティに値をセットし、失敗した場合はエラーメッセージをtoast形式で画面に表示するように実装しています。メソッド方式]コード内からの直接呼び出し最後にJavaScriptコードで直接サーバー呼出を行う方法を紹介します。Auraコンポーネントでも同様なコードは記述していましたが、LWCではPromiseの仕組みを使うことでよりスマートに記述できるようになりました。}21|22|[lwc_userInfo:メソッド呼出しでデータを取得する]おわりに今回はLWCの基本的な実装方法について説明しました。Auraコンポーネントと比べると、HTMLとJavaScriptを使ってコンポーネントを開発する基本的な考え方は同様であるものの、実装方式はかなり変わっていると言えるでしょう。従来よりもシンプルかつ少ないコードで同等な機能を提供できるように工夫されている点が多数見受けられると感じました。Serviceを使うことでAuraコンポーネントでは煩雑なコードになっていたサーバー呼出し部分をすっきりと書けるようになったことも大きな進化ではないでしょうか。import/exportの仕組みによりコードの再利用も促進されると思います。入門(全5回)シリーズは下記のリンクからご覧いただけます。著者についてアピリオのシニアコンサルとしてクラウドの世界に身を投じてはや5年あまり。プロジェクトでの立場に応じて、アーキテクト、リーダー、デベロッパーと様々なロールの仕事に携わっています。新しいサービスと技術が登場するSalesforceの世界はエンジニアとして常に刺激を持ち続けられるエリアであり、2019年からはMuleSoftソリューションの起ち上げに関わっています。Componentsの基本的な構成(メタデータ、html、JavaScript)や実装のルールについて説明します。CLIを使って行います。今回はこのCLI(コマンドライン・インターフェース)にスポットを当ててみたいと思います。入門編ブログをシリーズに渡ってお届けします。開発の基本から簡単な応用テクニックまでを網羅します。Platform」についてご紹介します。主導のシステム連携をサポートするための幅広い機能が単一のプラットフォーム上で提供されています。デプロイ作業について説明します。実装について説明しました。デプロイ作業について説明します。変換例を紹介しようと思います。変数や関数の利用、典型的な変換パターンを例を交えて説明します。使ったブラウザ環境でのMuleアプリケーションの開発についてご紹介します。Muleアプリケーションを作成することに比べて、とても手軽にアプリケーションを開発できます。して提供されている単体テスト用のフレームワークです。同じようにテストスイートを実行することで単体テストを自動実行できます。開発におけるテストについて考えていきます。つのレベルの検証を実施すべきと考えます。実装したらすぐに運用開始できるというものではありません。ポリシー設定についてご紹介します。API管理は標準のポリシーの組み合わせで幅広い要件をカバーできますが、場合によっては既存機能の拡張や新機能の定義が必要になります。今回は、「カスタムポリシー」の開発手順についてご紹介します。リソースのバージョン」)を管理する必要があります。バージョン管理についてご紹介します。アプリケーションの実装方法について紹介しようと思います。アプリケーションの実装方法を引き続きご紹介します。ついて、その特長と使い方をご紹介します。ComponentsがSrping'19から提供されることになりました。Componentsが登場してきた背景とその特長について説明します。Componentsの基本的な構成(メタデータ、html、JavaScript)や実装のルールについて説明します。JavaScriptコードなどはAuraコンポーネント時代からかなり変更された要素ではありますが、より簡潔にコードが書けるように進化しているという印象を受けました。CLIを使って行います。今回はこのCLI(コマンドライン・インターフェース)にスポットを当ててみたいと思います。CLIは従来はAPIでのみ提供されていたSalesforceサーバーに対する様々な機能をコマンド形式で実行できる環境であり、Winter’18で正式にリリースされました。第5回目の今回は応用編ということで、本格的なLWCの実装時に必要となるテクニックをいくつか紹介します。使ったリリース方式です。CLIはメタデータAPI(mdapi)を包含しているため、コマンドを使ってAnt方式と同様にメタデータXMLを使ったSalesforce組織間のリリース作業を行うことができます。各種資料ENGLISHこのハブをシェアするFacebookTwitterEmailLinkedIn。