Lightning Web Componentでのカスタム表示ラベルの実装メモ

# 初めに
- OSSでLWCのコードを見る機会があり、なるほど、こういう風にやればいいんだなと色々気づきがあったのでメモ

## カスタム表示ラベルとは

>Apex クラス、Visualforce ページ、Lightning ページ、または Lightning コンポーネントからアクセスできるカスタムテキスト値です

- ハードコードしたくない値を設定したり、マルチ言語での動作が必要な際に翻訳機能を加えたりすることが可能   
- 参考

https://help.salesforce.com/s/articleView?id=sf.cl_about.htm&language=ja&type=5#:~:text=%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E8%A1%A8%E7%A4%BA%E3%83%A9%E3%83%99%E3%83%AB%E3%81%AF%E3%80%81Apex,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82

## メタデータについて
### ラベルの作成
- LWC作成とともにカスタムメタデータもDeployしたい場合は、meta.xmlを作っておく  
- `force-app/main/default/customLabels`に `customLabels.labels-meta.xml`を下記のように作成する (*`customLabels`というpath名でないといけないというわけではない)
- LWCを作成して、Deployする (**LWCより先にDeployしておくこと**)

```xml:customLabels.labels-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<CustomLabels xmlns="http://soap.sforce.com/2006/04/metadata">
     <labels>
        <fullName>MonthName_January</fullName>
        <language>ja</language>
        <protected>true</protected>
        <categories>TestCustomLabel</categories>
        <shortDescription>Month name</shortDescription>
        <value>1月</value>
    </labels>
</CustomLabels>
```

- 参考

https://developer.salesforce.com/docs/atlas.ja-jp.api_meta.meta/api_meta/meta_customlabels.htm

- Deployすると、こんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/484310/017d6ed2-1d8f-d509-c53f-84066188f6e7.png)

- 翻訳に新規で言語を追加すれば、そのユーザの設定言語で翻訳されるようになる

### 翻訳
- 少ない場合は手動で画面で追加しても良いが、翻訳自体もメタデータでDeploy可能  
- `force-app/main/default/translations` path下に、en_US.translation-meta.xmlなどを作る
    - この際、最初の二文字が翻訳言語になる（日本語だと`ja`） 
    - 五文字の場合は場所によって言語が異なる場合に使用

```xml:en_US.translation-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<Translations xmlns="http://soap.sforce.com/2006/04/metadata">
    <customLabels>
        <name>MonthName_January</name>
        <label>January</label>
    </customLabels>
</Translations>
```
- `name`にカスタム表示ラベル名をセット
- `label`に翻訳値をセット

## LWC実装時のTips
- 一つずつのjsファイルに数が少ない場合は直接importでも良いが...
- import自体の構文は下記:

```javascript
import MonthName_January from "@salesforce/label/c.MonthName_January";
```
- 数が多い場合は、`force-app/main/default/lwc/xxx`配下にLabelをimport/exportする用のjsファイルを別途作ると良い  

```javascript:sampleLabels.js
import MonthName_January from "@salesforce/label/c.MonthName_January";
import MonthName_Feburary from "@salesforce/label/c.MonthName_February";
import MonthName_March from "@salesforce/label/c.MonthName_March";
import MonthName_April from "@salesforce/label/c.MonthName_April";
// 省略

const customLabels = {
  MonthName_January,
  MonthName_February,
  MonthName_March,
  MonthName_April,
  //　省略
};

export default customLabels;
```
- そして、カスタムラベルを使用するjs側で、importすればOK

```javascript:xxx.js
import customLabels from "./sampleLabels";

export default class Xxx extends LightningElement {
  LABELS = customLabels;
  
  months = [
    this.LABELS.MonthName_January,
    this.LABELS.MonthName_February,
    this.LABELS.MonthName_March,
    this.LABELS.MonthName_April,
    // ...
  ];
 // ...
}
```

- HTML側でのカスタム表示ラベルの使用例

```html:xxx.html
<template>
  <div class="container">
    <div class="title">
      {LABELS.MonthName_January}
    </div>
  </div>
</template>
```