Lightning Web Components（HTML） #Salesforce

変数の参照

jsファイル内に定義した変数やgetterを参照可能。
Auraコンポーネントのように{}の中に式を使用することはできない。
注意：{}と変数の間にスペースを含めないこと

{recordId}  //! は不要
data={records.data}  //ダブルクォテーションを付けない
data={ records.data }  //スペースを含めるのはダメ

下記のようにjs内に定義した関数を参照することもできる。

<div if:true={condition}>Conditional Code</div>

export default class MyComponentName {
    get condition() {
        return something ? true : false;
    }
}

イベントハンドラの紐付け

{}内に関数名を記述する。'{' + 関数名 + '}'

//HTML
<lightning-input label="Name" value={greeting} onchange={handleChange}></lightning-input>

//JS
handleChange(event) {
    this.greeting = event.target.value;
}

繰り返し

for:each, for:item, for:index を使用する。繰り返し要素には識別のためにkey属性を付ける必要がある。

<template for:each={items} for:item="item" for:index="idx">
    <p key={item.id}>{idx}:{item}</p>
</template>

1:要素1
2:要素2
3:要素3
・・・・

iteratorを使うやり方もある。この方法だと最初と最後の要素を識別することが可能。

<template iterator:it={contacts}>
  <li key={it.value.Id}>
    <div if:true={it.first} class="list-first"></div>
      {it.value.Name}, {it.value.Title}
    <div if:true={it.last} class="list-last"></div>
  </li>
</template>

//it.value: 値
//it.index: インデックス
//it.first: 最初の要素でtrue
//it.last:  最後の要素でtrue

IF文

if:true と if:falseを使う。

<div if:true={something}>Conditional Code</div>
<div if:false={something}>Conditional Code</div>

<!-- templateタグを使うと、タグ自体は非表示になる -->
<template if:true={something}> ***  </template>

タグ要素の取得

auraコンポーネントでの実装で aura:id と cmp.find() を使っていたタグ要素の取得は data-id と querySelector() を使用する。

<!-- data-idを使ってidを指定する -->
<div data-id="body" class="slds-modal__content slds-p-around_medium">

//querySelectorを使って検索する
var body = this.template.querySelector('[data-id="body"]')

classのadd/remove/toggle

auraコンポーネントで、$A.util.addClass等のユーティリティで実装していたスタイルclassの切り替えは classListを使用する。

//xx はquerySelectorで取得したDOMノード
xx.classList.add('slds-hide');
xx.classList.remove('slds-hide');
xx.classList.toggle('content_scrolly');

cssクラスの指定

コンポーネント独自のcssクラスを使用したい場合は、コンポーネントフォルダ内にcssファイル（コンポーネント名.css）を追加して、CSSファイルにクラスを定義する。

.dropzone {
    width:100%;
    height:100px
}

HTML内から普通にクラス指定すれば参照される。

 <div class="dropzone slds-file-selector slds-file-selector_files">
   <div class="slds-file-selector>

静的リソースの参照

静的リソースとして登録した画像を使用したい場合は、JS側でimportした静的リソース名を属性として指定する。

import trailheadLogoUrl from '@salesforce/resourceUrl/trailheadLogo';

get trailheadLogoUrl {
    return trailheadLogoUrl;
}

<!-- trailheadLogoUrlにはURLパスがセットされている -->
<div class="slds-m-around_medium">
    <img src={trailheadLogoUrl}>
</div>

Lightningコンポーネントの利用

属性名の区切りが - （ハイフン）になっていることに注意。またAuraコンポーネントの時に使用できたコンポーネントタグの末尾に / を付ける記述方法はできなくなっている。必ず閉じタグが必要。

<lightning-icon icon-name="standard:opportunity" size="small" ></lightning-icon>