見出し画像

chatGPTでノーコード開発。円ドル変換をWEBからの最新データで変換します。

hantani

chatGPTでノーコード

円からドルへ変換するプログラムを作ってもらいましょう。

レートは現在時点のをネットから取ってきてもらいます。

以下、QはchatGPT4への質問、AはchatGPT4からの回答です。

Q.あなたはプログラマです。htmlファイル１つで円を入力すると何ドルか計算して表示するプログラムを作ってください。最新のドル円レートはネットから取得お願いします。
A.私は実際にプログラムを実行することができませんが、以下のHTMLファイルを作成して円からドルに変換するプログラムのコード例を提供できます。この例では、JavaScriptを使用して円からドルに変換し、最新の為替レートを取得するためにfetch APIを利用しています。

以下のコードを新しいHTMLファイルにコピーしてください:

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>円からドルへの変換</title>
  <script>
    async function fetchExchangeRate() {
      const url = 'https://api.exchangerate-api.com/v4/latest/JPY';
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      return data.rates.USD;
    }

    async function convertToDollar() {
      const yenInput = document.getElementById('yen-input').value;
      const dollarOutput = document.getElementById('dollar-output');

      try {
        const exchangeRate = await fetchExchangeRate();
        const dollarAmount = yenInput / exchangeRate;
        dollarOutput.textContent = `変換後: $${dollarAmount.toFixed(2)}`;
      } catch (error) {
        console.error(error);
        dollarOutput.textContent = '為替レートの取得に失敗しました。';
      }
    }
  </script>
</head>
<body>
  <h1>円からドルへの変換</h1>
  <input type="number" id="yen-input" placeholder="円を入力してください" step="0.01" min="0">
  <button onclick="convertToDollar()">変換する</button>
  <p id="dollar-output"></p>
</body>
</html>

上記のコードは、指定されたAPI（https://api.exchangerate-api.com/v4/latest/JPY ）から最新の為替レートを取得し、入力された円をドルに変換して表示します。このコードを保存し、ウェブブラウザでファイルを開いてください。円を入力し、「変換する」ボタンをクリックすると、結果が表示されます。

Q.1000円を入れると変換後: $132100.40と表示されました。実際は＄7.57です
A.すみません、為替レートの計算が間違っていました。以下の修正済みのコードをお試しください：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>円からドルへの変換</title>
  <script>
    async function fetchExchangeRate() {
      const url = 'https://api.exchangerate-api.com/v4/latest/JPY';
      const response = await fetch(url);

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      const data = await response.json();
      return data.rates.USD;
    }

    async function convertToDollar() {
      const yenInput = document.getElementById('yen-input').value;
      const dollarOutput = document.getElementById('dollar-output');

      try {
        const exchangeRate = await fetchExchangeRate();
        const dollarAmount = yenInput * exchangeRate;
        dollarOutput.textContent = `変換後: $${dollarAmount.toFixed(2)}`;
      } catch (error) {
        console.error(error);
        dollarOutput.textContent = '為替レートの取得に失敗しました。';
      }
    }
  </script>
</head>
<body>
  <h1>円からドルへの変換</h1>
  <input type="number" id="yen-input" placeholder="円を入力してください" step="0.01" min="0">
  <button onclick="convertToDollar()">変換する</button>
  <p id="dollar-output"></p>
</body>
</html>

これで、円をドルに正しく変換するはずです。再度お試しください。

今度はうまく動きました。

この記事が気に入ったらサポートをしてみませんか？