常連

注目の的

社会貢献

回答者

ベストアンサー

拍手喝采

先生

案内人

自己紹介

有名人

### 実現したいこと
Ruby on Rails で作成したサービスをherokuにアップしたいのですが、node.sのバージョンが高いとの理由でアップすることが出来なかったので、バージョンをダウンさせようと思っているのですが、Herokuが推奨しているnodeのバージョンが見つけることが出来ませんでした。


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

```
remote:        Error: error:0308010C:digital envelope routines::unsupported
remote:            at new Hash (node:internal/crypto/hash:68:19)
remote:            at Object.createHash (node:crypto:138:10)
remote:            at module.exports (/tmp/build_7cf91660/node_modules/webpack/lib/util/createHash.js:135:53)
remote:            at NormalModule._initBuildHash (/tmp/build_7cf91660/node_modules/webpack/lib/NormalModule.js:417:16)
remote:            at handleParseError (/tmp/build_7cf91660/node_modules/webpack/lib/NormalModule.js:471:10)
remote:            at /tmp/build_7cf91660/node_modules/webpack/lib/NormalModule.js:503:5
remote:            at /tmp/build_7cf91660/node_modules/webpack/lib/NormalModule.js:358:12
remote:            at /tmp/build_7cf91660/node_modules/loader-runner/lib/LoaderRunner.js:373:3
remote:            at iterateNormalLoaders (/tmp/build_7cf91660/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
remote:            at iterateNormalLoaders (/tmp/build_7cf91660/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
remote:            at /tmp/build_7cf91660/node_modules/loader-runner/lib/LoaderRunner.js:236:3
remote:            at context.callback (/tmp/build_7cf91660/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
remote:            at /tmp/build_7cf91660/node_modules/babel-loader/lib/index.js:59:71 {
remote:          opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
remote:          library: 'digital envelope routines',
remote:          reason: 'unsupported',
remote:          code: 'ERR_OSSL_EVP_UNSUPPORTED'
remote:        }
remote:        
remote:        Node.js v20.9.0
remote:        
remote: 
remote:  !
remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
```


### 試したこと
Herokuのバージョンを20.10.0から20.9.0に変更したのですが、変わらずアップできませんでした。
恐らくバージョン20はherokuにアップするのに適していないようです。


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


Herokuに適したNodeのバージョンは決まっていますか？

### 実現したいこと

当方、インフラ初心者でWEBサービスを営んでおります。
定期的に５０２エラーが発生しており、2時間ほどで復旧するのですが、
５０２エラーが出ないようにしたいと思っています

### 前提

laravelでWEBサービスを展開中。
EC／RDS／ELBで構成

### 発生している問題・エラーメッセージ
５０２エラー
RDSモニタリング情報に途切れがあり
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-27/7054f429-24dd-415e-997d-97a4d9e73eae.png)
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-12-27/17bfcf56-41fb-4c1e-a91d-23dc52d7c63c.png)

### 試したこと

RDSの再起動
EC２の再起動


長期運営のWEBサービスが定期的に定時で５０２アクセスになる（24時15分～26時）

### 実現したいこと
画面を再読み込みしてもログイン状態を保持していたい

### 前提

バックエンドにrails + devise_token_auth、フロントエンドにreact を使ってアプリを開発しているのですが、画面をリロードするとログイン状態ではなくなります。

例
ログインに必要な情報をフォームに入力。
ログインボタンを押し、ユーザーのマイページに遷移。
その時点では先ほど入力した情報に基づいて、ユーザーの名前やメールアドレスは表示されている。

こちらでログインは成功しているはずなのですが、画面を再読み込みするとまたログイン前の状態に戻ってしまう。

### 一部省略していますが、下記のコードが該当のソースコードです

# Rails

## sessionsコントローラー
```
class Api::V1::Auth::SessionsController < ApplicationController
    def index
      if current_api_v1_user
        render json: { is_login: true, data: current_api_v1_user }
      else
        render json: { is_login: false, message: "ユーザーが存在しません" }
      end
    end
  end
```

## registrationsコントローラー
```
class Api::V1::Auth::RegistrationsController < DeviseTokenAuth::RegistrationsController
    private
  
      def sign_up_params
        params.permit(:name, :email, :password, :password_confirmation)
      end
  end
```

## ルーティング
```
Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      mount_devise_token_auth_for 'User', at: 'auth', controllers: {
        registrations: 'api/v1/auth/registrations'
      }
      namespace :auth do
        resources :sessions
      end
    end
  end
end

```

# Next.js

## APIの取得
```
// src/app/auth.js

import axios from "axios"
import Cookies from "js-cookie";

export const signIn = (params) => {
    return axios.post('http://localhost:4000/api/v1/auth/sign_in', params);
};

export const getCurrentUser = () => {
    if(!Cookies.get('_uid') || !Cookies.get('_client') || !Cookies.get('_access_token')) return
    return axios.get('http://localhost:4000/api/v1/auth/sessions', {headers: {
        'uid': Cookies.get('_uid'),
        'client': Cookies.get('_client'),
        'access_token': Cookies.get('_access_token')
    }});
};
```

