Reactでフォーカスイベントを制御する方法！onFocusとonBlurを初心者向けに解説

1. onFocusとonBlurの基本的な使い方

1. onFocusとonBlurの基本的な使い方

Reactでは、入力欄やボタンなどにonFocusやonBlurを設定することで、フォーカスの開始と終了を検知できます。フォーカスとは、ユーザーが入力欄やボタンなどを選択して操作できる状態になることを指します。

import React, { useState } from "react";

function App() {
  const [focused, setFocused] = useState(false);

  return (
    <div>
      <input
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder="ここに入力してみてください"
        style={{ padding: "8px", fontSize: "16px" }}
      />
      <p>{focused ? "入力欄にフォーカスがあります" : "入力欄からフォーカスが外れています"}</p>
    </div>
  );
}

export default App;

2. 実践的な活用例：フォーカス時のスタイル変更

2. 実践的な活用例：フォーカス時のスタイル変更

フォーカスイベントを使うと、入力欄の背景色や枠線の色を変えるなど、ユーザーに視覚的なフィードバックを提供できます。onFocusでフォーカスが入ったときに色を変え、onBlurで元に戻すと、直感的に操作できるUIを作れます。

import React, { useState } from "react";

function App() {
  const [focused, setFocused] = useState(false);

  return (
    <div>
      <input
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder="フォーカスで色が変わります"
        style={{
          padding: "8px",
          fontSize: "16px",
          border: "1px solid #000",
          backgroundColor: focused ? "lightyellow" : "white"
        }}
      />
    </div>
  );
}

export default App;

3. 注意点と応用

3. 注意点と応用

フォーカスイベントは、フォームの入力チェックやUIのアクセシビリティ向上に役立ちます。例えば、必須入力欄にフォーカスしたときにヒントを表示したり、入力後にバリデーションを行ったりすることができます。Reactでフォームを作るときは、onFocusとonBlurを組み合わせることで、より親切で使いやすいユーザーインターフェースを提供できます。

注意点として、フォーカスイベントはキーボード操作でも発火するため、マウスだけでなくタブキーなどの操作にも対応していることを理解しておくと良いでしょう。

4. フォーカスイベントとフォームバリデーションの組み合わせ

4. フォーカスイベントとフォームバリデーションの組み合わせ

ReactのonFocusやonBlurは、入力欄にフォーカスが当たったときや外れたときに発火します。この特性を活かして、フォームバリデーションと組み合わせることができます。例えば、必須入力欄にフォーカスが当たったときにヒントを表示し、onBlurで入力内容をチェックしてエラー表示するなど、ユーザーに優しい入力支援が可能です。

import React, { useState } from "react";

function App() {
  const [focused, setFocused] = useState(false);
  const [value, setValue] = useState("");

  return (
    <div>
      <input
        value={value}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        onChange={e => setValue(e.target.value)}
        placeholder="必須入力欄"
        style={{
          padding: "8px",
          fontSize: "16px",
          border: "1px solid #000",
          backgroundColor: focused ? "lightblue" : "white"
        }}
      />
      <p>
        {focused ? "入力欄がアクティブです" : value === "" ? "入力してください" : "入力完了"}
      </p>
    </div>
  );
}

export default App;

5. 複数入力欄でのフォーカス管理

5. 複数入力欄でのフォーカス管理

複数の入力欄がある場合、それぞれにonFocusやonBlurを設定することで、どの入力欄が現在アクティブかを判定できます。フォーム全体のUXを向上させるために、フォーカス状態に応じたハイライトや補助メッセージの表示に活用できます。

import React, { useState } from "react";

function App() {
  const [focusIndex, setFocusIndex] = useState(null);

  return (
    <div>
      {["名前", "メール", "パスワード"].map((label, index) => (
        <div key={index}>
          <input
            placeholder={label}
            onFocus={() => setFocusIndex(index)}
            onBlur={() => setFocusIndex(null)}
            style={{
              padding: "8px",
              fontSize: "16px",
              border: "1px solid #000",
              backgroundColor: focusIndex === index ? "lightgreen" : "white",
              marginBottom: "8px"
            }}
          />
        </div>
      ))}
    </div>
  );
}

export default App;

6. フォーカスイベントのアクセシビリティ対応

6. フォーカスイベントのアクセシビリティ対応

フォーカスイベントはキーボード操作でも発火するため、アクセシビリティに対応したフォーム設計が可能です。タブキーでの移動時にもonFocusとonBlurが正しく発火することを確認し、視覚的にフォーカス状態を分かりやすくすることで、すべてのユーザーに使いやすいUIを提供できます。

import React, { useState } from "react";

function App() {
  const [focusedInput, setFocusedInput] = useState("");

  return (
    <div>
      <input
        placeholder="ユーザー名"
        onFocus={() => setFocusedInput("ユーザー名")}
        onBlur={() => setFocusedInput("")}
        style={{
          padding: "8px",
          fontSize: "16px",
          border: "1px solid #000",
          backgroundColor: focusedInput === "ユーザー名" ? "lightpink" : "white",
          marginBottom: "8px"
        }}
      />
      <input
        placeholder="メールアドレス"
        onFocus={() => setFocusedInput("メールアドレス")}
        onBlur={() => setFocusedInput("")}
        style={{
          padding: "8px",
          fontSize: "16px",
          border: "1px solid #000",
          backgroundColor: focusedInput === "メールアドレス" ? "lightpink" : "white"
        }}
      />
    </div>
  );
}

export default App;

まとめ

まとめ

今回の記事では、ReactにおけるフォーカスイベントonFocusとonBlurの基本的な使い方から応用までを学びました。onFocusは入力欄やボタンなどの要素が選択された瞬間に発火し、onBlurはフォーカスが外れたときに発火するイベントです。これらを利用することで、ユーザーの操作に応じた動的なUIを簡単に実現できます。例えば、入力欄にフォーカスした際に背景色を変える、フォーカスが外れたら元に戻すといった視覚的なフィードバックは、ユーザーにとって直感的で操作しやすいフォームを作るうえで非常に有効です。

ReactではuseStateを組み合わせることで、フォーカスの状態をコンポーネント内で管理できます。また、入力欄にフォーカスがあるかどうかの状態を表示したり、条件に応じてスタイルを変更することも簡単に行えます。さらに、フォームの入力チェックやアクセシビリティの向上にも役立つため、onFocusとonBlurを活用することで、よりユーザーに優しいインターフェースを提供できます。

注意点として、フォーカスイベントはマウス操作だけでなくキーボード操作でも発火することを理解しておく必要があります。タブキーでの移動やEnterキーでの操作も考慮することで、全てのユーザーに対応したフォーム設計が可能です。また、onFocusとonBlurは、入力欄だけでなくボタンやセレクトボックスなど多様なフォーム要素に適用できるため、応用範囲が広いのも特徴です。

import React, { useState } from "react";

function App() {
  const [focused, setFocused] = useState(false);

  return (
    <div>
      <input
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        placeholder="フォーカスで色やメッセージが変わります"
        style={{
          padding: "8px",
          fontSize: "16px",
          border: "1px solid #000",
          backgroundColor: focused ? "lightyellow" : "white"
        }}
      />
      <p>
        {focused ? "入力欄にフォーカスがあります" : "入力欄からフォーカスが外れています"}
      </p>
    </div>
  );
}

export default App;

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

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

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

ReactでonFocusとは何ですか？どんな場面で使うのですか？

ReactのonFocusは、入力欄やボタンなどの要素にフォーカス（選択）が当たったときに実行されるイベントハンドラで、ユーザーが要素を操作可能になった瞬間に使われます。