常連

## テーマ、知りたいこと

VSCodeはかなり優秀なコードエディタですが、そのUIについてどのライブラリが使用されているのか気になりました。

## 背景、状況

検索してもVSCodeの使い方やらなんやらのクソ記事がGoogleの3ページ目までは占領していたので、ここでご存じの方に聞く方が早いかと思い質問させていただきます。

個人的には、Bootstrap,Bulma,MaterialUI,Ant Designのどれかと思ったのですが、確証はないためよくわかりません。

なぜこんなこと気になったのかというと、Webアプリケーションを作る上であのファイルビュー機能などが参考になるかと思ったためです。

ご存じの方がいらっしゃいましたら、何卒よろしくお願いします。



VSCodeが使用しているライブラリが知りたい(UI部分)

Next.js×Electronで開発をしている方がいますが、なぜNext.jsを使うのでしょうか。

Next.jsでは、SSR,SSG,ISRといったサーバー側でページを作成する機能があるのが特徴だと思っています。

Electron等のデスクトップアプリでは、最初からソースコードがPC内にあるため、SSRやSSG等をする必要がないまたはそのようなコードのせいでエラーが発生するのではないでしょうか。
そのためReact×Electronとできることは変わらないのではないでしょうか。

React×Electronでの開発と、Next.js×Electronの違いはあるのでしょうか。

どこか勘違いしているためこのような考えに至っていると思うですが、どなたかご教授いただければ幸いです。
よろしくお願いいたします。

Next.jsとElectronで開発するメリットがわからない

Electronをインストールしたいのですが、エラーがでてしまいます。
会社のPCからインストールしているのでプロキシ認証に失敗してる可能性があります。
エラーコードは以下の通りです。
ご教授お願い致します。

C:\test>npm install electron
npm WARN registry Unexpected warning for http://registry.npmjs.org/: Miscellaneous Warning ETIMEDOUT: request to http://registry.npmjs.org/electron failed, reason: connect ETIMEDOUT 10.0.58.88:8080
npm WARN registry Using stale data from http://registry.npmjs.org/ due to a request error during revalidation.

環境
Windows10
Node.js v12.16.1

