前回作った記事では、ChatGPTの結果を何も考えずにそれっぽく修正しただけなので、実際に何をしているのか検索しながら見ている。

importの{}の有無

impoerするときに{}があったりなかったりするのは何だろう？

【JavaScript/TypeScript】import/export from使い方まとめ #JavaScript - Qiita

defaultというexportがあるらしい。特に気にする必要はなさそうかな

React.FCとは？

ここを見ると何となく書いてある。

React.FCってなんぞや？ #JavaScript - Qiita

よくわからんが、何となく理解した。

そして上にあるよくわからんinterfaceはApp.tsxからcalcModeをCalculatorに伝えるためにあるようだ。

なんでcalcModeがApp.tsxのほうにあるんだろう？

コードを作成したChatGPTに追加で聞いてみた。

上記コードではcalcModeをなぜApp.tsxで指定しているのでしょうか？
Calculatorコンポーネント内では完結できないのでしょうか？

calcModeをApp.tsxで管理しているのは、計算モードの切り替えがCalculatorコンポーネントだけでなく、他のコンポーネントからも操作できるようにするためです。例えば、将来的に他のページやコンポーネントからも計算モードを変更したい場合に、App.tsxでcalcModeを管理しておくことで、状態の一貫性を保つことができます。

また、App.tsxでcalcModeを管理することで、Calculatorコンポーネントが状態を完全に自己管理する必要がなくなります。これにより、コンポーネントの責務を分割し、コードの理解と保守性を向上させることができます。

もちろん、calcModeをApp.tsxで管理せずにCalculatorコンポーネント内で完結させることも可能ですが、アプリケーション全体の状態管理を一元化するために、App.tsxで状態を管理するアプローチが一般的です。

なるほど。でも、この計算モードは別に断面性能機能だけしか使わないので、別にAppのところにある必要はないと思う。

このcalcModeはCalculatorコンポーネント内でしか使わないです。

了解しました。calcModeがCalculatorコンポーネント内でしか使用されない場合は、App.tsxで管理する必要はありません。その場合は、Calculatorコンポーネント内で状態を完結させることができます。

以下は、Calculatorコンポーネント内でcalcModeを管理する例です。

import React, { useState } from 'react';

const Calculator: React.FC = () => {
  const [calcMode, setCalcMode] = useState<'sum' | 'product'>('sum');
  const [num1, setNum1] = useState('');
  const [num2, setNum2] = useState('');
  const [num3, setNum3] = useState('');
  const [result, setResult] = useState<number | undefined>(undefined);

  const handleCalculation = () => {
    if (calcMode === 'sum') {
      const sum = parseFloat(num1) + parseFloat(num2) + parseFloat(num3);
      setResult(sum);
    } else if (calcMode === 'product') {
      const product = parseFloat(num1) * parseFloat(num2);
      setResult(product);
    }
  };

  return (
    <div>
      <h2>Calculator</h2>
      <div>
        <label>Calculation Mode:</label>
        <select value={calcMode} onChange={(e) => setCalcMode(e.target.value as 'sum' | 'product')}>
          <option value="sum">Addition</option>
          <option value="product">Multiplication</option>
        </select>
      </div>
      <div>
        <label>Number 1:</label>
        <input type="number" value={num1} onChange={(e) => setNum1(e.target.value)} />
      </div>
      <div>
        <label>Number 2:</label>
        <input type="number" value={num2} onChange={(e) => setNum2(e.target.value)} />
      </div>
      {calcMode === 'sum' && (
        <div>
          <label>Number 3:</label>
          <input type="number" value={num3} onChange={(e) => setNum3(e.target.value)} />
        </div>
      )}
      <button onClick={handleCalculation}>Calculate</button>
      <div>
        Result: {result !== undefined ? result : 'Please calculate'}
      </div>
    </div>
  );
};

export default Calculator;

このコードでは、Calculatorコンポーネント内でcalcModeを管理し、計算モードの切り替えや計算処理を行っています。App.tsxからcalcModeを削除し、Calculatorコンポーネント内で完結させることができます。

やっぱりこっちの方がすっきりするよね。

ということでコードを修正。

calcModeをApp.tsxで設定せず、Calculator.tsx内で完結するように修正 · st-func/st-func-web@fa120f9 · GitHub

()内にタグがあるのって何？

今から始めるReact入門〜 React の基本 #React - Qiita

こちらを参照。ほんとに今更だけど、ほかの部分も少し理解が深まった気がする。

「完全に理解した」すら全然到達できなそうだが。

setStateって何？

【React】useStateの基本と利用時の注意点まとめ #React - Qiita

よくわからんけど、入出力部分はこいつを使えばいいのかな？

{calcMode === "buildBox" && ( )って何？

条件付きレンダリングというやつらしい。

Reactの条件付きレンダリングを使いこなす（徹底解説）｜Kinsta®

そんなところかな？

コードの概要はなんとなくわかったので、これを本格的な断面性能計算ツールにしていきたい。

ST_FUNC開発日記

建築構造設計Excelアドイン開発の記録

Reactの中身の検証