Reactでキーボードイベントを活用する方法！onKeyDown, onKeyUp, onKeyPressを初心者向けに解説

1. キーボードイベントの基本

1. キーボードイベントの基本

Reactでキーボードイベントを扱うと、ユーザーが「どのキーを押したか」や「いつ押したか」に応じて処理を実行できるようになります。たとえば、入力フォームでリアルタイムに文字数を表示したり、特定のキー操作で画面の動きを変えたりと、幅広いインタラクションを作ることができます。基本となるのがonKeyDown、onKeyUp、onKeyPressの3つです。 onKeyDownはキーを押した瞬間、onKeyUpは離した瞬間、そしてonKeyPressは文字が入力として認識されたタイミングで反応します。まずは、最もよく使われるonKeyDownの例を見てみましょう。

import React, { useState } from "react";

function App() {
  const [key, setKey] = useState("");

  const handleKeyDown = (event) => {
    setKey("押されたキー: " + event.key);
  };

  return (
    <div>
      <input
        type="text"
        onKeyDown={handleKeyDown}
        placeholder="何かキーを押してみてください"
      />
      <p>{key}</p>
    </div>
  );
}

export default App;

上の例では、キーボードを押した瞬間にhandleKeyDownが呼び出され、どのキーが押されたかを画面に表示しています。キー入力をすぐに検知できるため、ゲームの操作・ショートカットキー・検索フォームなど、素早い反応が必要なUIにとても適しています。まずはこの基本の動きを理解して、他のキーボードイベントと組み合わせて使えるようになると、Reactアプリの表現力が一気に広がります。

2. onKeyUpとonKeyPressの活用

2. onKeyUpとonKeyPressの活用

キーボード操作に応じて違ったタイミングで処理を動かしたい場合、onKeyUpとonKeyPressを使い分けると便利です。onKeyUpはキーを離した瞬間に実行されるため、「入力を終えたタイミングで処理したい」ときに向いています。一方、onKeyPressは文字が入力として認識された瞬間に動作するため、文字列の入力に合わせてリアルタイムに反応させたい場合に役立ちます。実際の入力フォームなどでよく使われる組み合わせです。

次の例では、ユーザーが入力した文字を画面に連続して表示し、Enterキーを離したときにアラートで通知する仕組みを作っています。文字を1つ入力するたびにonKeyPressが動き、確定操作であるEnterを押し終えた瞬間にonKeyUpが動くという流れです。こうした組み合わせを理解すると、自然な入力体験を持つUIを簡単に作れるようになります。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  const handleKeyUp = (event) => {
    if (event.key === "Enter") {
      alert("Enterキーが押されました: " + message);
    }
  };

  const handleKeyPress = (event) => {
    setMessage(message + event.key);
  };

  return (
    <div>
      <input
        type="text"
        onKeyUp={handleKeyUp}
        onKeyPress={handleKeyPress}
        placeholder="文字を入力してEnterを押してみよう"
      />
      <p>入力内容: {message}</p>
    </div>
  );
}

export default App;

このように、onKeyUpとonKeyPressは「どのタイミングで処理したいか」を意識して使い分けるのがポイントです。入力中の動きを細かくコントロールできるため、検索欄・チャット欄・入力補助など幅広い用途に応用できます。

3. 実践的な活用例と注意点

3. 実践的な活用例と注意点

キーボードイベントは、検索フォームの入力補助やショートカット操作、ゲームのキー入力など、日常的なUIの中で多くの場面に登場します。特にevent.keyを使うと「どのキーが押されたのか」を簡単に判定できるため、特定のキーだけ反応させることも難しくありません。たとえば、ESCキーで入力をクリアしたり、矢印キーで選択項目を変えたりと、少しの工夫で使い心地のよい動きを実現できます。

ただし、キーボードイベントを使う際にはいくつか気をつけたい点があります。特にonKeyPressは仕様の変更により今後使用が推奨されていないため、文字の入力判定が必要な場合でもonKeyDownまたはonKeyUpで代替するのが安全です。また、ボタンやリンク以外の要素にキーボード操作を受け付けさせたい場合は、tabIndexを正しく設定しておく必要があります。これを設定すると、ユーザーがTabキーでフォーカスを移動できるようになり、アクセシビリティの面でも重要です。

Reactでキーボードイベントを扱う際は「ユーザーがどんな操作をするのか」を想像しながら、適切なタイミングのイベントを選ぶことが大切です。onKeyDownやonKeyUpを状況に応じて使い分けることで、自然な操作感を持つインタラクティブな画面を作れるようになります。まずは小さな処理から試し、どのタイミングが最適かを体感しながら慣れていくのがおすすめです。