## サインインページ
```
// src/app/sign_up/page.jsx

'use client'

import Cookies from 'js-cookie';
import { useRouter } from 'next/navigation';
import React, { useContext, useState } from 'react'
import { AuthContext } from 'src/Provider/_auth';
import { signIn } from 'src/auth';

const page = () => {
    const { setIsSignedIn, setCurrentUser } = useContext(AuthContext);
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const router = useRouter();

    const handleSignIn = async (e) => {
        e.preventDefault();

        const params = {
            email: email,
            password: password
        };

        try {
            const res = await signIn(params);
            console.log(res);

            if (res.status == 200) {
                Cookies.set('_uid', res.headers['uid']);
                Cookies.set('_client', res.headers['client']);
                Cookies.set('_access_token', res.headers['access_token']);

                setIsSignedIn(true);
                setCurrentUser(res.data.data);

                router.push('/user');
            };
        } catch (err) {
            console.log(err);
        };
    };

  return (
    <div>
        <form onSubmit={handleSignIn}>
            <div>
                <label htmlFor="email">Eメール</label>
                <input
                    type="email"
                    value={email}
                    onChange={e => setEmail(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor="password">パスワード</label>
                <input
                    type="password"
                    value={password}
                    onChange={e => setPassword(e.target.value)}
                />
            </div>
            <button>ログイン</button>
        </form>
    </div>
  )
}

export default page
```

## ログインユーザーのマイページ

```
// src/app/user/page.jsx

'use client'

import React, { useContext } from 'react'
import { AuthContext } from 'src/Provider/_auth'

const User = () => {
    const { isSignedIn, currentUser } = useContext(AuthContext);
  return (
      <div>
        {
            isSignedIn && currentUser
            ?
                <>
                    <h2>こんにちは {currentUser?.name} さん</h2>
                    <p>メールアドレス: {currentUser?.email}</p>
                </>
            : <h2>Not Current User</h2>
        }
      <div>
  )
}

export default User
```

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

react・・・v18
next.js・・・v13
rails・・・v7

読みづらいかもしれませんが、ご協力お願いします。
何か足りない情報がございましたら、ご報告ください。
よろしくお願いします。

Ruby on Rails + Next.jsでログイン状態保持

### 実現したいこと
- 乗換回数が最も少ない経路の表示（通る駅の数は問わない）
- スタックの解消

### 前提

現在、都市開発ゲームの駅名に対応して、経路検索が出来るアプリの公開を目指して開発を進めている者です。
ソースコードはコピペしていただければそのまま動作します。
ヒントだけでも構いませんので、よろしければご回答よろしくお願いいたします。

以下、今回使用している路線図です。
赤……路線リストのline1
青……路線リストのline2
緑……路線リストのline3
に対応しています。
また、書かれた数字はコード内の駅番号リストと対応しています。

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-26/88652335-73e9-485f-a9ef-eca2e991c3a1.jpeg)

### 発生している問題・エラーメッセージ
（最初の調査の際の情報です。コメント欄に調査し直した際の情報が書かれています）
・期待した結果
０と５……０，１，１，４，４，５の順で表示される。
１と５……１，４，４，５の順で表示される。
２と５……２，４，４，５の順で表示される。
３と５……３，１，１，４，４，５の順で表示される。
５と０……５，４，４，１，１，０の順で表示される。
５と１……５，４，４，１の順で表示される。
５と２……５，４，４，２の順で表示される。
５と３……５，４，４，１，１，３の順で表示される。

・実際の結果
０と５……System.IndexOutOfRangeException: インデックスが配列の境界外です。と表示される(337行目)
１と５……Process is terminated due to StackOverflowException.と表示される。
２と５……２，４，１と表示後、Process is terminated due to StackOverflowException.と表示される。
３と５……３，１と表示後、Process is terminated due to StackOverflowException.と表示される。
５と０……System.IndexOutOfRangeException: インデックスが配列の境界外です。と表示される(337行目)
５と１……System.IndexOutOfRangeException: インデックスが配列の境界外です。と表示される(337行目)
５と２……System.IndexOutOfRangeException: インデックスが配列の境界外です。と表示される(337行目)
５と３……System.IndexOutOfRangeException: インデックスが配列の境界外です。と表示される(337行目)


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

