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

初めに

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

カスタム表示ラベルとは

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

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

メタデータについて

ラベルの作成

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

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>

• 参考

• Deployすると、こんな感じ
  

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

翻訳

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

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自体の構文は下記:

import MonthName_January from "@salesforce/label/c.MonthName_January";

• 数が多い場合は、force-app/main/default/lwc/xxx配下にLabelをimport/exportする用のjsファイルを別途作ると良い

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

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側でのカスタム表示ラベルの使用例

xxx.html

<template>
  <div class="container">
    <div class="title">
      {LABELS.MonthName_January}
    </div>
  </div>
</template>