via pixabay.com
はじめに:Winter '26がもたらす「フロー × LWC」の大きな転換点
Salesforceの画面フローを実装していて、「画面遷移せずにブラウザの機能を呼び出したい」という場面に直面したことはありませんか?
例えば、処理完了後のトーストメッセージ表示、クリップボードへのコピー、あるいは特定レコードへの画面遷移(リダイレクト)などです。
これらを実現するのが「ローカルアクション」ですが、Winter '26のアップデートにより、ついに LWC(Lightning Web Components)が画面フローのローカルアクションとして正式に使用できるようになりました。
本記事では、この待望の機能を用いて「レコード作成後にトーストを表示し、そのレコードへリダイレクトする」実装例を解説します。
例えば、処理完了後のトーストメッセージ表示、クリップボードへのコピー、あるいは特定レコードへの画面遷移(リダイレクト)などです。
これらを実現するのが「ローカルアクション」ですが、Winter '26のアップデートにより、ついに LWC(Lightning Web Components)が画面フローのローカルアクションとして正式に使用できるようになりました。
本記事では、この待望の機能を用いて「レコード作成後にトーストを表示し、そのレコードへリダイレクトする」実装例を解説します。
LWCローカルアクションの仕組みとメリット
Auraからの脱却と「白画面」問題の解消
これまで、画面フローからクライアントサイド(ブラウザ)の処理を実行するには、Auraコンポーネントを使用するか、LWCを「画面要素」として配置して無理やり実行させる方法が一般的でした。
しかし、後者の方法では処理実行時に一瞬白い空白画面が表示され、画面のチラつきが発生するというUX上の課題がありました。
今回のアップデートにより、LWCを純粋な「アクション」として呼び出せるようになったため、Auraへの依存を排除しつつ、こうした画面描画の問題もスマートに解消できるようになりました。
しかし、後者の方法では処理実行時に一瞬白い空白画面が表示され、画面のチラつきが発生するというUX上の課題がありました。
今回のアップデートにより、LWCを純粋な「アクション」として呼び出せるようになったため、Auraへの依存を排除しつつ、こうした画面描画の問題もスマートに解消できるようになりました。
技術仕様:lightning__FlowActionとinvokeメソッド
LWCをアクションとして動作させる裏側の仕組みは、実は非常にシンプルです。 開発者が行うべきことは大きく2つだけです。
まず、メタデータ(XML)で lightning__FlowAction というターゲットを指定し、これが「フロー用のアクションである」と宣言します。
次に、JavaScriptクラス内に invoke という名前のメソッドを定義し、@api を付けて外部公開します。
これだけで、フローエンジンは実行時に自動的に invoke メソッドを見つけ出して実行してくれます。
複雑なインターフェースの実装は不要で、このメソッド内に実行したいJavaScriptのロジックを記述するだけで連携が完了します
まず、メタデータ(XML)で lightning__FlowAction というターゲットを指定し、これが「フロー用のアクションである」と宣言します。
次に、JavaScriptクラス内に invoke という名前のメソッドを定義し、@api を付けて外部公開します。
これだけで、フローエンジンは実行時に自動的に invoke メソッドを見つけ出して実行してくれます。
複雑なインターフェースの実装は不要で、このメソッド内に実行したいJavaScriptのロジックを記述するだけで連携が完了します
実装してみた:レコード作成後のリダイレクト
実装イメージ
百聞は一見に如かず。まずは実装した処理の動作をご覧ください。
商談レコードを作成した後、標準の完了画面を出さずに、作成された商談レコードのページへ直接遷移しています。
商談レコードを作成した後、標準の完了画面を出さずに、作成された商談レコードのページへ直接遷移しています。
メタデータ(.js-meta.xml)の定義
ソースコードを見ていきましょう。まずはメタデータファイルです。
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <!-- Winter '26以降のAPIバージョンを指定 --> <apiVersion>66.0</apiVersion> <!-- フロービルダー等の外部から参照可能にする --> <isExposed>true</isExposed> <masterLabel>レコードページへリダイレクト</masterLabel> <targets> <!-- 重要:フローのローカルアクションとして使用するためのターゲット --> <target>lightning__FlowAction</target> </targets> <targetConfigs> <targetConfig targets="lightning__FlowAction"> <!-- フロー設定画面に表示される入力変数 --> <property name="recordId" type="String" label="レコードID" description="遷移先のレコードIDを指定します" /> </targetConfig> </targetConfigs> </LightningComponentBundle>
recordRedirectAction.js-meta.xml
JavaScriptの実装
続いてJavaScriptファイルです。NavigationMixin を使用してリダイレクトを行います。
import { LightningElement, api } from 'lwc'; import { NavigationMixin } from 'lightning/navigation'; import { ShowToastEvent } from 'lightning/platformShowToastEvent'; export default class RecordRedirectAction extends NavigationMixin(LightningElement) { // meta.xmlで定義したpropertyと対応する入力変数 @api recordId; /** * フローから呼び出されるエントリポイント * アクション実行時にこのメソッドが自動的に呼ばれます */ @api invoke() { // 1. トーストメッセージを表示 this.dispatchEvent( new ShowToastEvent({ title: '成功', message: '商談が作成されました', variant: 'success', }) ); // 2. レコードページへ遷移 this[NavigationMixin.Navigate]({ type: 'standard__recordPage', attributes: { recordId: this.recordId, actionName: 'view' } }); } }
recordRedirectAction.js
Flow Builderでの設定手順
アクションの選択
作成したコンポーネントをFlow Builderで使用する際は、「アクション」要素として追加します。
「アクション」を選択し、作成したLWC名を検索します。
(js-meta.xmlの<masterLabel>で設定したラベル名で検索可能です。)
「アクション」を選択し、作成したLWC名を検索します。
(js-meta.xmlの<masterLabel>で設定したラベル名で検索可能です。)
入力値の受け渡し
アクションを選択すると、設定画面が表示されます。
.js-meta.xml で定義した <property> がここに入力欄として表示されます
ここにフロー変数をマッピングすることで、LWC側へ動的に値を渡すことができます。
.js-meta.xml で定義した <property> がここに入力欄として表示されます
ここにフロー変数をマッピングすることで、LWC側へ動的に値を渡すことができます。
最後にこの画面フローを保存・有効化し、使用するページに画面フローを追加すれば、実装完了です!
知っておきたい考慮事項
非常に便利なローカルアクションですが、現時点では「アクションボタン」コンポーネントと組み合わせて使用することはできない点に注意が必要です。
アクションボタンは仕様上、クリック時にサーバーサイドで処理が完結する「自動起動フロー」を呼び出しますが、今回紹介した lightning__FlowAction はブラウザ(クライアント)のコンテキストを持つ「画面フロー」でのみ動作する仕組みだからです。
そのため、「画面上のボタンを押したら、即座に画面遷移やトースト表示を行う」といった挙動をアクションボタン経由で実装することは現状できません。
アクションボタンの完了後ではなく、フロー全体の「終了」直前や、画面間のステップとしてこのローカルアクションを配置してご利用ください。
アクションボタンは仕様上、クリック時にサーバーサイドで処理が完結する「自動起動フロー」を呼び出しますが、今回紹介した lightning__FlowAction はブラウザ(クライアント)のコンテキストを持つ「画面フロー」でのみ動作する仕組みだからです。
そのため、「画面上のボタンを押したら、即座に画面遷移やトースト表示を行う」といった挙動をアクションボタン経由で実装することは現状できません。
アクションボタンの完了後ではなく、フロー全体の「終了」直前や、画面間のステップとしてこのローカルアクションを配置してご利用ください。
おわりに
最後までお読みいただき、ありがとうございました。
本記事では、画面フローのローカルアクションとしてLWCを使用する方法をご紹介しました。
Winter'26のアップデートで、Auraへの依存がなくなり、LWCのみでモダンなフロー開発が完結するようになりました。
「ノーコード(フロー)」と「プロコード(LWC)」の役割分担が明確になり、メンテナンス性とUXの両方を向上させることができます。ぜひWinter '26環境で試してみてください!
本記事では、画面フローのローカルアクションとしてLWCを使用する方法をご紹介しました。
Winter'26のアップデートで、Auraへの依存がなくなり、LWCのみでモダンなフロー開発が完結するようになりました。
「ノーコード(フロー)」と「プロコード(LWC)」の役割分担が明確になり、メンテナンス性とUXの両方を向上させることができます。ぜひWinter '26環境で試してみてください!