長文なので、リンクを貼らせていただきます。
[リンク内容](https://firestorage.jp/download/3bda646595b4d7c4591830eca0d13ed41a893445)
お手数ですが、ソースコードのダウンロードをお願いします。

### 試したこと

for文やforeach文内で、路線番号や駅番号が若い順に処理されるようになっているので、if文を用いて適切な値を代入させようとしましたが、うまくいきませんでした。

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

Visual Studio 2022

乗換案内のようなアプリ開発において、特定の経路でスタックなどが発生してしまう。

### 実現したいこと
タイトルの通りですが
2次元上で線分を好きに描画させて、線分が交わった箇所に頂点を生成し
線分で囲まれている部分の図形を判定し何角形の図形が幾つ出来るか判定したいです。

### 実現できたこと
線の描画や交差判定、頂点の生成までは出来ましたが
ここから図形の判定に差し掛かるところで何も思い浮かばず停滞している状態です。

### 前提
生まれる図形はとりあえず全て凸多角形 (全ての内角が180°未満)とします。
複数の図形を組み合わせた図形は考えないものとします。
3角形から6角形までを探索範囲とします。

### イメージ図
図の場合、~~3角形x4, 4角形x2, 5角形x1~~ 3角形x4, 4角形x3となります。
追記: 赤で塗られている部分を5角形と勘違いしていました。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-12/f0b565a5-b4db-414a-aae5-9033e702d355.png)

### イメージコード (C#)
```C#
// 2次元上の座標を表す
class Vector2 {
  public float x;
  public float y;
};

// 頂点。座標だけ持つ
class Vertex {
  Vector2 pos;
};

// 辺。両端の頂点を持つ
class Edge {
  Vertex vertA;
  Vertex vertB;
};

class Main {
  void Update(){
    List<Vertex> vertexs;
    List<Edge> edges;
    while(true){
      // クリックしてドラッグして離すと線を描くコード
      // ...

      // 線が生まれるたびにvertexsとedgesを更新するコード
      // ...

      // vertexsとedgesを元に図形があるか調べる
      // TODO: 何も思いつかない！

      // 1000 / 60 msぐらい待つ
    }
  }
}
```

### 最後に
どうみても課題丸投げの質問になってしまい申し訳ないです。
タグにC++とC#が入っていますが、あくまで慣れ親しんでいる言語なだけで
COBOLとかBASICとかじゃない限りは調べて読み解けるので大丈夫です。

コードそのものでもとても嬉しいですが、図形を探すうえで必要な手順など教えていただければ
何とかこちらでコードを考え抜いてみますので、どうかよろしくお願いいたします。

### 回答いただきありがとうございます。
様々な回答を頂き、皆様の発想力の高さに驚いております。
質問サイトである以上解決法がある場合はベストアンサーを決めるべきかとは思います。
ですが、こちらで実装して最も良いと思った方にベストアンサーを付与したいと考えておりますので
今しばらくお待ち頂ければと思います。

2次元上の頂点と辺の情報を元に何角形の図形が幾つ描かれているか判定したい

## システム管理者の不正からパスワードの漏洩はどうやって防いでいるのか？

システム管理者を担当しています。
立場上、ユーザのパスワードが見えます。細工すれば分かる。
システム管理者の不正からパスワードの漏洩はどうやって防ぐのでしょうか？
素朴な疑問を持ったので質問しました。


システム管理者ならユーザのパスワードが分かる？

### 実現したいこと

「System.Transactions.TransactionAbortedException: トランザクションが中止されました。 ---> System.Data.SqlClient.SqlException: COMMIT TRANSACTION 要求に対応する BEGIN TRANSACTION がありません。」
とのエラーが時々出てしまうのを解消したいです。

### 前提

SQLServer、ASP.NET(Webフォーム)、C#でシステムを作っています。
実行していると、時々、上記のエラーが出てしまいます。
開発環境では出ず、本番環境でのみ出ます。
対象のストアドを実行すると、毎回出るのではなく、
たまに出ます。（毎回ではないのが、より困っています）

本番環境は、
月額料金が安いレンタル共有サーバーです。

### 該当のソースコード
ストアド
```ここに言語を入力
コード
SET NOCOUNT ON;

DECLARE @intTRANCNT INT, @intERRORCODE INT, @intCOUNT INT, @Severity INT, @Error_Msg VARCHAR(255)

SET @intERRORCODE=0
BEGIN TRY
	SET @intTRANCNT=@@TRANCOUNT
	IF @intTRANCNT=0
		BEGIN TRANSACTION

　　SELECT文１　（SELECTで取得した結果に応じて条件分岐し、下のDELETE、INSERTを変更してます）　　
　　DELETE文
　　INSERT文

		-- トランザクションのコミット
	IF @@TRANCOUNT>@intTRANCNT
		COMMIT TRANSACTION

END TRY
BEGIN CATCH
	SET @Severity = ERROR_SEVERITY()
	SET @Error_Msg = ERROR_MESSAGE()
	-- トランザクションのロールバック
	IF XACT_STATE() = -1	-- アクティブなトランザクションは存在するがコミットできない
	BEGIN
		IF @@TRANCOUNT>@intTRANCNT
			ROLLBACK TRANSACTION
	END
	--ELSE IF XACT_STATE() = 0	-- アクティブなトランザクションは存在しない
	ELSE IF XACT_STATE() = 1	-- アクティブなトランザクションは存在する
	BEGIN
		IF @@TRANCOUNT>@intTRANCNT
			ROLLBACK TRANSACTION
	END
	RAISERROR (@Error_Msg, @Severity, 2)
END CATCH

BEGIN
	SET NOCOUNT ON;
　　 DECLARE @QUERY NVARCHAR(MAX)

	SET @QUERY  = SELECT文２

	BEGIN TRY
		EXEC (@QUERY)
	END TRY
	BEGIN CATCH
		DECLARE @EX NVARCHAR(MAX)
		SET @EX = 'クエリエラー' + @QUERY
		RAISERROR(@EX,16,2)
		RETURN
	END CATCH 
END
```

