Archives Beauty Entertainment Fashion Food Gaming Oddities Tech

MochiiFeed

🌙

Moscow (MSK):

Date: Feb. 23, 2026

Time: 01:54:39

🔆

Tokyo (JST):

Date: Feb. 23, 2026

Time: 07:54:39

Latest:

Cosplay in Japan:..What is OpenClaw?..Why Promises Can'..We Tried Bachan's..

ElectronJSを始める方法

投稿: Jan. 28, 2026

本記事の日本語版は、いくつかの翻訳方法を組み合わせて作成しています。できる限り英語版の内容やニュアンスに近づけるよう努めていますが、私たちはまだ日本語を学習中のため、不自然な表現や誤りが含まれている場合があります。ご理解とご支援に感謝いたします。

ElectronJS は、JavaScript・HTML・CSSといった既存のWeb技術を使って、クロスプラットフォームのデスクトップアプリケーションを開発できるフレームワークです。VS Code、Slack、Discord などの人気アプリも Electron で作られています。

このガイドでは、以下の内容を解説します。

Electron とは何か
Electron の仕組み
最初の Electron アプリの作り方
基本的なコード例

ElectronJSとは？

Electron は、次の技術を組み合わせて動作します。

Node.js（バックエンドやシステムへのアクセス）
Chromium（UIの描画）
JavaScript（全体をつなぐ役割）

これにより、1つのコードベースから Windows / macOS / Linux 向けのデスクトップアプリを配布できます。

Electronの仕組み（概要）

Electron アプリには、主に2つのプロセスがあります。

メインプロセス（Main Process）

アプリのライフサイクルを管理
ウィンドウの作成
Node.js API へのアクセスが可能

レンダラープロセス（Renderer Process）

各ウィンドウ内で動作
HTML / CSS を描画
ブラウザに近い実行環境

事前準備

始める前に、以下が必要です。

Node.js（v18以上推奨）
npm または yarn
JavaScriptの基本知識

Node.js の確認：

node -v

Step 1: 新しいプロジェクトを作成

新しいフォルダを作成し、Node.js プロジェクトを初期化します。

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

Electron を開発用依存関係としてインストールします。

npm install electron --save-dev

Step 2: プロジェクト構成

最小構成の Electron アプリは、以下のようになります。

my-electron-app/
├─ main.js
├─ index.html
├─ package.json

Step 3: メインプロセスを作成

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);

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

このファイルでは：

Electron を起動
ウィンドウを作成
HTML ファイルを読み込み

を行っています。

Step 4: レンダラー（UI）を作成

index.html を作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>My Electron App</title>
  </head>
  <body>
    <h1>Hello from Electron 👋</h1>
    <p>Your desktop app is running!</p>
  </body>
</html>

Step 5: `package.json` を更新

アプリを簡単に起動できるように、start スクリプトを追加します。

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

Step 6: アプリを実行

以下のコマンドで Electron アプリを起動します。

npm start

HTML が表示されたデスクトップウィンドウが立ち上がれば成功です 🎉

例：ElectronでNode.jsを使う

Electron では Node.js を使って、システム情報にアクセスできます。

const os = require("os");

console.log("Platform:", os.platform());
console.log("CPU Cores:", os.cpus().length);

これは通常のブラウザアプリでは 不可能 なことです。

例：Preloadスクリプト（推奨）

セキュリティの観点から、Electron では preload スクリプトの使用が推奨されています。

// preload.js
const { contextBridge } = require("electron");

contextBridge.exposeInMainWorld("api", {
  sayHello: () => "Hello from preload!"
});

main.js で読み込みます。

const win = new BrowserWindow({
  webPreferences: {
    preload: __dirname + "/preload.js"
  }
});

index.html から使用：

<script>
  console.log(window.api.sayHello());
</script>

次のステップ

慣れてきたら、以下のトピックに進んでみましょう。

IPC（プロセス間通信）
electron-builder によるアプリのパッケージ化
セキュリティのベストプラクティス
自動アップデートやネイティブメニュー

ElectronJS は、Webスキルをデスクトップアプリ開発に活かすための強力な選択肢です。必ずしも軽量とは言えませんが、高速な開発, クロスプラットフォーム対応, リッチなUI が必要な場合に特に力を発揮します。

拡張性の高い優れたコードを書く方法

…

トピック: Tech

投稿: Feb. 04, 2026

🌙

🔆

ElectronJSを始める方法

ElectronJSとは？

Electronの仕組み（概要）

メインプロセス（Main Process）

レンダラープロセス（Renderer Process）

事前準備

Step 1: 新しいプロジェクトを作成

Step 2: プロジェクト構成

Step 3: メインプロセスを作成

Step 4: レンダラー（UI）を作成

Step 5: package.json を更新

Step 6: アプリを実行

例：ElectronでNode.jsを使う

例：Preloadスクリプト（推奨）

次のステップ

アプリが必要ですか？

続きを読む!

@alxlynnhd

OpenClawとは何ですか?

@alxlynnhd

JavaScriptでPromiseを停止できない理由

@alxlynnhd

MCPを使い始める

@alxlynnhd

最近の価格高騰を考慮した古いRAMの代替利用方法

@alxlynnhd

YouTubeが日本語学習に最適な情報源である理由

@alxlynnhd

拡張性の高い優れたコードを書く方法

Step 5: `package.json` を更新