はじめに

SHIFT Salesforceグループの汪（オウ）です。

Lightning Web Components（以下、LWC）は、Salesforceプラットフォームにおいて近年主流となっているモダンなWebコンポーネントフレームワークです。Aura Componentsに比べ、軽量かつ高パフォーマンスな点が特徴で、Salesforce開発者や管理者にとって、より生産性の高い開発手法を提供します。

そんなLWCには、コンポーネントをさらに汎用的かつ拡張性の高いものにするための重要な仕組みがあります。

本記事では、LWCでのオプションパラメータの設定方法や画面（Lightning App Builder）からのパラメータカスタマイズ方法、ベストプラクティスについて解説していきます。

なぜオプションパラメータが重要なのか

1. コンポーネントの柔軟性向上

オプションパラメータを活用することで、一つのコンポーネントを様々な要件や画面で再利用できるようになります。必要に応じてプロパティを変更するだけで表示内容やロジックを切り替えられるため、アプリケーションの保守性や開発スピードが向上します。

2. 再利用性の向上

オプションパラメータを持たせれば、共通の処理を持つコンポーネントを横展開しやすくなります。複数のページやプロジェクトでの重複実装を減らし、メンテナンスコストを抑える効果が期待できます。

3. GUIからの簡単な変更が可能

SalesforceのLightning App Builderを使い、管理者や開発者が直接画面上でパラメータを調整できるようにすれば、プログラミング知識がないユーザーでもUI設定を簡単に変更できます。こうした仕組みは、ビジネス要件の変化に素早く対応するうえで非常に有用です。

オプションパラメータの基本設定

1. 公開プロパティの定義

LWCのJavaScriptクラス内で、@apiデコレーターを使用してプロパティを定義すると、他のコンポーネントやLightning App Builderから参照・変更が可能な公開プロパティになります。オプションパラメータとして利用する際は、初期値（デフォルト値）を設定しておくと、値が未設定の場合でも安全に動作します。

// myComponent.js
import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement {
    @api title = 'デフォルトタイトル';  // デフォルト値を設定
    @api isVisible = false;             // Boolean型
    @api count = 0;                    // Integer型
}

2. コンポーネント間でのデータ受け渡し

親コンポーネントから子コンポーネントへパラメータを渡す場合は、親コンポーネントのHTMLで子コンポーネントを配置し、属性として値をバインドします。以下は例です。

<!-- parentComponent.html -->
<template>
    <c-my-component
        title="親から設定されたタイトル"
        is-visible={showChild}
        count={itemCount}
    ></c-my-component>
</template>

親コンポーネント側でshowChild（真偽値）やitemCount（数値）を定義しておけば、子コンポーネントのtitle, isVisible, countに自動的に値が反映されます。

Lightning App Builderでのパラメータ設定

1. デザインファイルの準備

LWCのフォルダ内には、<コンポーネント名>.js-meta.xmlというメタデータファイルがあります。ここで指定したパラメータはLightning App Builderのプロパティパネルに表示され、画面上で調整可能になります。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage">
            <property name="title"    type="String"  label="タイトル"   default="デフォルトタイトル"/>
            <property name="isVisible" type="Boolean" label="表示する" default="true"/>
            <property name="count"     type="Integer"  label="カウント" default="0"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

2. App Builderでの設定手順

Lightning App Builderを開く

• Salesforce組織の設定画面からアプリページやレコードページなどを選択し、「編集」ボタンでLightning App Builderを起動します。

コンポーネントを追加

• 左側のカスタムコンポーネントリストから、自作のLWCを画面上にドラッグ＆ドロップします。

プロパティを調整

• 右側のプロパティパネルに、上記メタデータファイルで設定したtitle, isVisible, countが表示されます。これらの値を変更すると、即座にコンポーネントの表示や挙動が変わります。

保存と公開

• 設定内容を保存し、ページを公開・プレビューすることで、実際の画面に変更が反映されます。

具体例：動的タイトルと数値カウント表示

1. JavaScriptクラス例

// dynamicCounter.js
import { LightningElement, api } from 'lwc';

export default class DynamicCounter extends LightningElement {
    @api title = 'カウントアプリ';
    @api count = 0;
    @api isVisible = false;

    get hasTitle() {
        return this.title && this.title.trim().length > 0;
    }
}

2. HTMLテンプレート例

<!-- dynamicCounter.html -->
<template>
    <template if:true={isVisible}>
        <template if:true={hasTitle}>
            <h2>{title}</h2>
        </template>
        <p>現在のカウント: {count}</p>
    </template>
    <template if:false={isVisible}>
        <p>このコンポーネントは非表示です。</p>
    </template>
</template>

3. メタデータファイル例

<!-- dynamicCounter.js-meta.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>57.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage">
            <property name="title" type="String" label="タイトル" default="カウントアプリ"/>
            <property name="isVisible" type="Boolean" label="表示する" default="true"/>
            <property name="count" type="Integer" label="初期カウント" default="0"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

4. App Builderでの設定

Lightning App BuilderでLWCを画面に設定します。

Lightning App Builder上で「タイトル」を好きな文字列に変更したり、「表示する」を無効にしたりすれば、画面上のコンポーネントが瞬時に切り替わります。

ベストプラクティス

1. デフォルト値の設定

• オプションパラメータは必須ではないことが前提なので、必ず不備が生じないようデフォルト値を設定しましょう。

2. 型の明確化

• @apiプロパティはJavaScript側だけでなく、メタデータファイル（XML）でも型を指定します。IntegerやBooleanなど、想定される型に合わせて定義することが大切です。

3. 依存関係の整理

• 複数パラメータが複雑に絡む場合は、getterや条件分岐を使ってロジックを明確化すると、可読性が高まります。

4. ドキュメント化

• コンポーネントの使い方やパラメータの意味、可能な値の範囲などをREADMEやConfluenceなどで明示し、チームで共有するのが望ましいです。

5. 一貫性のある命名

• パラメータ名やラベル名は統一感を持たせることで、管理者・開発者・ユーザー全員が迷わずに扱えます。

まとめ

本記事では、LWCのオプションパラメータを活用してコンポーネントを柔軟に設計する方法を解説しました。オプションパラメータを導入することで、

• 同じコンポーネントを複数の場面で使い回せる

• Lightning App Builder上から値を簡単に変更できる

• 再利用性や保守性が飛躍的に向上する

といったメリットが得られます。今後の開発や運用でコンポーネント設計を行う際には、ぜひオプションパラメータを意識してみてください。きっと生産性の高いSalesforce開発につながるはずです。

参考資料

• Salesforce公式ドキュメント（Lightning Web Components 開発ガイド）

• トレイルヘッド（Lightning Web Componentsの基礎）

• Salesforceリリースノート

✅Salesforce関連おすすめ

✅SHIFTへのお問合せはお気軽に

✅お役立ち資料無料ダウンロードはこちら

🌟SHIFTの採用情報はこちら

SHIFTについて（コーポレートサイト）

SHIFTのサービスについて（サービスサイト）

SHIFTの導入事例

PHOTO：UnsplashのJames Harrison