More than 1 year has passed since last update.

ChatGPTが書いたコードで切手計算アプリ作成！

Last updated at 2023-09-29Posted at 2023-09-26

これって切手いくら必要？

普段のオフィスでよく聞かれる会話ではないでしょうか。
手紙の重さを量ってからインタネットで郵便局のホームページで切手の金額を確認する手間がかかる、面倒だなと思ったことはありますか。

デジタルツールを活用して便利に調べられないのか

少し前、LINEBotで西暦和暦変換アプリを作って好評だったので、また何か作ろうという気持ちは常にあります。
（LINEBotで西暦和暦変換の記事は下記となります）

みんさん、お盆休みはどのように過ごしていますか
下記の記事を書きましたので、読んでくださいね
西暦を和暦に変換して教えてくれる！ #LINEBOT #Make #PROTOOUT #SSSAPI #GoogleSheets https://t.co/7hPWmj4xYw #Qiita
— トミー (@h21550) August 12, 2023

では、どのように作るか？まったく見当がつかないので、最近のはやりであるChatGPTに聞いてみようと思いました。
これまでGoogle先生に聞いたりして、作成をしていたのですが、今回、初めてChatGPT先生に聞きました。結果、ほぼ作ってもらったほどお世話になりました。
ChatGPT先生とのやり取りと制作過程をご紹介します。
まず、完成品はこちらです。

新作のアプリ　切手金額計算 pic.twitter.com/Glj96799Wk
— トミー (@h21550) September 26, 2023

使用したツール：

・ChatGPT

・codepen

制作過程１

ChatGPTとのやり取り：

1.最初の質問で以下の回答を得ました。

コードはこちら①。　折りたたんでます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切手金額計算</title>
    <style>
        /* スタイルを追加することができます */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>切手金額計算</h1>
    <label for="weight">重さ（g）：</label>
    <input type="number" id="weight" placeholder="重さを入力してください">
    <button onclick="calculateStampPrice()">計算</button>
    <p id="result">切手金額はここに表示されます。</p>

    <script>
        function calculateStampPrice() {
            const weightInput = document.getElementById("weight");
            const resultParagraph = document.getElementById("result");

            // 入力された重さを取得
            const weight = parseFloat(weightInput.value);

            // 重さに基づいて切手の金額を計算（簡略化のため、具体的な計算式は省略）
            // ここに計算式を追加

            // 結果を表示
            resultParagraph.textContent = `切手金額は ${計算結果} 円です。`;
        }
    </script>
</body>
</html>

これでは重さと金額の計算ロジックを追加する必要があリます。どこに追加すればよいのか、さっぱりわからないです。再度質問することにしました。

2.計算式の入れ方を聞きました。

コードはこちら②。　折りたたんでます。

<script>
    function calculateStampPrice() {
        const weightInput = document.getElementById("weight");
        const resultParagraph = document.getElementById("result");

        // 入力された重さを取得
        const weight = parseFloat(weightInput.value);

        // 1gあたりの価格（仮の値：10円）を設定
        const pricePerGram = 10;

        // 切手の金額を計算
        const stampPrice = weight * pricePerGram;

        // 結果を表示
        resultParagraph.textContent = `切手金額は ${stampPrice} 円です。`;
    }
</script>

実際の切手の価格のルールを入れる必要があります。

3.切手の価格のルールを書き込んでもらいました。

コードはこちら③。　折りたたんでます。

<script>
    function calculateStampPrice() {
        const weightInput = document.getElementById("weight");
        const resultParagraph = document.getElementById("result");

        // 入力された重さを取得
        const weight = parseFloat(weightInput.value);

        // 重さに応じて切手の金額を計算
        let stampPrice;

        if (weight <= 25) {
            stampPrice = 84;
        } else if (weight <= 50) {
            stampPrice = 94;
        } else if (weight <= 100) {
            stampPrice = 140;
        } else if (weight <= 150) {
            stampPrice = 210;
        } else {
            // 重さが150gを超える場合、エラーメッセージを表示
            resultParagraph.textContent = "150gを超える重さは対応していません。";
            return;
        }

        // 結果を表示
        resultParagraph.textContent = `切手金額は ${stampPrice} 円です。`;
    }
</script>

4.質問3で書いてもらったコードを質問1のコードに組み込んでもらいました。

コードはこちら④。　折りたたんでます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>切手金額計算</title>
    <style>
        /* スタイルを追加することができます */
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>切手金額計算</h1>
    <label for="weight">重さ（g）：</label>
    <input type="number" id="weight" placeholder="重さを入力してください">
    <button onclick="calculateStampPrice()">計算</button>
    <p id="result">切手金額はここに表示されます。</p>

    <script>
        function calculateStampPrice() {
            const weightInput = document.getElementById("weight");
            const resultParagraph = document.getElementById("result");

            // 入力された重さを取得
            const weight = parseFloat(weightInput.value);

            // 重さに応じて切手の金額を計算
            let stampPrice;

            if (weight <= 25) {
                stampPrice = 84;
            } else if (weight <= 50) {
                stampPrice = 94;
            } else if (weight <= 100) {
                stampPrice = 140;
            } else if (weight <= 150) {
                stampPrice = 210;
            } else {
                // 重さが150gを超える場合、エラーメッセージを表示
                resultParagraph.textContent = "150gを超える重さは対応していません。";
                return;
            }

            // 結果を表示
            resultParagraph.textContent = `切手金額は ${stampPrice} 円です。`;
        }
    </script>
</body>
</html>

これで必要なHTMLのコードを書いてもらいました。

制作過程２

codepenにChatGPTに書いてもらった上記4のコードを入れ込みました。

完成品

See the Pen Untitled by hitomi tominaga (@hitomi-tominaga) on CodePen.

使ってもらった感想

部署全体の書類の送付等アシスタント業務を担当しているAさんとBさんに試してもらいました。

感想
・また何か作ったの？よく考えたね！
・簡単に計算してくれるね、仕組みは自分には理解できないけど
・自分のPCに入れるのが面倒だから、共有PCに入れてほしい
・ほかにも作って、アイデアが浮かんだら、言うから実現してくれると信じている

作ってみた感想

これまで、LINEBot、Makeなど使っていたが、codepenはほかのと比べて、断然に設定が簡単で、使いやすいです。また、ChatGPT先生の凄さを実感できました。しかし、記事を書いてもらおうと試みましたが、思うようにうまくいきませんでした。

さらなるチェレンジ

同僚から励ましの言葉もいただき、また、ChatGPTを活用したことで、作成時間が短縮されたので、似ているような悩み解決ツールもう一本作りました。
契約書に収入印紙を貼り付けるが、いくら必要なのか、契約書の記載金額によって異なります。実務上印紙金額を便利に調べられるツールとして作成しました。
ChatGPTとのやり取りで自分も賢くなり、質問の仕方を変えて、一発で書いてほしいコードを出してもらいました。

作成過程は割愛しますが、完成品をご覧ください。
アプリをかわいく装飾する時間も確保できたので、2つのアプリそれぞれの色、柄をデザインしてみました。