Reactでフォームを作っていて「なぜかinputで日本語が入力できない」「IME変換が効かず、英語しか入力できない」と悩んだことはありませんか？
これはReactと日本語IMEの相性問題により発生する現象で、多言語対応を目指すアプリでは特に注意が必要です。
本記事では、Reactで日本語が入力できない主な原因を分かりやすく解説し、実践的な修正方法やコード例を用いて解決策を紹介します。
1. Reactでinputに日本語が入力できない原因とは？
Reactで<input>を使ったフォームに、日本語が入力できない現象が起きる背景には、IME（日本語入力システム）とReactのイベント処理の違いがあります。
たとえば、以下のようなコードでは日本語入力がうまくできません。
<input
value={value}
onChange={(e) => {
if (/^[A-Za-z]*$/.test(e.target.value)) {
setValue(e.target.value);
}
}}
/>
これはonChangeの中で、入力値が英字（A〜Z）かどうかをチェックして、それ以外を入力拒否しているためです。IMEによる変換中の「未確定文字列」も即座に拒否されてしまうため、結果として「日本語が入力できない」という現象が起こります。
2. IME（日本語入力）とReactのイベント処理の違いを理解しよう
日本語や中国語、韓国語などの入力にはIMEが使われ、仮入力 → 確定入力というプロセスを経ます。これに対して、ReactのonChangeは変換確定前にも呼ばれるため、仮入力の文字列にフィルタリングをかけると入力がブロックされるのです。
IME入力中に発生するイベント
compositionstart: 変換モードの開始（IME起動）compositionupdate: 変換候補の入力中compositionend: 変換が確定
Reactではこれらのイベントを適切に処理しないと、変換途中の文字が削除されたり、カーソル位置がバグるなど、ユーザー体験を大きく損ねる原因になります。
3. ReactでIMEを正しく扱う実装方法【日本語対応コード】
IME変換中はフィルタリングを行わず、確定後にバリデーションを実行することで、正しく日本語入力を許容できます。
以下はその修正版のコードです：
import { useState } from "react";
function SafeInput() {
const [value, setValue] = useState("");
const [isComposing, setIsComposing] = useState(false);
const handleChange = (e) => {
const newValue = e.target.value;
if (isComposing || /^[A-Za-z]*$/.test(newValue)) {
setValue(newValue);
}
};
return (
<input
value={value}
onChange={handleChange}
onCompositionStart={() => setIsComposing(true)}
onCompositionEnd={(e) => {
setIsComposing(false);
handleChange(e); // IME確定後に再チェック
}}
/>
);
}
この修正のポイント
isComposingを状態として管理し、IME中かどうかを検知compositionendイベントでonChangeをもう一度呼び出す- IME中は文字種チェックをスキップ
これにより、英字制限を維持しつつ日本語入力を妨げないUIを実現できます。
4. アンチパターンとそのリスク
Reactで日本語入力に失敗する原因の多くは、以下のような「IMEを無視したアンチパターン」にあります。
よくある失敗パターン
onChangeで文字制限を常時適用してしまうkeydownやkeypressで入力文字を検出しようとするsetStateが変換中に何度も走る
これらの実装は、IMEの挙動と競合して入力バグを引き起こす可能性があります。特に、onKeyDownで入力を制限しようとすると、IMEを使ったすべての言語が正常に入力できなくなる点は見落とされがちです。
5. 多言語対応で考慮すべきポイント【中国語・韓国語も要注意】
Reactアプリを国際化（i18n）対応する際には、日本語だけでなく他のIME言語にも注意が必要です。
特に問題が出やすい言語
- 中国語（ピンイン→漢字への変換が長い）
- 韓国語（組み合わせ文字の途中でonChangeが発火）
- タイ語やベトナム語など特殊記号を含む入力
IMEに依存する言語は、React側で入力途中の状態に過剰に反応しない実装が求められます。
また、入力制限の必要がある場合でも、blurイベント（入力確定後）にバリデーションを行うように変更するのも有効です。
6. まとめ
Reactで「inputに英語しか入力できない」といったバグは、IMEとReactイベントの理解不足から生じる典型的な問題です。ユーザーに快適なフォーム入力体験を提供するためには、以下の点に注意しましょう。
押さえておきたいポイント
onChangeでの即時制限はIMEを妨げる可能性があるcompositionstart〜compositionendでIME状態を管理する- 日本語以外の言語（中国語・韓国語など）も同じ対策が必要
- 多言語対応には国際化ライブラリと併せた設計が重要
Reactのフォーム入力処理はシンプルに見えて奥が深く、「入力できない」というUXバグは致命的です。本記事を参考に、安全な入力コンポーネントをぜひ実装してみてください。
