広告
広告

ChatGPT Mar 23 Version にガチャの確率計算器を作らせる

カテゴリ:deeplearning

気づいたこと

出力文字数に制限があり、CSS を含ませると一度に全体が表示できない

なので body と head に分けて出力させた。

入力トークン数に制限があり、長いソースコードが編集できない

入力トークン数に制限があるため、長いプログラムを編集させるのは向いていない。プログラムをモジュールに分割して構造化する部分は人間がする必要がある。

チャットの蓄積に失敗すると、途中から再開するのが困難

入力トークン数に制限があるため、チャットの蓄積に失敗すると最初からコンテクストの積み上げ作業をしなければならない。

余計な変更を加えがち

変更を指示した部分以外のコードに変更を加えてエンバグさせることが頻発した。

バグ修正には期待できない

単純なバグは修正できるが、複数モジュール間で発生するバグは修正できない。

ロジックのコーディング中に UI デザインを変更してしまった

機能が追加されると UI デザインも変更されるので、これは無駄な作業だった。

経過

ローカルでの動作検証時には文字化けしなかったが、サーバにアップロードした場合に文字化けしたので、head への <meta charset="utf-8"> の追加を手動で行った。

見出しに入力したプロンプトを記載する。

htmlとjavascriptを使って、ガチャの確率を計算するプログラムを作ってください

以下は、HTMLとJavaScriptを使用してガチャの確率を計算するプログラムの例です。このプログラムでは、ユーザーが入力した情報に基づいて、ガチャを何回引いたかと、引いた結果の中で出たアイテムの種類を数え、最終的な確率を計算しています。

上記のプログラムを、ガチャ1回のあたりの当たる確率とガチャを引く回数とを入力するように、書き替えてください

以下は、ガチャ1回のあたりの当たる確率とガチャを引く回数を入力するように、HTMLとJavaScriptを書き換えたプログラムです。

このプログラムでは、フォームに「ガチャを引く回数」と「1回のガチャの当たる確率」の2つの項目があります。JavaScriptのcalculateProbability関数では、numPullsとsuccessRateの値を取得し、1回のガチャの失敗率を計算して、最終的な確率を計算しています。結果は、HTMLのp要素に表示されます。

上記の html を CSS を使って、現代的なデザインにしてください

以下は、前回のHTMLに対してCSSを適用して、より現代的なデザインにしました。BootstrapというCSSフレームワークを使用しています。

上記のプログラムをスマホから扱いやすいように UI 要素を追加してください

以下は、スマートフォンで扱いやすいようにUI要素を追加したHTMLコードです。フォームとボタンのデザインが改善され、入力値をクリアするボタンも追加されています。

上記のコードにスライダーを追加してください

以下は、スライダーを追加したコード例です。スライダーとしては、input type="range"を使用しています。

上記のコードの "ガチャを引く回数" にもスライダーを追加してください。その際の最大値は300にしてください

上記のコードの body 部分のみ表示してください

以下は「ガチャを引く回数」にもスライダーを追加し、最大値を300に設定したコード例です。

このコードでは、2つのスライダーが追加されています。1つはガチャの当たる確率を設定するためのスライダーで、もう1つはガチャを引く回数を設定するためのスライダーです。それぞれのスライダーには、現在の値を表示するためのspanタグが追加されています。また、ガチャを引く回数のinput要素には、最大値として300が指定されています。

計算した確率を常に表示するようにして、スライダーを動かした際にリアルタイムに更新するようにしてください

上記のプログラムのbody 部分だけを抜き出して表示して

以下は、確率を常に表示し、スライダーを動かした際にリアルタイムで更新するようにしたコードです。

上記のプログラムを現代風のデザインにして

以下は、現代風のデザインにしたHTMLとCSSです。

"計算する" ボタンを削除して

上記のコードの body 部分を表示して

了解しました。"計算する" ボタンを削除し、入力内容が変更されたらリアルタイムに確率を更新するように変更したコードを以下に示します。また、UIのデザインも更新し、ボタンを削除した分のスペースを調整しています。

表示する確率を、小数点以下2桁にして、その body 部分だけ表示して

以下のように、result.innerHTML の部分を変更することで、表示する確率を小数点以下2桁にし、body 部分だけを表示できます。

CSSの部分は省略していますが、上記コードを適用すると、スマートフォンでも見やすいデザインになります。

"1回のガチャの当たる確率" の表示部分を小数ではなくパーセントで表示するようにしてください。そしてその body 部分だけを表示してください。

以下が、修正済みのコードになります。小数ではなくパーセントで確率を表示するために、successRate の値を100倍してから % を追加するように変更しました。また、小数点以下2桁で表示するために toFixed() メソッドを使用しています。

上記のコードの head に CSS を追加して現代風にしてください。その head 部分だけを表示してください。

以下が、上記のコードに追加されたCSSです。

スマートフォンから見ると UI 要素が小さすぎます。スマートフォンから操作しやすいように UI を変更してください。そしてその head 部分だけを表示してください。

以下が、スマートフォンから操作しやすいようにUIを変更したCSSと、それを含むhead部分のコードです。