補足
実行したこと(参考https://heimdal.hatenablog.com/entry/electron-setup)
npm config set registry "http://registry.npmjs.org/"
npm config set proxy "http://<server>:<port>/"
npm config set proxyhttps-proxy  "http://<server>:<port>/"
npm i electron 
パスワードを入力していないことに気づき
↓
npm config set proxy "http://<username>:<password>@<server>:<port>/"
npm config set proxyhttps-proxy  "http://<username>:<password>@<server>:<port>/"
これを入力しましたがうまく行きませんでした…

Electronがインストールできない

### 実現したいこと
Electron+Next.jsでデスクトップアプリを開発したい．

### 前提
以下のリポジトリをもとにプロジェクトを作成しました．
https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript

プロジェクトの作成に
```shell
yarn create next-app --example with-electron-typescript with-electron-typescript-app
```
を実行し，package.jsonにname, version, author, descriptionを追加しました．
`yarn dev`でテスト起動をしたところ以下のようなエラーが発生しました．

### 発生している問題・エラーメッセージ
```
(node:1726) UnhandledPromiseRejectionWarning: Error: Cannot find module 'node:stream/web'
Require stack:
- /Users/[username]/Programs/ongoing/Electron_prac/with-electron-typescript-app/node_modules/next/dist/lib/download-wasm-swc.js
.
.
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108:10)
(Use `Electron --trace-warnings ...` to show where the warning was created)
(node:1726) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 3)
(node:1726) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
```

### 考えたこと
実は2ヶ月半前ほどにも上記の技術に触れており，そのプロジェクトについては今でも無事に起動ができるので，リポジトリの変更が原因なのではないかと考えています．
なお，リポジトリ(https://github.com/vercel/next.js/tree/canary/examples/with-electron-typescript) の変更履歴を見ると，二ヶ月前にnext.config.jsが追加されています．
```javascript:next.config.js
/**
 * @type {import('next').NextConfig}
 */
const nextConfig = {
  output: 'export',
}

module.exports = nextConfig

```

### 補足情報（FW/ツールのバージョンなど）
- node.js v18.16.0




Electron+Next.js(Typescript)で開発モードを起動したい

### 実現したいこと
electron + sveltekit でのデスクトップアプリで、メニューバーを自作（レイアウト等）したいです。

[melt ui の Menubar](https://melt-ui.com/docs/builders/menubar)を用いて作成しており、`electron.cjs`からメニューをインポート → `{#each}`でメニューを実装したいです。

### 発生している問題・分からないこと
`electron.cjs`で、
```javascript
preload: path.join(__dirname, 'preload.cjs')
```
という風に実行すると、エラーが起きてメニューを読み込みたい部分での
```typeScript
import { Menu } from 'electron';
import { ipcRenderer } from 'electron';
```
などの `electron` との通信を行うようなものが使えなくなる

エラーの画像は↓
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2024-05-12/2cb22597-79d1-4f0d-a287-e7dfdd64b6d2.png)

### エラーメッセージ
```error
app.js:16 ReferenceError: __dirname is not defined
    at node_modules/electron/index.js (index.js:4:28)
    at __require (chunk-UXIASGQL.js?v=14a85010:8:50)
    at index.js:21:34
handleError @ app.js:16
2index.js:4 Uncaught (in promise) ReferenceError: __dirname is not defined
    at node_modules/electron/index.js (index.js:4:28)
    at __require (chunk-UXIASGQL.js?v=14a85010:8:50)
    at index.js:21:34
```

### 該当のソースコード

```typescript
// src/electron.cjs

const windowStateManager = require('electron-window-state');
const { app, BrowserWindow, Menu, ipcMain } = require('electron');
const contextMenu = require('electron-context-menu');
const serve = require('electron-serve');
const path = require('path');

try {
	require('electron-reloader')(module);
} catch (e) {
	console.error(e);
}

const serveURL = serve({ directory: '.' });
const port = process.env.PORT || 5173;
const dev = !app.isPackaged;
let mainWindow;

function createWindow() {
	let windowState = windowStateManager({
		defaultWidth: 800,
		defaultHeight: 600,
	});

	const mainWindow = new BrowserWindow({
		backgroundColor: 'whitesmoke',
		titleBarStyle: 'hidden',
		autoHideMenuBar: false,
		trafficLightPosition: {
			x: 17,
			y: 32,
		},
		minHeight: 450,
		minWidth: 500,
		webPreferences: {
			enableRemoteModule: true,
			contextIsolation: true,
			nodeIntegration: false,
			spellcheck: false,
			devTools: dev,
			preload: path.join(__dirname, 'preload.cjs'),
		},
		x: windowState.x,
		y: windowState.y,
		width: windowState.width,
		height: windowState.height,
	});

	windowState.manage(mainWindow);

	mainWindow.once('ready-to-show', () => {
		mainWindow.show();
		mainWindow.focus();
	});

	mainWindow.on('close', () => {
		windowState.saveState(mainWindow);
	});

	return mainWindow;
}

ipcMain.on('close-window', () => {
	BrowserWindow.getFocusedWindow().close();
});

ipcMain.on('minimize-window', () => {
	BrowserWindow.getFocusedWindow().minimize();
});

ipcMain.on('maximize-window', () => {
	const currentWindow = BrowserWindow.getFocusedWindow();
	if (currentWindow.isMaximized()) {
		currentWindow.unmaximize();
	} else {
		currentWindow.maximize();
	}
});

contextMenu({
	showLookUpSelection: false,
	showSearchWithGoogle: false,
	showCopyImage: false,
	prepend: (defaultActions, params, browserWindow) => [
		{
			label: 'Make App 💻',
		},
	],
});

function loadVite(port) {
	mainWindow.loadURL(`http://localhost:${port}`).catch((e) => {
		console.log('Error loading URL, retrying', e);
		setTimeout(() => {
			loadVite(port);
		}, 200);
	});
}