```ここに言語を入力
エラーメッセージ
System.Transactions.TransactionAbortedException: トランザクションが中止されました。 ---> System.Data.SqlClient.SqlException: COMMIT TRANSACTION 要求に対応する BEGIN TRANSACTION がありません。
  場所 System.Data.SqlClient.SqlInternalConnection.OnError(SqlException exception, Boolean breakConnection, Action`1 wrapCloseInAction)
  場所 System.Data.SqlClient.TdsParser.ThrowExceptionAndWarning(TdsParserStateObject stateObj, Boolean callerHasConnectionLock, Boolean asyncClose)
  場所 System.Data.SqlClient.TdsParser.TryRun(RunBehavior runBehavior, SqlCommand cmdHandler, SqlDataReader dataStream, BulkCopySimpleResultSet bulkCopyHandler, TdsParserStateObject stateObj, Boolean& dataReady)
  場所 System.Data.SqlClient.TdsParser.Run(RunBehavior runBehavior, SqlCommand cmdHandler, SqlDataReader dataStream, BulkCopySimpleResultSet bulkCopyHandler, TdsParserStateObject stateObj)
  場所 System.Data.SqlClient.TdsParser.TdsExecuteTransactionManagerRequest(Byte[] buffer, TransactionManagerRequestType request, String transactionName, TransactionManagerIsolationLevel isoLevel, Int32 timeout, SqlInternalTransaction transaction, TdsParserStateObject stateObj, Boolean isDelegateControlRequest)
  場所 System.Data.SqlClient.SqlInternalConnectionTds.ExecuteTransactionYukon(TransactionRequest transactionRequest, String transactionName, IsolationLevel iso, SqlInternalTransaction internalTransaction, Boolean isDelegateControlRequest)
  場所 System.Data.SqlClient.SqlInternalConnectionTds.ExecuteTransaction(TransactionRequest transactionRequest, String name, IsolationLevel iso, SqlInternalTransaction internalTransaction, Boolean isDelegateControlRequest)
  場所 System.Data.SqlClient.SqlDelegatedTransaction.SinglePhaseCommit(SinglePhaseEnlistment enlistment)
  --- 内部例外スタック トレースの終わり ---
  場所 System.Transactions.TransactionStateAborted.EndCommit(InternalTransaction tx)
  場所 System.Transactions.CommittableTransaction.Commit()
  場所 System.Transactions.TransactionScope.InternalDispose()
  場所 System.Transactions.TransactionScope.Dispose()
  場所 C#のメソッド(＊＊＊　＊＊＊＊＊, Char vchrMODE)
  場所 page_searchinput.grdList_RowCommand(Object sender, GridView

```
### 試したこと（タイトルの問題発生に至る経緯）
・データ量が増大するにつれ重たくなってきおり、時折タイムアウトエラーが出ていたが、数日前からタイムアウトが頻発。出方としては、一度タイムアウトエラーが出ると、しばらくエラーが頻発し、ある程度経つと収まる。

元々は、このタイムアウトエラーを解消することが目的でした。

１．ログファイルの圧縮
→状況改善なし。

２．テーブルにインデックスを付ける
→状況改善なし。

３．ネットにあるSQLを高速化するクエリの書き方を参考に、SQLを修正
→状況改善なし。

４．コネクションが廃棄されていなくて重くなってるのでは？ということで、ASP.NETのWebConfigのconnectionStringに、Lifetime=30;Pooling=falseを追加
→状況改善なし。

５．ASP.NET側で、一つのTransactionScope内でストアドを順次実行していたものを、一つのストアドで片付けるように、プログラム及びストアドを修正（上記ストアド）
→タイトルのエラーが発生するようになる。

### 補足情報
開発環境では、タイムアウト、タイトルのエラーは一度も発生せず。
本番環境（インターネット）でも、私が実行したぶんには、発生せずです。

元々SELECT文１、DELETE、INSERT文と、SELECT文２は別々のストアドでした。
（別々のストアドの時は、一度もこのエラーは出ませんでした）
合わせ方に問題があって、エラーが起きてるのでしょうか？
（そもそものタイムアウトエラーが解消されるなら、元のストアド、プログラムに戻すことは問題ないです）

安いレンタル共有プランで、時々タイムアウトエラーが出るのと関係しているのでしょうか？

よろしくお願いします。


時々、 BEGIN TRANSACTION を通過してるのに、「 COMMIT TRANSACTION 要求に対応する BEGIN TRANSACTION がありません。」とのエラーが出てしまいます。

### 実現したいこと

ここに実現したいことを箇条書きで書いてください。
- nginxでIP直打ちをアクセス拒否したい
- サイトアクセスでIPアドレス直打ちを拒否したい

### 前提

使用しているWebサーバーはnginxで、IPアドレス直打ちした際に拒否したい
kusanagiのバージョンは9になります

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

```
エラーメッセージ
```

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

```ここに言語名を入力
ソースコード
```

### 試したこと
/etc/opt/kusanagi/nginx/の中にある、nginx.default.confに以下実施したが解決せず

https://kamotora.net/system/nginx/nginx-default_server/
https://qiita.com/3S_Laboo/items/56886d2ec6083454a24c
https://supilog.supisupi.com/blog/xt8vj37f3r88/

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

ここにより詳細な情報を記載してください。


IPアドレスでアクセスされた場合にnginxでエラーページを表示する方法

趣味でプログラミングをしています。
初の投稿となります。
よろしくお願いします！

### 質問内容
今回ChatGPT APIを使用し、Unityでアプリを作成しています。
API KEYに関して環境変数を利用することが推奨されており、下記URL参考にして開発を進めています。
https://happy-shibusawake.com/api-key/1406/

Unity Editor上では問題なく動作していますが、タブレット実機でテストをした際、環境変数を利用したコードでは正常に動作しませんでした。

アプリをリリースしたり、実機でテストする際は環境変数を使用せず直接APIキーをコードに記載すればいいのでしょうか？

いままでAPIを利用したことがなかったため、APIの扱いに関してビクビクしています！
ぜひお教えいただきたいです！

### 開発環境
- Unity
- 言語：C#
- テスト実機：Androidタブレット



APIキーの扱いに関して

### 実現したいこと

大雑把でよいので今が夏かどうかを判定したい。
どこかにIsSummerみたいなものがあればいいんですけど。

## 前提

1.特殊な権限が必要でないこと。
→例えば位置情報は権限が必要。

2.インターネット接続が必要でないこと。

3.判定は大雑把で良い。
→6～9月が夏でも良い。

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

とりあえず、確定できそうな条件として１個ぐらいしか思いつきません。
1. タイムゾーンに夏時間があり、今が夏時間の場合は夏。

それ以外では日付で判定できそうですが、北半球か南半球のどちらに属しているかがわからないと判定できないのです。
（カルチャー情報にそれっぽいものありませんよね？カルチャー別に全部組み込まないとダメ？）

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

### 試したこと

タイムゾーンの情報で夏時間の有無と夏時間かどうかはとれます。

位置情報もとれましたが、権限が必要なため前提条件に合わないのと、赤道近くだと位置情報の北半球／南半球であり、カルチャー別の判定は出来ません・・・

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

Windows環境でのみ動けば良いです。(Win32APIは使用できます。)
タイムゾーンを地図にプロットするためのAPIってありませんでしたっけ・・・？



今が夏かどうかを判定したい。

### 実現したいこと

React + Node.js + MySQLでWebアプリを作成したいです。


### 発生している問題・エラーメッセージ
MySQLとの接続のためにmysql2を使用しlocalhostのMySQLと接続したいのですが、
`const mysql = require('mysql2/promise');`
これを追加したところで複数のモジュールにおける以下のエラーが発生しています。
(下記は一例で、他にも`stream-browserify`、`browserify-zlib`のライブラリが不足しているとエラーが出ております。)

```localhost
Compiled with problems:

ERROR in ./node_modules/mysql2/lib/commands/command.js 4:15-32

Module not found: Error: Can't resolve 'timers' in '～\node_modules\mysql2\lib\commands'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }'
	- install 'timers-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "timers": false }
```

### 試したこと

webpackが4から5に移行することで発生するエラーとのことで、
webpackは最新のバージョンにしております。
`"webpack": "^5.88.2",`
`"webpack-cli": "^5.1.4"`

以下のqiitaの記事が同じ状況かと思われたため試したのですが、依然としてエラーの状況は変わりません。
https://qiita.com/stDeveloperAtm/items/dda93836f47abf608a23

### 質問について
1.番号リスト本状況を改善する方法があれば知りたいです。

2.番号リスト`create-react-app`を使用してプロジェクトを作成しております。
上記参考ページ内と同等の状況で、`webpack.config.jsを編集するという対応法が数多く見つかりますがnpm installコマンドによって生成されるnode_modules配下を編集することは出来ません`との記載があります。
自分も本状況解決のために行き当たった記事の殆どがwebpack.config.jsの編集だったのですが、
根本的にプロジェクトを作り直したほうが良いでしょうか。

Node.jsでwebpackバージョンに起因するModule not foundエラーが発生する。

### 実現したいことfor文を条件通りに動かす。違う列の円どうしを接するようにする。### 前提ここに質問の内容を詳しく書いてください。（例）TypeScriptで●●なシステムを作っています。■■な機能を実装中に以下のエラーメッセージが発生しました。### 発生している問題・エラーメッセージ```エラーメッセージ```### 該当のソースコードsize(700, 700);background(255);int centx = width/2;int centy = height/2;float x, y;float r1=50;float theta=PI/4;float r2=4*(r1)*sin(theta/4);for (int i=0; i<(2*PI/theta); i++) {  pushMatrix();  x = centx + r1 * cos(theta*i);  y = centy + r1 * sin(theta*i);  circle(x, y, r2 );  popMatrix();}r1=r1+r2;for (int i=1; i<20; i++) {  float r3=random(5,100);  r1+=r3/2;  theta=theta-PI/(8*i);  r3=4*r1*sin(theta/4);  for (int j=0; j<(2*PI/theta); j++) {    pushMatrix();    x = centx + r1 * cos(theta*j);    y = centy + r1 * sin(theta*j);    circle(x, y, r3);    popMatrix();  }}```ここに言語名を入力ソースコード```### 試したこと色々調べましたができませんでした。ここに問題に対して試したことを記載してください。### 補足情報（FW/ツールのバージョンなど）ここにより詳細な情報を記載してください。

違う列同士の円が接するようにできません。また、4回でfor文が終わってしまいます。

ファイルにバイナリデータを書き込み、そのファイルを後続の処理で使うスクリプトを書いています（後続の処理ではどうしても実ファイルが必要になります）。
そのため、後続の処理に行く前にファイルへの出力が確実にflushされていてほしいのですが（fsync/fdatasyncまでは恐らく不要）、
```Python
with open(file_path, "wb") as f:
    f.write(buffer)
    f.flush() # ←これは必要？
```
上のコードのように組み込み関数`open()`をwith文とともに使った場合、`flush()`を明示的に実行しないとflushされないのでしょうか？
それとも、withブロックを抜けてcloseされるのに伴って自動的にflushも行われるのでしょうか？

現在のPythonでは`close()`と記述すると内部的にflushの処理も走るので、with文による自動的なcloseでもflushしてくれるのかなと思っていたのですが、
https://seizo-igawa.hatenablog.jp/entry/2015/05/09/113405
こちらのウェブページで`codecs.open()`を使った場合は明示的に`flush()`を呼ばないとうまく動作しなかったという情報があり、まさか組み込み関数の`open()`も同じなのか？と対応に困っています。

codecsのソースコードを読むぶんには内部で組み込み関数の`open()`を使っているみたいだけど、でもPythonのioのcloseの実装はflushも中で呼ぶようだし、一方で「うまく動作しなかった」という報告があるのも事実だし…と迷走中です。

とりあえず明示的に`flush()`を書いておけば確実で安心ではあるのですが、「必要か不要かわからないけど書いておこう」というのもすっきりしないので、詳しい方がいらっしゃったらwith文を使った場合の`flush()`の必要性について教えてください。

Python 「with open」を使って開いたファイルは自動的にflushされますか？

### 実現したいこと
データベースと連動して、商品番号を入れると、動的に　商品名と価格が表示されていくような注文フォームのWEBアプリを作成したいと考えています。



### 前提
私のスキルとしてはpythonを始めて1年半ほど。スクレイピングのためにselenium bs4 pandas など自身のビジネスの業務改善の為に使っていますが、WEBアプリはまだ作った事がありません。

そんな私が、最短最速で　アプリ作成するには・・何という「技術」を勉強したらいいのか、どのフレームワークを最短で実現できるのか・・

ヒント（勉強の道筋）を頂けないでしょうか？

※プログラミングは好きですが、開発を本職でする能力はないと感じているので、自身のビジネスの業務効率改善としてアプリ作成を考えています。そのため、Django やFlaskはどちらも使った事がないのですが・・出来るだけ目的を早く実装できる道筋を知りたいと考えております（学習時間が少ないほうで・・）
（外注も考えましたが、データベース連動のデータベースの部分が自作のpandasのDataframeを使いたいのと仕様変更が頻繁に起きそうなので、自身でトライしたいと考えました）

### 試したこと
どんな技術を使えばいいのか・・わからないので調べられる範囲が限られているのですが、自分がわかる範囲で　フォームで動的に入力する＝　Ajax　など、該当すると思ったページです

参考Page
HTMLの入力フォームに入力された値を使ってPythonで計算等の処理を行い、その結果をそのまま同じページ内で入力フォームの下などに動的に表示したい
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q10265014880
[Python] プログラム初心者のためのWebアプリ簡単作成法https://qiita.com/okoppe8/items/4cc0f87ea933749f5a49
Python で SQL データベースを作成して操作する方法
https://www.freecodecamp.org/japanese/news/connect-python-with-sql/


### 補足情報　欲しい機能
私が考えている実装した機能
ユーザーがアクセスして、自分の名前で　注文する

pandas のDataframe（商品元帳）をデータベースにする。

お客様がWEBアプリで、商品番号を入れると　商品名と　商品金額が自動計算←動的な買い物カゴのイメージ

一旦追加した商品を削除もできる

商品の検索して選ぶ事もできる（商品番号入力以外でデータベースの商品検索）

最後の送信ボタンで、注文内容をメール送信できる（注文メールを取込ソフトで別にデータベース化できるので、注文内容をデータベース化する必要はなし。）

お客様の画面の他に、管理画面で、ユーザーがするのと同じ操作ができる（ユーザーの代わりに注文できる。（個人情報など指定して）














。


動的なデータベース連動の注文フォームのWEBアプリをpythonで作成する最短方法は・

### 実現したいこと

undo redoをまとめて戻したりしたい

### 前提

undo redo自体は機能しますが、一文字ずつしか前後できません。

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

```
エラーメッセージなし
一文字ずつしか前後しない

```

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

```SwiftUI

swift ui undo 


import SwiftUI

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}
struct ContentView: View {
    var body: some View {
        TextEditorView()
    }
}
struct TextEditorView: View {
    @State private var fullText: String = ""
    @State private var undoText: [Character] = []

