Webアプリを作っていると、「右クリックしたときに何かしたい」と思う場面があります。
Reactでも、ブラウザ標準の右クリック（コンテキストメニュー）をフックして、独自の挙動を実装することができます。
この記事では、Reactの contextmenu イベントで何ができるのか を整理します。
contextmenu イベントとは
contextmenu は、ユーザーが 右クリック（Macなら2本指クリック）した瞬間 に発火するイベントです。
通常はブラウザのメニュー（コピー、検証など）が表示されますが、このイベントを使うことで、
ブラウザの標準メニューを無効化する
独自の右クリック操作を実装する
といったことが可能になります。
Reactで contextmenu を使う意味
Reactで contextmenu を扱う最大のメリットは、
UIの状態と右クリック操作を紐づけられること です。
単なる右クリック検知ではなく、
どの要素を右クリックしたか
その要素の状態（選択中・未選択など）
現在のアプリのモード
と組み合わせた挙動を作れます。
contextmenu イベントでできること一覧
1. 独自の右クリックメニューを表示する
もっとも代表的な使い方です。
メモアプリの「編集・削除」
ファイル管理画面の「開く・複製・削除」
カードUIの「詳細を見る」
など、アプリ専用の操作を右クリックで提供できます。
2. 要素ごとに異なるメニューを出す
右クリックされた要素の種類によって、処理を切り替えることも可能です。
空白を右クリック → 新規作成
アイテムを右クリック → 編集・削除
選択済みアイテムを右クリック → 一括操作
Reactのstateと組み合わせることで、かなり柔軟な制御ができます。
3. ブラウザ標準メニューを抑制する
アプリによっては、
「右クリック自体を禁止したい」
「操作をアプリ内に閉じたい」
というケースもあります。
contextmenu を使えば、標準メニューを表示させず、独自のUXに寄せることができます。
4. 座標を使ったUI表示
右クリックした マウス位置 を取得できるため、
クリック位置の近くにメニューを出す
画面端では位置を調整する
といった、自然なUI配置が可能です。
NotionやFigmaのような操作感も再現できます。
5. ショートカット的な操作を作る
右クリックを「ショートカットの入口」として使うこともできます。
例：
右クリック → 即メモ追加
右クリック → 選択状態を切り替え
右クリック → 補助情報を表示
キーボード操作が苦手なユーザーにも優しい設計になります。
contextmenu が向いているアプリ例
メモ・ノートアプリ
管理画面・ダッシュボード
ファイル管理系UI
教育用ツール・教材管理
デザインツール風UI
「操作が多い」「情報密度が高い」アプリほど、相性が良いです。
注意点・考慮すべきポイント
標準右クリックを奪うことの影響
右クリックには、
コピー
ページ検証
新しいタブで開く
など、ユーザーが慣れた操作も含まれます。
すべてを無効化すると、逆に使いづらくなる場合もあるため、
本当に必要な画面だけに限定する のがおすすめです。
スマホでは基本的に使えない
contextmenu は基本的にPC操作向けです。
スマホでは
長押し
別のUI操作
で代替する設計が必要になります。
まとめ
Reactの contextmenu イベントを使うと、
右クリックに独自の意味を持たせられる
UIの操作性を一段階引き上げられる
デスクトップアプリのような体験を作れる
というメリットがあります。
「普通のWebアプリ」から一歩進んだUIを作りたいとき、
contextmenu はかなり強力な武器になります。
