LWC2

zipなどのアーカイブ、画像、スタイルシート、jsファイル、その他

静的リソースの前に名前空間__をつける必要がある import myResource from '@salesforce/resourceUrl/namespace__resourceReference';

アーカイブをインポートし、 文字列で内部ファイルを参照する // Expose the static resource URL for use in the template trailheadLogoUrl = TRAILHEAD_LOGO; // Expose URL of assets included inside an archive file einsteinUrl = TRAILHEAD_CHARACTERS + '/images/einstein.png'; 上記ファイルを表示するにはこんなかんじ <img src={trailheadLogoUrl}> <img src={einsteinUrl}>

resourceUrlの部分がcontentAssetUrlにかわるだけ！ import myContentAsset from '@salesforce/contentAssetUrl/contentAssetReference'; 名前空間あり import myContentAsset from '@salesforce/contentAssetUrl/namespace__contentAssetReference';

force-app/main/default のサブディレクトリにどこでも配置可能らしい https://developer.salesforce.com/docs/component-library/documentation/ja-jp/57.0/lwc/lwc.create_labels

インポートする labelでいける // Import custom labels import greeting from '@salesforce/label/c.greeting'; html側で　greetingでアクセス可能！

SVGは直線、曲線、図形、テキストを定義できるXMLベースの画像形式なので、直接HTML内に定義可能！ <template> <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red"></rect> <circle cx="150" cy="100" r="80" fill="green"></circle> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg> </template> 覚えなくていい それと静的リソースにsvgをあげてインポートできる！ myComponent.js import { LightningElement } from 'lwc'; import SVG_LOGO from '@salesforce/resourceUrl/logo'; export default class myComponent extends LightningElement { svgURL = `${SVG_LOGO}#logo` }

国際化ApIの名前空間 言語に依存した文字列の比較や、数値、日付フォーマットを提供する

されない lightning基本コンポーネントはされる。

i18nからインポートし、フォーマットすると、ユーザ設定にあった出力を行うことができる。 import { LightningElement } from 'lwc'; import LOCALE from '@salesforce/i18n/locale'; import CURRENCY from '@salesforce/i18n/currency'; export default class FormatNumber extends LightningElement { number = 123456.78; formattedNumber = new Intl.NumberFormat(LOCALE, { style: 'currency', currency: CURRENCY, currencyDisplay: 'symbol' }).format(this.number); }

userからid かisGuestをインポートする import { LightningElement } from 'lwc'; import Id from '@salesforce/user/Id'; export default class MiscGetUserId extends LightningElement { userId = Id; }

現在のサイトIDや(Id) ドメイン後に続くのURL(baseUrl) が取得できる インポートして利用する import Id from '@salesforce/community/Id'; コミュニティIDから、そのサイトに紐作くフィード情報を取得したりできるらしい import { LightningElement } from 'lwc'; import Id from '@salesforce/community/Id'; import getFeedElementPageForCommunity from '@salesforce/apex/CommunityFeedController.getFeedElementPageForCommunity'; export default class CommunityFeedElementPage extends LightningElement { @wire(getFeedElementPageForCommunity, { networkId: '$Id' }) feedElementPage; }

インポートする import hasPermission from '@salesforce/customPermission/PermissionName'; 名前空間あり import hasPermission from '@salesforce/customPermission/namespace__PermissionName'; 戻り値はtrue or undifined 例 // app.js import { LightningElement } from 'lwc'; import hasViewSetup from '@salesforce/userPermission/ViewSetup'; export default class App extends LightingElement { get isSetupEnabled() { return hasViewSetup; } openSetup(e) {...} }

formFactorをインポートする formFactorPropertyName — ブラウザを実行しているハードウェアのフォーム要素を参照する名前。可能な値は次のとおりです。 Large — デスクトップクライアント。 Medium — タブレットクライアント。 Small —電話クライアント import formFactorPropertyName from '@salesforce/client/formFactor' 例 import { getRecordCreateDefaults } from 'lightning/uiRecordApi'; import ACCOUNT_OBJECT from '@salesforce/schema/Account'; import FORM_FACTOR from '@salesforce/client/formFactor'; @wire(getRecordCreateDefaults, { objectApiName: ACCOUNT_OBJECT, formFactor: FORM_FACTOR}) accountDefaults;

標準コンポーネントに対しては、 title属性を利用する。 カスタムコンポーネントでは、titleプロパティを公開にし、setterで自コンポーネントに対してsetAttributeで属性設定してやる必要がある ※ただ公開プロパティに設定するだけでは、属性設定されないらしい // myComponent.js import { LightningElement, api } from 'lwc'; export default class MyComponent extends LightningElement { privateTitle; @api get title() { return this.privateTitle; } set title(value) { this.privateTitle = value.toUpperCase(); this.setAttribute('title', this.privateTitle); } }

公開プロパティで値をうけつけ、 setterで、this.setAttributeで属性設定を行う

利用できる Element EventTarget HTMLElement Nodeのインタフェースが利用できる が、利用できるインタフェースは以下のものに限られる。 https://developer.salesforce.com/docs/platform/ja-jp/lwc/guide/js-web-apis.html ここで記載されてるもの

falseにデフォルト設定しておく @api show = false;

trueになってしまう falseにしたい場合は省略する。

される。 が、javascriptサンドボックスの仮想グローバルオブジェクトへの書き込みは許可する設定となっている。 そのため、明示的に設定されるとエラーがでる。 サードパーティスクリプトでuse Strictを利用していたら消す必要あり

しないが、中の要素にインタラクティブ要素があれば、その要素自体はフォーカス対象となる。

tabindex属性を付与し、0を割り当てる

関連するデータの集合とそれらに対する操作をオブジェクトとして一つの単位にまとめ、外部に対して必要な情報や手続きのみを提供すること。 配列は添字でアクセスできるなど、プログラミング言語の中でちょっと特殊な存在です。 そのため、配列とオブジェクトを分けて考えがちですが、オブジェクト指向的には分けて考える必要はありません。 配列に対する手続きが必要な場合は、配列にメソッドを生やすのがスマートだと思います。 https://qiita.com/tatsuya-fujii-LITALICO/items/213159ea4c59543b12b8

ユーティリティバーにトーストのコンポーネントをいれとくとできる。

https://base.terrasky.co.jp/articles/dJY2d インスタンス時にまず実行される(処理的に空振りする) ワイヤで指定された変数にプロビジョニングされたタイミングで再実行される。 (引数によって値が与えられた時など)

できる。 Apex側のオブジェクトに機能をつくっておくことができ、それをJavaScript 側であつかえる @AuraEnabledこのアノテーションを指定することで、メソッドを Lightning コンポーネント (Lightning Web コンポーネントと Aura コンポーネントの両方) で使用できるようになります。このアノテーションが付加されたメソッドのみが公開されます。

salesforceモジュールを利用してインポートする。 import Id from ‘@salesforce/user/Id’; import NAME_FIELD from ‘@salesforce/schema/User.Name’;