Electron 21.0.0とは？Githubが開発したデスクトップアプリ作成ツールを紹介

GitHubがElectron 21.0.0をリリース

2022年9月27日（現地時間）、米国GitHub社は、同社が開発中のオープンソース・アプリケーションフレームワーク「Electron」の最新バージョン、「Electron  21.0.0」をリリースしました。「Electron  21.0.0」では、さまざまな機能改善が行われています。

また、Electron を構成位する主要なコンポーネントとなるブラウザ「Chromium」がバージョン106.0.5249.51 に更新され、V8 （JavaScriptエンジン）はバージョン10.6に、JavaScript実行環境の「Node.js」は16.16.0にバージョンアップしています。

この記事では、「Electron 21.0.0」の変更点と併せて「Electron」とは何か、そのメリットやデメリット、使い方などについて解説をしていきます。

【参考】：Electron 21.0.0 | Electron 【参考】：The Chromium Projects 【参考】：V8 JavaScript engine 【参考】：Node v16.16.0 （LTS） | Node.js

GitHubとは？メリットや使い方、Gitとの違いも徹底解説！

Electronとは

Electron（発音：エレクトロン）は、Web技術を用いてデスクトップ・アプリケーションの開発ができるオープンソースのフレームワークで、米GitHub社が開発しています。MacOS、Windows、Linuxなどのクロスプラットフォームに対応しています。

元々はAtomエディタを作成するために作られましたが、他にはSlackやVS Code、Microsoft TeamsなどもElectronから作られています。

ElectronはChromiumとNode.jsを使用しており、HTMLやCSS、JavaScriptなどのWeb技術を用いて、簡単にデスクトップアプリが作れる点が大きな特徴です。

Node.jsとは？JavaScriptとの違いや使い所を解説

Tauri 1.0が正式リリース！概要や特徴、Electronとの違いを解説

ElectronはWeb技術を用いてデスクトップアプリを開発できるフレームワークですが、Electronには具体的にどのようなメリットがあるのかを見ていきましょう。

■ 新たな知識を習得せずデスクトップアプリを作れる Webエンジニアがデスクトップアプリを開発するためには、新たな言語知識が必要となりますが、サイトの制作に携わっているWebエンジニアであれば、今持っている知識をそのまま使って、クロスプラットフォームでデスクトップアプリケーションの開発ができます。

またElectronを利用すると、開発済みのWebアプリを、わずかに手を加えるだけでデスクトップアプリケーションに変更することが可能で、既にある資産や知識を生かせます。

Webエンジニアの将来性が高い理由とは？転職方法や年収も解説

■ JavaScriptに集約できる デスクトップアプリを作る際には、MacであればSwiftやJavaを利用し、WindowsであればC#、VB.NET、Javaを使うことが多いでしょう。他にもC++やPythonを使うこともあります。このように、これまでのデスクトップアプリでは、さまざまな言語を使い分けていました。

Electronを利用すると、プラットフォームに関係なく、HTMLとJavaScriptに集約できます。Webエンジニアもデスクトップ系エンジニアも同じフレームワークを使い、同じ言語を使ってデスクトップアプリを開発できるというのは効率面、コスト面で大きなメリットになります。

■ JavaScriptのライブラリを活用できる JavaScriptにはWebアプリ開発向けのライブラリが豊富に存在しており、これらをデスクトップアプリでも活用できます。もちろんC#JavaやJavaにもライブラリはありますが、JavaScriptと比較して多くはありません。

JavaScriptにはNode.jsを始めとして、jQueryやReact.jsなど優れたライブラリが豊富に揃っており、これらが自由に使えるのは魅力です。

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

 Electronは優れたフレームワークですが、デメリットもあります。ここでは、Electronの弱点（デメリット）を見ていきましょう。

■ 開発規模によっては不向きがある JavaScriptはインタプリタ言語のため、ネイティブアプリと比較して実行速度やレスポンス面で劣ります。そのため大規模アプリの開発には不向きと考えられます。また逆に軽量アプリの開発では、インストールサイズが大きくなり過ぎる可能性があるなど、開発規模とのバランスやパフォーマンスをよく考慮しておくことが求められます。

■ ソースコードが見える コンパイル言語ではないため、アプリとして提供すると、ソースコードが丸見えになります。有償アプリとして開発するのには適していません。

Electron 21.0.0の変更内容

