常連

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がインストールできない

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

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

### 実現したいこと
React×Electronのソースから、FastAPIのソースへの通信を行いたい。


### 発生している問題・分からないこと
Network Errorになってしまう。
■開発ツールのコンソール部分
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-01-29/d25c27ff-08e5-4fdf-abf0-3a2fbaeb001e.png)

■開発ツールのネットワーク部分
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2025-01-29/9de63038-9068-4875-8212-751aa0471c48.png)

### エラーメッセージ
```error
Refused to connect to 'http://127.0.0.1:8000/' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'connect-src' was not explicitly set, so 'default-src' is used as a fallback.
```

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

```typescript
import axios from "axios";
import { error } from "console";
export const requestSample = () => {
    console.log("リクエスト開始")
    const url = "http://127.0.0.1:8000/"
    axios.get(url).then((res) => {
        console.log("success res")
    })
        .catch((error) => {
            if (error.response) {
                console.error("Response error", error.response.status)
            } else if (error.request) {
                console.error("Request error", error.message)
            } else {
                console.error("Error:", error.message)
            }
        })
}
```

```python
app = FastAPI()
router = APIRouter()

origins = ["*"]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
app.include_router(sample_router)
@app.get("/")
def Hello():
    return {"Hello": "World!"}
```

```typescript(index.ts)
function createWindow(): void {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 670,
    show: false,
    autoHideMenuBar: true,
    ...(process.platform === 'linux' ? { icon } : {}),
    webPreferences: {
      preload: join(__dirname, '../preload/index.js'),
      sandbox: false,
    }
  })

  mainWindow.on('ready-to-show', () => {
    mainWindow.show()
  })

  mainWindow.webContents.setWindowOpenHandler((details) => {
    shell.openExternal(details.url)
    return { action: 'deny' }
  })
```

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

##### 上記の詳細・結果
コンソールに表示されている下記のメッセージで検索をかけましたが解決できそうな記事を見つけられませんでした。
Refused to connect to 'http://127.0.0.1:8000/' because it violates the following Content Security Policy directive:

### 補足
electron version: 31.0.2
react version: 18.3.1
python version: 3.12.2
fastAPI version: 0.115.6

React×Electron → FastAPIへのリクエストがNetwork Errorになってしまう。

シンプルな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アプリの起動を早くしたい

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

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

## 背景、状況

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

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

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

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



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

Electronでアプリケーションを配布する場合に、
もともとElectronに使われているmoduleのライセンスや、
npmで他にインストールしたrequestなどのmoduleのライセンスは、
表記すべきなのでしょうか。

Electronでアプリケーションを配布する場合のnode_modulesのライセンス表記

### 実現したいこと
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の学習でJavaScriptを書いているのですが、表題のエラーで悩んでいます。
.jsxで記述した後、.jsに変換してあります。


エラー文
```
ReferenceError: document is not defined
```

下記コードになります。
```JavaScript
"use strict";

var _reactDom = require("react-dom");

var React = require("react");


(0, _reactDom.render)(React.createElement(
  "div",
  null,
  "Hello, Electron and React JSX"
), document.getElementById("app"));
```

初歩的な質問で大変恐縮ですが、ご教授いただければ幸いです。
よろしくお願いいたします。