Vue.js: TodoMVCの例で日本語の項目が正しく入力できるようにする

Vue.js: TodoMVCの例で日本語の項目が正しく入力できるようにする:

本稿は、Vue.js公式サイトの「例」のページにおける「TodoMVC の例」の、日本語入力の不具合とその修正の仕方についてご説明します。

TodoMVC の例

Vue.jsサイトの「TodoMVC の例」は、洗練されたインタフェースのTodoリストです(図001)。機能は、項目の追加と削除、未処理と処理済みの表示切り替えなど、基本的といえます。

図001■TodoMVCの画面表示

けれど、ありがちのTodoリストのようなボタンだらけの画面ではありません(図002)。削除ボタンは項目にロールオーバーすると表れ、項目の追加は[enter]キーで確定します。

図002■ありがちのTodoリスト

>> 「Vue.js入門」01-07より

日本語変換確定の[enter]キーで項目が追加されてしまう

ところが、この洗練されたインタフェースが、日本語入力ではアダになります。日本語変換確定の[enter]キーで項目が追加されてしまうのです(図003)。

図003■日本語変換確定の[enter]キーで追加された項目

はじめはChromeで、イベント@keyup.enterと@keydown.enterとでは、取得する入力値に時間差があることを見つけました。そこで、ふたつの値を比べることにより、変換の確定と[enter]キーの単独入力を切り分けたのです。けれど、Safariではふたつの値は同じでした。つまり、この案は却下ということです。

keypressイベントを捉える

調べたところ、@keypressイベントは変換確定の[enter]キーは拾わないことがわかりました。つまり、@keypressイベントで、押されたキーが[enter](keyCode: 13)のとき、単独で入力されたということです。

そこで、TodoMVCの修正です。<header>に置かれた<input>要素のキーイベントを、つぎのように@keyup.enterから@keypressに書き替えます。

<section class="todoapp"> 
  <header class="header"> 
    <h1>todos</h1> 
    <input class="new-todo" 
 
      @keypress="addTodo"> 
      <!-- @keyup.enter="addTodo"> --> 
  </header> 
 
</section> 

コールバックメソッドaddTodo()は、つぎのように押されたキー(keyCode)を調べて、[enter]キー(コード13)だったとき新たな項目として加えます。

var app = new Vue({ 
 
  methods: { 
    addTodo: function (event) { 
      if (event.keyCode !== 13) { 
        return; 
      } 
 
    }, 
 
  } 
}); 

リスト項目を編集する仕組みについても、同じように書き替えます。<input>要素のキーイベントは、@keyup.enterでなく@keypressです。

<section class="main" v-show="todos.length" v-cloak> 
 
  <ul class="todo-list"> 
    <li v-for="todo in filteredTodos" 
 
      > 
 
      <input class="edit" type="text" 
 
        @keypress="doneEdit(todo)" 
        @keyup.esc="cancelEdit(todo)"> 
        <!-- @keyup.enter="doneEdit(todo)" --> 
    </li> 
  </ul> 
</section> 

キーイベントから呼び出すメソッドdoneEdit()は、押されたキーが[enter]だったとき、項目のテキストを改めます。

var app = new Vue({ 
 
  methods: { 
 
    doneEdit: function (todo) { 
      if (event.keyCode !== 13) { 
        return; 
      } 
 
    }, 
 
  }, 
 
}); 

これらの修正が加えられたTodoMVCのサンプルを「TodoMVC revised」としてFiddleに掲げました。

標準JavaScriptのキーイベント

標準のJavaScriptでは、イベントkeydownはkeypressと同じように、日本語の変換を確定したときの[enter]は拾わないようです。たとえば、つぎのように入力して変換([確定]は[enter]キーによる変換の決定)していったたとします。

日本語の[確定]項目を[確定]入力[確定]する[確定][enter]

すると、捕らえられた[enter]キーイベントとそのときの入力値はつぎのとおりです。以下のサンプル001で実際に確かめられます(enterは[enter]キーの単独入力)。

keyup: 日本語の 
keyup: 日本語の項目を 
keyup: 日本語の項目を入力 
keyup: 日本語の項目を入力する 
keydown: 日本語の項目を入力する 
keypress: 日本語の項目を入力する 
enter: 日本語の項目を入力する 
keyup: 

サンプル001■テキストの入力について[enter]キーのイベントを確かめる

See the Pen Testing key events for [enter] when inputting Japanese characters by Fumio Nonaka (@FumioNonaka) on CodePen.

Vue.jsも少なくともv2.3.4では、keydownイベントは日本語変換を確定する[enter]キーは拾いませんでした(「Vue.js: TodoMVCをつくる 01 ー 項目の追加と削除および残り項目数表示」注[*1]参照)。v2.5の今の動きが、仕様変更なのかバグなのかは定ではありません(GitHubのjp.vuejs.orgにissueとして加えました)。