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

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

## デジタルツールを活用して便利に調べられないのか
少し前、LINEBotで西暦和暦変換アプリを作って好評だったので、また何か作ろうという気持ちは常にあります。
（LINEBotで西暦和暦変換の記事は下記となります）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">みんさん、お盆休みはどのように過ごしていますか<br>下記の記事を書きましたので、読んでくださいね<br>西暦を和暦に変換して教えてくれる！ <a href="https://twitter.com/hashtag/LINEBOT?src=hash&amp;ref_src=twsrc%5Etfw">#LINEBOT</a> <a href="https://twitter.com/hashtag/Make?src=hash&amp;ref_src=twsrc%5Etfw">#Make</a> <a href="https://twitter.com/hashtag/PROTOOUT?src=hash&amp;ref_src=twsrc%5Etfw">#PROTOOUT</a> <a href="https://twitter.com/hashtag/SSSAPI?src=hash&amp;ref_src=twsrc%5Etfw">#SSSAPI</a> <a href="https://twitter.com/hashtag/GoogleSheets?src=hash&amp;ref_src=twsrc%5Etfw">#GoogleSheets</a> <a href="https://t.co/7hPWmj4xYw">https://t.co/7hPWmj4xYw</a> <a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a></p>&mdash; トミー (@h21550) <a href="https://twitter.com/h21550/status/1690325254768590848?ref_src=twsrc%5Etfw">August 12, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

では、どのように作るか？まったく見当がつかないので、最近のはやりであるChatGPTに聞いてみようと思いました。
これまでGoogle先生に聞いたりして、作成をしていたのですが、今回、初めてChatGPT先生に聞きました。結果、ほぼ作ってもらったほどお世話になりました。
ChatGPT先生とのやり取りと制作過程をご紹介します。
まず、完成品はこちらです。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">新作のアプリ　切手金額計算 <a href="https://t.co/Glj96799Wk">pic.twitter.com/Glj96799Wk</a></p>&mdash; トミー (@h21550) <a href="https://twitter.com/h21550/status/1706497767810715989?ref_src=twsrc%5Etfw">September 26, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 目次
[使用したツール](#使用したツール)
[制作過程１](#制作過程１)
[制作過程２](#制作過程２) 
[使った感想](#使ってもらった感想)
[作ってみた感想](#作ってみた感想)
[さらなるチェレンジ](#さらなるチェレンジ)

# 使用したツール：
### ・ChatGPT
### ・codepen

# 制作過程１
# ChatGPTとのやり取り：
## 1.最初の質問で以下の回答を得ました。
![スクリーンショット (23).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/fdb39eb4-1402-298a-4b76-05207074e1ee.png)
<details>
<summary>コードはこちら①。　<font color="Red">折りたたんでます。</summary>

```js
<!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>

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


## 2.計算式の入れ方を聞きました。
![スクリーンショット (24).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/6e0e3756-be33-ad36-3b73-d1723be64ec0.png)

<details>
<summary>コードはこちら②。　<font color="Red">折りたたんでます。</summary>

```js
<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>

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

## 3.切手の価格のルールを書き込んでもらいました。
![スクリーンショット (25).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/777b0b04-f6f3-a95f-eedf-6b5d8af179dd.png)


<details>
<summary>コードはこちら③。　<font color="Red">折りたたんでます。</summary>

```js
<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>

```
</details>

## 4.質問3で書いてもらったコードを質問1のコードに組み込んでもらいました。
![スクリーンショット (26).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/bfb6373e-3107-57a1-b889-a9c93a7e3895.png)


<details>
<summary>コードはこちら④。　<font color="Red">折りたたんでます。</summary>

```js
<!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>

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

# 制作過程２
# codepenにChatGPTに書いてもらった上記4のコードを入れ込みました。
![codepen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/7ebd6c1d-7012-8257-a4e9-5a83a57936bf.png)

# 完成品
![金額計算.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/ddfccfcb-6e31-b73d-5b3d-9ccafcaa00e8.png)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="WNLzJXR" data-user="hitomi-tominaga" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hitomi-tominaga/pen/WNLzJXR">
  Untitled</a> by hitomi tominaga (<a href="https://codepen.io/hitomi-tominaga">@hitomi-tominaga</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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

# 作ってみた感想
これまで、LINEBot、Makeなど使っていたが、codepenはほかのと比べて、断然に設定が簡単で、使いやすいです。また、ChatGPT先生の凄さを実感できました。しかし、記事を書いてもらおうと試みましたが、思うようにうまくいきませんでした。
# さらなるチェレンジ
同僚から励ましの言葉もいただき、また、ChatGPTを活用したことで、作成時間が短縮されたので、似ているような悩み解決ツールもう一本作りました。
契約書に収入印紙を貼り付けるが、いくら必要なのか、契約書の記載金額によって異なります。実務上印紙金額を便利に調べられるツールとして作成しました。
ChatGPTとのやり取りで自分も賢くなり、質問の仕方を変えて、一発で書いてほしいコードを出してもらいました。
![スクリーンショット (28).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3505389/ab87ef33-dc2f-f5dc-7039-538751f1e122.png)
作成過程は割愛しますが、完成品をご覧ください。
アプリをかわいく装飾する時間も確保できたので、2つのアプリそれぞれの色、柄をデザインしてみました。

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="MWZVPJz" data-user="hitomi-tominaga" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/hitomi-tominaga/pen/MWZVPJz">
  Untitled</a> by hitomi tominaga (<a href="https://codepen.io/hitomi-tominaga">@hitomi-tominaga</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
これを契約作成担当のCさんとDさんに使ってもらったら、AさんとBさんと同じリアクションでした。素直にうれしいです。
そして、契約の種類を細分化したタイプも作ってほしいとのリクエストもいただきました。
これでモチベーションが上がり、これからも研鑽していきます！