4. キーボードイベントとStateの組み合わせ

4. キーボードイベントとStateの組み合わせ

キーボードイベントはReactのStateと組み合わせると、入力内容をリアルタイムで画面に反映できます。たとえば、ユーザーが文字を入力するたびにStateを更新し、<p>タグなどに表示することで、動的に変化するUIを作ることができます。

import React, { useState } from "react";

function App() {
  const [text, setText] = useState("");

  const handleKeyDown = (event) => {
    setText(text + event.key);
  };

  return (
    <div>
      <input type="text" onKeyDown={handleKeyDown} placeholder="キーを押して文字を追加" />
      <p>入力内容: {text}</p>
    </div>
  );
}

export default App;

5. 特定キーだけ反応させる方法

5. 特定キーだけ反応させる方法

Reactのキーボードイベントではevent.keyを使って、特定のキーだけ処理することができます。たとえばEnterキーだけに反応させたり、矢印キーでスクロール操作を制御したりすることも可能です。

import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  const handleKeyUp = (event) => {
    if(event.key === "Enter") {
      setMessage("Enterキーが押されました！");
    }
  };

  return (
    <div>
      <input type="text" onKeyUp={handleKeyUp} placeholder="Enterキーだけ反応します" />
      <p>{message}</p>
    </div>
  );
}

export default App;

6. 複数の入力欄でのキーボードイベント管理

6. 複数の入力欄でのキーボードイベント管理

複数の要素がある場合、各入力欄に対して個別にイベントハンドラを設定できます。Stateを分けたり、同じハンドラで処理することもできるため、フォーム全体の入力監視やEnterキーによる送信なども簡単に実装できます。

import React, { useState } from "react";

function App() {
  const [first, setFirst] = useState("");
  const [second, setSecond] = useState("");

  const handleFirst = (event) => setFirst(event.target.value);
  const handleSecond = (event) => setSecond(event.target.value);

  return (
    

      <input type="text" value={first} onChange={handleFirst} placeholder="1つ目の入力" />
      <input type="text" value={second} onChange={handleSecond} placeholder="2つ目の入力" />
      <p>1: {first}, 2: {second}</p>
    
  );
}

export default App;

まとめ

まとめ

この記事では、Reactでキーボードイベントを活用する方法を詳しく解説しました。onKeyDown、onKeyUp、onKeyPressの違いや使い方、実践的な活用方法を学ぶことで、ユーザーの入力に応じたインタラクティブなUIを作る基本を理解できます。
onKeyDownはキーを押した瞬間に反応し、onKeyUpはキーを離した瞬間に反応します。onKeyPressは文字入力のタイミングで発火しますが、非推奨になりつつあるため、今後はonKeyDownやonKeyUpを中心に扱うのがおすすめです。これにより、Enterキーによる送信やショートカット操作、文字入力の監視など、さまざまな処理を実装できます。
また、イベントオブジェクトのevent.keyを使って、押されたキーを判定する方法を理解することで、条件分岐による柔軟なキーハンドリングが可能になります。ReactのStateと組み合わせることで、入力内容のリアルタイム表示やフォームの動的更新も簡単に行えます。
実践的な注意点として、入力フィールド以外でキーボードイベントを扱う場合は、tabIndex属性でフォーカス可能にする必要があります。また、複数の入力要素や動的に生成される要素に対応する場合も、State管理を正しく行うことで安定したUIを維持できます。これらのポイントを押さえることで、Reactでのキーボード操作の基本と応用が身につきます。

import React, { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");

  const handleKeyDown = (event) => {
    console.log("押したキー:", event.key);
  };

  const handleKeyUp = (event) => {
    if(event.key === "Enter") {
      alert("Enterキーが押されました: " + inputValue);
      setInputValue("");
    }
  };

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onKeyDown={handleKeyDown}
        onKeyUp={handleKeyUp}
        onChange={handleChange}
        placeholder="文字を入力してEnterを押してみよう"
      />
      <p>入力内容: {inputValue}</p>
    </div>
  );
}

export default App;

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

ReactでonKeyDown、onKeyUp、onKeyPressはどう違うのですか？

Reactでは、onKeyDownはキーを押した瞬間にイベントが発生し、onKeyUpはキーを離した瞬間、onKeyPressは文字として入力されたときに発生します。それぞれのタイミングで異なる処理を実行できます。