注目イベント!
春の新人向け連載企画開催中
新人エンジニアの皆さん、2024春、私たちと一緒にキャリアアップの旅を始めませんか?
IT業界への最初の一歩を踏み出す新人エンジニアをサポートする新連載スタート!
mameyose

Electron v28 で ESM サポートが入ったので試す

| 3 min read
Author: masahiro-kondo masahiro-kondoの画像

はじめに

#

Electron v28.0.0 がリリースされ ESM(ECMA Script Modules) がサポートされました。

Electron Releases - v28.0.0

ついに Electron でも ESM が使えるようになりました。

Electron の ESM サポート状況

#

ドキュメントの以下のページに対応方法について記述されています。

ES Modules (ESM) in Electron | Electron

同ページの ESM support matrix (のスクリーンショット)を掲載します。

ESM Support matrix

まとめると以下のようになります。

  • Main プロセスでは Node.js の ESM Loader が使用される
  • Renderer プロセスでは Chromium の ESM Loader が使用される
  • Preload スクリプトでは以下のようになる
    • Renderer プロセスがサンドボックス化されている場合 ESM Loader はサポートされない
    • Renderer プロセスがサンドボックス化されていない場合 Node.js の ESM Loader が利用される (そのため拡張子は .mjs にする必要がある)

Electron の Main プロセスにおいて、従来の CommonJS ではモジュールのロードは同期的なのに対し、ES Module のロードは非同期的なので以下のように注意が必要です。

ESM の dynamic import や app.setPath などの Electron API は呼び出しは、コードの順番通りに実行されない。これらは、Electron アプリの ready イベントより前に実行される必要があるが、非同期に実行されるため、ready イベントの後で実行されるかもしれない。そのため、従来通りの挙動にするにはこれらを await 呼び出しにする必要がある。

ESM のトップレベル await を利用可能なため、await 呼び出しにするのは簡単です。

preload スクリプトに関しては、使用可能なら Node.js の ESM Loader が使用されます。この場合拡張子を .mjs にする必要があります。preload スクリプトで Node.js や Electron の機能を使用したい場合はこの方式を採用することになります。Context Isolation が有効になっていない場合は Node.js の dynamic import は使えないなど制約もあります。詳細は以下のセクションを参照してください。

Preload scripts

Information

Renderer プロセスのサンドボックス化については以下の記事に書いています。

Electron v20 で有効化された Renderer プロセスサンドボックス化に対応する

アプリケーションを ESM 対応する

#

昨年の記事「Electron - WebView から BrowserView に移行する」で作成したサンプルアプリケーションを Electron v28.0.0 にアップデートして ESM 対応しました。このアプリケーションはサンドボックス化と Context Isolation が有効なので package.json と Main プロセス の修正だけでした。

package.json

#
  • "type": "module" の行を追加

Main プロセス

#
  • ファイルの拡張子を .mjs に変更
  • requireimport に変更
  • __filename__dirname を使用している箇所で url パッケージの fileURLToPath をから取得するように変更

dynamic import や app.setPath などは使用していないため await をつけるなどの対応は不要でした。

Preload スクリプト

#
  • 変更なし

サンドボックス環境では ESM Loader がサポートされないため、Electron の機能を呼び出す場合、従来通り require を使用します。

Renderer プロセス

#
  • 変更なし

本アプリのリポジトリは以下にあります。

GitHub - mamezou-tech/electron-example-browserview: Example of Electron app that registers and switches between multiple BrowserViews.

最後に

#

ESM サポートが入ったことで、Electron アプリや Electron 用パッケージの ESM 対応も進むのではないでしょうか。

去年の初め頃に書いた記事「electron-quick-start のコミット履歴で見る Electron プログラミングモデルの変遷」において、

今後は、ES Modules 対応などが入ってくるのではないかと予想しています。

と書いていました。electron-quick-start のリポジトリを見ると、まだコード自体には ESM 対応は入っていませんでした。

豆蔵では共に高め合う仲間を募集しています!

recruit

具体的な採用情報はこちらからご覧いただけます。