損益分岐点シミュレーター

商品を加工製造して販売する場合の損益分岐点シミュレーターです。

固定費として、「家賃」「水道光熱費」「人件費」「減価償却費」を設定します。変動費として「原材料費」「販売手数料」を設定します。費用として、固定費・変動費と「販売単価」を設定して、「グラフを更新」ボタンをクリックすると、損益分岐点を計算するグラフを作成して、損益分岐点の販売数と売上額を表示します。

生成AIをもちいた制作

なお、このプログラムはHTML・CSS・JSを生成AIをもちいて制作しました。

頭の中に、具体的イメージがあったので、比較的早く形になりました。プロンプトを具体的に書けるからだと推測します。

ちなみに、書いたプロンプトは以下のような感じです。

1回目

JavaScriptで損益分岐点をグラフで表示するアプリを作ってください。詳細仕様は以下によります。
・グラフは、横軸を販売数、縦軸を金額としてください。
・グラフは、売上額と費用額をそれぞれ1次関数として直線で示してください。
・売上額と費用額の直線の交点から、縦方向に垂線を描き、垂線と横軸との交点部分に販売数を表示してください。
・売上額と費用額の直線の交点から、横方向に水平線を描き、水平線と縦軸との交点部分に金額を表示してください。
・売上額と費用額の直線の交点がグラフ横軸の左から3分の1のところに表示されるように、横軸の最大値を調整してください。
・ただし、canvasの表示領域は固定とします。
・売上額を計算するために、パラメーターとして「販売単価」をテキストボックスに入力させます。
・売上額のテキストボックスは、「売上額」のタイトルの枠で囲ってください。
・費用額を計算するために、パラメーターとして「家賃」「水道光熱費」「人件費」「減価償却費」「1個あたりの原材料費」「1個あたり販売手数料」をテキストボックスに入力させます。
・「家賃」「水道光熱費」「人件費」「減価償却費」のテキストボックスは、「固定費」のタイトルの枠で囲ってください。
・「1個あたりの原材料費」「1個あたり販売手数料」のテキストボックスは、「変動費」のタイトルの枠で囲ってください。
・固定費と変動費は、「費用」のタイトルの枠で囲ってください。
・各パラメーターはグラフの右側に配置してください。

2回目

以下を修正してください。
・交点からの垂線と横軸の交点に販売数表示をなくしてください。
・交点からの水平線と縦軸の交点に金額表示をなくしてください。
・縦軸のラベルと目盛りの数値が重なって視認できません。重ならないように配置して下さい。

3回目

以下を修正してください。
・縦軸のラベルと目盛り数値が重なっています。重ならないように配置してください。

4回目

以下を修正してください。
・縦軸の目盛り数値の単位を「千円」とし、数値を調整してください。
・横軸の数値を1000ごとに「,」を追加してください。

5回目

以下を修正してください。コード表示は差分だけでOKです。
・Y軸の数値にカンマ区切りを追加

当初は、xy軸の近くに損益分岐点の売上額と販売数を表示するつもりでした。プロンプトもそのように記載しています。

ところが、AIが提示してきたコードでは、売上額と販売額をグラフ左上の方にまとめて表示する仕様になっていました。こちらの仕様のほうが良いと判断したので、途中から仕様を変更して指示しています。

また、軸ラベルと軸目盛りが重なってしまうような見た目の問題は、生成AIはあまり得意ではないようでした。何回かやり直しています。ルーレットのときもさんざんやり直したので、生成AIのクセかもしれません。