ElectronならHTML・CSS・JavaScriptでWindowsアプリが作れる。デスクトップアプリを作る方法

2026.03.21

Electronを使うと、HTML・CSS・JavaScriptでWindows向けのデスクトップアプリを作れます。

普段Web制作で使うような技術をそのまま活用しながら、ブラウザではなく**.exeで起動する単体アプリ**として動かせるのが大きな特徴です。
つまり、Webページを作る感覚に近いまま、Windowsアプリ開発に入れるということです。

今回は、CPU-Zのような雰囲気を持つ、タブ切り替え式のWindowsアプリをElectronで作る流れをまとめます。
上部に CPU / Mainboard / Memory / Graphics などのタブを並べ、クリックすると中央の表示内容が切り替わる構成です。

最初から機能を分割しすぎず、まずは最小構成でアプリとして起動し、タブ切り替えまで完成させるところを目標にすると分かりやすいです。

Electronで作るアプリのイメージ

今回作るアプリは、ブラウザ上で動くものではなく、Windows上で単体起動するアプリです。

見た目のイメージは次のような構成です。

  • 上部にタイトルバー風のヘッダー
  • その下にタブボタン
  • 中央に詳細表示エリア
  • 下部にバージョン表記

タブには以下のような項目を並べます。

  • CPU
  • Mainboard
  • Memory
  • Graphics
  • Storage
  • OS
  • About

この構成にしておくと、あとから実際のPCスペック取得機能を追加しやすくなります。
最初は仮データでもよいので、「アプリらしい形で動く」状態を作ることが大切です。

最初は最小構成で十分

最初の段階では、複雑なディレクトリ分割は不要です。
まずは以下のような最小構成で始めれば十分です。

pc-spec-tool
├─ package.json
├─ main.js
├─ preload.js
├─ index.html
├─ app.css
├─ app.js

この構成なら、必要最低限のファイルだけでElectronアプリを起動できます。

後から機能が増えてきたら、たとえば cpu-service.js や memory-service.js のように、処理ごとにファイルを分けていけば問題ありません。
最初はまず、シンプルに動かすことを優先した方が進めやすいです。

PowerShellでファイルを一括作成する

Windowsで一括作成する場合は、PowerShellを使うと便利です。
あらかじめプロジェクトフォルダを用意したうえで、必要なファイルをまとめて作成しておけば、作業をすぐに始められます。

ここには、実際に使うPowerShellコマンドを貼り付けてください。

$project = "pc-spec-tool"

New-Item -ItemType Directory -Path $project -Force | Out-Null

New-Item -ItemType File -Path `
"$project\package.json", `
"$project\main.js", `
"$project\preload.js", `
"$project\index.html", `
"$project\app.css", `
"$project\app.js" -Force | Out-Null

ファイルを手作業で1つずつ作ることもできますが、最初にまとめて用意しておくと、後の作業がかなり楽になります。

package.json を作成する

まずは package.json を作成します。
ここでは Electron を起動するための設定を書きます。

{
  "name": "pc-spec-tool",
  "version": "1.0.0",
  "description": "PC spec viewer",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
}

main.js を作成する

main.js は、Electronアプリ本体の入口になるファイルです。
ウィンドウサイズや、どのHTMLを読み込むかをここで設定します。

const { app, BrowserWindow } = require("electron");
const path = require("path");

function createWindow() {
  const win = new BrowserWindow({
    width: 900,
    height: 640,
    minWidth: 760,
    minHeight: 520,
    title: "PC Spec Tool",
    autoHideMenuBar: true,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
      contextIsolation: true,
      nodeIntegration: false
    }
  });

  win.loadFile("index.html");
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

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

preload.js を作成する

今回はまだ高度な連携を行わないので、preload.js は最低限で問題ありません。

window.addEventListener("DOMContentLoaded", () => {
  // 今は空でOK
});

あとからPCスペック取得処理を追加するときに、このファイルを使って安全に画面側へデータを渡せるようになります。

index.html を作成する

ここでは、アプリの見た目の骨組みを作ります。
今回は最初からタブ構造と、data-tab 属性も含めた形で用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PC Spec Tool</title>
  <link rel="stylesheet" href="./app.css" />
