Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@yuma-blau56(井上 結麻)inプロトアウトスタジオ

【初心者】ChatGPTに聞いてみた！売り上げと粗利益の計算がすぐできる！

Last updated at Posted at 2023-11-03

ついに4度目の投稿です！
食品スーパーに勤めて3年目、私は日用品売り場を担当しています。
前回は Glide を使用してアプリを作ってみました。こちらも是非読んでみてください！
☟前回の記事はこちら

そして今回は、「 ChatGPT を使って何か業務改善につながることが出来るかな～」と思って実践してみました！

完成したものがこちら

いちいち計算することがめんどくさい

食品スーパーで働いているので、 売上（うりあげ）と粗利益 を上げることは大切です。
ではどのように計画を立てていくのか…。
私は、より粗利益を得ることが出来るように考えます。粗利益とは、売上高から売上原価を差し引いた金額です。この金額がお店の利益につながるのです。同じ金額で同じだけの数量を販売したとして例を挙げてみます。

【商品①】
1品の価格：298円　
原価：258円　
販売数量：100個
粗利益：(298-258)×100＝4,000円

【商品②】
1品の価格：298円
原価：218円　
販売数量：100個
粗利益：(298-218)×100＝8,000円

さて、【商品①】と【商品②】ではどちらの方が粗利益を得ることが出来ますか？答えは【商品②】ですね。このように、販売計画を立てる際には、このような計算が必要となってきます。これが地味に大変なのです。簡単に計算してくれるシステムが出来ればいいなと思い、ChatGPTに助けを求めてみました。

まずは使ってみてください

See the Pen Untitled by 井上結麻 (@xpmuxccp-the-styleful) on CodePen.

ChatGPTを初めて使用してみましたが、あっという間にできてしまったので驚きました。
初めてで手探り状態でしたが、 1時間 もかかっていないと思います。
粗利益を求めるといいましたが、商品が売れる前は売価から原価を差し引いたものは 値入れ額 といいます。商品が売れた時点で値入れ額は粗利益となるので、この計算アプリでは値入れ額と表示してあります。

使用するツール

使用するのは、2つになります。

ChatGPTでは

1. まず、簡単にこんな感じのアプリを作りたいとChatGPTに入力します。今回はCodePenを使用するので、求めるコードはHTMLコードです。
スクリーンショット 2023-11-03 174427.png
ChatGPTの返答
スクリーンショット 2023-11-03 175510.png

ChatGPTが提示したコードはこちら
ChatGPTが提示したコード
<!DOCTYPE html>
<html>
<head>
    <title>価格計算アプリ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>価格計算アプリ</h2>
        <label for="salesPrice">売価（円）:</label>
        <input type="number" id="salesPrice" placeholder="売価を入力してください">
        <br>
        <label for="costPrice">原価（円）:</label>
        <input type="number" id="costPrice" placeholder="原価を入力してください">
        <br>
        <button onclick="calculateProfit()">計算</button>
        <p>値入れ額: <span id="profitAmount">0</span> 円</p>
        <p>値入れ率: <span id="profitPercentage">0</span>%</p>
    </div>

    <script>
        function calculateProfit() {
            const salesPrice = parseFloat(document.getElementById('salesPrice').value);
            const costPrice = parseFloat(document.getElementById('costPrice').value);

            if (isNaN(salesPrice) || isNaN(costPrice)) {
                alert('正しい金額を入力してください');
                return;
            }

            const profitAmount = salesPrice - costPrice;
            const profitPercentage = (profitAmount / costPrice) * 100;

            document.getElementById('profitAmount').textContent = profitAmount.toFixed(2);
            document.getElementById('profitPercentage').textContent = profitPercentage.toFixed(2);
        }
    </script>
</body>
</html>

☟このコードでできたアプリ
スクリーンショット 2023-11-03 154912.png

2. 計画は予算をもとに考えることを忘れていました。なので、ここで予算を入力するところを追加します。さらに、その予算を達成するためにはいくつ販売するべきか計算してもらいます。
スクリーンショット 2023-11-03 174503.png
ChatGPTの返答
スクリーンショット 2023-11-03 175544.png

