【個人開発】ターミナル上で動作するRedisクライアントを作成しました

![Screenshot from 2019-03-30 21-39-13.png](https://qiita-image-store.s3.amazonaws.com/0/240412/3a0a4c7e-db53-7bfa-c65c-058bcc327350.png)

[redis-term](https://github.com/uki00a/redis-term)というnpmモジュールを作成しました。

開発にあたって使用したモジュールや背景等について書かせていただきます。

## 背景

* 今までnpmモジュールを利用することはあったが、自作したことはなく、何か作りたいと考えていた。
* Redisについて、過去に使用する経験があったが、十分に理解しているとはいえず、より理解を深めたいと考えていた。

## 使用方法

* npmでインストールできます。

```sh
$ npm install -g redis-term
$ redis-term
```

* 各要素間は<kbd>tab</kbd>キーで移動できます。
* リスト内の項目については、上下キーまたは<kbd>j</kbd>, <kbd>k</kbd>で移動できます。

## 意識したこと

ターミナルで動作するという点を活かすため、可能な限りキーボードだけで操作できるようにすることを目標に開発しました。

## 実装した機能

### コネクション管理

##### 接続したことのあるサーバの一覧
![Screenshot from 2019-03-31 05-17-19.png](https://qiita-image-store.s3.amazonaws.com/0/240412/30c68c00-2bf8-2a97-76a2-d253b10f651e.png)

##### コネクション情報の入力画面

![Screenshot from 2019-03-31 05-18-08.png](https://qiita-image-store.s3.amazonaws.com/0/240412/0699a7a4-962b-4f56-b7d7-570260a6bafd.png)

コネクション情報は`~/.cache/redis-term/connections.json`に保存されます。

### キーの管理

![Screenshot from 2019-03-31 06-02-41.png](https://qiita-image-store.s3.amazonaws.com/0/240412/424eb58d-45d1-d773-0c99-4733fd1723a4.png)

### テーマ機能

##### dark

![Screenshot from 2019-03-31 06-07-10.png](https://qiita-image-store.s3.amazonaws.com/0/240412/4b1cda78-d24d-85c0-ab2e-e0e614ef5295.png)

##### blue

![Screenshot from 2019-03-31 06-08-45.png](https://qiita-image-store.s3.amazonaws.com/0/240412/35609c9b-04ea-d349-610d-e9d6a1628cc8.png)

darkとblueの2種類のテーマを用意しました。
設定は`~/.config/redis-term/settings.json`から変更できます。

```json:~/.config/redis-term/settings.json
{
  "colortheme": "dark" // or "blue"
}
```

## 使用したモジュール

* [ioredis](https://github.com/luin/ioredis)

Redisクライアントです。
Promiseを標準でサポートしている点に魅力を感じたため採用しました。

* [neo-blessed](https://github.com/embark-framework/neo-blessed)

[blessed](https://github.com/chjj/blessed)のfork版です。
UIの構築に利用しています。

* [react-blessed](https://github.com/Yomguithereal/react-blessed)

blessed向けのReactレンダラ。

* [Redux](https://github.com/reduxjs/redux)

状態管理用です。
ディレクトリ構成は、[Ducks](https://github.com/erikras/ducks-modular-redux)や[re-ducks](ducks)パターンを参考にさせていただきました。

* [react-router](https://github.com/ReactTraining/react-router)

ルーティングライブラリ。
[MemoryRouter](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/MemoryRouter.md)を使っています。

* [ssh2](https://github.com/mscdex/ssh2)

SSHクライアント/サーバライブラリです。
SSHトンネル接続をサポートするために使用しました。

* [keytar](https://github.com/atom/node-keytar)

パスワード管理のために使用しました。

* [Mocha](https://github.com/mochajs/mocha)
* [testdouble.js](https://github.com/testdouble/testdouble.js)
* [react-test-renderer](https://www.npmjs.com/package/react-test-renderer)

テスト用です。

testdouble.jsは、JavaScript向けのモック/スタブライブラリです。
個人的にSinon.jsよりシンプルで使いやすい印象を受けました。

## 動作環境

[Hyper](https://hyper.is/)とUbuntu標準のターミナルで動作確認をしました。
MacとWindowsについては、手元に環境がないため確認できていません。
Node.jsについては、v8, v10, v11で動作確認しました。

## 課題

* CIでテストの実行を自動化する。
* テーマを増やす。
* エディタの使い勝手をよくする。(JSONとか)
* Hooks API対応

等...

## 大変だったこと等

* UIの設計

個人的に経験の薄い分野であるため、使いやすいUIを考えながら開発していくことは想像以上に大変だった。

* react-blessed及びblessedに関する情報が少なく、度々ソースコードを見る必要があり、大変だった。

* やる気を持続させること。

最低でも毎日30分~1時間程度はコードを触るようにして、やる気の低下を避けるようにしました。

## 参考にさせていただいたプロジェクト

- [sqlectron-term](https://github.com/sqlectron/sqlectron-term)

ターミナルで動作するデータベースクライアント。
UI等を参考にさせていただきました。

- [Medis](https://github.com/luin/medis)

Electron製のRedisクライアントです。