</head>
<body>
  <div class="app">
    <header class="topbar">
      <div class="title">PC Spec Tool</div>
    </header>

    <nav class="tabs">
      <button class="tab active" data-tab="CPU">CPU</button>
      <button class="tab" data-tab="Mainboard">Mainboard</button>
      <button class="tab" data-tab="Memory">Memory</button>
      <button class="tab" data-tab="Graphics">Graphics</button>
      <button class="tab" data-tab="Storage">Storage</button>
      <button class="tab" data-tab="OS">OS</button>
      <button class="tab" data-tab="About">About</button>
    </nav>

    <main class="content">
      <section class="panel">
        <h2>CPU</h2>
        <div class="spec-grid">
          <div class="label">Name</div><div class="value">Intel Core i7-12700</div>
          <div class="label">Cores</div><div class="value">12</div>
          <div class="label">Threads</div><div class="value">20</div>
          <div class="label">Base Clock</div><div class="value">2.10 GHz</div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <span>Ver 0.1.0</span>
    </footer>
  </div>

  <script src="./app.js"></script>
</body>
</html>

ここでのポイントは、各タブボタンに data-tab を付けていることです。
これによって、JavaScript側で「どのタブが押されたか」を分かりやすく判定できます。

app.css で見た目を整える

次に、見た目を整えるためのスタイルを書きます。
CPU-Z風のシンプルな情報ツールを意識しつつ、タブや表示欄が分かりやすい構成にします

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: #dcdcdc;
  color: #111;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.topbar {
  background: #efefef;
  border-bottom: 1px solid #b5b5b5;
  padding: 10px 14px;
}

.title {
  font-size: 15px;
  font-weight: 600;
}

.tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
  background: #dcdcdc;
}

.tab {
  padding: 6px 12px;
  border: 1px solid #9f9f9f;
  border-bottom: none;
  background: #ececec;
  cursor: pointer;
}

.tab.active {
  background: white;
  font-weight: 700;
}

.content {
  flex: 1;
  padding: 0 8px 8px;
}

.panel {
  height: 100%;
  background: white;
  border: 1px solid #9f9f9f;
  padding: 16px;
}

.footer {
  border-top: 1px solid #b5b5b5;
  background: #efefef;
  padding: 8px 12px;
  font-size: 12px;
}

.spec-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 12px;
  margin-top: 20px;
  max-width: 700px;
}

.label {
  padding: 8px 10px;
  border: 1px solid #bcbcbc;
  background: #efefef;
  font-weight: 600;
}

.value {
  padding: 8px 10px;
  border: 1px solid #bcbcbc;
  background: #ffffff;
}

app.js

const tabData = {
  CPU: `
    <h2>CPU</h2>
    <div class="spec-grid">
      <div class="label">Name</div><div class="value">Intel Core i7-12700</div>
      <div class="label">Cores</div><div class="value">12</div>
      <div class="label">Threads</div><div class="value">20</div>
      <div class="label">Base Clock</div><div class="value">2.10 GHz</div>
    </div>
  `,
  Mainboard: `
    <h2>Mainboard</h2>
    <div class="spec-grid">
      <div class="label">Manufacturer</div><div class="value">ASUS</div>
      <div class="label">Product</div><div class="value">PRIME B660M-A</div>
      <div class="label">BIOS Version</div><div class="value">2803</div>
    </div>
  `,
  Memory: `
    <h2>Memory</h2>
    <div class="spec-grid">
      <div class="label">Type</div><div class="value">DDR4</div>
      <div class="label">Size</div><div class="value">32 GB</div>
      <div class="label">Speed</div><div class="value">3200 MHz</div>
    </div>
  `,
  Graphics: `
    <h2>Graphics</h2>
    <div class="spec-grid">
      <div class="label">GPU</div><div class="value">NVIDIA GeForce RTX 3060</div>
      <div class="label">VRAM</div><div class="value">12 GB</div>
    </div>
  `,
  Storage: `
    <h2>Storage</h2>
    <div class="spec-grid">
      <div class="label">Drive 1</div><div class="value">SSD 1TB</div>
      <div class="label">Drive 2</div><div class="value">HDD 2TB</div>
    </div>
  `,
  OS: `
    <h2>OS</h2>
    <div class="spec-grid">
      <div class="label">Edition</div><div class="value">Windows 11 Pro</div>
      <div class="label">Version</div><div class="value">24H2</div>
      <div class="label">Build</div><div class="value">26100</div>
    </div>
  `,
  About: `
    <h2>About</h2>
    <p>PC Spec Tool の試作版です。</p>
  `
};

