海外製のチャットサービスとかでIMEを確定しようとしたら勝手に送信されてしまって困った！という経験をしたかは多いでしょう。日本語入力はIME(Input Method Editor)を通じて行われますが、イベントのハンドリングを間違うとこのような挙動になってしまいます。ウェブフロントエンドのIMEにまつわる2つのトピックを紹介します。

Enterで勝手に送信しちゃう
IMEの最初の文字が取れない

Enterで勝手に送信されちゃう

<input>でテキスト入力を作り、チャットを作りたいとします。わざわざボタンをクリックしないと送信できないのは不便なのでEnterで送信できるようにしようとします。changeイベントやblurではフォーカスを一度外さないと確定にならないため、keydownイベントでEnterを拾って送信したいとします。こんな感じでしょうか？もう令和8年なのでReact Compilerを想定してシンプルに書いています。

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

function checkEnter(e) {
    if (e.key === "Enter") {
        sendMessage(text); // 送信！
    }
}

<input
    type="text"
    value={text}
    onChange={(e) => setText(e.target.value)}
    onKeyDown={checkEnter}
/>

これを実際に動かしてみると、日本語確定のEnterで送信されてしまいました。

「はい(変換確定)」と入力し、送信用にEnterを押すとには次のようなイベントが流れてきます。

[h]押下
- input: value=h
- keydown: key=h
[a]押下
- input: value=は
- keydown: key=a
[i]押下
- input: value=はい
- keydown: key=i
[Enter]押下で確定
- input: value=(empty)
- input: value=はい
- keydown: key=Enter →ここで送信されちゃう！
[Enter]押下で送信したかった
- keydown: key=Enter
- change: value=はい

これを見れば、keydownイベントでとるのではなく、changeイベントで送信すれば一見良さそうです。しかしそれではうまくいきません。Slackとかもそうですが、だいたい「送信ボタン」がありつつも、ショートカットとして「Enter」送信を許容しています。

送信確定前にちょっと別のチャンネルを見て確認しておこうと別の要素にフォーカスしたりすると次のようなイベント発生されます。

[Enter]を押さずに別の要素をフォーカス
- change: value=はい
- blur: value=Enter

このchangeではまだ送りたくはないですが、送信するかどうかはこのあとにblurが起きるかどうかで判定が必要です。が・・・なんて後の時系列で起きるイベントの判定ロジックなんて実装したくはないですよね。

IMEに関するイベントや情報がHTMLにはあります。IMEを使った変換の開始と確定後にはcompositionstartとcompositionendイベントが発火します。また、inputイベントやkeydownイベントにはisComnposingという属性が付きます。Reactであれば、e.nativeEvent.isComposingといった感じで情報が取れます。この2つも足すと以下のようなイベントが流れてきます。

[h]押下
- compositionstart
- input: value=h isComposing=true
- keydown: key=h isComposing=true
[a]押下
- input: value=は isComposing=true
- keydown: key=a isComposing=true
[i]押下
- input: value=はい isComposing=true
- keydown: key=i isComposing=true
[Enter]押下で確定
- input: value=(empty) isComposing=true
- input: value=はい isComposing=true
- compositionend: value=はい
- keydown: key=Enter isComposing=false // ここに注目
[Enter]押下で送信
- keydown: key=Enter isComposing=false
- change: value=はい

残念ながら、最後の確定のEnterではisComposing=falseなので、ステートレスに判定はできません。しかし、compositionendからすぐ後にkeydownが発生するので、最後のcompositionendイベントでタイムスタンプを取得し、そこから短時間(20mSとか)以内のEnterは除外するというロジックにすればOKです。

isComposing属性関係ないじゃん！と思われるかもしれませんが、グリッドコントロールとかで確定済み状態でのカーソルやタブでアクティブなセルを移動したい、みたいなケースはあるかと思います。Enter以外のキーであれば、isComposing=trueの時のこれらのキーは無視する、というロジックにすればOKです。

キー入力でラベルの変更するが変換前の文字が入ってしまう

PowerPointのオブジェクト編集機能のようなものを作りたいとします。マウスクリックなどでフォーカスした要素に対し、キーボード入力をするとそのラベルの変更ができ、確定するとそのラベルが設定されます。よくある機能なのでイメージしやすいですよね？前項の確定部分の話はちょっとここでは除外してonChangeで確定としておきます。こんな感じでしょうか？

