どうも、KJ9です。
今日はバスケ好きならちょっと気になるであろう「シュート成功率」を手軽に計算できるWebツールを作ってみました。

練習や試合で「今日の俺のシュート、どれくらい入ってるんだろ？」って気になる瞬間、ありますよね？そんなときに便利なのがこれ。

ツールの使い方は超シンプル

こんな画面になってます。

• 試投数（何本打ったか）を入力
• 成功数（入った本数）を入力
• あとは「計算する」ボタンをポチッ

するとすぐに成功率を出してくれます。

実際のコード

今回のツールは HTML + CSS + JavaScript だけでサクッと実装しています。
背景を適当にダークモードっぽい #292929 にして、ボタンも適当な色に設定します。

See the Pen Untitled by dipcode_kj (@dipcode_kj) on CodePen.

実際に使ってみると

例えば…

• 50本打って30本成功 → 成功率は 60%
• フリースローを20本打って18本成功 → 成功率は 90%

って感じで、すぐに数字が出てきます。

練習中にスマホでサッと入力してチェックできるので、「今日は調子いいのか悪いのか」を数値化して振り返るのに便利。

次のアップデート予定

今回は「1種類のシュート」の成功率だけを出せるシンプル版ですが、次は…

• 2PT・3PT・FT を別々に入力できるようにする
• それぞれの成功率を出す
• 最後に 合計得点 を自動計算

という、より「試合を意識したシミュレーター」に進化させる予定です。

まとめ

• 成功率を出すだけの簡単ツールでも、練習のモチベは爆上がり
• 背景をダークカラーにして、バスケっぽいゴールドのボタンで仕上げ
• 今後は 複数シュートタイプ対応版 に拡張予定

バスケ好き、Web好きならぜひ触ってみてください！
それでは良いコーディング・バスケライフを！