LoginSignup
0
0

More than 1 year has passed since last update.

VS Codeでの操作覚え(LWC)

Last updated at Posted at 2022-01-20

普段使わないので忘れそうです。

この設定は1回しておけばよさそうです。
image.png

このコマンドで上記で設定した環境を開くことができます。よって次回からはここからでいいでしょう。
image.png

Lightning Web コンポーネントファイルのリリース

Auraとの比較など

  • Aura コンポーネントに Lightning Web コンポーネントを含めることができる
  • Lightning Web コンポーネントに Aura コンポーネントを含めることはできない。

Lightning Web コンポーネントを Aura コンポーネントと連携させる方法について

image.png

Lightning Web コンポーネントの HTML ファイルの動的コンテンツには、感嘆符または値プロバイダ (v.) 構文がありません。入力し慣れているかもしれませんが、Lightning Web コンポーネントで Aura コンポーネントの式構文は使用しないでください。

Lightning Web コンポーネントの HTML ファイルの動的コンテンツには、{brokerId} 参照を囲む引用符(!v.)がありません。これは入力ミスではありません。

Lightning Web コンポーネントは Aura コンポーネントのスタイル設定を継承する
Aura コンポーネントのスタイルは、含まれている Lightning Web コンポーネントに伝播します。

ただし、Lightning Web コンポーネントのスタイルが、他の Lightning Web コンポーネントや Aura コンポーネントに干渉することはありません。読み間違いではありません。Lightning Web コンポーネントのスタイルは子に伝播しません。多くの問題を引き起こす可能性があるので、自分が所有しないスタイルの上書きは Lightning Web コンポーネントでは許可されていません。

マークアップと CSS の移行

JavaScript の移行

  • Lightning Web コンポーネントの JavaScript ファイルは ES6 モジュール
  • libcallerAura Aura コンポーネントには c:utils ES6 モジュールへの参照が含まれています。JavaScript コードでモジュールの参照を取得できるように aura:id を追加しました。

Salesforce データの操作

image.png

  • レコードの作成、更新、削除に @wire を使用しないでください。表示のみに使えるみたい。
  • Apex メソッドの Lightning Web コンポーネントへの公開 Apex メソッドを Lightning Web コンポーネントに公開するには、メソッドが static で、かつ global または public のいずれかである必要があります。メソッドに @AuraEnabled アノテーションを付加します。こうした要件は、Aura コンポーネントで Apex メソッドを使用する場合と同じです。@AuraEnabled アノテーションは、Aura コンポーネントまたは Lightning Web コンポーネントからメソッドをコールできることを意味します。Lightning Web コンポーネントでの @AuraEnabled の使用は意外なように思えるかもしれませんが、このアノテーションを使用することで、同じ Apex コードを両方のプログラミングモデルで使用できるようになります。

コンポーネントの構成

マークアップは、構成コンポーネントを参照する構文を除けば、2 つのプログラミングモデルで類似しています。
+ Aura コンポーネントでは、c:PropertyTile を使用します。
+ Lightning Web コンポーネントでは、c-property-tile を使用します。c 名前空間とコンポーネント名はダッシュで区切られます。キャメルケースの propertyTile Lightning Web コンポーネントは、それを含む別の Lightning Web コンポーネントの HTML ファイルでは property-tile として参照されます。

image.png

image.png

インストール、環境設定など

古いPC(Win7)でSalesforce DXの環境設定する
古いPC(Win 7)でSalesforce DXの環境設定する2

色んな技?

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0