常連

### 実現したいこと
npm installを行い、npm run devを入力してアプリのひな型を作成する

### 発生している問題・分からないこと
VScodeでReact viteを使用してnpm installを行おうとしたときのnpm error code 3221225477が解決できない

### エラーメッセージ
```error
PS C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple> npm create vite@latest

> npx
> create-vite

√ Project name: ... todosimple
√ Select a framework: » React
√ Select a variant: » JavaScript + SWC

Scaffolding project in C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple\todosimple...

Done. Now run:

  cd todosimple
  npm install
  npm run dev

PS C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple> cd todosimple
PS C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple\todosimple> npm install
npm warn cleanup Failed to remove some directories [
npm warn cleanup   [
npm warn cleanup     '\\\\?\\C:\\Users\\shota\\OneDrive\\デスクトップ\\React studying\\todosimple\\todosimple\\node_modules\\esbuild',
npm warn cleanup     [Error: EBUSY: resource busy or locked, rmdir 'C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple\todosimple\node_modules\esbuild'] {
npm warn cleanup       errno: -4082,
npm warn cleanup       code: 'EBUSY',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: 'C:\\Users\\shota\\OneDrive\\デスクトップ\\React studying\\todosimple\\todosimple\\node_modules\\esbuild'
npm warn cleanup     }
npm warn cleanup   ],
npm warn cleanup   [
npm warn cleanup     '\\\\?\\C:\\Users\\shota\\OneDrive\\デスクトップ\\React studying\\todosimple\\todosimple\\node_modules',
npm warn cleanup     [Error: EPERM: operation not permitted, rmdir 'C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple\todosimple\node_modules\eslint'] {
npm warn cleanup       errno: -4048,
npm warn cleanup       code: 'EPERM',
npm warn cleanup       syscall: 'rmdir',
npm warn cleanup       path: 'C:\\Users\\shota\\OneDrive\\デスクトップ\\React studying\\todosimple\\todosimple\\node_modules\\eslint'       
npm warn cleanup     }
npm warn cleanup   ]
npm warn cleanup ]
npm error code 3221225477
npm error path C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple\todosimple\node_modules\@swc\core
npm error command failed
npm error command C:\Windows\system32\cmd.exe /d /s /c node postinstall.js
npm error A complete log of this run can be found in: C:\Users\shota\AppData\Local\npm-cache\_logs\2024-11-03T00_18_28_113Z-debug-0.log     
PS C:\Users\shota\OneDrive\デスクトップ\React studying\todosimple\todosimple> 
```

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

```
特になし
```

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

##### 上記の詳細・結果
chatgptに聞いたところnpmキャッシュのクリア、再起動、管理者としてVScodeを開く、アンチウイルスソフトやonedriveの同期を一時停止、環境変数の設定、nodejsのバージョンがかみ合っていないなどが挙げられたのでそれらを実行しましたが、error codeが表示されることは変わらずうまくいきませんでした。

### 補足
特になし

React vite 「npm error code 3221225477」がわからない

## テーマ、知りたいこと
メインとなるページに対してサブページを追加していく際、どのようなやり方、構成があるか。メリットとデメリットを知りたいです。



## 背景、状況
店舗のwebサイトのSEO対策として、ブログやコラム記事を掲載したいです。
この場合にどのような方法が最適であるか皆さんの意見をお伺いできればと思います。
Vite、React、Typescript、Firebaseを使用しています。

ディレクトリの構成やホスティングするサイト数などおすすめを教えていただきたいです。

Vite React Typescript Firebase マルチページサイトの構成について

### 実現したいこと
vite-plugin-live-reloadライブラリを使用して、viteで立ち上げている環境においてphpファイルに変更があったらliveReloadが走るようにしたい。

### 発生している問題・分からないこと
```
[vite] page reload wp-content/themes/mytheme/home.php
```
phpファイルの変更を監視することはできているが、ライブリロードが効かない。
以下にvite.config.jsを添付します。




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

