インフラ構築が億劫で個人開発を諦めてませんか？（私は何度か諦めました）
手軽にフロントの技術をつかったアプリ開発が可能なElectronを紹介します！
Electronの概要
Electronは、HTML/CSS/JavaScriptといったWeb技術でデスクトップアプリケーションを開発できるオープンソースのフレームワークです。
Windows、macOS、Linuxで動作し、クロスプラットフォームのアプリを作成できます。
身近な例として、Visual Studio Code、Notion、Discord、SlackなどのアプリがElectronで作られています。
詳細はこちら
Electronの歴史
2013年にGitHubが「Atom Shell」として開発を開始
2014年にオープンソース化
2015年に「Electron」へ改名しました。
以降、バージョンアップを重ね、現在も多くの企業で利用されています。
私がElectronに興味を持った理由
モダンなUIでアプリを作りたい
「何かアプリ作りたい」と考えたとき、過去業務経験のあるWinFormsではなく別の技術で作りたいなと思いました。
そこで、現在の業務で得た知識を活かしてフロント技術でアプリを作りたいと思ったのが出発点です。
手軽に開発したい
Webアプリで作る場合はサーバーが必要で、環境構築やコストのハードルがあり過去に何度も挫折した経験があります…。
開発環境
自宅はWindows、外出先はMacBookというプライベートの開発環境と相性のいいフレームワークを探していました。
そんな時にElectronに出会い、「これでいけるのでは？」と触り始めました。
Electronでできること
- クロスプラットフォーム対応で同じコードをWindows/Mac/Linuxで動かせます
- TypeScript + Reactなど、メジャーなフロント技術が使えます
- サーバー不要でデスクトップアプリが作れます
アーキテクチャ
Electronは「Chromium + Node.js」で構成されます。
Chromium（ブラウザエンジン）は各OS向けにビルドされているため、同じコードで各OS上で動作します。
イメージとしては「ブラウザの中でアプリが動いている」感じです。
プロセスは大きく2つに分かれます。
レンダラープロセス（ウィンドウごとに独立して動作し、HTML/CSS/JSが使える）がフロントエンド的な役割
メインプロセス（アプリ起動時に1つだけ動作し、ウィンドウ管理やファイル操作などOS機能を担当）がバックエンド的な役割です。
両者はIPC（Inter-Process Communication）で通信し、レンダラーが侵害されてもOSへの直接アクセスを防ぐ設計になっています。
「ブラウザで動かせばよくない？」に対する答え
一般的なブラウザ上では、ファイルシステムへの自由なアクセスや、システムトレイ・グローバルショートカットなどのOSネイティブ機能が使いづらく、ブラウザのサンドボックス制限も超えられません。
Electronを採用することで、デスクトップならではの機能にアクセスしやすくなります。
実際に触ってみた
技術スタックと開発環境
Electron、React、Redux Toolkit、TypeScriptといった構成で、業務で得た知識をそのまま活かせました。
開発環境はVS Codeで、Claude Codeにも助けてもらいました。
実行時は開発者ツールも使えて便利でした。
macOSでもほぼ同じUIで動作しました。
Winodws
<img src="https://thinkings.notepm.jp/private/669147a4-e233-11f0-8321-06e2d2a88ef9.png" title="image.png" width="368">
mac OS
<img src="https://thinkings.notepm.jp/private/6f1b4794-e233-11f0-b9de-067badad1d45.png" title="image.png" width="366">
触った感想
- Webアプリを作る感覚でデスクトップアプリを作れてよい。
- ホットリロードが効くのがうれしい。
- モダンなUIを採用しやすい。
- 自宅はWindows、出先はMacBookでも開発できるのがうれしい。
- メイン／レンダラー間のIPC通信で無限ループを起こしてしまったことがあった（あるあるらしい）。
- Chromium で動作する都合上、メモリ消費量が大きい。簡単なアプリでも約500MB使っていた。
業務ツールをElectronで作るのは「あり」
業務で培ってきたフロント技術をそのまま活かせるので、Electronで業務ツールを作るのは「ありかも？」と感じています。
社内のエンジニア同士で開発するのも楽しそう！
まとめ
Electronは、Web技術でデスクトップアプリを作れるうえ、Windows/macOS/Linuxに同じ体験を持ち込めるのが魅力です。
サーバー不要で実用的なツールを作れる点や、既存のフロントの知見を活用できる点が、私の開発スタイルとよく噛み合いました。
一方でメモリ使用量は軽くはないので、用途に合わせて選択したいところですね。
おまけ：アプリを作ってみた
※スライドにスクリーンショットがございます。
営業日リスト作成機能
スクラム開発で1スプリント分の営業日リストを作る作業が毎スプリント発生していて、これが地味に面倒なのでツール化してみました。
マトリクス表生成機能
テストケースを考えたり、操作パターンの組み合わせを考えたいときに使います。
ツールで作らせた方がケース漏れが発生しづらくていいですね。
目標管理機能
半期に1度人事評価のための振り返りを行うのですが、半年の間に担当した業務や活躍したエピソードを思い出すのに苦労していました。
この機能を使ってこまめに業務エピソードを貯めていって振り返り業務の負荷を下げる狙いがあります。
振り返り画面では貯めたエピソードを見ながら自己評価を書けるような設計にしてみました。
Discussion