const tabs = document.querySelectorAll(".tab");
const panel = document.querySelector(".panel");

tabs.forEach(tab => {
  tab.addEventListener("click", () => {
    tabs.forEach(t => t.classList.remove("active"));
    tab.classList.add("active");

    const tabName = tab.dataset.tab;
    panel.innerHTML = tabData[tabName] || "<h2>Not Found</h2>";
  });
});

Electronをインストールして起動する

必要なファイルを書いたら、プロジェクトフォルダで次のコマンドを実行します。

npm install electron@latest
npm start

という順番で進めると、かなり作りやすくなります。

これで、ElectronによるWindowsアプリが起動します。

しかも今回は、単なる空ウィンドウではなく、

  • タイトルバー風の上部
  • タブ付きの画面
  • CSSで整えたレイアウト
  • app.js によるタブ切り替え機能

まで最初から入った状態で起動できます。

つまり、Electronを使えば、HTML・CSS・JavaScriptだけでも、ここまでアプリらしい見た目と動作を持つWindowsアプリを作れるわけです。

Windowsアプリとしてビルドする

Electronアプリは、開発中は npm start で起動できますが、公開や配布をするには ビルドして .exe ファイル化 する必要があります。

今回は electron-builder を使って、Windows向けアプリとしてビルドします。

まずは、プロジェクトフォルダで以下を実行します。

npm install --save-dev electron-builder

次に、package.json に build 用の設定を追加します。

{
  "name": "pc-spec-tool",
  "version": "1.0.0",
  "description": "PC spec viewer",
  "author": "Your Name",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "devDependencies": {
    "electron": "^xx.x.x",
    "electron-builder": "^xx.x.x"
  },
  "build": {
    "appId": "com.example.pcspectool",
    "productName": "PC Spec Tool",
    "win": {
      "target": "nsis"
    }
  }
}

設定を保存したら、以下のコマンドでビルドします。

npm run build

ビルドが成功すると、まず dist フォルダが作成されます。
その中の win-unpacked フォルダには、ポータブル版として使えるアプリ本体の実行ファイル（exe）が出力されます。
さらに Setup.exe も生成されていれば、インストーラー形式のWindowsアプリとして配布できます。

なお、初回ビルド時は Electron 本体のダウンロードが入るため、数分かかることがあります。
また、Windowsの環境によっては権限の都合で失敗する場合があるため、その場合は管理者として再実行すると通ることがあります。

ここまでできればElectronでアプリが作れる感覚がつかめる

今回の内容で大事なのは、CPU情報取得そのものよりも、ElectronでWindowsアプリを形にできるという体験です。

Web技術だけではブラウザでしか動かないと思われがちですが、Electronを使えば、普段書いているHTML・CSS・JavaScriptをベースにして、デスクトップアプリとして起動できます。

しかも今回のように、

  • ボタンを置く
  • CSSで見た目を整える
  • JavaScriptで画面を切り替える

という、Web開発に近い感覚のまま作業を進められます。
この分かりやすさが、Electronの大きな強みです。

今後の拡張もしやすい

今回の段階では仮データを表示しているだけですが、ここから先は実際のPCスペック取得処理を追加していけば、CPU-Z風アプリへ近づけていけます。

たとえば今後は、以下のような拡張が考えられます。

  • CPU名を実際の環境から取得する
  • メモリ容量や速度を表示する
  • マザーボード情報を取得する
  • GPU名やストレージ情報を表示する
  • 更新ボタンを付ける
  • .exe 化して配布する

土台ができていれば、あとは中身を差し替えていくだけなので、開発の見通しも立てやすくなります。

まとめ

Electronを使えば、HTML・CSS・JavaScriptでWindowsアプリを作れます。
しかも、単なる表示だけでなく、今回のようなタブ切り替え付きのデスクトップアプリも比較的シンプルに実装できます。

今回の構成では、最初から

  • app.css による見た目調整
  • data-tab を使ったタブ構造
  • app.js によるタブ切り替え機能

まで含めているため、起動した時点で「ちゃんとしたアプリ感」を出しやすいのがポイントです。

まずはこの最小構成でElectronアプリを動かしてみて、Windowsアプリが作れる感覚をつかむと、その先の機能追加にも進みやすくなります。

コメント

タイトルとURLをコピーしました