はじめに

こんにちは！今日は『電脳せどり』向けの利益計算ツールを開発してみました。

🛠️ 作ったもの

（右上にある利益計算ツールが開発したやつです。）

販売価格、原価、配送料を入れるだけで、手数料10%を自動計算して利益と利益率を瞬時に出してくれる機能です。もし赤字（マイナス）になった場合は、利益の文字が赤くなって教えてくれます。

📂 構成ファイル
フォルダの中に以下の4つのファイルを作成するだけで動きます。

{
  "manifest_version": 3,
  "name": "利益計算ツール",
  "version": "1.0.0",
  "description": "サクッと利益と利益率を計算できるツール",
  "action": {
    "default_popup": "popup.html"
  }
}

<!DOCTYPE html>
<html>
<body>
  <h3>利益計算</h3>
  
  <p>販売価格: <input type="number" id="price" value="2000"></p>
  <p>仕入原価: <input type="number" id="cost" value="500"></p>
  <p>配送料金: <input type="number" id="shipping" value="210"></p>
  
  <hr>
  
  <p>利益: <span id="profit">0</span> 円</p>
  <p>利益率: <span id="margin">0</span> %</p>

  <script src="popup.js"></script>
</body>
</html>

/* ポップアップの全体のサイズだけを指定（これがないと極小になるため） */
body {
  width: 200px;
  font-family: sans-serif;
  padding: 5px;
}
input {
  width: 80px;
}

popup.js

const calculate = () => {
  // 1. 入力された値を取得
  const price = Number(document.getElementById('price').value);
  const cost = Number(document.getElementById('cost').value);
  const shipping = Number(document.getElementById('shipping').value);

  // 2. 計算（手数料10%）
  const fee = Math.floor(price * 0.1);
  const profit = price - cost - shipping - fee;
  const margin = price > 0 ? ((profit / price) * 100).toFixed(1) : 0;

  // 3. 画面に表示
  document.getElementById('profit').innerText = profit;
  document.getElementById('margin').innerText = margin;
};

// 入力されたら計算を実行する
document.getElementById('price').oninput = calculate;
document.getElementById('cost').oninput = calculate;
document.getElementById('shipping').oninput = calculate;

// 起動時に1回計算
calculate();

💡 工夫したところ・学んだこと
・リアルタイム性：入力すると自動で再計算が走るようにしました。
・UI/UX：ワンクリックで計算ツールを呼び出せる仕様にしました。

最後に

セカストなどのサイトを見ている時に『これいくらの利益になるだろうかな？』と毎回スマホアプリで行っていたものをブラウザでも出来るようにしました❗️

インストール後はブラウザの右上からいつでも1秒で呼び出せるのがとても便利です！

今回もβ版テスターを募集します💡
皆さんの応募を是非お待ちしております❗️

👉 メルプロベータ版応募フォーム
https://docs.google.com/forms/d/e/1FAIpQLSdJgPjVqALnbF0-9tLFu_tevYIC6vF6pUNB3Y59SDGVVLebIg/viewform