```javascript
import { defineConfig } from 'vite';
import liveReload from 'vite-plugin-live-reload';
import pug from 'pug';
import path from 'path';
import fs from 'fs-extra';

const outDir = 'dist/wp-content/themes/mytheme';
const srcDir = 'src';

function compilePugToPhp() {
  const pugFiles = fs.readdirSync(srcDir + '/pug').filter(file => path.extname(file) === '.pug');
  
  pugFiles.forEach(file => {
    const filePath = path.join(srcDir + '/pug', file);
    const php = pug.renderFile(filePath, {
      basedir: srcDir,
      filters: {
        php: (text) => {
          return `<?php ${text} ?>`;
        }
      }
    });
    const outPath = path.join(outDir, path.basename(file, '.pug') + '.php');
    fs.outputFileSync(outPath, php);
  });
}

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    host: 'localhost',
    cors: true,
    port: 3000,
    hmr: {
      host: 'localhost',
    },
    proxy: {
      '/': {
        target: 'http://localhost:8888',
        changeOrigin: true,
      }
    },
    watch: {
      usePolling: true,
      include: `${srcDir}/pug/**/*.pug`,
    },
  },
  plugins: [
    {
      name: 'pug-transformer',
      buildStart() {
        compilePugToPhp();
      },
      handleHotUpdate({ file, server }) {
        if (file.endsWith('.pug')) {
          compilePugToPhp();
        }
      }
    },
    liveReload(`${outDir}/**/*.php`),
  ],
});
```

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

##### 上記の詳細・結果
phpファイルに対してviteを使用するとなると、lalavel viteの記事が多く私のような事例の結果は得られませんでした。

### 補足
特になし

viteでphpの変更を監視してliveReloadしたい

JavaScript の fetch で拡張子が `js` である JavaScript のソースコードファイルをただの文字列として読み込ませようと

```js
const url = "./hogehoge/main.js";
const response = await fetch(url);
const text = await response.text();
```

として

```js:main.js
console.log("Hello!");

```

を読み込むとテキストの中身が

```js
console.log("Hello!");

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1haW4uanMiXSwic291cmNlc0NvbnRlbnQiOlsiY29uc29sZS5sb2coXCJIZWxsbyFcIik7XG4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQzsifQ==
```

とお尻に sourceMappingUrl なる良く分からない情報が付いてしまいます。無理やりこのテキストを整形して取り除くことはできますが、そもそもこれが入らないようにする方法はありますか？他の拡張子のファイルでは起こらないみたいです。Vite でデバッグしています。



JavaScript の fetch で JavaScript のソースファイルをただのテキストとして読むときに余計な文字列が入ってしまう

現在、Vite + Vue + TypeScript で大きい文書のようなものを作っています。そこでたくさんの（１００以上の）静的なテキストファイルを読み込んで JavaScript で処理をして HTML 要素に変換して Vue のコンポーネントの一部に埋め込んでいるのですが、

```vue
<script setup lang="ts">
import textA from "./a.txt?raw";
import textB from "./b.txt?raw";
import textC from "./c.txt?raw";
⋮
import textX from "./a.txt?raw";
import textY from "./b.txt?raw";
import textZ from "./c.txt?raw";

const a = { name: "a", text: textA };
const b = { name: "b", text: textB };
const c = { name: "c", text: textC };
⋮
const x = { name: "x", text: textX };
const y = { name: "y", text: textY };
const z = { name: "z", text: textZ };
</script>

<template>
  <Component1 v-bind="a"/>
  <Component1 v-bind="b"/>
  <Component1 v-bind="c"/>
  ⋮
  <Component1 v-bind="x"/>
  <Component1 v-bind="y"/>
  <Component1 v-bind="z"/>
</template>
```

こんな Vue ファイルが何十個もできそうで、同じような処理しかしないので JSON なんかに設定だけ書いて、Vue ファイルを生成するプログラムを書くか、

```js
import config from "./config.json";

for (const item of config) {
  eval(`import text${item.name} from "${item.text}?raw";`);
  eval(`const ${item.name} = { name: "${item.name}", text: text${item.name} };`);
}
```

