【初心者向け】Electron で始めるデスクトップアプリ開発 #2

ふじけん先生

2025年3月26日 08:41

はじめに

前回（#1）は、セクション 1：Electron の準備 と題して、プロジェクト作成と Electron のインストールについてお話しました。

今回から、いよいよアプリの構成を理解し、具体的なファイルを準備していきます。

今回はその前半戦として、UI（ユーザーインターフェース）となる、index.html と style.css を取り上げます。

実行環境

以下の環境で、お伝えする内容を検証しています。

OS：Microsoft Windows 11 Homeバージョン：10.0.26100 Build 26100
Node.js：v22.14.0
npm：v11.2.0
PowerShell：7.5.0
シェル：Microsoft.PowerShell
CPU：AMD64 Family 25 Model 80 / 2GHz
エディタ：Visual Studio Code 1.98.2

⚠️ 本記事では、Node.js、npm、Visual Studio Code のインストール手順や、エラーメッセージなどへの対応については扱いません。これらが正常に動作していることを前提として、Electron アプリ開発の手順を解説しています。

🔸 セクション 2：アプリ構成とファイル準備

2-1. Electron アプリの基本構成

Electronアプリは複数のファイルで構成されていて、それぞれが特定の役割を持っています。以下に代表的な構成と役割を紹介します。

ファイル構成と役割

main.js
- メインプロセス。アプリのエントリーポイントで、ウィンドウ生成やアプリ全体の管理を行う。
- 参考：公式リファレンス
preload.js
- メインとレンダラーの間の橋渡し。セキュアな通信のためのスクリプト。
- 参考：preload の解説
renderer.js
- HTML上で動作する JavaScript。
- DOM操作や UI のイベント処理を担当。
index.html
- アプリの見た目（UI）を定義する HTML ファイル。
style.css
- 見た目を整えるためのスタイルシート。
cli-script.js
- Node.js ベースで動作する CLI 向けスクリプト。
- Electron を活用しつつ GUI を使わない用途に使うこともできる。
package.json
- プロジェクトの依存関係、起動スクリプトなどを定義。
- 参考：npm公式

2-2. 構成図（例）

my-electron-app/
├── 🖥️ cli-script.js         // CLI
├── ⚙️ main.js               // メインプロセス
├── 📡 preload.js            // Preloadブリッジ
├── 🖼️ renderer.js           // レンダラープロセス
├── 🌍 index.html            // UI画面
├── 🎨 style.css             // UIスタイル
├── 📦 package.json          // プロジェクト設定

今回作成する electron アプリのユーザーインターフェース（UI：index.html）のイメージは、次の通りです。

2-3. 🌍 index.html

役割：UI画面の定義（DOM）

ユーザーインターフェース（ボタンや出力欄）を作成
HTMLでUI構成、CSSと連携可能
Renderer JSと連動して動的に変化

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
  <title>Electron CLI Viewer</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h2>CLI の console.log 出力を、Electron を使って表示する</h2>
  <button id="run-btn">実行</button> <small>ボタンを押すと CLI が実行されます</small>
  <pre id="log">ここに出力されます</pre>
  <script src="renderer.js"></script>
</body>
</html>

💡 ワンポイント

<meta http-equiv="Content-Security-Policy"... を追加すると、Electronでよく出る "Security Warning" の１つを回避することができます。この <meta> 記述は、外部スクリプトの実行をブロックすることで、セキュリティ対策として機能します。
<meta name="viewport" content="width=device-width, ... は、スマホやタブレットでの表示の仕方を指定しています。initial-scale=1.0 を指定することで、制作者が意図したとおりのサイズ配分で表示されます。

この２つの <meta> 記述は、Electron を使用する際に index.html に書き込んでおくことを習慣化すると、コードのセキュリティ性や表示の安定性が向上し、開発中のトラブルも減らすことができます。

2-4. 🎨 style.css

役割：UIの見た目を整える

レイアウトやカラーの調整
ログ表示用に黒背景・緑文字を設定
スクロールやフォント指定も可

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f5f5f5;
    color: #333;
    padding: 2rem;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

#run-btn {
    padding: 0.5em 1em;
    font-size: 1rem;
    margin-bottom: 1em;
}

#log {
    background-color: #1e1e1e;
    color: #00ff00;
    padding: 1em;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    height: 300px;
    overflow-y: auto;
    border: 2px solid #ccc;
}

h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.5em;
    margin-bottom: 1em;
}

※ 最小構成のスタイルです

📌 おわりに

今回作成したこの２つのファイルで、UI の外観は形作られました。

実際に index.html を web ブラウザで読み込んでみると、画像で載せたような画面が開きます。

次回は、Electron アプリを動かすための実行ファイル main.js、renderer.js、preload.js の作成へと進めて行きますので、お楽しみに！

参考：Electron 公式サイト https://www.electronjs.org/ja/

👉　次回（#3）はこちらから、どうぞ

👉　まとめ記事はこちらから、どうぞ

👉 記事一覧（マガジン）は、こちらから、どうぞ

【まとめ】Electronで始めるデスクトップアプリ開発

✍️ この記事が参考になったら──
筆者ふじけんのことが少しわかる、自己紹介noteもぜひどうぞ：
→ 🎰 777の日に、自己紹介してみた（100日投稿を超えて）(2025-07-07)
→ 気づけば続いてた。40,000views、ChatGPT1周年、そして256日連続。(2025-12-04)

いいなと思ったら応援しよう！

読んでくださってありがとうございます。最後までお付き合いいただけて感謝です。いただいたチップはクリエイターとしての活動費に使わせていただきます！