他の断面性能計算を実装 現状A,mしか計算していなかったので、ほかの数値についても実装した。 結果がNaNのときは非表示 数値を入力する前は結果がNaNになってしまうので非表示にした。 断面の種類を切り替えたときの処理 断面形状を切り替えたときに前の数…

デバッグしようと思って開発者ツールを開いてみたらエラーメッセージが出ていたので対処する。 キーを持て Warning: Each child in a list should have a unique "key" というエラーが。そういえば、サンプルコードとかでもkeyという属性が設定されたりして…

前回作った断面形状描画部分を拡張しやすいように修正していく。 LineData LineDataに関しては、x1,y1,x2,y2といちいち書いていくといまいちなので、点データをもたせて、それを結ぶ仕組みとした。 また、多角形のデータを1本1本持たせるのは面倒なので、点…

数値を入力しただけだと地味なので、断面形状を描画できるようにしたい。 さっそくChatGPTに相談してみる。 reactのフロントエンドアプリを作っており、図形を描画したい旨をいろいろ聞いてみたら、下記のようなコードを提案された。 import React, { useSta…

数値を更新したらすぐ結果が反映させる仕様にしたが、よく見ると表示結果が1つ前の計算結果だった。 細かい仕組みはしっかり認識していないが、レンダリングと数値更新のタイミングの問題らしい？ CharGPTに相談したら、ボタンで計算させましょうとか、タイ…

これまでに出てきた技術を見ながら、拡張しやすいように改良してく。 断面形状タイプのenumを作成 断面形状の切り替えに文字列リテラルのユニオンを使っていたが、 モードの数が増えてくるとユニオンをいちいち書くのが面倒なので、enum型を使うことにした。…

ファイル名の修正他 とりあえずCalculatorのままだといまいちなので、ファイル名やコンポーネント名などを修正 断面性能計算のクラス名を修正 · st-func/st-func-web@d164fcd · GitHub ほかの断面性能 現在断面積の結果しか表示されないが、ほかの断面性能も…

最近のReactの話からちょっと変わるが、断面性能関数の設計方針で 強軸、弱軸をX,Yとするか、Y,Zとするか。 前者は断面をXY平面と見たもの。後者は、線材をイメージして材軸方向をXとしたもの。 今回はStbAnaSectionに準じて、強軸をY、弱軸をZとすることに…

前回作った記事では、ChatGPTの結果を何も考えずにそれっぽく修正しただけなので、実際に何をしているのか検索しながら見ている。 importの{}の有無 impoerするときに{}があったりなかったりするのは何だろう？ 【JavaScript/TypeScript】import/export from…

まずは、作ったst-func-tsをインストールする。 $ npm install ..\st-func-ts st-func-tsをインストール · st-func/st-func-web@d71db70 · GitHub さて、数字の和と積を求めるだけのCalculatorを断面積を求めるように書き換えてみる。 各コードの細かい意味…

サンプルプログラムをst-func用に書き換えていく。 まず、Home.tsxにタイトルと説明を記載。 import React from "react"; const Home: React.FC = () => { return ( <div> <h1>st-func-web</h1> <p>建築構造設計に用いる簡単な計算をするアプリケーションです。</p> </div> ); }; export…

さて、テストアプリケーションができたので、実際にサーバーに設置して動くかどうか試してみる。 $ npm start で実行すると、ローカルのhttpサーバーが立ち上がり、http://localhost:3000/でアプリにアクセスされる。 これはテスト用のものなので、ビルドす…

色々調べながら作ってもいいのだが、ChartGPTさんがいることだし、さくっとサンプルのアプリケーションを作ってもらおう。 断面性能を計算するアプリケーションをイメージして以下のようなアプリケーションを作ってもらう。 Reactを利用して、簡単な計算を実…

ウェブアプリを開発してみたい st-func-tsを別のライブラリにしているが、現状特に分けている意味があまりない。 また、Excelへのアドインインストールがサイドロードしかできない。 なんとなくもったいないので、せっかく作ったライブラリを活用できるよう…