React.js の syntax ハイライトプラグインを作成した話
React.js の syntax ハイライトプラグインを作成した話
はじめに
この記事は，Vim (その２) advent calendar の 13日目の記事です．
自分の中で，今年一番がんばったVim活動を振り返り，それについて書き記していく． どちらかと言うと，pluginの紹介ではなく，作って良かった点，苦労した点などに焦点を当てる．
背景
自分は，よく React.js *1 を用いて開発を行っている．
React.js で開発するときの多くは，javascript の ソースコード中にHTMLのような
マークアップを埋め込む糖化シンタックスである JSX を用いることが多い．
(JSXは，マークアップそのものではなく，トランスパイル時にjavascript の
関数呼び出しに展開される)
そして，自分は普段 Vim を使って開発しており，vim-jsx *2 という，
syntax ハイライトのためのプラグインを用いて開発していた．
*2: vim-jsx
このプラグインは，とても良いものだったが，バグや不具合が多く目立った． 具体的には，特定の文字列でハイライトが崩れてしまったり，オートインデントが 壊れてしまったりなどである．例えば次のようなものである．
ハイライトが崩れたり，インデントが自動でいい感じにならないのは，僕にとって ストレスが大きかった． そこで，これらの問題の解決を目指して， このpluginを手元で改変して扱うことにした．(最初は，特に fork も push もせず， 手元でのみ書き換えていた．理由としては，vim-jsxに，LICENSEが明記されておらず， forkしていいかどうか判断できなかったため．)
そうしている間に，元のコードがなくなってしまったので，pluginとして公開にあたった．
それが，vim-jsx-pretty である．
プラグインの概要
vim-jsx-pretty では，vim-jsx で抱えていた問題を幾つか解決した． それは，次のデモを見てもらえるとわかりやすいだろう．
| vim-jsx-pretty | mxw/vim-jsx |
|---|---|
 |
 |
他にも，オートインデントに対応した．
Pluginを作成する上で参考にしたのは，Vimのruntime以下の最初から入っている， syntaxの設定ファイルである xml.vim だ．
コメント文による例も非常にわかりやすく，Vimにおける，正規表現の 教材としても良いのでは，と感じた．
プラグインの宣伝記事ではないのでこのあたりでとどめておいて， プラグインを作成して感じたことを振り返って行きたいと思う．
良かった点
- 苦手な正規表現と向かい合うことができた．
前よりは，正規表現に明るくなった気がしている．
- Github/issues を通して，かんたんなディスカッションをすることができた．
自分のツールを，他人に使ってもらえる嬉しさをしれた． また，意見やバグ報告を対応する，大変さと喜びを少ししれた．
- 開発中の不満を自分の力である程度解決することができた．
今までは，口を開けて問題を解決するまで待っていたが，今年は，Vimに限らず これまでに比べて，自力でバグを修正しようとすることができた． （具体的には，今年はじめて利用しているライブラリにPull Request送ったりすることができた）
このプラグインの場合，Pull Request ではないけど， 自分の力で（完全ではないかもしれないが）不満を解決できてよかった．
まだできていない点
- 網羅的な動作チェック
現在，手でインデントや，シンタックスハイライトに問題がないかどうか確認しているが， すべてのシンタックス及びインデントで正常に動作するかがまだわからない．
- テストの自動化
単純な，コマンドや関数の単体テストの方法は，知っているがシンタックスハイライトが できているかどうかをコードでテストする手段がわからなかった． あるいは，そういったツールがあるのかがわからなかった． もし，ないのであれば，特定のバッファに対して，指定したカーソル位置が 期待したハイライトグループかを検証する，アサーションなどを作ってみても良いかもしれない．
- 英語記事
今年中に英語記事書きたい．何故かと言うと，きっと同じ問題でストレスを抱えている， ユーザーがいるはずだと思ったから．（英語記事書きたいと思ってから，30日近く経っていて， 非常に良くないので，今年中とここに宣言しておく．）
わからない点
- LICENSE 的に問題ないのかどうかがわからない
このプラグインは，vim-jsx の焼き直しに近く，LICENSE的に問題あるのかないのかがわからない． （vim-jsxのソースコードを利用しているわけではない．） そもそも， vim-jsx にライセンスが存在しない．
このあたり詳しい人教えてほしいです．