ChatGPTが提示したコードはこちら
ChatGPTが提示したコード
<!DOCTYPE html>
<html>
<head>
    <title>価格計算アプリ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>価格計算アプリ</h2>
        <label for="salesPrice">売価（円）:</label>
        <input type="number" id="salesPrice" placeholder="売価を入力してください">
        <br>
        <label for="costPrice">原価（円）:</label>
        <input type="number" id="costPrice" placeholder="原価を入力してください">
        <br>
        <label for="budget">予算（円）:</label>
        <input type="number" id="budget" placeholder="予算を入力してください">
        <br>
        <button onclick="calculateProfit()">計算</button>
        <p>値入れ額: <span id="profitAmount">0</span> 円</p>
        <p>値入れ率: <span id="profitPercentage">0</span>%</p>
        <p>予算達成に必要な販売数: <span id="salesQuantity">0</span> 個</p>
    </div>

    <script>
        function calculateProfit() {
            const salesPrice = parseFloat(document.getElementById('salesPrice').value);
            const costPrice = parseFloat(document.getElementById('costPrice').value);
            const budget = parseFloat(document.getElementById('budget').value);

            if (isNaN(salesPrice) || isNaN(costPrice) || isNaN(budget)) {
                alert('正しい金額を入力してください');
                return;
            }

            const profitAmount = salesPrice - costPrice;
            const profitPercentage = (profitAmount / costPrice) * 100;
            const salesQuantity = Math.ceil(budget / profitAmount);

            document.getElementById('profitAmount').textContent = profitAmount.toFixed(2);
            document.getElementById('profitPercentage').textContent = profitPercentage.toFixed(2);
            document.getElementById('salesQuantity').textContent = salesQuantity;
        }
    </script>
</body>
</html>

☟このコードでできたアプリ
スクリーンショット 2023-11-03 160535.png

3. やけに販売数が多いと思ったら、原価を基準にして計算されていました。予算は昨年の売上から作成されるので、売価を基準にするように直してもらいます。
スクリーンショット 2023-11-03 174519.png
ChatGPTの返答
スクリーンショット 2023-11-03 175557.png

ChatGPTが提示したコードはこちら
ChatGPTが提示したコード
<!DOCTYPE html>
<html>
<head>
    <title>価格計算アプリ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>価格計算アプリ</h2>
        <label for="salesPrice">売価（円）:</label>
        <input type="number" id="salesPrice" placeholder="売価を入力してください">
        <br>
        <label for="costPrice">原価（円）:</label>
        <input type="number" id="costPrice" placeholder="原価を入力してください">
        <br>
        <label for="budget">予算（円）:</label>
        <input type="number" id="budget" placeholder="予算を入力してください">
        <br>
        <button onclick="calculateProfit()">計算</button>
        <p>値入れ額: <span id="profitAmount">0</span> 円</p>
        <p>値入れ率: <span id="profitPercentage">0</span>%</p>
        <p>予算達成に必要な販売数: <span id="salesQuantity">0</span> 個</p>
    </div>

    <script>
        function calculateProfit() {
            const salesPrice = parseFloat(document.getElementById('salesPrice').value);
            const costPrice = parseFloat(document.getElementById('costPrice').value);
            const budget = parseFloat(document.getElementById('budget').value);

            if (isNaN(salesPrice) || isNaN(costPrice) || isNaN(budget)) {
                alert('正しい金額を入力してください');
                return;
            }

            const profitAmount = salesPrice - costPrice;
            const profitPercentage = (profitAmount / costPrice) * 100;
            const salesQuantity = Math.ceil(budget / salesPrice);

            document.getElementById('profitAmount').textContent = profitAmount.toFixed(2);
            document.getElementById('profitPercentage').textContent = profitPercentage.toFixed(2);
            document.getElementById('salesQuantity').textContent = salesQuantity;
        }
    </script>
</body>
</html>

☟このコードでできたアプリ
スクリーンショット 2023-11-03 160213.png

4. 売価は高いけどそこそこ売れる、売価が安いためすごく売れている。このような商品を比較したいということがあるので、2つの商品の価格を入力できるようにしました。
スクリーンショット 2023-11-03 174529.png
ChatGPTの返答
スクリーンショット 2023-11-03 175609.png

