【2024年7月最新】Electronの使い方を徹底解説！初心者が知っておくべき基本をご紹介

プログラミング

2024-07-29

こんにちは。エンジニア、PM、デザイナーの副業・転職採用サービス「Offers（オファーズ）」のOffers Magazine編集部です。デスクトップアプリケーション開発の世界で注目を集めているElectronについて、その基本的な概念から実践的な使い方まで、詳しく解説していきます。2024年の最新情報を踏まえつつ、Electronの魅力と可能性を探っていきましょう。

→まずはあなたの市場価値を確認する
→Electronの求人・転職情報をもっと詳しくみる

まずはあなたの市場価値を確認する Electronの求人案件をみる

この記事の目次

Electronとは何か
Electronのインストール方法
Electronアプリケーションの基本構造
簡単なデスクトップアプリケーションの作成
アプリケーションの実行とデバッグ
Electronアプリケーションのパッケージング
応用機能の追加
Electronのセキュリティ
まとめ

Electronとは何か

Electronは、クロスプラットフォームのデスクトップアプリケーション開発フレームワークとして、多くの開発者から支持を得ています。その特徴や利点について、詳しく見ていきましょう。

Electronの基本概念

Electronは、Web技術を使ってデスクトップアプリケーションを作成するためのフレームワークです。HTML、CSS、JavaScriptといったWeb開発の知識を活かして、Windows、macOS、Linuxなど、複数のプラットフォームで動作するアプリケーションを効率的に開発できます。Electronの使い方を習得することで、Webの技術スタックをデスクトップアプリ開発にシームレスに適用できるのが大きな魅力です。

採用事例

Electronの使い方を学ぶ上で、実際の採用事例を知ることは非常に参考になります。有名なところでは、Visual Studio Code、Atom、Slack、DiscordなどがElectronを用いて開発されています。これらのアプリケーションの成功は、Electronの可能性と柔軟性を如実に物語っています。2024年現在、さらに多くの企業がElectronを採用し、革新的なデスクトップアプリを生み出しています。

類似技術との比較

Electronの使い方を検討する際、他の類似技術との比較も重要です。例えば、React NativeやFlutterといったクロスプラットフォーム開発フレームワークがありますが、これらは主にモバイルアプリ開発に特化しています。一方、Electronはデスクトップアプリに焦点を当てており、豊富なネイティブAPI群とWeb技術の融合が特徴です。

Electronのインストール方法

Electronを使用するための準備として、まずはインストール方法を押さえておきましょう。Node.jsのセットアップから始まり、プロジェクトの初期化まで、順を追って解説します。

Node.jsのインストール

Electronを使用するには、まずNode.jsをインストールする必要があります。Node.jsの公式サイトから最新版をダウンロードし、インストールしましょう。2024年8月時点では、Node.js v18.x LTSが推奨されています。インストールが完了したら、ターミナルで「node -v」コマンドを実行し、バージョンが正しく表示されることを確認してください。

プロジェクトフォルダーの作成

次に、Electronプロジェクト用のフォルダーを作成します。ターミナルで以下のコマンドを実行しましょう。

mkdir my-electron-app
cd my-electron-app
npm init -y

これにより、基本的なpackage.jsonファイルが生成されます。

Electronのインストール

最後に、Electronをプロジェクトの開発依存関係としてインストールします。以下のコマンドを実行してください。

npm install electron --save-dev

このコマンドにより、最新版のElectronがプロジェクトにインストールされます。2024年8月現在、Electron v28.x系が最新の安定版となっています。Electronの使い方を学ぶ上で、最新版を使用することで、新機能やパフォーマンスの向上を体験できます。

Electronアプリケーションの基本構造

Electronアプリケーションを開発する上で、その基本構造を理解することは非常に重要です。プロジェクトの初期設定から主要ファイルの役割、そしてElectronの核心であるメインプロセスとレンダラープロセスについて、詳しく見ていきましょう。

プロジェクトの初期設定

Electronプロジェクトの初期設定は、効率的な開発の土台となります。package.jsonファイルに必要な情報を追加し、プロジェクトの構造を整えていきます。具体的には、mainフィールドの設定や、start scriptの追加が重要です。これにより、Electronの使い方に沿った基本的な開発環境が整います。

主要ファイルの役割

Electronアプリケーションには、いくつかの重要なファイルが存在します。main.jsはアプリケーションのエントリーポイントとなり、ウィンドウの作成やアプリケーションのライフサイクル管理を担当します。一方、index.htmlはアプリケーションのUI部分を定義し、renderer.jsがそのUIのロジックを制御します。これらのファイルの役割を理解することで、Electronの使い方をより深く把握できるでしょう。

メインプロセスとレンダラープロセス

