WEBアプリに断面性能計算機能を追加

まずは、作ったst-func-tsをインストールする。

$ npm install ..\st-func-ts

st-func-tsをインストール · st-func/st-func-web@d71db70 · GitHub

さて、数字の和と積を求めるだけのCalculatorを断面積を求めるように書き換えてみる。

各コードの細かい意味はよく分からないので、そのままにしてそれっぽく書き換えていく。

計算部分はExcelアドインで使った手法の、SecSteelにインスタンスを代入して共通のメソッドで断面積を取得する。

inputのbuildBoxの部分で、そのままNumber4を足したらエラーになった。

エラーメッセージを見ると一番外側を1つのタグで囲わないといけないらしい。

しかたないので、とりあえずdivタグで囲ってみた。

上記修正をして、無事に断面積を計算できるようになった。

コードは以下のような感じ。

import React, { useState } from "react";
import { SecBuildBox, SecFlatBar, SecSteel } from "@st-func/st-func-ts";
import { Unit } from "@st-func/st-func-ts";

interface CalculatorProps {
  calcMode: "buildBox" | "flatBar";
  setCalcMode: React.Dispatch<React.SetStateAction<"buildBox" | "flatBar">>;
}

const Calculator: React.FC<CalculatorProps> = ({ calcMode, setCalcMode }) => {
  const [num1, setNum1] = useState("");
  const [num2, setNum2] = useState("");
  const [num3, setNum3] = useState("");
  const [num4, setNum4] = useState("");
  const [result, setResult] = useState<number | undefined>(undefined);

  const handleCalculation = () => {
    let secSteel: SecSteel;
    if (calcMode === "buildBox") {
      const secBuildBox: SecBuildBox = new SecBuildBox();
      secBuildBox.setDimensions(
        Unit.input(parseFloat(num1), "mm"),
        Unit.input(parseFloat(num2), "mm"),
        Unit.input(parseFloat(num3), "mm"),
        Unit.input(parseFloat(num4), "mm")
      );
      secSteel = secBuildBox;
    } else if (calcMode === "flatBar") {
      const secFlatBar: SecFlatBar = new SecFlatBar();
      secFlatBar.setDimensions(
        Unit.input(parseFloat(num1), "mm"),
        Unit.input(parseFloat(num2), "mm")
      );
      secSteel = secFlatBar;
    } else {
      secSteel = new SecSteel();
    }
    let result: number = Unit.output(secSteel.area(), "mm^2");
    setResult(result);
  };

  return (
    <div>
      <h2>Calculator</h2>
      <div>
        <label>Calculation Mode:</label>
        <select
          value={calcMode}
          onChange={(e) =>
            setCalcMode(e.target.value as "buildBox" | "flatBar")
          }
        >
          <option value="buildBox">BuildBox</option>
          <option value="flatBar">FlatBar</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 === "buildBox" && (
        <div>
          <div>
            <label>Number 3:</label>
            <input
              type="number"
              value={num3}
              onChange={(e) => setNum3(e.target.value)}
            />
          </div>
          <div>
            <label>Number 4:</label>
            <input
              type="number"
              value={num4}
              onChange={(e) => setNum4(e.target.value)}
            />
          </div>
        </div>
      )}
      <button onClick={handleCalculation}>Calculate</button>
      <div>Result: {result !== undefined ? result : "Please calculate"}</div>
    </div>
  );
};

export default Calculator;

Calculatorを断面積計算に変更 · st-func/st-func-web@a98a38f · GitHub