これまでに出てきた技術を見ながら、拡張しやすいように改良してく。
断面形状タイプのenumを作成
断面形状の切り替えに文字列リテラルのユニオンを使っていたが、
モードの数が増えてくるとユニオンをいちいち書くのが面倒なので、enum型を使うことにした。
enum型はst-func-tsのほうに入れた。
断面形状タイプのenumを作成 · st-func/st-func-ts@c54cdf7 · GitHub
断面切り替えに断面形状タイプのenumを利用 · st-func/st-func-web@8bafe74 · GitHub
断面寸法入力部分のコンポーネント化
断面寸法入力部分がif文でちょっと汚い書き方だったので、結果表示部分と同様コンポーネント化してみる。
必要なデータと、setNumなどもinterfaceに含めて、コンポーネントに受け渡してみる。
受け渡すための配列は、jsonオブジェクトをそのまま作ると属性名をいちいち書くのが面倒なので、タプルの配列を作り、それをmapでオブジェクトにした。
断面性能計算の寸法入力欄をコンポーネント化 · st-func/st-func-web@0da56e2 · GitHub
計算を即時反映するようにする
たいして負荷のかかる計算ではないので、計算ボタンを押さなくても結果が表示されるようにした。
断面性能計算で計算ボタンを押さなくても即時計算するように修正 · st-func/st-func-web@8524f58 · GitHub
入力欄の変換を関数化
いちいちfloat変換、単位変換を書くのが面倒なので、num1~4を取得するgetNum関数を作り、スッキリかけるように修正。
断面性能計算で入力欄の変換部分を関数化 · st-func/st-func-web@35cece5 · GitHub
数値書式の調整
floatで、ゴミが入ると桁数がすごく多くなってしまうのでいい感じにしたい。
桁数を絞るのはtoFixedという関数でできるみたいだが、整数値の時に.000とか表示されるとあまりうれしくない。
ということでChatGPTに相談
C#の.tostring("0.###")のようなことをtypescriptでできますか？
はい、TypeScriptでも同様のフォーマットを実現することができます。例えば、小数点以下3桁までのフォーマットを行う場合は、次のようにします。
const number = 123.456789; const formattedNumber = number.toFixed(3); // "123.457"このコードでは、
toFixed()メソッドを使用して小数点以下の桁数を指定しています。3桁まで表示するために.toFixed(3)としていますが、これを任意の桁数に変更することもできます。もし特定の桁数までの表示を行う場合で、余分な0を表示しないようにしたい場合は、少しトリッキーですが次のようにします。
const number = 123.4; const formattedNumber = Number(number.toFixed(3)).toString(); // "123.4"ここでは、
toFixed()で指定した桁数までの数値を取得し、それをNumber()で数値に変換してから.toString()を使って文字列に変換しています。これにより、余分な0を表示しないフォーマットを実現できます。
ChatGPTが少しトリッキーとか言っているのが面白いけど、これで実現できそうなので採用。
断面性能計算の計算結果の表示桁数を設定できるように修正 · st-func/st-func-web@0d3ffe0 · GitHub