function createMainWindow() {
	mainWindow = createWindow();
	mainWindow.once('close', () => {
		mainWindow = null;
	});

	if (dev) loadVite(port);
	else serveURL(mainWindow);
}

const template = [
	{
		label: 'File',
		submenu: [
			{ label: 'New', click: () => console.log('New File') },
			{ label: 'Open', click: () => console.log('Open File') },
			{ label: 'Save', click: () => console.log('Save File') },
			{ type: 'separator' },
			{ label: 'Exit', role: 'quit' }
		]
	},
	{
		label: 'Edit',
		submenu: [
			{ label: 'Undo', role: 'undo' },
			{ label: 'Redo', role: 'redo' },
			{ type: 'separator' },
			{ label: 'Cut', role: 'cut' },
			{ label: 'Copy', role: 'copy' },
			{ label: 'Paste', role: 'paste' }
		]
	}
]
app.on('ready', function () {
	const menu = Menu.buildFromTemplate(template)
	Menu.setApplicationMenu(menu)
	createMainWindow();
})

ipcMain.handle('get-menu', async (event) => {
	return template;
})

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

ipcMain.on('to-main', (event, count) => {
	return mainWindow.webContents.send('from-main', `next count is ${count + 1}`);
});

```

```typescript
// src/preload.cjs

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electron', {
	invoke: (channel, data) => ipcRenderer.invoke(channel, data),
	send: (channel, data) => ipcRenderer.send(channel, data),
	on: (channel, func) => {
		ipcRenderer.on(channel, (event, ...args) => func(...args));
	},
	sendSync: (channel, data) => {
		ipcRenderer.sendSync(channel, data);
	},
});
```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
「referenceerror: __dirname is not defined electron」と調べると、多くは
```javascript
// src/electron.cjs
webPreferences: {
			enableRemoteModule: true,
			contextIsolation: true,
			nodeIntegration: false,
			spellcheck: false,
			devTools: dev,
			preload: path.join(__dirname, 'preload.cjs'),
		},