const divRef = useRef(null);
const [editing, setEditing] = useState(false);
const [label, setLabel] = useState("ラベル");

function focus() {
    difRef.current?.focus();
    e.preventDefault();
}

function keydown(e) {
    if (!editing) {
        setLabel(e.key);
        setEditing(true);
    }
    e.preventDefault();
}

function fix(e) {
    setLabel(e.value);
    setEditing(false);
}

<div ref={divRef}
    onClick={focus}
    onKeyDown={keydown}
>
    {editing ? <input value={label} onChange={fix} /> : label}
</div>

これ、そのまま動かしてみると「あいうえお」と入力すると「aいうえお」となっちゃうんですよね。keydownでは変換前の文字が入ってしまうので。inputイベントにすると、あ行だけはうまくいきますが、子音を入力すると同じ結果になります。変換途中の情報はフォーカスと一緒で、controlled componentとして外から状態を与えられないので、1文字目が変換中、という状態を外から作り出すことはできません。

あと、ここでは毎回リセットになっていますが、カーソル移動で末尾だけ編集したいみたいなものを実現するのは大変です。

代わりに、選択時に非表示のinputタグを作って、全選択状態でフォーカスしておきます。そして何かしらのイベントが発生したらそのinputタグを表示するというやり方にします。IMEが関連するテキスト入力は1つのinputタグが責任を持って最初の文字から全て受ける必要があります。クリックやカーソルでの適切な位置のカーソル移動もinputタグ任せにできるため、最小工数で自然な入力が実現できるでしょう。

const inputRef = useRef(null);
const [select, setSelect] = useState(false);
const [editing, setEditing] = useState(false);
const [label, setLabel] = useState("ラベル");

function focus() {
    inputRef.current?.focus();
    inputRef.current?.setSelectionRange(label.length, label.length);
    e.preventDefault();
}

function show(e) {
    if (!editing) {
        setEditing(true);
    }
    e.preventDefault();
}

function fix(e) {
    setLabel(e.value);
    setSelect(false);
    setEditing(false);
}

let inputStyle = "";
if (editing) {
   inputStyle = "";
} else if (select) {
   inputStyle = "position: absolute; left: -9999px;"
} else {
   inputStyle = "display: hidden;"
}

<div ref={divRef}
    onClick={focus}
    onKeyDown={keydown}
>
    <input ref={inputRef} style={inputStyle} value={label} onChange={fix} onKeyDown={show} onClick={show} />
    {isEditing ? undefined : label}
</div>

まとめ: キーボード入力は使い勝手に直結する

どちらも明確な「送信ボタン」「編集ボタン」を用意すれば用意して、操作する人に対して１アクション余計にしてもらえば良いだけの話ですが、世の中に便利なものがあるなら、それと近づけてほしいと思うのが人情というものです。

試験的なプログラムでその1アクションを減らすのに、生成AIに雑に指示を投げてもなかなか問題を解決してくれなくてちょっと苦戦したのでメモとしてブログにしておきます。

生成AIに指示するなら？

シンプルな機能であればWhatを指示することで賢いモデルであればきちんと実装してくれるのですが、過去の経験上、このIME周りのハンドリングは必ずしもうまくいかないですね。Howで実装方法を指定してあげる必要があります。

前者のEnterのハンドリングを指示する場合は…

compositionendのタイムスタンプを取得し、keydownでのEnterの判定で変換直後の物は除外してください

…といった感じで指示すればうまくいくでしょう。

後者の方はやや難しいですが…

オブジェクトの状態には選択モード、編集モードがあります。選択モードでは見えないinputタグを作り、これまでのラベルのテキストを入れた上で全選択状態としてください。その後何かしらのキー入力で編集モードになります。編集モードではinputタグが見えるようになります

…といった感じの指示の必要があるでしょう。前者の確定のEnter除外を組み合わせたい場合は別途追加で指示が必要です。ESCでrevertとかいろいろ機能を入れようとするとそれなりに複雑化しますが、最初のIMEハンドリングがきちんとできていればなんとかなるはずです。

なぜ日本語入力と相性の悪いWebサイトができてしまうのか

Enterで勝手に送信されちゃう

キー入力でラベルの変更するが変換前の文字が入ってしまう

まとめ: キーボード入力は使い勝手に直結する

生成AIに指示するなら？