Electron ハンズオン

こんにちは、村上 (@fossamagna) です。

今回は、10月22日に永和システムマネジメント東京支社で Electron のハンズオンを社内イベントとして開催したので、その内容と様子をご紹介したいと思います。

Electronとは

Electron は GitHub がオープンソースで開発しているデスクトップアプリを開発するためのプラットフォームです。Electronを使うとHTML, CSS, JavaScriptなどのWebの技術を利用してデスクトップアプリを開発できます。GitHub の Atom エディタや Microsoft の Visual Studio Code なども Electron をベースに作られています。

Webアプリの開発経験しかないけど、デスクトップアプリの開発をやってみたい人などには、Electronを使ったデスクトップアプリ開発は始めやすいのではないでしょうか。
また、既存のWebサービスをデスクトップアプリとして提供するといった場合にもHTML, CSS, JavaScriptを利用して開発できるので、Webサービスの資産を利用して素早く開発ができると思います。

永和システムマネジメントのアジャイル事業部が開発している idobata というチャットサービスがあります。その idobata の非公式クライアントも Electron ベースです。

ハンズオン

では、Electronを題材にしたハンズオンのお話です。ハンズオンは1時間で「Markdownのプレビュー表示とPDF変換ができるElectronアプリ」を作成するという内容です。
ハンズオンにはアジャイル事業部、ITサービス事業部のメンバーが10名以上参加してくれました。
1時間という時間でしたが、参加者のみなさんはElectronで利用するWeb系の技術には慣れているので、初めてでもハンズオンの最後にはアプリを完成させて、動作させるまでできていました。

ハンズオン当日に使用した資料は GitHubのWikiページ で公開しています。資料を読んでけば、一人でも進められるようになっていると思うので、興味が出た人は是非ハンズオンを試してみてください。
ハンズオンで作成したアプリのソースコードもGitHub で公開しているので、アプリを動作だけさせてみたいという人はこちらからチェックアウトして下さい。

おまけ

Electronのハンズオンを開催した日には、ESM オフラインどう書く というイベントも開催されました。私もそのイベントに参加しましたが。制限時間内には解くことはできませんでした。15分のロスタイムをもらってなんとかNode.jsで解くことができました。こちらも非常に面白いイベントだったので是非挑戦してみてください。ESM オフラインどう書くのイベントの自体はこちらのブログ で紹介されているので一緒にみてもらえるといいと思います。