Zenn
Open9

Electron + React Svelte Vue 入門メモ

Electron
React
TypeScript
Vite
knaka Tech-Blogknaka Tech-Blog

概要

  • いまさらですが、Electron アプリ作成に挑戦する内容です。
  • Electron + React 環境作成 メモになります。

[ 公開 2025/01/15 ]

構成

  • Electron
  • React
  • vite

関連

  • install
npx create-electron-app@latest my-app --template=vite-typescript
  • start
yarn start
  • build
yarn package
  • 出力先 win , appName: アプリ名称
  • out/appName-win32-x64/appName.exe
  • 出力サイズは200MB程 , zip圧縮すると 100MB程でした。
  • package.json
{
  "name": "electron_3",
  "productName": "electron_3",
  "version": "1.0.0",
  "description": "My Electron application description",
  "main": ".vite/build/main.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make",
    "publish": "electron-forge publish",
    "lint": "eslint --ext .ts,.tsx ."
  },
  "devDependencies": {
    "@electron-forge/cli": "^7.6.0",
    "@electron-forge/maker-deb": "^7.6.0",
    "@electron-forge/maker-rpm": "^7.6.0",
    "@electron-forge/maker-squirrel": "^7.6.0",
    "@electron-forge/maker-zip": "^7.6.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.6.0",
    "@electron-forge/plugin-fuses": "^7.6.0",
    "@electron-forge/plugin-vite": "^7.6.0",
    "@electron/fuses": "^1.8.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "electron": "33.3.1",
    "eslint": "^8.0.1",
    "eslint-plugin-import": "^2.25.0",
    "ts-node": "^10.0.0",
    "typescript": "~4.5.4",
    "vite": "^5.0.12"
  },
  "keywords": [],
  "author": {
    "name": "",
    "email": ""
  },
  "license": "MIT",
  "dependencies": {
    "axios": "^1.7.9",
    "electron-squirrel-startup": "^1.0.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-router-dom": "^6.21.2"
  }
}

ルーティング

  • react-router 追加しました。
  • HashRouter 使う例です

書いたコード

  • react/src/App.tsx
  • ルーティング設定
import { HashRouter, Link, Route, Routes } from 'react-router-dom';
import Home from './client/home';
import About from './client/about';

export default function App(){
  return(
  <div className="App">
    <HashRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        About
      </Routes>
    </HashRouter>
  </div>
  )
}
  • react/src/client/home.tsx
import { Link } from 'react-router-dom';

...

  return (
  <div className="container mx-auto my-2 px-8 bg-white">
      <h1 className="text-4xl text-gray-700 font-bold my-2"
      >home</h1>
      <hr />
      <Link to="/about">[ about ]</Link>
      <hr />
  </div>
  )
  • 見た目
  • [ about ] リンクおすと、 about 画面に移動できました。
knaka Tech-Blogknaka Tech-Blog

IPC ( プロセス間通信 )

  • front から、Electronバック側の通信できそうでした。

関連

書いたコード

  • react/src/main.ts
  • test-first-api 追加します。
  • ipcMain.handle で、登録できました。
const { app, BrowserWindow, ipcMain, dialog } = require('electron');

  ipcMain.handle('test-first-api', async (_e, _arg) => {
    console.log("#test-first-api");
    console.log("Arguments received:", _arg); // 引数を確認
    return "ret.test-first-api: " + _arg;
  });

....
  • react/src/preload.ts
  • ipcRenderer.invoke で、ipcMain.handle設定した関数を呼び出せるようです。
const { ipcRenderer, contextBridge } = require('electron');

....

contextBridge.exposeInMainWorld('mytest1api', {
  test1api: (a) => ipcRenderer.invoke('test-first-api', a),
});
  • front
  • react/src/client/home.tsx
  • preload.tsで登録した、mytest1api 実行できました。
  const testProc = async function(){
    const res = await window.mytest1api.test1api("test1");
    console.log(res);
  }

....
<button id="button" onClick={() => testProc()}>Open</button>
knaka Tech-Blogknaka Tech-Blog

Electron + gemini API , UI画面作成

  • Electron　デスクトップ APP実装 + gemini API で、生成AI操作画面の作成メモ
  • Gemini APIの、JS API を使用する

関連

構成

  • gmini API
  • Electron
  • React
  • react-dom
  • react-router-dom
  • tailwindcss