    var body: some View {
        VStack {
            HStack {
                Button(action: undoType) {Image(systemName:"arrow.uturn.backward")}
                Button(action: redoType) {Image(systemName:"arrow.uturn.forward")}
            }
            TextEditor(text: $fullText)
        }
    }

    func undoType(){
        if let lastChar = fullText.last {
            undoText.append(lastChar)
            fullText = String(fullText.dropLast())
        }
    }
    func redoType(){
        if let lastChar = undoText.last {
            undoText.removeLast()
            fullText.append(lastChar)
        }
    }
}

```

### 試したこと

Timer()かと思い、セットしましたが、関係ありませんでした。

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

Xcode14.1

undo redoをまとめて

### 実現したいこと

Reactで画面遷移の実装を行ったところ、遷移後の画面が真っ白に表示されているので
正しい画面遷移が行われるように修正したいです。


### 前提
開発言語：React
開発環境：VS Code ＋ Dev Containers


### 発生している問題・エラーメッセージ
画面遷移の実装を行ったところ、URLは変更され画面切り替えが行われるが真っ白な画面が表示される状態になります。
その状態でブラウザの更新を行うと正しく遷移後の画面が表示されるためURLの間違いやルーティングの間違いではないように見えます。
（知識不足のため、この認識自体が誤っている？）

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

遷移元画面
```TypeScript
import { useNavigate } from "react-router-dom";