みたいなことをしたい気持ちになりましたが、上記のコードはもちろん動きません。Vue でマクロプログラミング的なことをしたいときに良い方法やツールはありますか？

Vite の静的アセット読み込みでマクロ的なことをしたい

### 実現したいこと

- [ ] API サーバーへ GET リクエストを送り、結果を ブラウザのコンソールに表示したい

### 前提

Ruby on Rails で 作成した API に
Vue3 から GET リクエストを送信して、
結果をブラウザのコンソールに表示したいです。

### 発生している問題・エラーメッセージ

ブラウザのコンソールに以下が表示されています。
~~Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON~~

```
GET http://localhost:5173/posts/1 500 (Internal Server Error)
```

`vite.config.ts` の proxy 設定に誤りがあるような気がするのですが、問題を特定できていません。

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

**src/App.vue**

```typescript
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
import axios from 'axios'
import { ref } from 'vue'

const data = ref(null);
fetch("http://localhost:5173/posts/1")
.then(response => response.json())
.then(json => console.log(json))

</script>
```

**vite.config.ts**

```typescript
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: { // CORS 対策
      '/posts/1': 'http://localhost/3000',
    }
  }
})
```

### 試したこと

**curl での動作確認結果**
```bash
curl localhost:3000/posts/1
{"id":1,"body":"ABC","created_at":"2023-10-29T12:24:31.739Z","updated_at":"2023-10-29T12:24:31.739Z"}
```

### 解決方法

サーバサイドの Rails アプリケーションに、CORSの設定が不足していました。
不足していた設定を追加することで解決しました。

```ruby
# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin Ajax requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 以下に、 http://localhost:5173 が不足していたため、追加したところ
解決 しました
    origins "http://localhost:3000", "http://localhost:5173"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

```

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

**package.json**
```json
{
  "name": "keputonea",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "run-p type-check \"build-only {@}\" --",
    "preview": "vite preview",
    "build-only": "vite build",
    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "axios": "^1.6.0",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.3.3",
    "@tsconfig/node18": "^18.2.2",
    "@types/node": "^18.18.5",
    "@vitejs/plugin-vue": "^4.4.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^12.0.0",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "npm-run-all2": "^6.1.1",
    "prettier": "^3.0.3",
    "typescript": "~5.2.0",
    "vite": "^4.4.11",
    "vue-tsc": "^1.8.19"
  }
}
```

CORS 対策をしつつ、Vue3 から Rails API を呼び出したい

### 実現したいこと

Electron Forge + Vite でメインウィンドウ以外のHTMLで.mtsスクリプトを読み込みたい。

### 前提

https://www.electronforge.io/
を参考に、
```command
npm init electron-app@latest my-app -- --template=vite-typescript
```
を実行してテンプレートを作成しました。
その上で、既存の手動でビルドしていたtypescriptのコードをElectrom Forgeに移行しようとしているのですが、エントリーポイントのHTMLからtsを読み込んでくれるのですが、他のウィンドウのHTMLからtsを読み込んでくれません。
Inspectorを見るとトランスパイルさえしてくれていなくて、jsファイルも吐き出されていないようです。
```render側のエラー
Failed to load resource: net::ERR_FILE_NOT_FOUND
```

```src以下のディレクトリ
.
├── @types
│   ├── preload.d.ts
│   └── types.d.ts
├── main_process
│   ├── main.mts
│   └── window_handler.mts
├── preload_script
│   └── preload.ts
├── public
│   └── assets
│       ├── NoFileChosen.png
│       └── NoImage.001.png
├── renderer_process
│   ├── common_modules.mts
│   ├── index.mts
│   └── insert_vehicleAttributes.mts
└── types.d.ts
index.htmlはルートディレクトリ直下にあります。
insert_vehicleAttributes.htmlはルートディレクトリ直下のhtml/insert_vehicleAttributes.htmlです。
```
insert_vehicleAttributes.htmlから./src/renderer_process/insert_vehicleAttributes.mtsをトランスパイルされたものを読み込みたいです。
### 発生している問題・エラーメッセージ

