ブログ

日常の忘備録

react製webアプリでショートカットを実装するときはkeymasterを使うと便利かもしれない

こんにちは。眠み卍。tako_programingです。 次の記事でmarkdownを抽象構文木でいじる話をしますみたいなことを言った気がしますが、keymasterが便利だったので、まずショートカットキーの話をします。 Slackとかみたいなwebアプリってショートカットキーがあって便利じゃないですか。アレ実装したいなぁと思ったんですが、1から実装すると普通に面倒なので、いい感じなライブラリを使いたいなぁとなります。で、まあ探していくと結構たくさんあってreact-shortcutsとかreact-hotkeysとか色々ありますが、star数がその中でダントツで多く、使い方が非常にシンプルでわかりやすかったので、masterkeyを採用しました。基本的にリポジトリのREADMEに書いてある通りにやればなんの問題もなくできますが、一通りの使い方とreactでやる上で3秒くらいハマった箇所を紹介します。

使い方

インストールします。

npm insttall --save keymaster

使いたい箇所でimportします

import key from 'keymaster'

いい感じな場所(自分はconstructorでやりました。)でショートカットを定義します。

key('a', function() {alert('you pushed a')})

こうするとaを押すと「you pushed a」とアラートが出ます。便利。まあcommandやoptionなんかと組み合わせたショートカットを作りたい場合が大半だと思いますので、そういう時は

key('option+a' function() {alert('option + a!!!')})

文字列で'option+a'を指定すれば問題なく期待どおりの動作をします(が、ブラウザやOSのショートカットとの衝突にお気をつけください)。

reactで使う時の話

僕は完全にフィーリングプログラマーなので、最初ショートカットをおした時にsetStateさせたかったので、こんなコードを書きました。

key('option+a' function() {this.setState({hoge: "aaa"})})

これだときちんと動作しなくて、hogeがundefinedと言われます。なんならthis.setStateがundefinedです。console.logでthisを吐かせればわかりますが、thisがkeyを参照しているので当たり前ですね。
期待どおりの動作をするコードはこちらです。

key('option+a', this.handleEnterOptionA.bind(this))
handleEnterOptionA() {
  this.setState({hoge: "aaa"})
}

関数を別途定義して引数に渡してあげるといい感じに思った通りに動きます。