書いたコード

VITE_API_KEY=123

見た目

  • 右上メニューで、　モデル変更可能

knaka Tech-Blogknaka Tech-Blog

Electron + タスク管理、ガントチャート Excel出力

  • Electron実装 + タスク管理　試作メモです。
  • d1に、データ保存
  • API: CF-workes
  • 前の Tauri + Svelte構成に 似ています。

構成

  • Electron
  • React
  • react-dom
  • react-router-dom
  • tailwindcss
  • esbuild
  • exceljs
  • dotenv
  • zod

書いたコード

VITE_API_URL=https://localhost
VITE_API_KEY="123"

setup

  • dev-start
yarn build
yarn start
  • build
yarn package
  • edit, watch mode ( 別window )
yarn watch

見た目

  • タスク一覧

  • ガントチャート Excel出力

  • タスク Excel出力

knaka Tech-Blogknaka Tech-Blog

Electron + Svelte +Vite の例

  • Electron + Svelte 構成メモです。
  • vite build 使います。
  • svelte-spa-router: ルーティング

構成

  • Electron 34.0.2
  • vite 6
  • Svelte 5.15.0
  • svelte-spa-router

書いたコード

setup

  • dev-start
yarn build
yarn start
  • build
yarn package
  • edit, watch mode ( 別window )
  • src フォルダ監視して。front のみ ビルドします
  • front側の起点は、src/main.ts になります。
yarn watch

見た目

knaka Tech-Blogknaka Tech-Blog

Electron + Svelte + タスク管理作成　ガントチャート

  • Electron + Svelte タスク管理作成　メモです。
  • d1 に、データ保存
  • CF-workers API連携
  • package.json は、ESMです。
  • main プロセスは、main.cjs　に変更してます。

構成

  • Electron
  • vite 6
  • Svelte 5.15.0
  • svelte-spa-router

書いたコード

setup

  • dev-start
yarn build
yarn start
  • build
yarn package
  • edit, watch mode ( 別の window )
  • src フォルダ監視して。front のみ ビルドします
  • front側の起点は、src/main.ts になります。
yarn watch
  • .env ファイル
  • API_URL , API_KEY set
VITE_API_URL=https://localhost
VITE_API_KEY="123"

見た目

  • タスク一覧

  • ガントチャート Excel ファイル

  • タスク一覧 ファイル

knaka Tech-Blogknaka Tech-Blog

Electron + Vue + Vite 構成メモ

  • Electron + Vueメモです。
  • vue-router: ルーティング設定

構成

  • Electron
  • vite 6
  • Vue
  • vue-router

書いたコード

  • vue/src/main.ts
  • front側の起点は。main.ts になります
  • vue/src/router.ts
  • route 設定
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "./client/Home.vue";
import About from "./client/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
];
const router = createRouter({
  history: createWebHashHistory(), 
  routes
});

export default router;

setup

  • dev-start
yarn build
yarn start
  • build
yarn package
  • edit, watch mode ( 別の window )
yarn watch

見た目

knaka Tech-Blogknaka Tech-Blog

Electron + 確認 dialog メモ

  • Electron dialog の例になります。
  • dialog.showMessageBox の例です、
  • OK, NG の選択ダイアログです。
  • IPCで、Electron バック側から dialog呼ぶ

構成

  • Electron
  • vite 6
  • Svelte

関連

見た目

  • main プロセス

....
const { app, BrowserWindow, ipcMain, dialog } = require('electron');

  ipcMain.handle('open-dialog-api', async (event, options) => {
    const result = await dialog.showMessageBox(options);
    return result;
  });
  • preload.cjs
contextBridge.exposeInMainWorld('myOenDialogApi', {
  OenDialogApi: (a) => ipcRenderer.invoke('open-dialog-api', a),
});
  • front JS
    const options = {
      type: 'question', // メッセージボックスのタイプ（info, question, warning, error）
      title: '確認',
      message: 'Delete OK ?',
      buttons: ['はい', 'いいえ'], // ボタンの選択肢
      defaultId: 0, // デフォルトで選択されるボタンのインデックス
      cancelId: 1, // キャンセル時のボタンのインデックス
    };
    const res = await window.myOenDialogApi.OenDialogApi(options);
    //console.log(res);
    console.log("response=", res.response);
    if(res.response === 1){
      return;
    }