常連

### 実現したいこと
chatGPTのレスポンスを画面に表示させたいです。


### 前提

TypeScript、Reactを使って勉強がてらwebアプリを作っています。
ChatGPTからの応答を画面上に表示させようとしたところ、画面に表示されませんでした。同期処理、非同期処理ができていないことは想像できるのですが、画面上に表示させるためにはどうすれば良いかわかりませんでしたので、ご教示お願いいたします。




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

```TS
export function useTextInput() {
    const [inputText, setInputText] = useState("どのようなドキュメンテーションを打ちますか？")
    const [answer, setAnswer] = useState<null | string>("")

    async function handleSubmitBtn() {
        try {
            const response = await openai.chat.completions.create({
                messages: [{ role: "system", content: inputText }],
                model: "gpt-3.5-turbo"
            })
            if (response.choices[0] && response.choices[0].message) {
                setAnswer(response.choices[0].message.content)
                console.log(response.choices[0].message.content)
            }
        } catch (error) {
            console.error("Error fetching response: ", error)
        }
    }
    return { inputText, answer, handleSubmitBtn, setInputText }
}





export function Output() {
  const textHooks = useTextInput()


  return (
    <Text
      mt="-60px"
      color="white"
      p="30px"
      fontWeight="bold"
      fontSize="16px"
    >
      {textHooks.answer}
    </Text>
  )
}



export function TextInput() {

  const textHooks = useTextInput();
  return (
    <div>
      <Textarea
        w="40vw"
        placeholder="メッセージを入力してください..."
        size="lg"
        p={5}
        borderRadius="2xl" // 丸みを帯びた角
        boxShadow="md" // 中程度の影
        borderColor="transparent" // ボーダーを透明に
        resize="none" // リサイズ不可
        focusBorderColor="green.500" // フォーカス時のボーダーカラー
        bg="white" // 背景色
        color="green.800" // テキストカラー
        fontWeight="bold"
        fontSize="16px" // フォントサイズ
        lineHeight="tall" // テキストの行間
        value={textHooks.inputText}
        onChange={(e) => textHooks.setInputText(e.target.value)}
      />
      <Flex mt="15px">
        <TextResetButton />
        <Spacer/>
        <TextSubmitBtn
          handleSubmitBtn={textHooks.handleSubmitBtn}
        />
      </Flex>
    </div>
  )
}

```

### 試したこと
console.log(response.choices[0].message.content)を使い、コンソール画面に表示されることは確認した。


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

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


ChatGPTからのレスポンスを画面に表示させたい。

### 実現したいこと

htmlで「お絵かきロジック」を表示したいと考えています

以下のような表示をしようと考えています
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-25/2d6a743e-ff72-4636-8a32-aab632be6ec8.png)

全体をgridスタイルを使って実現しようと考えています。
1行目のcssのスタイルの設定がどうすれば良いかわかりません
1行目のヒントがサンプルのように所定の位置に収まるようにかつ下寄せになって欲しいです。
別にgridスタイル以外でも実現できれば良いです。
ただし、個々のマスをクリックした時に、クリックイベントが発生するような仕組みは実現出来るような方法でお願いします。（マスをクリックすると■→□となるようなイベントを実装するので）

### 試したこと
css に
transform: rotate(90deg)
を設定したところ、文字列が90度回転することを確認しましたが、位置や寄せが思い通りになりません

**実行結果**
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-25/4d231335-44fe-4981-a3a4-973daa59a9ae.png)