export default function Test(): JSX.Element {
  const navigate = useNavigate();
  return (
    <div>
      <div>遷移元画面</div>
      <button
        type="button"
        className="fortune_btn"
        onClick={() => navigate("Test2")}
      >
        画面遷移
      </button>
    </div>
  );
}
```
遷移先画面
```TypeScript
import React from "react";

export default function Test2(): JSX.Element {
  return <div>遷移後画面</div>;
}
```

ルーティング
```TypeScript
import { lazy } from "react";
import { Route, Routes as RrdRoutes } from "react-router-dom";

import { CssBaseline } from "@mui/material";

const Test = lazy(() => import("@pages/Test"));
const Test2 = lazy(() => import("@pages/Test2"));

export default function Routes() {
  return (
    <>
      <CssBaseline />
      <MetruckTheme>
        <RrdRoutes>
          <Route path="/" element={<Test />} />
          <Route path="/Test2" element={<Test2 />} />
        </RrdRoutes>
      </MetruckTheme>
    </>
  );
}

```

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

import axios from "axios";

import Routes from "./Routes";

/**
 * axios Settings
 */
axios.defaults.baseURL =
  import.meta.env.VITE_API_URL ?? "http://localhost:3000";
axios.defaults.headers.common.Authorization = `${
  localStorage.getItem("token_type") ?? "Bearer"
} ${localStorage.getItem("access_token") ?? ""}`;

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes />
    </BrowserRouter>
  </React.StrictMode>
);

```
### 試したこと