Electronアプリケーションは、メインプロセスとレンダラープロセスという2つの重要なプロセスで構成されています。メインプロセスはアプリケーション全体の制御を担当し、レンダラープロセスは各ウィンドウのUIレンダリングを担当します。この2つのプロセスの連携を理解することが、Electronの使い方をマスターする上で非常に重要です。プロセス間通信（IPC）を活用することで、複雑な機能を実現できます。

簡単なデスクトップアプリケーションの作成

Electronの基本を理解したところで、実際に簡単なデスクトップアプリケーションを作成してみましょう。ここでは、基本的なウィンドウの作成からHTMLファイルのロード、そしてプリロードスクリプトの設定まで、順を追って解説します。

基本的なウィンドウの作成

Electronアプリケーションの第一歩は、ウィンドウの作成です。main.jsファイルに以下のようなコードを記述します。

const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)

このコードでは、800x600ピクセルのウィンドウを作成し、index.htmlファイルを読み込んでいます。Electronの使い方の基本として、このようなウィンドウ作成のパターンを覚えておくと良いでしょう。

HTMLファイルのロード

次に、ウィンドウに表示するHTMLファイルを作成します。index.htmlという名前で、以下のような基本的な構造のファイルを作成しましょう。

<!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello, Electron!</h1>
</body>
</html>

このHTMLファイルがアプリケーションのUIとなります。Electronの使い方の中で、HTMLとCSSを活用してリッチなUIを作成することができます。

プリロードスクリプトの設定

プリロードスクリプトは、レンダラープロセスが読み込まれる前に実行されるJavaScriptファイルです。これを使用することで、レンダラープロセスとメインプロセス間の橋渡しができます。preload.jsファイルを作成し、以下のように設定します。

window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})

このスクリプトは、Electronの使い方の中でも重要な要素です。セキュリティを考慮しつつ、必要な機能をレンダラープロセスに提供することができます。

アプリケーションの実行とデバッグ

Electronアプリケーションを開発する上で、実行とデバッグは非常に重要なプロセスです。ここでは、アプリケーションの実行方法とChrome Developer Toolsを使ったデバッグ技術について詳しく解説します。

アプリケーションの実行方法

Electronアプリケーションを実行するには、package.jsonファイルにスクリプトを追加する必要があります。以下のようなスクリプトを追加しましょう。

"scripts": {
"start": "electron ."
}

このスクリプトを追加した後、ターミナルで「npm start」コマンドを実行することで、アプリケーションを起動できます。Electronの使い方において、この実行方法は基本中の基本です。開発中は頻繁にこのコマンドを使用することになるでしょう。

Chrome Developer Toolsを使ったデバッグ

Electronアプリケーションのデバッグには、Chrome Developer Toolsが非常に役立ちます。開発中のアプリケーションでDevツールを開くには、以下のコードをmain.jsに追加します。

win.webContents.openDevTools()

このコードにより、アプリケーション起動時に自動的にDevツールが開きます。Console、Elements、Network、Sourcesなどのタブを活用することで、効率的にデバッグを行えます。Electronの使い方をマスターする上で、デバッグスキルの向上は非常に重要です。2024年現在、Chrome Developer Toolsはさらに機能が強化され、Electronアプリケーションの開発をより強力にサポートしています。

Electronアプリケーションのパッケージング

開発したElectronアプリケーションを配布するためには、パッケージング作業が必要です。ここでは、electron-packagerを使用したパッケージング方法について、macOSとWindows向けの手順を詳しく解説します。

electron-packagerのインストール

まず、electron-packagerをインストールしましょう。ターミナルで以下のコマンドを実行します。

npm install electron-packager --save-dev

このツールを使用することで、Electronの使い方の中でも重要なパッケージング作業が大幅に簡略化されます。2024年現在、electron-packagerは継続的に改善が行われており、より効率的なパッケージング処理が可能になっています。

macOS向けのパッケージング

macOS向けのパッケージングを行うには、package.jsonに以下のスクリプトを追加します。

"scripts": {
"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds"
}

このスクリプトを実行すると、macOS用の実行可能ファイルが生成されます。アイコンファイルのパスは、実際のプロジェクト構造に合わせて調整してください。Electronの使い方において、適切なアイコンの設定は、アプリケーションの見た目を向上させる重要な要素です。

Windows向けのパッケージング

Windows向けのパッケージングも同様に、package.jsonにスクリプトを追加します。

"scripts": {
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Electron Tutorial App\""
}

このスクリプトを実行すると、Windows用の実行可能ファイルが生成されます。asarオプションを使用することで、アプリケーションのソースコードを保護することができます。Electronの使い方を習得する過程で、クロスプラットフォーム開発の利点を最大限に活かすことが重要です。

応用機能の追加

