Reactは、キーボードイベントを活用して、ユーザーとのインタラクションを強化する強力なツールを提供します。特に、onKeyDownやonKeyPressといったイベントは、ユーザーのキー入力をリアルタイムでキャプチャし、動的な操作を可能にします。これにより、キーボードショートカット、フォームの最適化、ゲーム機能など、さまざまなユースケースに対応できます。本記事では、キーボードイベントの基本的な使い方から応用例までを丁寧に解説し、Reactアプリケーションでの活用方法を学んでいきます。
キーボードイベントの基本概念
Reactにおけるキーボードイベントは、ユーザーがキーボードを操作した際に発生する動作をキャプチャし、指定された関数を実行する仕組みです。このセクションでは、onKeyDownとonKeyPressの役割と違いを中心に解説します。
onKeyDownとonKeyPressの違い
- onKeyDown: キーが押された瞬間に発生するイベントです。どのキーが押されたかをリアルタイムで検知するのに適しています。キーの長押しを検知する用途でも使用されます。
- onKeyPress: キーを押した後に、文字が入力されたタイミングで発生するイベントです。ただし、現在は非推奨となっており、最新のReactではonKeyDownを使用することが推奨されています。
Reactにおけるイベントの仕組み
Reactでは、ネイティブなJavaScriptイベントではなく、SyntheticEventというラッパーを用いてイベントを処理します。この仕組みにより、ブラウザ間の互換性が保証され、パフォーマンスも最適化されています。
キーボードイベントで使用可能なプロパティ
キーボードイベントでは以下のプロパティが利用できます。これらを駆使して、キー入力に応じた柔軟な処理が可能です。
- event.key: 押されたキーの名前（例: ‘a’, ‘Enter’）
- event.code: キーボードレイアウトに依存するコード（例: ‘KeyA’, ‘Space’）
- event.shiftKey: Shiftキーが押されているかを判定
- event.ctrlKey: Ctrlキーが押されているかを判定
次のセクションでは、Reactプロジェクトでキーボードイベントを使用するための環境設定と準備について解説します。
環境構築と基本設定
Reactでキーボードイベントを扱うには、適切なプロジェクト環境を整えることが重要です。このセクションでは、プロジェクトのセットアップからイベント処理の準備までを説明します。
Reactプロジェクトのセットアップ
Reactプロジェクトを構築するには、以下の手順を実行します。
- Node.jsのインストール
Node.js公式サイトからNode.jsをインストールします。これによりnpmも利用可能になります。 - Reactプロジェクトの作成
ターミナルで以下のコマンドを実行して、新しいReactプロジェクトを作成します。
npx create-react-app react-keyboard-events
cd react-keyboard-events- 依存パッケージのインストール（必要に応じて）
キーボードイベントを強化するユーティリティライブラリ（例: lodash）は、以下のコマンドでインストールできます。
npm install lodashキーボードイベント処理の準備
Reactでキーボードイベントを扱うには、以下の基本的なステップを実行します。
1. イベントハンドラーの定義
イベントを処理する関数を定義します。例えば、キー入力をコンソールに出力するハンドラーは次のように記述します。
function handleKeyDown(event) {
console.log(`Key pressed: ${event.key}`);
}2. イベントリスナーの設定
キーボードイベントを監視するため、HTML要素にイベントリスナーを設定します。例として、入力ボックスでonKeyDownイベントを監視するコードは以下の通りです。
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="キーを押してください"
/>3. コンポーネントでの活用
これらの設定をコンポーネントに適用することで、Reactでキーボードイベントを活用できます。
import React from 'react';
function App() {
const handleKeyDown = (event) => {
console.log(`Key pressed: ${event.key}`);
};
return (
<div>
<h1>React Keyboard Event Example</h1>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="Type here"
/>
</div>
);
}
export default App;開発環境のテスト
ブラウザでプロジェクトを起動し（npm start）、キーボードを操作することで、イベントが正しくキャプチャされているかを確認してください。
次のセクションでは、具体的なonKeyDownの実装例について詳しく説明します。
onKeyDownの実装例
onKeyDownは、キーが押される瞬間に発生するイベントで、リアルタイムのキー入力を処理する際に非常に有用です。このセクションでは、onKeyDownの具体的な実装例を解説します。
基本的なonKeyDownの使用方法
以下のコード例では、入力されたキーをコンソールに出力するシンプルな実装を示します。
import React from 'react';
function KeyDownExample() {
const handleKeyDown = (event) => {
console.log(`Key pressed: ${event.key}`);
};
return (
<div>
<h2>onKeyDownの基本例</h2>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="キーを押してみてください"
/>
</div>
);
}
export default KeyDownExample;この例では、キーが押されるたびにhandleKeyDown関数が呼び出され、キーの名前がコンソールに表示されます。
特定のキーに応答する例
特定のキー（例: Enterキー）に対して動作をカスタマイズする実装例です。
import React from 'react';
function EnterKeyExample() {
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
alert('Enterキーが押されました！');
}
};
return (
<div>
<h2>特定のキーに応答する例</h2>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="Enterキーを押してください"
/>
</div>
);
}
export default EnterKeyExample;このコードでは、Enterキーが押された際にアラートが表示される仕組みになっています。
キーの長押しを検知する例
onKeyDownイベントは、キーが長押しされている間も継続的に発生します。これを利用して、特定の操作を繰り返し実行することができます。
import React, { useState } from 'react';
function LongPressExample() {
const [count, setCount] = useState(0);
const handleKeyDown = (event) => {
if (event.key === 'ArrowUp') {
setCount((prevCount) => prevCount + 1);
}
};
return (
<div>
<h2>キーの長押しを検知する例</h2>
<p>ArrowUpキーを押してカウントを増やしてください: {count}</p>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="フォーカスしてArrowUpを押してください"
/>
</div>
);
}
export default LongPressExample;この例では、ArrowUpキーを押し続けることでカウントが増加します。
複数のキーを組み合わせた処理
複数のキー（例: Ctrl + S）を組み合わせて特定の操作を実行する例です。
import React from 'react';
function CombinationKeyExample() {
const handleKeyDown = (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault(); // ブラウザのデフォルト動作を防止
alert('Ctrl + Sが押されました！');
}
};
return (
<div>
<h2>複数のキーを組み合わせた処理</h2>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="Ctrl + Sを試してください"
/>
</div>
);
}
export default CombinationKeyExample;このコードでは、Ctrl + Sを押した際に特定のアクションを実行し、ブラウザのデフォルト動作（ページ保存）を防ぎます。
次のセクションでは、onKeyPressの具体的な使い方とその実装例について説明します。
onKeyPressの実装例
onKeyPressは、キーが押されてから文字が入力される際に発生するイベントです。ただし、現在は非推奨となっており、最新のReactでは代わりにonKeyDownやonKeyUpを使用することが推奨されています。このセクションでは、onKeyPressの過去の使用例を解説するとともに、onKeyDownで代替する方法を説明します。
onKeyPressの基本使用例
以下は、onKeyPressを使用して入力された文字をリアルタイムでコンソールに出力するシンプルな実装例です。
import React from 'react';
function KeyPressExample() {
const handleKeyPress = (event) => {
console.log(`Character entered: ${event.key}`);
};
return (
<div>
<h2>onKeyPressの基本例</h2>
<input
type="text"
onKeyPress={handleKeyPress}
placeholder="キーを押してください"
/>
</div>
);
}
export default KeyPressExample;この例では、ユーザーが入力する文字がコンソールに表示されます。ただし、onKeyPressは最新のReactでは使用が推奨されていないため、将来的な互換性の問題を避ける必要があります。
onKeyDownを用いた代替例
onKeyDownを使用して、onKeyPressの動作を代替する方法を以下に示します。
import React from 'react';
function KeyDownAlternative() {
const handleKeyDown = (event) => {
if (event.key.length === 1) {
console.log(`Character entered: ${event.key}`);
}
};
return (
<div>
<h2>onKeyDownを用いた代替例</h2>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="キーを押してください"
/>
</div>
);
}
export default KeyDownAlternative;この例では、event.key.length === 1という条件を使用して、実際に入力された文字のみを検出しています。これにより、onKeyPressの動作をonKeyDownで再現できます。
非推奨となった理由
onKeyPressが非推奨となった理由は以下の通りです：
- ユニコードのサポートが不十分で、特定のキーイベントを正確に検知できない場合がある。
- 最新のブラウザや標準仕様において、より汎用的なonKeyDownとonKeyUpが推奨されている。
onKeyPressの代わりにonKeyDownを使用する利点
- 広い互換性: onKeyDownは、すべてのキー入力に対して動作するため、より多様なユースケースに対応可能です。
- 高度な制御: 修飾キー（Ctrl, Alt, Shift）や特殊キー（Esc, Arrow keys）も検知できるため、キーボードイベントを細かく制御できます。
フォームでの使用例
onKeyDownを使ったフォーム入力のリアルタイム検知例を以下に示します。
import React, { useState } from 'react';
function FormKeyDownExample() {
const [inputValue, setInputValue] = useState('');
const handleKeyDown = (event) => {
if (event.key.length === 1) {
setInputValue((prevValue) => prevValue + event.key);
}
};
return (
<div>
<h2>フォームでのonKeyDownの使用例</h2>
<p>入力された値: {inputValue}</p>
<input
type="text"
onKeyDown={handleKeyDown}
placeholder="キーを入力してください"
/>
</div>
);
}
export default FormKeyDownExample;この例では、onKeyDownイベントを利用して、ユーザーが入力した文字をリアルタイムで状態に保存し、画面に表示しています。
次のセクションでは、複数キーの同時検知とその処理方法について解説します。
複数キーの同時検知と処理
Reactで複数のキーを同時に検知し、それに応じた動作を実行することは、ゲームやショートカット機能を実装する際に役立ちます。このセクションでは、複数キーを検知する方法とその実装例を紹介します。
基本的な複数キーの検知方法
複数キーの同時押しを検知するためには、onKeyDownで押されたキーを記録し、onKeyUpで解放されたキーをリセットする仕組みを構築します。
以下のコードは、現在押されているキーを追跡する基本的な例です。
import React, { useState } from 'react';
function MultipleKeysExample() {
const [keysPressed, setKeysPressed] = useState(new Set());
const handleKeyDown = (event) => {
setKeysPressed((prevKeys) => new Set(prevKeys).add(event.key));
};
const handleKeyUp = (event) => {
setKeysPressed((prevKeys) => {
const updatedKeys = new Set(prevKeys);
updatedKeys.delete(event.key);
return updatedKeys;
});
};
return (
<div
tabIndex={0} // 必須: divをフォーカス可能にする
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
style={{ border: '1px solid black', padding: '20px', outline: 'none' }}
>
<h2>複数キーの検知</h2>
<p>現在押されているキー: {[...keysPressed].join(', ')}</p>
<p>このエリアをクリックしてフォーカスしてください。</p>
</div>
);
}
export default MultipleKeysExample;この例では、押されているキーがリアルタイムで画面に表示されます。
特定のキーの組み合わせを検知する例
以下のコードでは、Shift + AやCtrl + Sといった特定のキーの組み合わせを検知し、それに応じた動作を実行します。
import React from 'react';
function CombinationKeyExample() {
const handleKeyDown = (event) => {
if (event.shiftKey && event.key === 'A') {
alert('Shift + A が押されました！');
}
if (event.ctrlKey && event.key === 's') {
event.preventDefault(); // デフォルト動作を防止
alert('Ctrl + S が押されました！');
}
};
return (
<div
tabIndex={0}
onKeyDown={handleKeyDown}
style={{ border: '1px solid black', padding: '20px', outline: 'none' }}
>
<h2>特定のキーの組み合わせ</h2>
<p>このエリアをクリックしてフォーカスし、Shift + A または Ctrl + S を押してみてください。</p>
</div>
);
}
export default CombinationKeyExample;この例では、特定の修飾キー（Shift, Ctrl）と文字キーを組み合わせてカスタムイベントをトリガーします。
高度な同時押しの処理例
以下の例は、複数キーを同時に押した際に特定の動作（例: 矢印キーでキャラクターを移動）を実現します。
import React, { useState } from 'react';
function AdvancedKeyHandling() {
const [position, setPosition] = useState({ x: 0, y: 0 });
const keysPressed = new Set();
const handleKeyDown = (event) => {
keysPressed.add(event.key);
moveCharacter();
};
const handleKeyUp = (event) => {
keysPressed.delete(event.key);
};
const moveCharacter = () => {
setPosition((prev) => {
const newPosition = { ...prev };
if (keysPressed.has('ArrowUp')) newPosition.y -= 10;
if (keysPressed.has('ArrowDown')) newPosition.y += 10;
if (keysPressed.has('ArrowLeft')) newPosition.x -= 10;
if (keysPressed.has('ArrowRight')) newPosition.x += 10;
return newPosition;
});
};
return (
<div
tabIndex={0}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
style={{
width: '200px',
height: '200px',
border: '1px solid black',
position: 'relative',
outline: 'none',
}}
>
<div
style={{
position: 'absolute',
top: `${position.y}px`,
left: `${position.x}px`,
width: '20px',
height: '20px',
background: 'red',
}}
/>
<h2>キャラクターの移動例</h2>
<p>矢印キーで赤い四角を移動させてください。</p>
</div>
);
}
export default AdvancedKeyHandling;この例では、矢印キーの同時押しを活用して、赤い四角形を移動させるシンプルなゲーム風の動作を実現しています。
次のセクションでは、キーボードイベントとフォームの連携について詳しく解説します。
キーボードイベントとフォームの連携
Reactでは、キーボードイベントをフォーム操作と組み合わせることで、ユーザー体験を大幅に向上させることができます。特に、Enterキーでのフォーム送信や特定のキーでのフィールド切り替えなど、直感的な操作を実現できます。このセクションでは、フォームでのキーボードイベントの活用例を紹介します。
Enterキーでフォームを送信する例
以下のコードでは、Enterキーが押された際にフォームが送信され、入力されたデータがコンソールに出力されます。
import React, { useState } from 'react';
function EnterKeySubmitForm() {
const [formData, setFormData] = useState('');
const handleKeyDown = (event) => {
if (event.key === 'Enter') {
event.preventDefault(); // デフォルトのフォーム送信を防止
console.log(`Form submitted with: ${formData}`);
setFormData(''); // フィールドをクリア
}
};
return (
<form>
<h2>Enterキーでフォーム送信</h2>
<input
type="text"
value={formData}
onChange={(e) => setFormData(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Enterキーで送信"
/>
</form>
);
}
export default EnterKeySubmitForm;この例では、Enterキーを押すことでフォームが送信され、デフォルト動作を防ぎながら、カスタムロジックを実行します。
特定のキーでフォーカスを移動する例
Tabキー以外のキーでフォームフィールド間のフォーカスを切り替える実装例を以下に示します。
import React, { useRef } from 'react';
function FocusSwitchForm() {
const input1Ref = useRef(null);
const input2Ref = useRef(null);
const handleKeyDown = (event, currentRef, nextRef) => {
if (event.key === 'ArrowDown') {
event.preventDefault();
nextRef.current.focus();
} else if (event.key === 'ArrowUp') {
event.preventDefault();
currentRef.current.focus();
}
};
return (
<form>
<h2>Arrowキーでフォーカス移動</h2>
<input
ref={input1Ref}
type="text"
placeholder="フィールド1"
onKeyDown={(event) => handleKeyDown(event, input2Ref, input1Ref)}
/>
<br />
<input
ref={input2Ref}
type="text"
placeholder="フィールド2"
onKeyDown={(event) => handleKeyDown(event, input1Ref, input2Ref)}
/>
</form>
);
}
export default FocusSwitchForm;この例では、ArrowUpキーとArrowDownキーを使用して、異なる入力フィールド間のフォーカスを切り替えます。
特定のキーで入力内容をリセットする例
以下の例では、特定のキー（例: Escキー）でフォーム入力をリセットする方法を示します。
import React, { useState } from 'react';
function ResetOnKeyPress() {
const [inputValue, setInputValue] = useState('');
const handleKeyDown = (event) => {
if (event.key === 'Escape') {
setInputValue(''); // 入力内容をクリア
}
};
return (
<div>
<h2>Escapeキーで入力をリセット</h2>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="Escapeキーでリセット"
/>
<p>入力内容: {inputValue}</p>
</div>
);
}
export default ResetOnKeyPress;このコードでは、Escキーを押すことで入力フィールドがクリアされるシンプルな動作を実現しています。
フォームでの入力検証を追加する例
フォームで入力内容をリアルタイムで検証し、エラーを表示する方法を以下に示します。
import React, { useState } from 'react';
function FormValidationExample() {
const [inputValue, setInputValue] = useState('');
const [error, setError] = useState('');
const validateInput = (value) => {
if (!/^[a-zA-Z]*$/.test(value)) {
setError('英文字のみ入力してください。');
} else {
setError('');
}
};
const handleKeyDown = (event) => {
validateInput(event.target.value);
};
return (
<div>
<h2>フォームでのリアルタイム入力検証</h2>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="英文字のみ入力"
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}
export default FormValidationExample;このコードでは、英文字のみが入力可能であり、エラーがリアルタイムで表示される仕組みを構築しています。
次のセクションでは、キーボードイベントにおけるエラーハンドリングとデバッグについて解説します。
エラーハンドリングとデバッグ
Reactでキーボードイベントを使用する際、予期しない動作やエラーが発生することがあります。これを防ぐためには、適切なエラーハンドリングとデバッグの手法を導入することが重要です。このセクションでは、よくある問題とその解決方法を紹介します。
よくあるエラーとその対策
1. フォーカスが適切に設定されていない
キーボードイベントは、通常フォーカスされた要素で発生します。フォーカスがない場合、イベントがトリガーされないことがあります。
対策: tabIndexを設定して、任意の要素をフォーカス可能にします。
<div
tabIndex={0}
onKeyDown={(event) => console.log(event.key)}
style={{ outline: 'none', border: '1px solid black', padding: '10px' }}
>
このエリアをクリックしてフォーカスしてください
</div>2. 不必要なイベントの伝播
親要素と子要素の両方にキーボードイベントが設定されている場合、イベントが伝播して意図しない動作を引き起こすことがあります。
対策: event.stopPropagation()を使用してイベントの伝播を防ぎます。
<div onKeyDown={() => console.log('親要素のイベント')}>
<input
type="text"
onKeyDown={(event) => {
event.stopPropagation();
console.log('子要素のイベント');
}}
/>
</div>3. デフォルト動作の制御不足
特定のキー（例: Enter, Backspace）はブラウザのデフォルト動作（フォーム送信やページ移動）を引き起こす可能性があります。
対策: event.preventDefault()でデフォルト動作を抑制します。
<input
type="text"
onKeyDown={(event) => {
if (event.key === 'Backspace') {
event.preventDefault();
console.log('Backspaceが押されましたが、削除はされません。');
}
}}
/>エラー検出のためのデバッグ手法
1. イベントプロパティの確認
console.log(event)を使用してイベントオブジェクトを確認し、どのプロパティが利用可能かをチェックします。
<input
type="text"
onKeyDown={(event) => {
console.log(event);
}}
/>2. 開発ツールの活用
ブラウザのデベロッパーツールを使用して、イベントの発生タイミングやデータを確認します。
- DevToolsを開く（例: Chromeでは
Ctrl + Shift + I）。 - “Event Listeners”タブで、キーボードイベントのリスナーを特定します。
3. 条件付きブレークポイント
特定のキーに関連する問題を調査する場合、条件付きブレークポイントを設定してデバッグします。
if (event.key === 'Enter') {
debugger; // この行でデバッグが停止
}エラーハンドリングのベストプラクティス
1. 入力検証
ユーザー入力が不正である場合、即座にフィードバックを提供します。
const handleKeyDown = (event) => {
if (!/^[a-zA-Z]*$/.test(event.key)) {
alert('英文字のみ入力可能です！');
event.preventDefault();
}
};2. グローバルエラーハンドリング
予期しないエラーが発生した場合、グローバルでエラーをキャッチする仕組みを導入します。
window.addEventListener('error', (error) => {
console.error('エラーが発生しました:', error);
});3. 状態のリセット
複雑なイベント処理が絡む場合、エラー発生時にアプリケーションの状態をリセットします。
import React, { useState } from 'react';
function ResetOnError() {
const [state, setState] = useState('');
const handleKeyDown = (event) => {
try {
if (event.key === 'Escape') {
throw new Error('リセットが要求されました');
}
setState((prev) => prev + event.key);
} catch (error) {
console.error(error.message);
setState('');
}
};
return (
<input
type="text"
value={state}
onKeyDown={handleKeyDown}
placeholder="Escキーでリセット"
/>
);
}
export default ResetOnError;まとめ
- イベントの伝播やデフォルト動作を制御することで、意図しない挙動を防ぐ。
- エラーが発生する可能性のある箇所を検証し、適切なエラーハンドリングを導入する。
- デベロッパーツールを活用し、効率的に問題を特定する。
次のセクションでは、Reactにおけるキーボードイベントの実用的な応用例について詳しく解説します。
実用的な応用例
Reactでのキーボードイベントは、ゲーム、ショートカット機能、アクセシビリティ対応など、さまざまな実用的なシナリオに応用できます。このセクションでは、具体的な応用例をいくつか紹介し、実装方法を解説します。
応用例1: ショートカットキー機能の実装
キーボードショートカットを用いて、アプリケーション内の特定の操作を効率化します。以下は、Ctrl + Sでデータを保存するショートカットの例です。
import React from 'react';
function ShortcutKeyExample() {
const handleKeyDown = (event) => {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
alert('データが保存されました！');
}
};
return (
<div
tabIndex={0}
onKeyDown={handleKeyDown}
style={{ outline: 'none', border: '1px solid black', padding: '20px' }}
>
<h2>ショートカットキー機能</h2>
<p>Ctrl + S を押してデータを保存してください。</p>
</div>
);
}
export default ShortcutKeyExample;この実装では、ブラウザのデフォルト動作を防ぎつつ、カスタムロジックを実行します。
応用例2: 簡易ゲームのキーボード操作
以下は、矢印キーでキャラクターを移動させる簡単なゲーム例です。
import React, { useState } from 'react';
function GameExample() {
const [position, setPosition] = useState({ x: 50, y: 50 });
const handleKeyDown = (event) => {
setPosition((prev) => {
const newPos = { ...prev };
if (event.key === 'ArrowUp') newPos.y -= 10;
if (event.key === 'ArrowDown') newPos.y += 10;
if (event.key === 'ArrowLeft') newPos.x -= 10;
if (event.key === 'ArrowRight') newPos.x += 10;
return newPos;
});
};
return (
<div
tabIndex={0}
onKeyDown={handleKeyDown}
style={{ position: 'relative', width: '300px', height: '300px', border: '1px solid black', outline: 'none' }}
>
<div
style={{
position: 'absolute',
top: `${position.y}px`,
left: `${position.x}px`,
width: '20px',
height: '20px',
background: 'red',
}}
/>
<h2>簡易ゲーム</h2>
<p>矢印キーで赤いブロックを動かしてください。</p>
</div>
);
}
export default GameExample;この例では、キーボードイベントを利用してゲーム要素を簡単に操作できる仕組みを実現しています。
応用例3: アクセシビリティ対応のナビゲーション
キーボード操作でコンテンツ間を移動できるアクセシビリティ対応のナビゲーションを実装します。
import React, { useState } from 'react';
function AccessibleNavigation() {
const sections = ['セクション1', 'セクション2', 'セクション3'];
const [currentIndex, setCurrentIndex] = useState(0);
const handleKeyDown = (event) => {
if (event.key === 'ArrowDown') {
setCurrentIndex((prevIndex) => (prevIndex + 1) % sections.length);
} else if (event.key === 'ArrowUp') {
setCurrentIndex((prevIndex) => (prevIndex - 1 + sections.length) % sections.length);
}
};
return (
<div
tabIndex={0}
onKeyDown={handleKeyDown}
style={{ outline: 'none', padding: '20px', border: '1px solid black' }}
>
<h2>アクセシビリティ対応のナビゲーション</h2>
{sections.map((section, index) => (
<div
key={index}
style={{
padding: '10px',
background: currentIndex === index ? '#d3d3d3' : 'transparent',
}}
>
{section}
</div>
))}
<p>ArrowUp/ArrowDownでセクションを移動してください。</p>
</div>
);
}
export default AccessibleNavigation;この例では、キーボードのみでセクション間を移動できる機能を提供しています。
応用例4: 入力フィールドにおけるカスタム制御
特定のキー入力を制限し、リアルタイムでフィードバックを与えるフォームの例です。
import React, { useState } from 'react';
function InputControlExample() {
const [value, setValue] = useState('');
const [error, setError] = useState('');
const handleKeyDown = (event) => {
if (!/^[a-zA-Z]$/.test(event.key)) {
event.preventDefault();
setError('英文字のみ入力してください。');
} else {
setError('');
}
};
return (
<div>
<h2>入力制限付きのフォーム</h2>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
placeholder="英文字のみ入力可能"
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}
export default InputControlExample;このフォームでは、英文字以外の入力をブロックし、ユーザーにエラーメッセージを提供します。
まとめ
これらの応用例を通じて、Reactでキーボードイベントを活用する方法が理解できたでしょう。ショートカット機能、ゲーム操作、アクセシビリティ対応など、さまざまなユースケースで活用できます。次のセクションでは、記事全体のまとめを行います。
まとめ
本記事では、Reactでのキーボードイベントの基本から応用までを解説しました。onKeyDownやonKeyPressの違いを理解し、環境構築から具体的な実装例までを段階的に紹介しました。特に、ショートカットキーの実装、ゲーム操作、アクセシビリティ対応、入力制限付きフォームなど、実用的な応用例を通じて、キーボードイベントの強力さを実感できたのではないでしょうか。
キーボードイベントを効果的に活用することで、Reactアプリケーションのユーザー体験を大幅に向上させることができます。今回学んだ内容を応用し、インタラクティブで使いやすいアプリケーションを構築してみてください。
コメント