ChatGPTが提示したコードはこちら
ChatGPTが提示したコード
<!DOCTYPE html>
<html>
<head>
    <title>価格計算アプリ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>価格比較アプリ</h2>
        <div class="product">
            <h3>商品1</h3>
            <label for="salesPrice1">売価（円）:</label>
            <input type="number" id="salesPrice1" placeholder="売価を入力してください">
            <br>
            <label for="costPrice1">原価（円）:</label>
            <input type="number" id="costPrice1" placeholder="原価を入力してください">
            <br>
        </div>
        <div class="product">
            <h3>商品2</h3>
            <label for="salesPrice2">売価（円）:</label>
            <input type="number" id="salesPrice2" placeholder="売価を入力してください">
            <br>
            <label for="costPrice2">原価（円）:</label>
            <input type="number" id="costPrice2" placeholder="原価を入力してください">
            <br>
        </div>
        <label for="budget">予算（円）:</label>
        <input type="number" id="budget" placeholder="予算を入力してください">
        <br>
        <button onclick="calculateProfit()">計算</button>
        <p>商品1の値入れ額: <span id="profitAmount1">0</span> 円</p>
        <p>商品1の値入れ率: <span id="profitPercentage1">0</span>%</p>
        <p>商品2の値入れ額: <span id="profitAmount2">0</span> 円</p>
        <p>商品2の値入れ率: <span id="profitPercentage2">0</span>%</p>
        <p>予算達成に必要な販売数（商品1）: <span id="salesQuantity1">0</span> 個</p>
        <p>予算達成に必要な販売数（商品2）: <span id="salesQuantity2">0</span> 個</p>
    </div>

    <script>
        function calculateProfit() {
            const salesPrice1 = parseFloat(document.getElementById('salesPrice1').value);
            const costPrice1 = parseFloat(document.getElementById('costPrice1').value);
            const salesPrice2 = parseFloat(document.getElementById('salesPrice2').value);
            const costPrice2 = parseFloat(document.getElementById('costPrice2').value);
            const budget = parseFloat(document.getElementById('budget').value);

            if (isNaN(salesPrice1) || isNaN(costPrice1) || isNaN(salesPrice2) || isNaN(costPrice2) || isNaN(budget)) {
                alert('正しい金額を入力してください');
                return;
            }

            const profitAmount1 = salesPrice1 - costPrice1;
            const profitPercentage1 = (profitAmount1 / costPrice1) * 100;
            const salesQuantity1 = Math.ceil(budget / salesPrice1);

            const profitAmount2 = salesPrice2 - costPrice2;
            const profitPercentage2 = (profitAmount2 / costPrice2) * 100;
            const salesQuantity2 = Math.ceil(budget / salesPrice2);

            document.getElementById('profitAmount1').textContent = profitAmount1.toFixed(2);
            document.getElementById('profitPercentage1').textContent = profitPercentage1.toFixed(2);
            document.getElementById('profitAmount2').textContent = profitAmount2.toFixed(2);
            document.getElementById('profitPercentage2').textContent = profitPercentage2.toFixed(2);
            document.getElementById('salesQuantity1').textContent = salesQuantity1;
            document.getElementById('salesQuantity2').textContent = salesQuantity2;
        }
    </script>
</body>
</html>

☟このコードでできたアプリ
スクリーンショット 2023-11-03 160828.png

5. 最後の作業となります。人それぞれ感覚が違うのでわかりませんが、私は 4 の状態だと見にくかったので、このようにお願いしました。
スクリーンショット 2023-11-03 174541.png
ChatGPTの返答
スクリーンショット 2023-11-03 175630.png

