AtomでVimのタブを実現するatom-vim-like-tabを作った（2016/08/16追記あり）

タイトルの通りなのですが、Vimでのタブ機能をAtomで実現させるパッケージをGW中に作ってみました。
これでますますAtomのVim化が捗ります。

atom-vim-like-tab

8/16追記

future workとしていた以下の機能をそれぞれのバージョンで追加しました！
ver 1.0で リストビューでタブの選択
ver 1.2で Vimとそっくりの見た目なタブ状況

より使い勝手がよくなったと思うので、Vimのタブが恋しい人はぜひ試してみてください！

開発した理由

自分がコードを書くときには最低でも縦に2分割、場合によって縦横の4分割でコードを書くことが多いです。
例えば左側にサーバー側のコード(Ruby)、右側にクライアント側のコード(js)を開くようなことが多いのですが、ここでさらにHTMLも同時に編集したいというケースが結構あります。
Vimであれば新しいタブを作って左側にjs、右側にHTMLを開いてコードを書き始め、もしサーバー側の修正に戻りたければ最初のタブに戻るだけなのですが、Atomにはそのような機能が無いので大量に開かれたタブ（ここではAtomのタブ）を閉じてファイルを開き直すのが非常に面倒でした。

それっぽいワードでAtomパッケージを検索してみたのですが、Vimのタブを実現するようなものは見つからなかったので自分で開発することにしました。

何ができるのか

もしVimのタブ機能をご存知であれば、アレと同じことがAtomでも可能になります。

GIFアニメを見て頂ければ何となく分かるかと思いますが、Atomが標準で可能な画面分割に加えて新しいウィンドウ的なもの（Vimではタブと呼ばれています）を作ることができ、その中では最初のタブとは独立してファイルを開いたり分割することができます。

今のところサポートしているのはシンプルに以下の機能だけです

• new: 新しいタブを作る
• close: 今のタブで開いているファイルを全て閉じてタブを削除する
• next, previous: タブの切り替え

タブという概念が加わることで、例えばタブ1にJSとHTML、タブ2にサーバー側のモジュールとspec、と分けておくことができます。
こうしておくと別の部分の修正に作業を移す場合にタブを切り替えるだけで済むようになります。

今後

Vimのタブ機能を実現するのに最低限必要な機能は実装できたので、今後は以下の機能の追加を目指す予定です

リストビューでタブの選択

他のパッケージでもよくあるように、リストビューを使ってタブの検索、切り替えをできるようにしたい。
参考にできそうなパッケージがたくさんあるので、これはやればできそうだと思ってます。

Vimのようにタブの状況を表示したい

Vimでは現在いくつのタブが作られているか、現在のタブは何番目かという情報が表示されています。tmuxを起動すると下にウィンドウの情報が表示されるのと同じような見た目です。

できれば同じような見た目をAtomでも表示したいのですが、そのようなことが簡単に実装できるAPIがあるのかまだ調査もしていないので実現可能なのか分からない段階です。
AtomはJSとHTMLでできているので頑張れば不可能ではないでしょうが・・・

実装

せっかくなのでどんな感じに実装されているのかも書いておきます。興味がある人はどうぞ。

Atomでは画面分割をすることをペイン(Pane）分割と呼んでいます。分割していくと新しいPaneに対応したHTMLの要素が増えていき、HTMLとCSSでいい感じに分割されて表示されるようになっています。

これを利用して、atom-vim-like-tabは隠すべきPaneにdisplay=noneのCSSを当てて実はHTML的に見えなくしているだけです。

実際にはそれぞれのタブにどのPaneが紐付いているのかというのを管理するために、独自にTabControllerというクラスを実装してこいつにPaneの参照を持たせています。
newでタブを作る度にTabControllerも増やしていき、新しいタブの中でペイン分割するときに新しく生成されるPaneは新しいTabControllerが管理するようになっています。

next,previousでタブを切り替えたときにはアクティブになったタブだけを表示するようにdisplay属性を書き換え、
closeされたときにはTabControllerを削除してタブを切り替えるようになっています。

一通り実装し終えたあとにcloseでTabControllerを削除したり、Pane関連のイベント管理を外したりするところのバグがぼろぼろ見つかって目標としていた3日間よりも開発に時間がかかってしまいました。
ちゃんとテスト書いたしバグはもうないはず・・・

Atomが発行しているPaneに関するイベントの扱い方についてはatom-zentabsなどを参考にしました。
他のパッケージやAtom自体のソースコードもかなり参考になりました。JSやCoffeeなのでちゃんとコードを追っていけばどんな感じに実装されているのか分かるのはいいですね。
が、そもそもAtomのパッケージに関するドキュメントが乏しいため、公式パッケージのコードが一番参考になる、というかそれぐらいしか参考にできるものが無くてちょっと辛かった。

もしバグとか改善して欲しい機能があればGitHubのIssueにどんどんお願いします！