VS Codeでの操作覚え(LWC)


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


この設定は１回しておけばよさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/8346f60d-73cc-ce74-6822-acfc3c3ff0ef.png)

このコマンドで上記で設定した環境を開くことができます。よって次回からはここからでいいでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/26334725-a64a-f702-9e70-89e4eaed7a4c.png)

[Lightning Web コンポーネントファイルのリリース](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-basics/push-lightning-web-component-files?trail_id=lex_dev)


# Auraとの比較など

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


[Lightning Web コンポーネントを Aura コンポーネントと連携させる方法について](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-for-aura-developers/understand-how-lightning-web-components-work-with-aura-components?trail_id=migrate-from-aura-to-lightning-web-components)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/33bf8413-e945-c3d7-fe8e-008c38b6bbfc.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 の移行](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-for-aura-developers/migrate-markup-and-css)

[JavaScript の移行](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-for-aura-developers/migrate-javascript)

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

[Salesforce データの操作](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-for-aura-developers/work-with-salesforce-data)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/1272740b-5ad1-5303-3c4a-b652c54b7286.png)

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


[コンポーネントの構成](https://trailhead.salesforce.com/ja/content/learn/modules/lightning-web-components-for-aura-developers/compose-components)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/bc67061e-82c7-bbd6-aa82-af1292f6bd4b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/dd09464a-ed4f-6265-30e9-54389a6ba2b0.png)



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

[古いPC(Win7)でSalesforce DXの環境設定する](https://qiita.com/Keiji_otsubo/items/0eb9909a497646a480f0)
[古いPC(Win 7)でSalesforce DXの環境設定する2](https://qiita.com/Keiji_otsubo/items/9e086f3225336ec9f1f6)

# 色んな技？

+ 標準画面の更新をトリガーする。
　[更新ボタンをクリックせずに、lwcページを自動的に更新します](https://trailhead.salesforce.com/ja/trailblazer-community/feed/0D54S00000EnDQ8)