ChatGPTが提示したコードはこちら
ChatGPTが提示したコード
<!DOCTYPE html>
<html>
<head>
    <title>価格比較アプリ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            text-align: center;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        input {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
        }

        .comparison {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .product {
            width: 48%;
            margin: 1%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>価格比較アプリ</h2>
        <label for="budget">予算（円）:</label>
        <input type="number" id="budget" placeholder="予算を入力してください">
        <br>
        <div class="comparison">
            <div class="product">
                <h3>商品1</h3>
                <label for="salesPrice1">売価（円）:</label>
                <input type="number" id="salesPrice1" placeholder="売価を入力してください">
                <br>
                <label for="costPrice1">原価（円）:</label>
                <input type="number" id="costPrice1" placeholder="原価を入力してください">
                <br>
                <p>値入れ額: <span id="profitAmount1">0</span> 円</p>
                <p>値入れ率: <span id="profitPercentage1">0</span>%</p>
                <p>予算達成に必要な販売数: <span id="salesQuantity1">0</span> 個</p>
            </div>
            <div class="product">
                <h3>商品2</h3>
                <label for="salesPrice2">売価（円）:</label>
                <input type="number" id="salesPrice2" placeholder="売価を入力してください">
                <br>
                <label for "costPrice2">原価（円）:</label>
                <input type="number" id="costPrice2" placeholder="原価を入力してください">
                <br>
                <p>値入れ額: <span id="profitAmount2">0</span> 円</p>
                <p>値入れ率: <span id="profitPercentage2">0</span>%</p>
                <p>予算達成に必要な販売数: <span id="salesQuantity2">0</span> 個</p>
            </div>
        </div>
        <button onclick="calculateProfit()">計算</button>
    </div>

    <script>
        function calculateProfit() {
            const budget = parseFloat(document.getElementById('budget').value);

            if (isNaN(budget)) {
                alert('正しい予算を入力してください');
                return;
            }

            const salesPrice1 = parseFloat(document.getElementById('salesPrice1').value);
            const costPrice1 = parseFloat(document.getElementById('costPrice1').value);
            const salesPrice2 = parseFloat(document.getElementById('salesPrice2').value);
            const costPrice2 = parseFloat(document.getElementById('costPrice2').value);

            if (isNaN(salesPrice1) || isNaN(costPrice1) || isNaN(salesPrice2) || isNaN(costPrice2)) {
                alert('正しい金額を入力してください');
                return;
            }

            const profitAmount1 = salesPrice1 - costPrice1;
            const profitPercentage1 = (profitAmount1 / costPrice1) * 100;
            const salesQuantity1 = Math.ceil(budget / salesPrice1);

            const profitAmount2 = salesPrice2 - costPrice2;
            const profitPercentage2 = (profitAmount2 / costPrice2) * 100;
            const salesQuantity2 = Math.ceil(budget / salesPrice2);

            document.getElementById('profitAmount1').textContent = profitAmount1.toFixed(2);
            document.getElementById('profitPercentage1').textContent = profitPercentage1.toFixed(2);
            document.getElementById('salesQuantity1').textContent = salesQuantity1;

            document.getElementById('profitAmount2').textContent = profitAmount2.toFixed(2);
            document.getElementById('profitPercentage2').textContent = profitPercentage2.toFixed(2);
            document.getElementById('salesQuantity2').textContent = salesQuantity2;
        }
    </script>
</body>
</html>

☟このコードでできたアプリ
スクリーンショット 2023-11-03 161251.png

横並びにはなりませんでした。
ですが 4 よりは商品ごとで表示されるようになって見やすくなったと思います。
どのようにすれば横並びにして比較しやすくできるか、調べていきたいと思います。

さらにおしゃれにしてみました

白いままだと少しつまらなかったので、デザインをしてみました。
とはいっても、素敵なサイトを参考にさせていただいたのでご紹介します。
☟タイトルの部分

☟背景の部分

CodePenでは真ん中の部分になりますが、このようにウェブページのスタイル・デザインを設定するコードを CSSコード といいます。この部分にコードを入れていきます。
このコードに関しても、今回はどのようなものがあるかサイトで探しましたが、ChatGPTにわかりやすく質問してみたらできるかもしれませんね。

このアプリのCSSコードはこちら
CSSコード

h2 {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fff100;
}

h2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

body{
  background:#ec6a38;
  -webkit-animation:colour 10s linear infinite;
  -moz-animation:colour 10s linear infinite;
  
}
@-webkit-keyframes colour{
  0%{
    background:#ec6a38
  }

  40%{
    background:#ec4038
  }

  80%{
    background:#ec9138
  }

  100%{
    background:#ec6a38
  }

}

@-moz-keyframes colour{
  0%{
    background:#ec6a38
  }

  40%{
    background:#ec4038
  }

  80%{
    background:#ec9138
  }

  100%{
    background:#ec6a38
  }

}
h1{
  font-family:arial;
  margin-top:100px;
  color:#fff;
  font-size:50px;
  text-align:center;
  text-transform:uppercase;
}

最後に

今回も前回同様、初心者でも早く作成できました。今の私ではこのアプリを完成させるまでどのくらいかかるかわからないですが、1時間で終わらないことは確かです。 ChatGPT がどれだけ便利なのか知ることができて、よい機会となりました。
時間もできたので、前回使用した Glide で他にも業務改善につながるツールがあるか探すことが出来ました。少し紹介させてください。

① Audio to Text ：音声をテキストに変換します。メモを取ることも大切ですが、聞き逃したくないと思ったり、書くのが遅いから疲れると思うことはありませんか？そんな時にこのアプリを使えたらちょっとした業務改善、ストレス解消につながると思いました。
② Work Order Management ：作業指示書テンプレートを使用して、仕事内容を効率的に管理し、それを従業員に割り当てます。このアプリを使用すれば、「今日はどの仕事に取り組めばよいのか」ということを前もって知ることが出来ます。従業員同士でスケジュールを確認することで、業務を重複して実施してしまうこともないですし、重要な業務改善につながると思います。

今回も最後までありがとうございました！
少しでも皆さんのお悩み解決のきっかけになりますように！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?