```

の `nodeIntegration` を `ture` にして `contextIsolation` を `false` にするといいよと書いてあったのですが、そもそもこれを直しても error のままだったのと、本来 `nodeIntegration` はセキュリティ的に `false` がいいよと書いてあったので、どうすればいいのやら…って感じです。

### 補足
上記以外に必要なソースコードがあれば教えてください。

electron + sveltekit で、 起動時に __dirname is not defined と出る

シンプルなElectronアプリを作り、windows用のexeファイルをビルドしました。
※デフォルトのGUIが起動し、`Hello World`と表示されるだけ

このexeをクリックすると表示されるまでに7秒くらい掛かります。
※ちなみにExcel2016だとスプラッシュ画像が2秒程度で表示される環境です。

実行環境(windows 10)上でのその他アプリと比較してだいぶ遅すぎるのですがElectronだとこれが当たり前なのでしょうか。

例えばVSCodeもElectron製らしいのですが起動の速度は段違いに早いです。

仕組み上、ある程度は起動時に時間がかかるのは承知しておりますが
せめてストレスのかからないレベルには早めたいと思っています。

何か高速化の方法はないでしょうか。ご存じの方どうぞご教授願います。

※2019/11/04追記その１
exeファイルはelectron-builderで作成し、`'target': 'portable'`、`'arch':['x64']`でビルドしています。
また`electron`コマンドの実行や`asar`で作ったアーカイブを実行する場合はそれなりに早く起動します。

※2019/11/04追記その２
electron-builderでビルドすると、単体で動作するexeと、おそらくそれを作る元になるファイル群が格納されたwin-unpackedディレクトリが作られます。

win-unpackedはおそらくelectron-builderでzipを生成した時の中身とほぼ一緒で、その中にあるexeはとても早く起動します。(追記１と同じ)

単体exeの方は自身に含まれるソースをメモリ上に解凍したりする等の時間の掛かる処理でもあるのでしょうか。。
こちらの方がソースファイルが見れない等の利点も有って良いのですが
これ以上早くならないようであれば諦めてzip版を使う事になりそうです。

Electronで作ったwindowsアプリの起動を早くしたい

### 実現したいこと
electronを使用して、git commitしたコードの差分(diff)を解析し、json形式に表示するアプリを開発している。それには、parse-git-diffというライブラリが不可欠なのですがうまく動かず困っています。

### 発生している問題・分からないこと
[ドキュメント](https://www.npmjs.com/package/parse-git-diff)
上記がparse-git-diffのドキュメントですが、
```ここに言語を入力
const result = parseGitDiff('... git diff ...');
```
('...git diff...')に何を入力していいかわからないのです。
git コマンドを入れるのか？
```ここに言語を入力
const result = parseGitDiff('git diff');
```
結果は、
```ここに言語を入力
{ type: 'GitDiff', files: [] }
```
該当fileを入れるのか？
```ここに言語を入力
const result = parseGitDiff('main.js');
```
結果はやはり'{ type: 'GitDiff', files: [] }'

ターミナルでは正常に動くgit コマンド
```ここに言語を入力
const result = parseGitDiff('git diff 1dd35**..48a63**');
```
結果'{ type: 'GitDiff', files: [] }'

ドキュメントのように'a/newfile.md'と'b/newfile.md'を作成。
```ここに言語を入力
const result = parseGitDiff('diff --git a/newfile.md b/newfile.md');
```
結果'{ type: 'GitDiff', files: [] }'



### 該当のソースコード

```main.js
const parseGitDiff = require('parse-git-diff').default; // require

const result = parseGitDiff('git diff');
console.log(result);

```

### 試したこと・調べたこと
- [x] teratailやGoogle等で検索した
- [x] ソースコードを自分なりに変更した
- [ ] 知人に聞いた
- [ ] その他

##### 上記の詳細・結果
色々、git コマンドやファイルを入れてみたのですが良い結果が得られず、どなたかparse-git-diffをお使いになられた方、助言をお願いします。

### 補足
os:mac m1
node: v18.0.0
parse-git-diff": "^0.0.15

parse-git-diff ライブラリの使い方がわからない

### 実現したいこと

React + Electron + Viteの環境のプロジェクトです。
開発段階では正常に動作しているので後はelectron-buidlerでパッケージ化して動作確認するだけです。



### 発生している問題・エラーメッセージ
electronソフトは起動するが、画面が真っ白。root要素はレンダリングされているので元となるhtmlファイルは読み込めている模様。
```
Failed to load resource: net::ERR_FILE_NOT_FOUND
```
開発者モードでどのファイルで発生しているかを見たところmain.tsxでreactコードのメインファイルとなっていました。

### 該当のソースコード

```react/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter} from "react-router-dom";
import App from './App';

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App/>
    </BrowserRouter>
  </React.StrictMode>
);
```
```electron/main.ts
長いので要望されたら追記します。
```
```package.jsonのbuild部分
"build": {
    "appId": "com.github.PDFSoft",
    "directories": {
      "output": "builderdist"
    },
    "files": [
      "package.json",
      "package-lock.json",
      "dist/**/*",
      "render/**/*",
      "scripts/**/*"
    ],
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    }
  },
```
renderがreactフォルダ、distの中にはviteでビルドされたelectronファイルがある。

### 試したこと

プロジェクト全体のpackage.jsonにhomepage: "./"の記述、その中のrenderディレクトリにあるreactフォルダのpackage.jsonにhomepage: "./"の記述をしたが変わらず。

### 補足情報（FW/ツールのバージョンなど）

react:18.2.0
electron:23.1.2
electron-builder:23.6.0
vite:4.0.1

