Electronにtypescriptで入門する
YAPCに行ってElectron楽しそうだなと思ったので、遊んでみることに。
Electron
Electronとは、GitHubの開発したエディアAtomの実行環境をSDKとして公開されたAtomShellの新しい名前で、HTML5+Node.jsでデスクトップアプリケーションを開発できるクロスプラットフォーム開発環境です。
Electronの情報を探す上で、まだまだAtomShellで検索したほうがヒットしやすいかなという印象です。
SlackやQiitaのKobito、Visual Stadio Codeなどでも採用されており、非常に親しみ深いです。
内部にChromiumを内蔵しているため、Chromiumだけを対象にして開発できる分、複数ブラウザの制約を考えなくて良い心地よさがある一方で、デスクトップアプリケーションなので、Chromiumの問題かOSの問題かなど、問題の切り分けを意識する必要があります。
似たものとしては、nw.js(node webkit)があるようです。
Hello World
http://electron.atom.io/docs/latest/tutorial/quick-start/ に従えば、手元でElectronで動くアプリケーションを体験できます。
HTMLとjavascriptだけで書けて楽ちんです。
typescript
とりあえず、QuickStartを動かした後に、javascriptよりもtypescriptが好きなので、typescriptで書いてみました。
typescriptのコンパイル時にエラーが出てしまいますが、とりあえずは動作します。
gulpを使って、typescript→ES6→ES5→minifyするだけです。(冗長な感じ
型定義ファイルについては、 https://github.com/borisyankov/DefinitelyTyped にある、github-electronをtsdで指定して利用させてもらっています。
これでアニメーションGIFのビューワーっぽいものでも作ってみようかなと思いつつ、次はReactを導入してみるのも良い遊びかなと思ったり。
