Lightning Web Components（標準Lightingコンポーネント）


[Lightning Web Components コンポーネントリファレンス](https://developer.salesforce.com/docs/component-library/overview/components)

- Auraコンポーネントと異なり コンポーネント名は - (ハイフン)で単語を繋げている
- 閉じタグが必要
- {}により変数をセットする場合は "（ダブルクォテーション）で囲む必要はない

####アイコン
[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-icon/example)
<img width="147" alt="Screen Shot 2019-01-30 at 22.49.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/516430d4-f6c7-d72f-4cbb-f402dd993a6e.png">

```html
<lightning-icon icon-name="standard:user" size="small"></lightning-icon>ユーザー情報
```

####テキスト表示
[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-formatted-text/example)

```html
<lightning-formatted-text value={data.Name}></lightning-formatted-text>
```


####データテーブル
[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example)

<img width="619" alt="Screen Shot 2019-01-30 at 22.48.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/2df6035b-f9bc-f335-452f-f2a1de308337.png">

```html
<lightning-datatable
   key-field="id"
   data={records.data}
   columns={columns}
   onrowaction={rowAction}
   hide-checkbox-column="true"
   resize-column-disabled="true">
</lightning-datatable>
```

```js
export default class lwc_sample extends NavigationMixin(LightningElement) {
    @track columns;           //カラムの定義

・・・

/*
 * 初期化処理
 */
connectedCallback() {
    this.setHeaderColumns();
}

/*
 * DataTableのカラム定義を設定する
 */
setHeaderColumns() {
    let actions = [
        { label: '詳細を見る', name: 'show_details' }
    ];

    this.columns = [
        { label: '商談名', fieldName: 'Name', type: 'text' },
        { label: '金額', fieldName: 'Amount', type: 'currency', cellAttributes: { alignment: 'left' } },
        { label: 'フェーズ', fieldName: 'StageName', type: 'text' },
        { type: 'action', typeAttributes: { rowActions: actions } }
    ];
}

/*
 * 行の右側のドロップダウンリストをクリック
 */
rowAction(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    let action = evt.detail.action;
    let row = evt.detail.row;

    if (action.name === 'show_details') {
        this[NavigationMixin.Navigate]({
            type: "standard__recordPage",
            attributes: {
                recordId: row.Id,
                objectApiName: "Opportunity",
                actionName: "view"
            }
        });
    }
}
```

####Spinner
[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-spinner/example)
<img width="107" alt="Screen Shot 2019-01-30 at 22.44.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/71baa1a5-f195-83f6-8f5c-b2a9bcea8941.png">

```html
<div style="position:relative">
  <div if:false={isLoaded}>
    <lightning-spinner variant="brand" size="medium"></lightning-spinner>

・・・

  </div>
</div>
```

```js
export default class lwc_sample extends NavigationMixin(LightningElement) {
    @track isLoaded = false;  //ロード状態の識別フラグ

・・・

/*
 * 描画後に呼び出される
 */
renderedCallback() {
    this.isLoaded = true;
}

```

####ボタン
[リファレンス](https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example)

<img width="468" alt="Screen Shot 2019-01-30 at 22.59.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/161463/b667b7ae-ebd1-fae0-1861-07d9f091bc31.png">

```html
<!-- 通常のボタン -->
<lightning-button
  variant="Neutral"
  label="ダウンロード"
  onclick={handleClick}
  class="slds-m-left_x-small">
</lightning-button>

<!--アイコン付きボタン -->
<lightning-button
  variant="Neutral"
  label="ダウンロード"
  icon-name="utility:download"
  icon-position="left"
  onclick={handleClick}
  class="slds-m-left_x-small">
</lightning-button>
```

```js
/*
 * ボタンクリック
 */
handleClick(event) {
  //ボタンクリック時の処理
}
```