シュート成功率は、バスケの練習を数字で振り返るときに一番使いやすい指標です。この記事では、試投数と成功数を入力すると成功率を計算する小さなWebツールをJavaScriptで作ります。
完成形はシンプルですが、入力値のチェック、結果表示、エラーメッセージまで入れておくと、実際に使えるツールになります。NINESで公開しているシュート成功率ツールのような機能を、自分のサイトやCodePenで試す入口として使ってください。
作るもの
- 試投数と成功数を入力できるフォーム
- 成功率を小数1桁で表示する結果エリア
- 試投数が0、成功数が試投数より多い、といった入力ミスのチェック
- スマホでも見やすいカード型レイアウト
HTML
まずは入力フォームと結果表示の場所を用意します。JavaScriptから取得しやすいように、必要な要素へidを付けておきます。
<main class="shot-tool">
<img
class="nines-logo"
src="https://kjnine.com/wp-content/themes/kjnines_theme/images/svg2/nines_logo.svg"
alt="NINES"
>
<p class="eyebrow">SHOOTING TOOL</p>
<h1>シュート成功率計算ツール</h1>
<form class="shot-form">
<label>
試投数
<input id="attempts" type="number" min="0" inputmode="numeric" placeholder="例: 50">
</label>
<label>
成功数
<input id="makes" type="number" min="0" inputmode="numeric" placeholder="例: 32">
</label>
<button type="submit">計算する</button>
</form>
<p id="message" class="message">数字を入力してください。</p>
<output id="result" class="result">--%</output>
</main>CSS
CSSでは、フォームをカード風にまとめます。数字を扱うツールは見た目が地味になりやすいので、結果のパーセント表示を大きくして、何が一番大事な情報か分かるようにします。
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
background: #f2f2f2;
font-family: system-ui, sans-serif;
color: #111;
}
.shot-tool {
position: relative;
overflow: hidden;
width: min(92vw, 460px);
padding: 32px;
border: 3px solid #111;
border-radius: 24px;
background: #fff;
box-shadow: 14px 14px 0 #ffd93d;
}
.nines-logo {
position: absolute;
top: 18px;
right: 18px;
width: 86px;
max-width: 28%;
opacity: .08;
pointer-events: none;
}
.eyebrow {
margin: 0 0 8px;
color: #ff2f63;
font-weight: 800;
letter-spacing: .08em;
}
h1 {
margin: 0 0 24px;
font-size: clamp(28px, 5vw, 42px);
line-height: 1.1;
}
.shot-form {
display: grid;
gap: 16px;
}
label {
display: grid;
gap: 8px;
font-weight: 700;
}
input {
width: 100%;
padding: 14px 16px;
border: 2px solid #111;
border-radius: 12px;
font: inherit;
}
button {
padding: 14px 18px;
border: 0;
border-radius: 999px;
background: #111;
color: #fff;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.message {
min-height: 1.6em;
margin: 20px 0 8px;
color: #555;
}
.message.is-error {
color: #ff2f63;
font-weight: 700;
}
.result {
display: block;
font-size: 64px;
font-weight: 900;
line-height: 1;
}JavaScript
submitイベントでフォーム送信を受け取り、入力値を数値に変換して計算します。計算前にバリデーションを入れることで、変な数字が表示されるのを防げます。
const form = document.querySelector(".shot-form");
const attemptsInput = document.querySelector("#attempts");
const makesInput = document.querySelector("#makes");
const result = document.querySelector("#result");
const message = document.querySelector("#message");
form.addEventListener("submit", (event) => {
event.preventDefault();
const attempts = Number(attemptsInput.value);
const makes = Number(makesInput.value);
message.classList.remove("is-error");
if (attempts <= 0) {
result.textContent = "--%";
message.textContent = "試投数は1以上で入力してください。";
message.classList.add("is-error");
return;
}
if (makes < 0 || makes > attempts) {
result.textContent = "--%";
message.textContent = "成功数は0以上、試投数以下で入力してください。";
message.classList.add("is-error");
return;
}
const rate = (makes / attempts) * 100;
result.textContent = `${rate.toFixed(1)}%`;
message.textContent = `${attempts}本中${makes}本成功。次の練習目標を決めましょう。`;
});CodePen埋め込み用エリア
CodePenでは、HTMLパネルにindex.htmlの中身、CSSパネルにstyle.css、JSパネルにscript.jsを貼り付ければ動きます。HTMLの<main>から貼ればOKです。
よくある失敗
- inputの値を文字列のまま扱ってしまい、足し算や比較が意図通りにならない
- 試投数が0のときに割り算してしまい、Infinityが表示される
- 成功数が試投数を超えても計算してしまい、100%を超える結果になる
- 結果だけ更新して、エラーメッセージの状態を戻し忘れる
応用
- 2P、3P、FTごとに入力欄を分ける
- localStorageで前回の記録を残す
- 目標成功率を入力して、あと何本決めればよいか表示する
- チーム練習用に複数選手の記録をテーブル化する
関連リンク
まとめ
シュート成功率ツールは、フォーム、計算、表示更新、入力チェックの基本が詰まった良い練習題材です。小さく作ってから、保存機能や種別ごとの集計を足していくと、実用的なバスケ用ツールに育てられます。
