常連

### 実現したいこと
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 を呼び出したい

### 実現したいこと

React + Viteプロジェクト(TypeScript)でmswのモックを実行する時に、http.getのメソッド内に入ってくれなくて困っています。

### 試したこと

公式ドキュメントを参考にコードを準備しました。
https://mswjs.io/docs/best-practices/typescript

Reactを起動して実行しているブラウザの別タブで下記のURLを実行して、GETアクセスを試したが、mswのhandler.tsは実行されるが、メソッド内に入ってくれなく、うまくいかない
http://localhost:5173/api/persons

### 準備したファイル
public/mockServiceWorker.js　※npx msw init public/ --save　で自動生成したもの
src/mocks/browser.ts　※新規作成
src/mocks/handlers.ts　※新規作成
src/main.ts　※browser.tsを実行するコードを追記

### ソース

```TypeScirpt
// handler.ts
import { http, HttpHandler, HttpResponse } from 'msw'

type Person = {
  personCode: string
  personName: string
  age: string
}

type ParamsType = {
  personCode: string
}

type RequestBodyType = {
  person: Person
}

type ResponseBodyType = {
  persons: Person[]
}

export const handlers: HttpHandler[] = [
  http.get<ParamsType, RequestBodyType, ResponseBodyType, '/api/persons'>(
    '/api/persons',
    ({ params }) => {
      // dummy
      console.log(params)
    }
  )
]
```

```TypeScirpt
// browser.ts
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)
```

```TypeScirpt
// main.ts 　のReactDomの前に追記

if (process.env.NODE_ENV === 'development') {
  const { worker } = await import('@/mocks/browser')
  worker.start()
}
```

### パッケージバージョン
dependencies
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.23.1"

devDependencies
"msw": "^2.3.1",
"typescript": "^5.2.2",
"vite": "^5.2.0"

React + Viteプロジェクト(TypeScript)でmswのモックを実行する時に、http.getのメソッド内に入ってくれない

### 実現したいこと

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
```
