LWCの選択リストと複数選択リストの値をApexへ渡す

なぜLWCで選択リストを扱うのか

取引先に選択リストと複数選択リストを持たせ、画面で選んだ値をApexへ渡して保存する場面はよくあります。通常の選択リストは1つだけ選べ、複数選択リストは複数の値を1つの項目にまとめて保存します。両方をクイックアクションの画面で選び、取引先レコードを作る実装をまとめます。

取引先オブジェクトに選択リスト項目を作る

1. オブジェクトマネージャで取引先を開く

   設定からオブジェクトマネージャを開き、取引先の「項目とリレーション」で新規をクリックします。

2. データ型を選ぶ

   通常の選択リストなら「選択リスト」、複数選べる項目なら「選択リスト（複数選択）」を選びます。複数選択リストでは、あわせて編集画面で一度に表示する値の数も指定します（ボックスの高さになります）。

3. 値を定義してページレイアウトに追加する

   グローバル選択リストを使うか、この項目だけの値を入力するかを選んで選択肢を登録し、表示するページレイアウトを選んで保存します。

複数選択リストは、商談分割の項目には追加できません。取引先や取引先責任者などの通常のオブジェクトでは問題なく使えます。

Apexクラス

選択リストと複数選択リストの値を受け取り、取引先を作成します。

public with sharing class SelectionSampleController {
    @AuraEnabled(cacheable=false)
    public static String createAccount(
        List<String> multipleSelectionType,
        String selectionType
    ) {
        Savepoint sp = Database.setSavepoint();
        try {
            Account acc = new Account();
            acc.Name = 'test' + Date.today();
            acc.multipleSelectionType__c = getMultiSelectValue(multipleSelectionType);
            acc.selectionType__c = selectionType;
            insert acc;
            return 'success';
        } catch (DmlException e) {
            Database.rollback(sp);
            throw new AuraHandledException(e.getMessage());
        }
    }

    private static String getMultiSelectValue(List<String> value) {
        String ret = '';
        for (String str : value) {
            ret += str + ';';
        }
        return ret;
    }
}

複数選択リストの値はセミコロン区切りの文字列にしてから、取引先へ保存します。DMLを含むためcacheable=trueは使えません。

Lightning Web コンポーネント

選択リストはlightning-combobox、複数選択リストはlightning-dual-listboxで表示します。

<template>
    <lightning-quick-action-panel header="選択する">
        <lightning-combobox name="selectionType"
            label="選択リスト"
            options={selectionListOptions}
            value={selectionType}
            required
            onchange={handleSelectionChange}>
        </lightning-combobox>
        <lightning-dual-listbox name="multipleSelectionType"
            label="複数選択リスト"
            source-label="選択可能"
            selected-label="選択済み"
            options={multipleSelectionListOptions}
            value={multipleSelectionType}
            onchange={handleMultipleSelectionChange}>
        </lightning-dual-listbox>
        <div slot="footer">
            <lightning-button variant="brand" label="作成" onclick={handleClickCreate}></lightning-button>
        </div>
    </lightning-quick-action-panel>
</template>

クイックアクションのパネルに選択リストと複数選択リストを並べます。

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import createAccount from '@salesforce/apex/SelectionSampleController.createAccount';

export default class SelectionSample extends LightningElement {
    selectionType;
    multipleSelectionType;

    handleSelectionChange(event) {
        this.selectionType = event.target.value;
    }

    handleMultipleSelectionChange(event) {
        this.multipleSelectionType = event.target.value;
    }

    async handleClickCreate() {
        const params = { multipleSelectionType: this.multipleSelectionType, selectionType: this.selectionType };
        try {
            await createAccount(params);
            this.dispatchEvent(new ShowToastEvent({ title: '作成が完了しました', variant: 'success' }));
        } catch (error) {
            this.dispatchEvent(new ShowToastEvent({ title: 'エラーが発生しました', message: error.body?.message, variant: 'error' }));
        }
    }

    get selectionListOptions() {
        return [{ label: '選択１', value: '選択１' }, { label: '選択２', value: '選択２' }];
    }

    get multipleSelectionListOptions() {
        return [{ label: '複数選択１', value: '複数選択１' }, { label: '複数選択２', value: '複数選択２' }, { label: '複数選択３', value: '複数選択３' }];
    }
}

作成ボタンを押すと、選んだ値をApexへ渡します。

以前の書き方では@apiと@trackを付けていましたが、どちらも外部公開や配列・オブジェクトの中身を追跡するためのもので、この処理には不要です。文字列の再代入は@trackが無くても再描画されるため、通常のイベントハンドラとプライベートなフィールドに直しています。動きは変わりません。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>67.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

レコードページのクイックアクションとして動く設定です。apiVersionは67.0へ上げています。

クイックアクションを作る

コンポーネントができたら、取引先ページで呼び出せるようにします。

1. ボタン、リンク、アクションを開く

   取引先オブジェクトの管理設定で新規アクションを作り、アクションタイプに「Lightning Web コンポーネント」を選んで作成したコンポーネントを指定します。

2. ページレイアウトに追加する

   取引先のLightningページレイアウトのアクション欄に、作成したクイックアクションを追加して保存します。

js-meta.xmlのactionType（ScreenActionかAction）は、あとから変更できません。作り直しになるので、最初に決めてから進めてください。

動作確認の流れ

取引先詳細画面のアクション欄からクイックアクションを開くと、選択リストは未選択、複数選択リストも未選択の状態で表示されます。値を選んで作成ボタンを押すと「作成が完了しました」のトーストが出て、取引先の一覧・詳細画面で選んだ値が反映されます。複数選択リストの値はセミコロン区切りで保存されます。

ここで間違えやすい

確認した環境

• 2026年9月 ／ Salesforce Summer '26（APIバージョン67.0）時点の公式ヘルプ・公式ガイドで、選択リスト項目の作成手順とLWCクイックアクションの設定を確認しています

まとめ

• 選択リストはlightning-combobox、複数選択リストはlightning-dual-listboxで画面に出します
• 複数選択リストの値はApex側でセミコロン区切りの文字列に変換してから保存します
• insertを含むメソッドには@AuraEnabled(cacheable=true)を付けられません
• LWCをクイックアクションにするには、js-meta.xmlでlightning__RecordActionをターゲットにし、actionTypeを指定します
• クイックアクションのアクションタイプは、あとから変更できません
• 複数選択リストは商談分割には追加できません