基本的なアプリケーションの開発に慣れたら、次は応用機能の追加に挑戦してみましょう。ここでは、IPC通信の実装、自動アップデート機能の追加、そしてクリップボード操作について解説します。これらの機能を理解することで、Electronの使い方の幅が大きく広がります。

IPC通信の実装

IPC（Inter-Process Communication）は、メインプロセスとレンダラープロセス間でメッセージをやり取りするための仕組みです。以下に、簡単なIPC通信の実装例を示します。

// メインプロセス側（main.js）
ipcMain.on('asynchronous-message', (event, arg) => {
console.log(arg) // "ping"と出力
event.reply('asynchronous-reply', 'pong')
})
// レンダラープロセス側（renderer.js）
ipcRenderer.send('asynchronous-message', 'ping')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // "pong"と出力
})

この実装により、双方向の通信が可能になります。Electronの使い方において、IPC通信は非常に重要な概念です。2024年現在、セキュリティを考慮したIPC通信の設計がより重視されています。

自動アップデート機能の追加

アプリケーションの自動アップデート機能は、ユーザー体験を向上させる重要な要素です。Electronには、autoUpdaterモジュールが用意されています。以下に、基本的な実装例を示します。

const { autoUpdater } = require('electron-updater')
autoUpdater.on('update-downloaded', () => {
autoUpdater.quitAndInstall()
})
app.on('ready', () => {
autoUpdater.checkForUpdatesAndNotify()
})

この実装により、アプリケーションは起動時に自動的にアップデートをチェックし、新しいバージョンがあればダウンロードとインストールを行います。Electronの使い方を深く理解するには、このような応用機能の実装も重要です。

クリップボード操作

Electronでは、システムのクリップボードを簡単に操作できます。以下に、テキストのコピーとペーストの基本的な実装例を示します。

const { clipboard } = require('electron')
// テキストをクリップボードにコピー
clipboard.writeText('Hello, Electron!')
// クリップボードからテキストを読み取り
const text = clipboard.readText()
console.log(text) // "Hello, Electron!"と出力

このように、Electronを使用することで、OSのネイティブ機能を簡単に利用できます。Electronの使い方を習得する過程で、これらの応用機能を適切に組み合わせることで、より洗練されたアプリケーションを開発できるようになります。

Electronのセキュリティ

Electronアプリケーションの開発において、セキュリティは非常に重要な要素です。ここでは、Node Integrationの無効化とXSS対策について詳しく解説します。これらの対策を適切に実施することで、より安全なアプリケーションを開発できます。

Node Integrationの無効化

Node Integrationを無効化することで、レンダラープロセスからNode.jsのAPIへの直接アクセスを防ぐことができます。これは重要なセキュリティ対策の一つです。以下に、Node Integrationを無効化する設定例を示します。

const win = new BrowserWindow({
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: path.join(__dirname, 'preload.js')
}
})

この設定により、レンダラープロセスはNode.jsの機能に直接アクセスできなくなります。代わりに、必要な機能はpreloadスクリプトを通じて提供します。Electronの使い方において、このようなセキュリティ設定は非常に重要です。2024年現在、さらに厳格なセキュリティ設定が推奨されています。

XSS対策

クロスサイトスクリプティング（XSS）攻撃は、Webアプリケーションにおける主要な脅威の一つです。Electronアプリケーションでも、適切な対策が必要です。以下に、基本的なXSS対策の例を示します。

// コンテンツセキュリティポリシー（CSP）の設定
win.webContents.setHeader("Content-Security-Policy", "default-src 'self'")
// ユーザー入力のサニタイズ
function sanitizeInput(input) {
return input.replace(/[&<>"']/g, function(match) {
return {
'&': '&',
'<': '<',
'>': '>',
'"': '"',
"'": '''
}[match]
})
}

CSPの設定により、許可されていないソースからのスクリプト実行を防ぐことができます。また、ユーザー入力のサニタイズにより、悪意のあるスクリプトの実行を防止できます。Electronの使い方を学ぶ過程で、これらのセキュリティ対策を適切に実装することが、安全なアプリケーション開発につながります。

まとめ

Electronの使い方について、基本から応用まで幅広く解説してきました。2024年現在、Electronは継続的に進化を遂げており、デスクトップアプリケーション開発の強力なツールとして確固たる地位を築いています。Web技術を活用しつつ、クロスプラットフォーム開発が可能なElectronは、効率的かつ柔軟なアプリケーション開発を実現します。セキュリティに配慮しつつ、豊富な機能を活用することで、魅力的なデスクトップアプリケーションを作り出すことができるでしょう。Electronの可能性は無限大です。ぜひ、この記事で学んだ知識を活かして、革新的なアプリケーション開発に挑戦してみてください。

この記事をシェア