Bashのhistory機能、便利ですよね?

Webのフォームにも、実装できたら便利なはず

ということで実装していきます

まずはBashのhistoryの挙動を確認

挙動1

↑キーで1つ前、↓キーで1つ後に実行したコマンドを表示できる

挙動2

実行前の編集中のコマンドもhistoryに反映される

挙動3

コマンドを実行するたび、編集中だったコマンドはリセットされる

実装の流れ

まずは↑キーと↓キーで過去の入力値を表示できるようにする(Enterキーで入力値の確定をする)
次に編集時の挙動を実装する

↑キー、↓キーとEnterキーの挙動を実装

idつきのinputタグを用意

history.html

<input id="form" placeholder="some text">

何はともあれ、まずは `v-model`

history.html

<input
  id="form"
  placeholder="some text"
  v-model="text"
>

キーボードイベントのバインディング

history.html

<input
  ~ 省略 ~
  v-on:keydown.arrow-up.prevent="backHist"
  v-on:keydown.arrow-down.prevent="headHist"
  v-on:keydown.enter='confirm'
>

※ prevent でデフォルトの挙動を無効化しないと、カーソルの位置が飛ぶ

Vueインスタンス作成

history.js

const form=new Vue({
  el: "#form",
  data: {
    text: '', // フォームの初期値
    index: 0, // ヒストリのインデックス
    history: [ '' ] // ヒストリの先頭にもフォームの初期値を入れておく
  }
})

※配列の先頭が最新の値とする

↑キー↓キーイベント発火時の関数を定義

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    backHist(){
      // indexはhistoryの長さ未満
      (this.index + 1) < this.history.length
        ? this.index++
        : undefined

      this.text=this.history[this.index];
    },
    headHist(){
      // indexは0より小さくはならない
      (this.index - 1) < 0
        ? undefined
        : this.index--

      this.text=this.history[this.index];
    },
  }
});

Enterキーイベント発火時の関数を定義

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    ~ 省略 ~
    confirm: function(){
      this.hist[0]=this.text; // 現在の値をヒストリの最新値として格納

      // 次のヒストリの初期値を入力(現在のテキストが空のときはヒストリを追加しない)
      this.text === ''
        ? undefined
        : this.hist=[ '', ...this.hist ]

      this.index=0; // インデックスを0(最新の値)に戻す
      this.text=''; // フォームをクリア
    }
  }
});

これで↑キー、↓キーとEnterキーの挙動は再現できました

編集時の挙動を実装

キー入力イベントのバインディング

history.html

<input
  ~ 省略 ~
  v-on:input="editHist"
>

キー入力されるたびにヒストリが「編集された」と考える

ヒストリにオリジナルのテキストと、編集中のテキストを格納できるようにする

history.js

const form=new Vue({
  ~ 省略 ~
  data: {
    ~ 省略 ~
    history: [{
      text: '', // オリジナル
      edit: undefined, // 編集中のテキスト(なければundefined)
    }]
  }
})

編集イベント発火用の関数を定義

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    ~ 省略 ~
    editHist: function(){
      this.hist[this.index].edit=this.text;
    }
  }
})

`history` の値変更に合わせて `confirm` 関数を変更する

history.js

const form=new Vue({
  ~ 省略 ~
  methods: {
    ~ 省略 ~
    confirm: function(){
      this.hist[0].text=this.text; // 現在の値をヒストリの最新値として格納

      // 編集中の値をクリア
      this.hist.forEach(
        h => h.edit=undefined
      );

      // 次のヒストリの初期値を入力(現在のテキストが空のときはヒストリを追加しない)
      this.text === ''
        ? undefined
        : this.hist=[{
            text: '',
            edit: undefined
          }, ...this.hist ]
            // .slice(0, 16) でhistoryの登録数上限(16)を指定することも可能

      this.index=0; // インデックスを0(最新の値)に戻す
      this.text=''; // フォームをクリア
    }
  }
})

以上で編集の挙動も実装できました

なぜこれを実装したか

Demo

おわりに

簡単に実装できるので、ITエンジニアをターゲットにしたサービスで実装してみてはどうでしょう

About Me

普段はインフラエンジニア

JavaScriptとShellScriptでインフラ自動化ができるOSSを開発しています

Submarine.js - https://gitlab.com/mjusui/submarine/tree/latest

Twitter: @submarinejs, @Mjusui