"ガチャを引く回数" と "1回のガチャの当たる確率" の大きさがそろっていないので、揃えてください。そしてその head 部分だけを出力してください。

上記のコードの body 部分を出力してください

計算した確率が重複して表示されているので、修正してください。そしてその body 部分のみ表示してください。

確率が重複して表示される原因は、スライダーの値が変更されるたびに calculateProbability() 関数が呼び出されているためです。そのため、calculateProbability() 関数を呼び出すタイミングを "計算する" ボタンを押したときのみに変更する必要があります。また、計算した確率を表示する部分を<div id="probability"></div>にまとめ、JavaScriptのdisplayProbability関数で動的に更新するようにしています。

以下は修正済みのコードです。

"結果" の上下に 1%, 100%, "確率" といった余計な要素が表示されているので削除してください。そしてその body 部分だけ出力してください。CSS は含めないでください。

以下に修正したコードを示します。余計な要素を削除し、確率表示部分も1%で表示するようにしました。

以下のコードの "ガチャを引く回数:" の横に gacha-count-value の値を表示するよう、コードを修正してください。以下コードを転載。

Chat GPT はコードを修正できなかった。

以下のコードの "ガチャを引く回数:" の横に gacha-count-value の値を表示するよう、コードを修正してください。具体的には gacha-count-value の output を削除して、gacha-count の label にガチャを引く回数を表示してください。以下コードの転載。

以下の修正内容でコードを更新します。

  • gacha-count-value の output を削除する。
  • gacha-count の label にガチャを引く回数を表示する。

修正後のコードは以下の通りです。

”1回のガチャの当たる確率:” も同様に修正してください

以下のように修正してください。

バグ修正編

上記のコードの "1回のガチャの当たる確率" を小数点以下1桁で入力できるようにしてください

以下のように、step 属性を 0.1 に設定することで、小数点以下1桁で入力できるようになります。

※以下のコードはバグがあり動作しません。

上記のコードが動作しない場合、どうすればいいですか? Chrome で動作検証をしています。

以下のような対応が考えられます。

1. ブラウザを最新版に更新する。

古いバージョンのブラウザだと、最新のJavaScript仕様がサポートされていなかったり、不具合が生じることがあります。最新のバージョンにアップデートすることで、問題が解決される場合があります。

2. コードに構文エラーがあるかどうか確認する。

JavaScriptの構文エラーがあると、コードが動作しなくなることがあります。コードに構文エラーがないかを確認することで、問題が解決される場合があります。

3. ブラウザの開発者ツールでエラーを確認する。

ブラウザの開発者ツールを開いて、コンソールに表示されるエラーメッセージを確認することで、問題の原因を特定することができます。エラーメッセージを元に、必要な修正を行うことで、問題が解決される場合があります。

4. 別のブラウザで動作確認する。

同じコードが別のブラウザで動作するかどうかを確認することで、問題がブラウザ側の問題か、コード側の問題かを切り分けることができます。他のブラウザで動作する場合は、使用していたブラウザの設定を調整することで問題が解決される場合があります。

Chrome のブラウザの開発者ツールでエラーを確認する方法を教えてください

Chromeの開発者ツールでエラーを確認するには、以下の手順を実行します。

  1. Chromeを開いて、対象のWebページを開きます。
  2. ブラウザの右上隅にある3つの点が並んだアイコン(設定ボタン)をクリックし、"その他のツール"を選択します。
  3. "開発者ツール"を選択します。
  4. 開発者ツールが開かれたら、画面下部にある"Console"を選択します。
  5. エラーが発生している場合は、エラーメッセージが表示されます。エラーメッセージの内容を確認し、必要に応じて修正します。

上記の手順でエラーを確認できます。また、開発者ツールには、デバッグに役立つ機能が豊富に備わっていますので、是非活用してください。

上記のコードで gachaProbabilityRange.value.toFixed is not a function というエラーが出でるので、修正してください。

ご指摘いただきありがとうございます。toFixed()は数値型に対して使えるメソッドですが、gachaProbabilityRange.value は文字列型であるため、先に数値型に変換する必要があります。以下は修正済みのコードです。

上記のコードは計算を間違えています。あたりの確率1%のガチャを 100 回やっても当たる確率は 100% にはなりません。

ご指摘ありがとうございます。確率の計算式に誤りがあり、当たる確率が実際よりも高くなっていました。以下のように修正することで正しい結果が出力されるようになります。

function calculateProbability() {
    const gachaCount = gachaCountRange.value;
    const gachaProbability = gachaProbabilityRange.value / 100;
    const successProbability = 1 - Math.pow(1 - gachaProbability, gachaCount);
    return successProbability;
  }

修正前の式では、1 - (1 - 0.01) ^ 100 = 0.634が返されていましたが、正しい式では1 - (1 - 0.01) ^ 100 ≈ 0.633となります。

※このコードはまだバグがある。gachaProbabilityRange.value / 100 が gachaProbabilityRange.value / 1000 でなければならない。

"1回のガチャの当たる確率" の上限が 10% になっているので 100% まで選択できるように修正してください。

修正後のコードを以下に示します。

※gachaProbabilityRange.value / 100 が gachaProbabilityRange.value / 1000 に修正されたので計算も合うようになった。


広告
広告