下記ページを参考にpackage.jsonにhomepage項目を追記しましたが変化はありませんでした。
https://maaengineerhouse.com/archives/1822



React 画面遷移後に真っ白な画面が表示される

御覧くださりありがとうございます。

jsで例えば以下のように

addEventListener('scroll', ()=> { console.log(1); });
addEventListener('scroll', ()=> { console.log(2); });
addEventListener('scroll', ()=> { console.log(3); });

と

addEventListener('scroll', ()=> {
  console.log(1);
  console.log(2);
  console.log(3);
}

などと、最終的な内容が同じだとすると、前者よりも後者のように同じイベントは1つのイベントに処理をまとめるほうがパフォーマンス的には良いでしょうか。
また、このようなことを確認するにはどのようにすればよいでしょうか。Chromeを使っていますがブラウザ内でそのような確認はできるのでしょうか。

恐れ入りますがご教示いただけましたら幸いです。

JSの addEventListener() メソッドの scroll や resize, click などのいずれかの同じイベントを複数記述することについて

### 実現したいこと

@StateとForEachを使ったViewの再描画をしたい

### 前提

SwiftUIで、ForEachを使ったViewで丸数字を指定の個数だけ並べて表示させたあと、個数を変化させて表示を再描画させたいのですが、うまくいきません。

例えば、あらかじめ@State var number = 4として表示させると、
個数の指定は４と表示され、意図通り数字が４個並びます。（①②③④）
ボタンで、１個数字を増やして５個にしようとすると、
個数の指定は５と再描画されるのに、数字の並びは４個のままです。（①②③④）
数字の並びも５個としたい（①②③④⑤）のですが、どうすればいいでしょうか？

個数指定の数字も、数字の並びも同じImageViewの中で記述しているので、ImageViewが@Stateの数字が変わったことで再描画されているはずなのですが...
どなたかご教示いただけるとありがたいです。

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

```
エラーメッセージはありません。
```

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

```SwiftUI
import SwiftUI

struct ContentView: View {
    @State var number = 4
    
    var body: some View {
        VStack {
            ImageView(number: number).padding()
            Button("個数 +1") { if number < 6 { number = number + 1 }}
           Button("個数 -1") { if number > 1 { number = number - 1 }}
        }
    }
}

struct ImageView: View {
    var number: Int
    
    var body: some View {
        VStack {
            Text("個数の指定: \(number)").padding()
            HStack {
                ForEach (0..<number) { i in
                    Image(systemName: "\(i+1).circle").font(.title)
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
```

### 試したこと

UUID()をうまく使うと解決すると書いてあるものもありましたが、理解できませんでした。

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

Xcode 14.2


【SwiftUI】ForEachを使ったViewがきちんと再描画されない

### 前提

オブジェクト型データを格納した変数を関数の引数に指定しています。
オブジェクト型データを格納した変数と関数の引数が別物なのですが、どうして正常に動いているのかがわかりません。


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

エラーメッセージはありません。

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

```JavaScript
let personTaro = { name : "Taro" , age : 20 }; // Taroさんをモデル化して表現

function zikoSyoukai( person ){
 console.log( "こんにちは、" + person.name + "と申します" );
 console.log( "年齢は" + person.age + "歳です" );
}

zikoSyoukai( personTaro );
```

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

OS:Raspberry Pi OS
ブラウザ:Chromium
参考リンク:[JavaScriptで関数の引数にオブジェクト型データを指定する方法を現役エンジニアが解説【初心者向け】](https://magazine.techacademy.jp/magazine/45190)


オブジェクト型データを格納した変数と関数の引数が別物なのに正常に動く理由が知りたいです。

### 実現したいこと

- [ ] 不具合を解消したい。

### 前提

Reactを用いて動画作成ができるRemotionと呼ばれるツールを用いて開発をしていた際、
人工音声(VOICEVOX)の読み上げ音声を取得しようとしたところ以下のエラーが発生しました。

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

```
Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

翻訳
警告: 最大更新深度を超えました。 これは、コンポーネントが useEffect 内で setState を呼び出したときに発生する可能性がありますが、useEffect に依存配列がないか、依存関係の 1 つがレンダリングごとに変更されます。
```

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

```tsx
const rpc = axios.create({ baseURL: "http://localhost:50021", proxy: false });

export const Voice: React.FC<Props> = ({ text }: Props) => {
  const [audioData, setAudioData] = useState<Blob>();
  const [handle] = useState(() => delayRender());

  const fetchData = useCallback(async () => {
    const audio_query = await rpc.post('audio_query?text=' + encodeURI(text) + '&speaker=1');

    const synthesis = await rpc.post("synthesis?speaker=1", JSON.stringify(audio_query.data), {
      responseType: 'blob',
      headers: {
        "accept": "audio/wav",
        "Content-Type": "application/json"
      }
    });

    setAudioData(synthesis.data); // この文を無くすとエラーが消えます

    continueRender(handle);
  }, [handle]);

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {audioData ? (
        <Audio src={audioData ? window.URL.createObjectURL(audioData) : undefined} />
      ) : null}
    </div>
  );
};
```

### 試したこと
様々なサイトで本エラーの原因について調べたところ、以下の二つしか見つけることができませんでした。
・useEffect()内でuseStateの更新を行っている場合の第二引数が正しくない
・render内をアロー関数で書かないと、render時にuseStateが呼ばれてしまい無限ループになる
しかし、今回の私のコードではどちらも行っていないため結果何が原因で無限ループしているのかわかりませんでした。
それ以外にも各文をコメントアウトしてどこが原因か探ったところ、上記コード部分にもコメントで記述していますが、
「setAudioData(synthesis.data);」を消すとエラーが発生しないことがわかりました。
しかし、このコードは必要ですし、何より記述に誤りなどはないと感じるため結果どのように不具合修正を行うかわからずこちらに質問させていただきました。

自分なりに色々と調べてはみたのですが、余りこれといった情報を見つけることができず、
React、Remotionともに使用経験がほぼないため、初歩的な部分かもしれませんが、ご教授いただければ幸いです。