2018年2月に「Electron 2.0.0」として登場した Electronですが、20回のメジャーリリース※を経て、今回の「Electron 21.0.0」に至りました。「Electron 21.0.0」にはどのような機能が新たに盛り込まれ、どのような修正が加えられたのかを確認しておきましょう。

【参考】：Electron Releases | Electron

「Electron 21.0.0」には以下の機能が追加されています。

▪LoadBrowserProcessSpecificV8Snapshotを追加し、メイン/ブラウザープロセスに、browser_v8_context_snapshot.binにあるファイルからv8スナップショットを読み込めるようになりました。 ▪app.getSystemLocale() メソッドが追加されました。 ▪webFrameMain.originが追加されました。 ▪new-windowイベントに対する非推奨の警告が追加されました。 ▪Windowsに没入型ダークモードが追加されました。 ▪新しいWebContents.ipcとWebFrameMain.ipcのAPIが追加されました。 ▪LinuxとWindowsでWeb Bluetoothピンペアリングのサポートが追加されました。 ▪パネルのような動作のサポートが追加されました。ウィンドウをフルスクリーンアプリの上にフロートさせることができるようになりました。 ▪MacOS アプリの APN からのプッシュ通知が追加されました。

【参考】：Release electron v21.0.0 · electron/electron · GitHub

続いて修正された点について見ていきましょう。「Electron 21.0.0」では以下の修正が加えられています。

▪Node.js 暗号化で不足している HKDF サポートが有効になりました。 ▪iframeから非標準のスキームを読み込む際に発生するクラッシュが修正されました。 ▪エミュレーションの設定をしたままオリジンを切り替えるとクラッシュする問題が修正されました。 ▪ブラウザウィンドウが作成される前に screen.getCursorScreenPoint() が呼び出されると Wayland 上でクラッシュする問題が修正されました。 ▪serialPort.open()がNetworkError.でも失敗する問題が修正されました。 ▪無効なpageSizeの値によってサイレントハングし、最終的にクラッシュする問題が修正されました。 ▪macOSで一部のスペルチェック機能が不正にエラーを発生させる問題が修正されました。 ▪UploadFileオブジェクトの'length'プロパティが無視される問題が修正されました。

【参考】：Release electron v21.0.0 · electron/electron · GitHub

Electronを使うには

Electronを利用する上で、何が必要なのかについて確認しておきましょう。以下に、必須となるものと、あると便利なものをそれぞれ紹介しておきます。実際に触ってみたいという方はぜひ参考にしてください。

Electron を利用するには最低限、「Node,js」と「Electron」の2つが必要です。

▪Node.js Node.js はV8 （JavaScriptエンジン）で動作するJavaScript実行環境です。

Electron を使用するためには、 Node.jsをインストールしておく必要があります。利用可能な最新の LTS バージョンのインストールを推奨します。Node.js のインストールを確認するには、コマンドプロンプトで以下のコマンドを入力してみてください。

node -v

npm -v

npm（Node Package Manager）は Node.js のパッケージ管理ツールです。

▪Electron npmコマンドを用いて、Electronをインストールすることができます。コマンドプロンプトから以下のコマンドを入力します。

npm install -g electron

正しくインストールできているか確認するにはコマンドプロンプトから以下のコマンドを入力します。

electron -v

【参考】：ダウンロード | Node.js

以下の2つは用意しておくと、「Electron」を利用する際に何かと便利です。余裕があればインストールしておきましょう。

▪Git 主にプログラムのソースコードの変更履歴を記録し、管理するためのバージョン管理システムです。開発プロジェクトではよく利用されています。まだインストールをしていない方はこの機会にインストールしておくとよいでしょう。

Gitとは？GitHubとの違いやメリットをわかりやすく解説！

▪nvm（Node Version Manage） Node.jsのバージョン管理を行うツールです。コマンドでインストールが確認できます。

nvm -v

【参考】：Git | Downloads 【参考】：nvm-windows | GitHub

Electronを活用してデスクトップアプリを開発しましょう

ここまで、デスクトップアプリケーション開発のフレームワークの最新バージョン「Electron 21.0.0」のリリースに関するニュースと変更点、「Electron」のメリット、デメリット、「Electron」の利用に必要なものなどについて解説をしました。

Webエンジニアも、デスクトップ系エンジニアも同じツールでデスクトップのアプリ開発が行える「Electron」はさまざまな可能性を秘めています。今回紹介した「Electron 21.0.0」を活用して、デスクトップアプリの開発にぜひ生かしてみませんか？

AIペアプログラマー「GitHub Copilot」の使い方や導入メリットを徹底解説！