### 該当のソースコード
```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Random Grid</title>
    <h1>お絵かきロジック</h1>
    <div class="grid-container"></div>
    <style>
      .grid-container {
        display: grid;
        gap: 1px;
        grid-template-columns: auto repeat(var(--numCols), var(--cellSize));
        grid-template-rows: auto repeat(var(--numRows), var(--cellSize));
        width: fit-content;
        height: fit-content;
      }

      .v-hint {
        color: blue;
        transform: rotate(90deg);  /* テキストを左90度回転 */
        transform-origin: top; /* 回転の基準点を指定 */
        white-space: nowrap; /* テキストが折り返されないようにする */
        border: 1px solid #000;
        text-align: right; /* 文字列を下寄せする */
        vertical-align: bottom; /* 文字列を左寄せする */
        height: fit-content;
      }

      .h-hint {
        height: var(--cellSize);
        color: red;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
      }

      .cell {
        width: var(--cellSize);
        height: var(--cellSize);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <script>
      function generateRandomGrid() {
        // 行数と列数を動的に変更
        const numRows = 6;
        const numCols = 5;
        const cellSize = '20px';
        document.documentElement.style.setProperty('--cellSize', cellSize);
        document.documentElement.style.setProperty('--numCols', numCols - 1);
        document.documentElement.style.setProperty('--numRows', numRows - 1);

        const gridContainer = document.querySelector('.grid-container');
        gridContainer.innerHTML = ''; // グリッドをクリア

        for (let row = 0; row < numRows; row++) {
          for (let col = 0; col < numCols; col++) {
            const cell = document.createElement('div');
            if (row === 0 && col === 0) {
              cell.innerText = col.toString().repeat(col);
            } else if (row === 0 && col !== 0) {
              //縦ヒントクラスを適用
              cell.classList.add('v-hint');
              cell.innerText = col.toString().repeat(col);
            } else if (row !== 0 && col === 0) {
              //横ヒントクラスを適用
              cell.classList.add('h-hint');
              cell.innerText = row.toString().repeat(row);
            } else {
              cell.classList.add('cell');
              cell.innerText = '■';
            }
            gridContainer.appendChild(cell);
          }
        }
      }

      // 初回のグリッド生成
      generateRandomGrid();
    </script>
  </body>
</html>
```





htmlのグリッドで文字列を90度回転させたい

### 実現したいこと
以下(1)のような任意typeに対して、以下(2)のように初期値を指定する必要があります。
初期値を自動的に指定する事は可能でしょうか？
そもそも、初期値を定義しなくても良い方法はありますでしょうか？

初期値はnumberであれば`0`, stringであれば`''`のように、毎回同じ値を指定しているので毎回初期値を指定する事は面倒だと感じています。

- (1) 任意type
```TypeScript
type User = {
  id: number;
  name: string;
};
```

- (2) 初期値を設定する必要がある
```TypeScript
const [user, setUser] = useState<User>({
  id: 0,
  name: '',
});
```

### 発生している問題
上記Userのように2つの要素だけであれば数が少ないので楽ですが、実際は多くのtypeが存在して、多くのuseStateが存在しています。
初期値はnumberであれば`0`, stringであれば`''`のように、毎回同じ値を指定しているので毎回初期値を指定する事は面倒だと感じています。

また、typeを変更した時、typeが複数ファイルで利用されている場合は全て修正する必要があり、とても面倒です。

初期値を自動的に設定する方法、または、初期値を定義しなくてよい方法を探しています。
または、そもそもの話として初期値を指定することを考えるのはアンチパターンになるのでしょうか？
みなさんはundefinedが前提でコードを書いていますでしょうか？

### 該当のソースコード
https://stackblitz.com/edit/vitejs-vite-vpsnw7?file=src%2FApp.tsx

### 試したこと
- typeに存在する全てのプロパティ名を`string[]`として取得して自動生成を試みましたが不可能でした
https://teratail.com/questions/4l8f3owrh9nvcd

### 補足情報（FW/ツールのバージョンなど）
- Visual Studio Code 1.81.1
- React.js 18.2.0
- TypeScript 5.2.2


useStateの初期化が面倒

### 実現したいこと

<p className='testclass'>a</p>となっていて欲しい


### 前提

取得した文字列のhtmlをReact上で表示したいと考えています。
お力をお借りできるとありがたいです。
よろしくお願いいたします。

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

<div dangerouslySetInnerHTML={{ __html: "<p className='testclass'>a</p>" }} />とするとデベロッパーツールで確認すると、<p classname='testclass'>a</p>となってしまいます。
classNameがclassnameとなっている状況です。
なぜ、nameのNだけが変換されてしまうのかわからなくて困っています。

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

```jsx
<div dangerouslySetInnerHTML={{ __html: "<p className='testclass'>a</p>" }} />
```


ReactでdangerouslySetInnerHTMLの挙動がおかしい

### 実現したいこと
typeで定義したプロパティ名を`string[]`として取得したいです。

