Electron + CoffeeScript + Hyperapp でアプリを作った話

fingerなくなった？

昨年末頃にウチではシステム切り替えがあったのだが、それまで管理者がユーザー確認するために使っていたfinger¹が使えなくなったことに切り替え後に気付いた。fingerを使えるようにしていたサーバーの各サービスを他サーバーに分散して移して行ったため、そのサーバー自体をリプレース対象から外していたのが真実だ。誰だ、この仕様を決めたのは、オレだよ。

ということで、急遽LDAPサーバーから簡易にユーザーを検索するためのツールを作ることになってできたのが下記のツールだ。

半分趣味、半分仕事なので、年末年始の間にコソコソ作っていたことは秘密だ(こんなOSSを見つけたので、これを使いましょうスタンスなので…)。なお、使い方のドキュメントなど一切作ってないが、需要があったら作る。

ツールを作るにあたって

サーバーを用意するのは面倒だったので、独立して使えるデスクトップアプリにした。まずは、容量がデカイこと以外に問題が少ないElectronをアプリのベースに採用することにした。

Electronと言えばJavaScriptでロジックを作れることが利点だ。といってもAltJSを使わない理由は無い。もちろんここはCoffeeScriptだ。

最後に、フレームワークをどうするかだ。何も使わずにDOM操作を書いていくのは少し辛い。で、年末Hyperappの記事がQiitaにいくつか上がっていたのをみて「これだ！」と勘違いしたわけだ。ということで、Hyperappを使うことにした。

TypeScript + React + Reduxと比べて

実はElectron + TypeScript + React + Reduxという組合せで作りかけていたアプリがある。必要性が無くなったこともあって未完成なのだが、そのとき得た見地から今回を比較して述べたいと思う。

TypeScript vs CoffeeScript

もし、主要なIDEにおける静的型付き言語並の補完を望むのであれば、TypeScriptは有力な選択肢だ。エディタ上で型チェックをしてエラーを指摘してくれるのも大きい。試行回数が大幅に減るだろう。だが、小規模においては如何せん面倒と言わざるを得ない。いざやろうとしても、型定義ファイルが古い、間違いがある、用意されていない、というのも少なくない。どこかでanyを使用したり、無理矢理キャストさぜるを得ないことも多々あった。

だが、TypeScriptへの不満はそんなことでは無い。一番の問題はECMAScriptの拡張に過ぎないと言うことだ。ECMAScriptの仕様ははっきり言っていいものではない。歴史的ないろいろの無理なところがES2015+になっても無くなったわけでない。むしろ、カオスさが増したと思えるぐらいだ。TypeScriptはそんなECMAScriptに静的型を足しただけだ。それ自体は良い事だと思うのだが、基にした物がどうしようも無いと思っている。これなら、C#をJavaScriptに変換するような形で作った方が良かったのでは無いかと思っている。

ということで、ECMAScriptの呪縛から逃れるために、CoffeeScriptに戻ってきた。CoffeeScriptがどうなのかはこれを読んでいる読者には今更なので説明しなくても良いだろう。

CoffeeScriptだと型が無いでは無いか？と言う人が居るかも知れない。それは間違っている。最新版ではCoffeeScript + Flowという手段が使えるのだ。ただ、CoffeeScript + Flowで自動型チェックの環境をどう作れば良いのかよくわからないので今回は断念した。いつか挑戦したいと思っている。

ああ、最後に一応言っておくけど、ご存じの通りCoffeeScriptはJSX表記に対応しているので、ReactとかHyperappを使うのに特に問題はない。

React + Redux vs Hyperapp

React + Reduxを作っていても思ったことは「でかい」だ。枠がでかすぎて、いろいろなことを仕込まなければならない。アレもコレも何でも一つ一つ準備しなくてはならない。はっきり言って面倒だ。そして、いろいろと組合せを自動的に処理しようとしたときは、いくつかのライブラリに頼る必要が出てくる。確かにそれらは便利なのだが、より複雑さが増しているような気がした。

巨大なプログラムを構造を崩さずに組み立てるというのであれば、React + Reduxの構成は便利なのかも知れない。しかし、小規模ではそこまでの機能は要らないのだ。Reactの機能は多すぎるし、Reduxがしてくれることは最低限すぎて副作用すら単独では扱えない。なんとも痛し痒しな組合せのような気がする。

そんなときに知ったのがHyperappだった。ライブラリが小さい事は重要では無い、必要な機能だけある事が重要なのだ。Hyperappは余りにも単純すぎるが、単純であるが故に、どうすれば良いのかが見えてくる。規模が大きくなるとわからないが、小さい内は十分見通しが良いアプリが作れる。

今回はそれほど大きい物でなかったこともあって、マッチしていたと思っている。JSX表記も使えるし、基本的な流れはReact + Reduxとそれほど変わらないため、学習コストもほぼ0だった。ドキュメントがまだ少なく、細かいところで迷うところはあったけど、そもそも出来ることが少ないので、それほど苦労することも無かった。

何か作ることはやはり楽しい

CoffeeScript v2がでてから何か完成品²を作ると言うこともしてなかったし、ごく一部で話題になっていたHyperappを試すことが出来たので、今回の経験はとてもためになったと思っている。またCoffeeScript + Flow環境をどう用意するか、Hyperappでコンポーネント毎に分割して作って行くときはどうまとめるべきなのか、といった課題も出てきたので、今後研究していきたいと思う。まぁ、どちらもお勧めかと言われると、微妙って感じだが。