YOwatari's blog

思うままに。

Electronにtypescriptで入門する

yapcasia.org

YAPCに行ってElectron楽しそうだなと思ったので、遊んでみることに。

Electron

electron.atom.io

Electronとは、GitHubの開発したエディアAtomの実行環境をSDKとして公開されたAtomShellの新しい名前で、HTML5+Node.jsでデスクトップアプリケーションを開発できるクロスプラットフォーム開発環境です。
Electronの情報を探す上で、まだまだAtomShellで検索したほうがヒットしやすいかなという印象です。

SlackやQiitaのKobito、Visual Stadio Codeなどでも採用されており、非常に親しみ深いです。
内部にChromiumを内蔵しているため、Chromiumだけを対象にして開発できる分、複数ブラウザの制約を考えなくて良い心地よさがある一方で、デスクトップアプリケーションなので、Chromiumの問題かOSの問題かなど、問題の切り分けを意識する必要があります。

似たものとしては、nw.js(node webkit)があるようです。

nwjs.io

Hello World

http://electron.atom.io/docs/latest/tutorial/quick-start/ に従えば、手元でElectronで動くアプリケーションを体験できます。
HTMLとjavascriptだけで書けて楽ちんです。

typescript

とりあえず、QuickStartを動かした後に、javascriptよりもtypescriptが好きなので、typescriptで書いてみました。

YOwatari/picnic · GitHub

typescriptのコンパイル時にエラーが出てしまいますが、とりあえずは動作します。
gulpを使って、typescript→ES6→ES5→minifyするだけです。(冗長な感じ

型定義ファイルについては、 https://github.com/borisyankov/DefinitelyTyped にある、github-electronをtsdで指定して利用させてもらっています。

これでアニメーションGIFのビューワーっぽいものでも作ってみようかなと思いつつ、次はReactを導入してみるのも良い遊びかなと思ったり。