Lightning Web Componentでボタンの二重クリックを防ぐ方法

以下は、LWC (Lightning Web Component) を使用して、ボタンの二重クリックを防ぐ方法の詳細です。isButtonDisabledというフラグを活用し、クリック後にボタンを無効化します。必要に応じて、タイマーを使って一定時間後にボタンを再び有効化する例も示します。

---

ソリューション

1. JavaScriptコード (LWC)

以下のコードは、ボタンがクリックされた際に無効化される仕組みを実現します。

// Lightning Web Component (LWC)
import { LightningElement, track } from 'lwc';

export default class DisableCommandButton extends LightningElement {
    @track isButtonDisabled = false; // ボタンの状態を管理するフラグ

    handleButtonClick() {
        this.isButtonDisabled = true; // ボタンを無効化

        // 実際の処理を実行する
        this.performAction();
    }

    performAction() {
        // 実際のアクション処理（例：データの保存やAPI呼び出し）
        console.log('アクションを実行しました。');

        // 必要に応じて、ボタンの無効化を解除する
        setTimeout(() => {
            this.isButtonDisabled = false; // 再びボタンを有効化
        }, 3000); // 例: 3秒後に再度有効化
    }
}

---

2. HTMLコード (LWC)

<template>
    <lightning-button 
        label="Click Me" 
        onclick={handleButtonClick} 
        disabled={isButtonDisabled}>
    </lightning-button>
</template>

---

実装のポイント

1. isButtonDisabledフラグ

   • ボタンの有効/無効状態を管理します。
   • 初期状態ではfalseに設定し、クリック時にtrueに切り替えます。

2. performActionメソッド

   • 実際のアクションを処理します。
   • 必要であれば、setTimeoutを使って一定時間後にフラグをfalseに戻し、ボタンを再び有効化します。

3. disabled属性

   • ボタンのHTMLでdisabled={isButtonDisabled}を指定することで、フラグに基づいて動作を制御します。

---

注意点

• UXの改善: ボタンを無効化するだけでなく、クリック時にスピナーやメッセージを表示することで、ユーザーに現在の状況を明確に伝えることをお勧めします。
• エラーハンドリング: 処理中にエラーが発生した場合の対応も考慮し、ボタンを適切に再有効化するよう設計してください。

---

結論

LWCを用いたボタンの無効化は簡単かつ効果的に実装可能です。この仕組みを使うことで、二重クリックによる誤操作や予期せぬ動作を防止し、アプリケーションの安定性とユーザー体験を向上させることができます。