mainプロセスのログを見てみるとこのような文言がありました。
```
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
```
RollupOptionsまたはHTMLからauto_determineエントリーポイントできませんでした。
そして、明確なoptimizeDeps.includeパターンが存在しません。
依存関係プレビルディングをスキップしました。

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

```HTML
絶対パスで指定しています。
<script type="module" src="/Users/User Name/Documents/drive-me-20231202/drive-me/src/renderer_process/insert_vehicleAttributes"></script>
```
```vite.renderer.config.ts
import { defineConfig } from 'vite';
import path from "path";

// https://vitejs.dev/config
export default defineConfig({
    build: {
        outDir: ".vite/build",
        emptyOutDir: true,
        rollupOptions: {
            input: {
                insert_vehicleAttributes: path.resolve(__dirname, "src/renderer_process/insert_vehicleAttributes.mts"),
            }
        }
    },
    resolve: {
        alias: {
            "@renderer": path.resolve(__dirname, "src/renderer_process"),
        }
    }
});
```
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-06/6e60956d-05eb-45ac-ad9c-e37a7ef2ba7c.png)

### 試したこと

build.rollupOptions.inputに項目を追加してみました。
エントリーポイントのHTMLでは絶対パスでトランスパイルされたtsを読めていたので、他のHTMLも絶対パスで指定してみました。
npm startでビルド・実行しています。

### 補足情報（FW/ツールのバージョンなど）
MacOS: 14.1.2 (23B92)

```package.json
{
  "name": "drive-me",
  "productName": "drive-me",
  "version": "0.1.0",
  "description": "The \"drive-me\" is a comprehensive tool designed to efficiently manage the operational status and attributes of rental cars. This app provides an intuitive platform for monitoring and organizing vital information related to the fleet of vehicles.",
  "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 ."
  },
  "keywords": [],
  "author": "User Name",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^7.2.0",
    "@electron-forge/maker-deb": "^7.2.0",
    "@electron-forge/maker-rpm": "^7.2.0",
    "@electron-forge/maker-squirrel": "^7.2.0",
    "@electron-forge/maker-zip": "^7.2.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.2.0",
    "@electron-forge/plugin-vite": "^7.2.0",
    "@typescript-eslint/eslint-plugin": "^5.0.0",
    "@typescript-eslint/parser": "^5.0.0",
    "electron": "27.1.3",
    "eslint": "^8.0.1",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.25.0",
    "ts-node": "^10.0.0",
    "typescript": "~4.5.4"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "dotenv": "^16.3.1",
    "electron-squirrel-startup": "^1.0.0"
  }
}

VSCode:
Version: 1.84.2 (Universal)
Commit: 1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
Date: 2023-11-09T10:52:33.687Z (3 wks ago)
Electron: 25.9.2
ElectronBuildId: 24603566
Chromium: 114.0.5735.289
Node.js: 18.15.0
V8: 11.4.183.29-electron.0
OS: Darwin arm64 23.1.0
```


Electron Forge + ViteでエントリーポイントのHTML以外のHTMLでスクリプトを読み込みたいです。

### 実現したいこと


- [ ] matter.jsの`collisionStart`などの衝突イベント内で、自前の配列に`Array.findIndex`で検索したインデックスの次の要素を取得したい

### 前提


TypeScript, SolidStart, Matter.jsでスイカゲームを作っています。
同じフルーツが衝突して次のフルーツに進化する機能を実装中に以下の問題が発生しました。

### 発生している問題
進化順は本家?switch版と同じです。

進化前と進化後のフルーツ名をコンソールに出力するようにしているのですが、時折意図しないものが生成されてしまっています。
うまくいく時もあるので不安定な感じです。
```
//理想
old: orange
new: kaki

//問題
old: orange
new: orange

//問題2
old: kaki
new: orange
```

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-22/b38cfe04-ea91-4953-8d49-15c35e7edd91.png)