### 発生している問題・エラーメッセージ
```
'keys' only refers to a type, but is being used as a value here.(2693)
```

### 該当のソースコード
https://www.typescriptlang.org/ja/play?#code/C4TwDgpgBAqgzhATlAvFA3gWAFBSgSwBMAuKAOwFcBbAIyRzzIEMqJS5hF8yBzHAXxw5QkKAGsIIOKnGSA9gDNYCRAG4cAYzlk4cgDYQAdHrk8AFBKkBKIdiA


### 試したこと
- 適当なオブジェクトを作成した。
成功しましたが、できれば無駄なオブジェクトを作成せずに直接typeの定義からプロパティ名を`string[]`として取得したいです。
https://www.typescriptlang.org/ja/play?#code/C4TwDgpgBAqgzhATlAvFA3gWAFBSgSwBMAuKAOwFcBbAIyRzzIEMqJS5hF8yBzHAXxw4AxgHsyHKBQTI0WXARJQADABoG5FmygByHQJHi4ogDYQAdCdE8AFAHkaAKwjDg5gNYQQcG9KQBKfyFsHCA

- C#であれば以下のコードで同様の事ができました
https://dotnetfiddle.net/pdnF5g

### 補足情報
- TypeScript 5.2.2


typeで定義したプロパティ名を取得したい

### 実現したいこと

ログインユーザーがログイン画面にアクセスした場合、メインメニューページにリダイレクトさせる。その際にその旨を伝えるアラートを表示。
ここまではできているのですが、このアラートが、通常のログアウト状態からのログインでも表示されてしまうため、それを回避したい。

### 前提

reactアプリをTypeScript、firebase authenticationを使って、ユーザー管理機能を持ったシステムを作っています。
すでにログインしているユーザーのログイン画面への遷移はあるべき挙動ではないため、MainMenuページへのリダイレクトをするという機能を実装中に、以下の意図しない挙動が発生しました。

### 発生している問題

ログインユーザーに関する求める挙動は、求めるままに実現できました。ログイン中のため、メインメニューに移動します。という旨のアラートが表示され、okボタンを押すとMainMenuへ遷移します。
ですが、ログアウトをし、通常のログインを実行した際に、ログイン自体はできるのですが、ページ遷移直前に先述のアラートが出てしまい、okボタンを押すことでページ遷移がされます。本来、この通常のログインではアラートは必要なく、すぐにログインされて欲しいシーンです。

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

```Typescript
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) =>{
      if (user) {
        navigate("/mainMenu");
        alert("ログイン中のため、メインメニューに移動します")
      }
    });
    return () => {
      unsubscribe();
    }
  },[]);
```

### 試したこと

コードを直接変更したというよりは、useEffectの挙動に関する学習に努めました。現状の解釈としては、第二引数の配列の中に何も指定をしなければ、レンダリング時の一度だけuseEffectが実行されるということがわかりました。

### 補足情報（FW/ツールのバージョンなど）
firebase authentication
react-router-dom v6.15.?
ログイン機能、ログアウト機能、MainMenuページ等は正常に動いているため、該当する箇所と思われるコードだけを記載させていただきました。質問自体の経験が未熟なため、もし記載した以外に考慮に必要となるコードがあれば教えてください。追記します。

reactのuseEffectを使った際に、別のコンポーネントへリダイレクトした際にもなぜかuseEffectが読まれてしまう。

### 実現したいこと

- [ ] 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 を呼び出したい

## テーマ、知りたいこと
バックエンド・フロントエンドのフレームワークには何を使えば良いですか？

## 背景、状況
私はエンジニア歴半年程度の新米エンジニアで、TypeScriptの経験が少しあるだけです。
現在、業務システム(ユーザ数2~300程度)の設計中で、フレームワークの技術選定を任されたのですが、フロントエンド・バックエンドに何を使えば良いか悩んでいます。
「これにすべき！」という正解よりかは、「こういう風に考えたらいいよ〜」だとか「こういう場合は〇〇が良いかもね〜」っていうような意見をいただきたいと思っています。
できればTypeScriptのものが良くて、今は脳死でNext.jsが良いのかな〜とぼんやり考えています。

