ChatGPTを駆使して、計算プログラムを作る

今流行りのChatGPT。日本語でプログラミングできるようになったといっても過言ではありません。
今回やや長めの計算プログラムをChatGPTに作ってもらいます。細かく指示すればできるはず。ではやってみます。

まだ試してない方は上記リンクからTry ChatGPTへ。ユーザー登録必要ですが、ぜひお試しを。

プログラムの内容
計算方法
指示方法
結果
まとめ

プログラムの内容

無駄な物を作るほど暇ではないので(笑)、少しはニーズがありそうなDIYに使えるプログラムを作ります。

DIYで庭に土や砂利を敷きたいと思ったときに、ホームセンターでどのくらい袋を買えばいいのだろうと思う事があるかもしれません。
そこで、土や砂利を敷く厚み、敷く面積、敷く素材の比重、敷く素材の袋の容量を元に敷く袋の数を計算するプログラムを作りたいと思います。
それをChatGPTにやってもらいます。

計算方法

敷く厚み(単位cm)を入力→単位mへ変換
敷く広さ(単位m)を入力→㎡へ計算
それらを元に必要砂量(単位㎥)を算出
敷く素材の比重(単位t)を入力
敷く素材の袋の容量(単位kg)を入力→単位tへ変換
敷く素材の容量(単位t)÷敷く素材の比重(単位t)=1袋あたりの立米(単位㎥)
必要砂量(単位㎥)÷1袋あたりの立米(単位㎥)=大体の必要袋数

指示方法

<form name="sikiatukeisan">
  敷圧<input id="sikiatu">cm<br>
  <input id="sikimensekitate">m * 
  <input id="sikimensekiyoko">m = 
  敷面積<span name="sikimenseki"></span> ㎡<br>
    
  必要砂量<span name="hituyousunaryou"></span>㎥ = 
  敷面積<span name="sikimenseki"></span>㎡ * 敷厚
  <span id="sikiatumm"></span>m<br><br>
    
  比重<input name="hijuu">t<br><br>

  <input id="hukurokg">kg→
  <span name="hukuroton"></span>t<br><br>
    
  <span name="hukuroton"></span>t / 
  <span name="hijuu"></span>t = 
  <span name="hukuroryubei"></span>㎥<br>
    
  <span name="hituyousunaryou"></span>㎥ / 
  <span name="hukuroryubei"></span>㎥
  <span id="hituyouhukuro"></span>袋
</form>

以上のhtmlコードを変えずに、それぞれのinputに入力があった時に以下の処理を行うJavaScriptコードをES6を用いて書け。

①<input id="sikiatu">へ入力があった時、数値をcmをmへ変換して<span id="sikiatumm"></span>へ表示し、記憶する

②<input id="sikimensekitate">と<input id="sikimensekiyoko">に入力があった場合、それらの数値を掛け算して、２つの<span name="sikimenseki">へ表示し、記憶する

③では①と②で記憶したid="sikiatumm”の数値とname="sikimenseki”の数値を掛け算して、２つの<span name="hituyousunaryou”></span>へ表示し、記憶する

④ <input name="hijuu">へ入力があった時、<span  name="hukuroryubei"></span>にもその数値を表示し、記憶する

⑤ <input id="hukurokg”>へ入力があった時、その数値をkgからtへ変換し、<span name="hukuroton”></span>へ表示し記憶する

⑥では⑤で記憶したname="hukuroton"を④で記憶したname="hijuu"で割り算して、２つの<span name="hukuroryubei"></span>へ表示し、記憶する

⑦では③で記憶したname="hituyousunaryou"を⑥で記憶したname="hukuroryubei"で割り算して、<span id="hituyouhukuro”></span>に表示する

結果

// input要素を取得
const sikiatuke = document.getElementById("sikiatu");
const sikimensekitate = document.getElementById("sikimensekitate");
const sikimensekiyoko = document.getElementById("sikimensekiyoko");
const hijuu = document.getElementsByName("hijuu")[0];
const hukurokg = document.getElementById("hukurokg");

// span要素を取得
const sikimenseki = document.getElementsByName("sikimenseki")[0];
const hituyousunaryou = document.getElementsByName("hituyousunaryou")[0];
const hukuroton = document.getElementsByName("hukuroton")[0];
const hukuroryubei = document.getElementsByName("hukuroryubei");
const hituyouhukuro = document.getElementById("hituyouhukuro");

// input要素にイベントリスナーを設定
sikiatu.addEventListener("input", calculate);
sikimensekitate.addEventListener("input", calculate);
sikimensekiyoko.addEventListener("input", calculate);
hijuu.addEventListener("input", calculate);
hukurokg.addEventListener("input", calculate);

function calculate() {
  // 敷圧をmに変換して表示
  const sikiatumm = sikiatu.value / 100;
  document.getElementById("sikiatumm").textContent = sikiatumm;

  // 敷面積を計算して表示
  const sikimensekiValue = sikimensekitate.value * sikimensekiyoko.value;
  sikimenseki.textContent = sikimensekiValue;
  sikimenseki2.textContent = sikimensekiValue;

  // 必要砂量を計算して表示
  const hituyousunaryouValue = sikimensekiValue * sikiatumm;
  hituyousunaryou.textContent = hituyousunaryouValue;
  hituyousunaryou2.textContent = hituyousunaryouValue;

  // 砂の比重を取得して表示
  const hijuuValue = hijuu.value;
  hijuu2.textContent = hijuuValue;
  for (let i = 0; i < hukuroryubei.length; i++) {
    hukuroryubei[i].textContent = hituyousunaryouValue / hijuuValue;
  }

  // 砂袋の重さを計算して表示
  const hukurotonValue = hukurokg.value / 1000;
  hukuroton.textContent = hukurotonValue;
  hukuroton2.textContent = hukurotonValue;

  // 砂袋の立米を計算して表示
  const hukuroryubeiValue = hukurotonValue / hijuuValue;
  for (let i = 0; i < hukuroryubei.length; i++) {
    hukuroryubei[i].textContent = hukuroryubeiValue;
  }

  // 砂袋の数を計算して表示
  const hituyouhukuroValue = hituyousunaryouValue / hukuroryubeiValue;
  hituyouhukuro.textContent = hituyouhukuroValue;
}