レンダリングでは衝突後に消えて新しいフルーツが生成されるまでは正常に動作しています。
生成するフルーツの種類を`Array.findIndex`で検索し、1を足して再度配列を参照するところでつまずいているみたいです。
### 該当のソースコード
実際はファイルを分けて`export`しています。

* データ定義
```TypeScript
type FruitData = {
        name: string
        point: number
        radius: number
        imageURL: string
    }

// データ自動生成
const boxWidth = 300
const maxRadius = boxWidth * (2 / 7)
const fruitRadius = (num: number) => maxRadius / (1.2 ** num)

// 定義
const fruitList: FruitData[] = [
    {
        name: 'cherry',
        point: 1,
        radius: fruitRadius(10),
        imageURL: ''
    },
//... 中略
 {
        name: 'watermelon',
        point: 66,
        radius: maxRadius,
        imageURL: ''
    }
]
```

* 処理
```TypeScript
/* 前略 */

// 進化後のフルーツの情報を取得
const newFruitData = (list: FruitData[], name: string) => {

    console.log(`old: ${name}`) // 進化前のフルーツ

    // 進化後のフルーツのインデックス
    const newIndex = list.findIndex(e => e.name === name) + 1

    // スイカの時は生成しない
    if (newIndex === list.length) return undefined

    // もしもの為
    if (newIndex === -1) return undefined

    // 進化後のフルーツ
    const newData = list[newIndex]
    console.log(`new: ${newData.name}`)
    return newData
}

// フルーツのbodyを生成するための関数
type FruitObject = (data: FruitData, x: number, y: number) => Matter.Body
const fruitObject: FruitObject = (data, x, y) => Bodies.circle(x, y, data.radius, {
    label: data.name
})

/* 中略 */

Events.on(engine, 'collisionStart', e => {
            e.pairs.forEach(pair => {
                if (pair.bodyA.label === pair.bodyB.label) {
                    // 間の座標を算出
                    const halfXY = () => {
                        const halfGapX = (pair.bodyA.position.x - pair.bodyB.position.x) / 2
                        const halfGapY = (pair.bodyA.position.y - pair.bodyB.position.y) / 2
                        return {x: pair.bodyA.position.x + halfGapX, y: pair.bodyB.position.y + halfGapY}
                    }
                    const newPos = halfXY()

                    // 衝突した２つを削除
                    Composite.remove(fruitsComposite, pair.bodyA)
                    Composite.remove(fruitsComposite, pair.bodyB)

                    // 上で定義した関数で新しいフルーツの情報を取得
                    const data = newFruitData(fruitList, pair.bodyA.label)
                    if (!data) return
                    console.log(data)

                    // 追加
                    const newFruit = fruitObject(data, newPos.x, newPos.y)

                    Composite.add(fruitsComposite, newFruit)
                }
            })
        })
```

### 試したこと

vitestで関数を抽出してテストしたところ何回試しても一貫して正常でした。
```TypeScript
const newFruitData = (list: FruitData[], name: string) => {

    console.log(`old: ${name}`)  // 進化前のフルーツ

    // 進化後のフルーツのインデックス
    const newIndex = list.findIndex(e => e.name === name) + 1

    // スイカの時は生成しない
    if (newIndex === list.length) return undefined

    // もしもの為
    if (newIndex === -1) return undefined

    // 進化後のフルーツ
    const newData = list[newIndex]
    console.log(`new: ${newData.name}`)
    return newData
}


test.only('config', () => {
    // ランダムにフルーツの名前を生成
    const randomName = fruitList[Math.trunc(Math.random() * fruitList.length)].name

    const data = newFruitData(fruitList, randomName)
    if (!data) return
    console.log(data)
})
```
* 例
```
old: orange
new: kaki
{ name: 'kaki', point: 15, radius: 28.705540858318642, imageURL: '' }
```

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

`Node.js v18.16.0`
`"solid-js": "^1.7.12"`
`"vite": "^4.4.9"`
`"solid-start": "^0.3.6"`
`"vitest": "^0.26.3"`
`"matter-js": "^0.19.0"`
