⚡ Electron入門

book_app/                    ← アプリのルートフォルダ
│
├── main.js                  ← 🧠 メインプロセス（Node.js側）
│                               ファイルの読み書き・シェル起動・
│                               ウィンドウ作成を担当（963行）
│
├── package.json             ← 📦 アプリの「設計書」
│                               使うライブラリと起動コマンドを定義
│
├── package-lock.json        ← 🔒 ライブラリのバージョン固定
│                               （自動生成・触らなくてOK）
│
├── icon.ico                 ← 🎨 Windowsタスクバーアイコン
│
├── src/
│   └── index.html           ← 🖥️ レンダラープロセス（ブラウザ側）
│                               画面デザイン＋ターミナルUIを担当（3163行）
│
└── node_modules/            ← 📚 インストール済みライブラリ
    ├── electron/            ← Electron本体
    ├── node-pty/            ← ターミナル制御
    ├── @xterm/xterm/        ← ターミナルUI描画
    ├── @xterm/addon-fit/    ← ターミナル自動リサイズ
    └── @xterm/addon-web-links/ ← URL自動リンク化

比較表

{
  "name": "book-dashboard",       // アプリ名（英小文字・ハイフンのみ）
  "version": "1.0.0",             // バージョン番号
  "description": "書籍管理ダッシュボード",
  "main": "main.js",              // ← ここが起動ファイル！必須
  "scripts": {
    "dev": "electron .",          // npm run dev で起動
    "start": "electron ."         // npm start でも起動
  },
  "dependencies": {               // 実行時に必要なライブラリ
    "@xterm/addon-fit": "^0.10.0",
    "@xterm/addon-web-links": "^0.11.0",
    "@xterm/xterm": "^5.5.0",
    "node-pty": "^1.0.0"
  },
  "devDependencies": {            // 開発時だけ必要なライブラリ
    "electron": "^33.2.1"
  }
}

パッケージ解説

┌──────────────────────────────────────────────────────┐
│                  Electronアプリ                        │
│                                                       │
│  ┌───────────────────┐    ┌───────────────────────┐  │
│  │  メインプロセス    │    │  レンダラープロセス    │  │
│  │  (main.js)        │◄──►│  (src/index.html)     │  │
│  │                   │IPC │                       │  │
│  │  • Node.js で動く │    │  • Chromiumで動く     │  │
│  │  • ファイル読み書き│    │  • HTML/CSS/JS        │  │
│  │  • シェル起動      │    │  • ターミナルUI       │  │
│  │  • ウィンドウ管理  │    │  • ユーザー操作       │  │
│  └───────────────────┘    └───────────────────────┘  │
│                                                       │
│    1つのアプリに「Node.js」と「ブラウザ」が共存！     │
└──────────────────────────────────────────────────────┘

実際のmain.js冒頭（コメント付き）

// Electronから必要な機能を取り込む
const { app, BrowserWindow, ipcMain, shell } = require('electron');
const path = require('path');
const fs   = require('fs');        // ファイル読み書き
const pty  = require('node-pty'); // シェル起動
const os   = require('os');        // OS情報取得

let mainWindow;  // ウィンドウを変数に保持（後でIPC通信に使う）
let ptyProcess;  // ターミナル（PTY）を変数に保持

// ウィンドウを作る関数
function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1400,            // 横幅（ピクセル）
    height: 900,            // 縦幅（ピクセル）
    title: 'Book Dashboard',
    backgroundColor: '#1a1a2e', // ダーク背景（ちらつき防止）
    webPreferences: {
      nodeIntegration: true,   // レンダラーでNode.jsを使う設定
      contextIsolation: false, // セキュリティ分離を無効にする設定
    }
  });
  mainWindow.loadFile('src/index.html'); // HTMLを読み込んで表示
}

// Electronが起動完了したらウィンドウを作る
app.whenReady().then(() => {
  createWindow();
  createPty();  // ターミナルも同時に起動
});

// 全ウィンドウが閉じられたらアプリ終了（Mac以外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});

┌────────────────────────────────────────────────────────┐
│                  ターミナル実装の仕組み                   │
│                                                         │
│  【node-pty】           IPC通信        【xterm.js】      │
│  メインプロセス側                      レンダラー側      │
│                                                         │
│  ┌──────────────────┐  terminal-data  ┌─────────────┐  │
│  │  PowerShellを    │ ──────────────► │  文字を     │  │
│  │  起動・制御する   │                 │  画面に表示  │  │
│  │                  │ ◄────────────── │             │  │
│  │  コマンドを実行  │  terminal-input │  キー入力を  │  │
│  │  して結果を返す  │                 │  受け取る    │  │
│  └──────────────────┘                 └─────────────┘  │
│         ↑                                               │
│    本物のシェルが動く                                     │
└────────────────────────────────────────────────────────┘

使い分け

このアプリの主要IPCハンドラー一覧

合計40種類以上

// ❌ 普通の方法：長いプロンプトが途中で誤認識される場合がある
ptyProcess.write(longPrompt + '\r');

// ✅ Bracket Paste Modeで包む（推奨）
// \x1b[200~ = 「ここから貼り付け開始」のエスケープシーケンス
// \x1b[201~ = 「貼り付け終了」のエスケープシーケンス
// \r        = Enterキー
ptyProcess.write('\x1b[200~' + longPrompt + '\x1b[201~\r');

┌──────────────────────────────────────────────────────┐
│  HEADER（固定）                                       │
│  統計 | [Claude起動] [Sonnet起動] [Opus起動] [新規作成]│
├──────────────┬───────────────────────────────────────┤
│              │  [ターミナル] [詳細] [コメント]（タブ）  │
│  SIDEBAR     ├───────────────────────────────────────┤
│  （300px固定）│  ターミナルタブ：                      │
│              │  ┌─────────────────────────────────┐ │
│  ・フィルタ  │  │  xterm.js ターミナル             │ │
│  ・書籍リスト│  │                                  │ │
│  （縦スクロール）│  │  PS C:\book> claude             │ │
│              │  │  ▌                               │ │
│              │  └─────────────────────────────────┘ │
└──────────────┴───────────────────────────────────────┘

主要CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;     /* 画面全体の高さを使う */
  overflow: hidden;  /* スクロールバーを消す */
}
.main { display: flex; flex: 1; overflow: hidden; }
.sidebar { width: 300px; overflow-y: auto; } /* 縦スクロール可能 */
.content { flex: 1; display: flex; flex-direction: column; }
#terminal-panel { flex: 1; overflow: hidden; } /* xtermが内部でスクロール管理 */

terminal.attachCustomKeyEventHandler((e) => {
  if (e.ctrlKey && e.key === 'c') {
    const selected = terminal.getSelection();
    if (selected) {
      clipboard.writeText(selected); // 選択テキストをコピー
      terminal.clearSelection();
      return false; // xterm.jsのデフォルト処理をキャンセル
    }
    return true; // 選択なし → SIGINT（プロセス中断）としてシェルに通す
  }
  if (e.ctrlKey && e.key === 'v') {
    const text = clipboard.readText();
    if (text) ipcRenderer.send('terminal-input', text);
    return false;
  }
  return true;
});

開発の流れ

1. 1 package.json を作り "main": "main.js" を指定する
2. 2 main.js で BrowserWindow を作り HTMLを読み込む
3. 3 必要なら node-pty でシェルを起動する
4. 4 src/index.html で xterm.js を使いターミナルUIを作る
5. 5 ipcMain / ipcRenderer で2つのプロセスをつなぐ
6. 6 npm run dev で起動

重要概念振り返り