(Sample)
HTMLとJavaScriptを使って「5角形のレーダーチャート（Radar Chart）」を描くプログラムを初心者エンジニア向けに丁寧に解説していきます。
こんな経験ありませんか？
「なんとなくコードを見れば動いてるけど、どうしてこうなるのかがイマイチわからない……」
そんなあなたに向けて、この記事では図形描画の基礎から、アニメーションの仕組みまで、段階的に理解できるように説明していきます！
実際のコードを使って解説！
以下のコードを元に、ポイントを解説していきます。
1. canvasとは？
<canvas id="radarChart" width="400" height="400"></canvas>
これはHTML5のグラフィック描画領域です。
id="radarChart"：JavaScriptから操作するための識別子width/height：キャンバスの大きさ（ピクセル）
まるで白い紙を置いておくイメージです。
2. 描画の基本設定
const canvas = document.getElementById('radarChart');
const ctx = canvas.getContext('2d');
getContext('2d')は、2次元の描画モードを使う宣言です。ctxは描画用のペンのような役割。
ポリゴン（多角形）の描き方
3. 五角形の描画関数
function drawPolygon(sides, radius, startAngle, centerX, centerY, ctx)
この関数は「何角形でも描ける」ように作られています。
式で説明！
5角形の各頂点の位置は、以下の式で決まります：
x = 中心X + 半径 × cos(角度)
y = 中心Y + 半径 × sin(角度)
たとえば、1つ目の点の角度が-90度（＝上向き）で、以降は72度ずつ回転していきます（360度 ÷ 5 = 72度）。
4. 軸とグリッドを描く
for (let i = 1; i <= 4; i++) {
drawPolygon(5, radius * (i / 4), ...);
}
これは中心から外に向かって4本のグリッドライン（目盛）を描いています。
軸線は中心から各頂点に向かって線を引いています。
値の表示とラベルの工夫
5. ラベルの描画
ctx.fillText(labels[i], x, y);
ラベル（A, B, C...）をキャンバス上に描画しています。
ctx.textAlign = 'center'：文字の位置を中央揃えctx.textBaseline = 'middle'：文字の上下位置も中央
6. 値に応じた描画
const value = values[i] / 100 * radius * progress;
この行がとても重要です！
values[i]は、各項目のスコア（0〜100）radiusは最大値（100点）のときの距離progressはアニメーションの進捗（0〜1）
つまり、スコアが高いほど外側に点がプロットされるわけです。
アニメーションのしくみ
7. requestAnimationFrameとは？
function animate() {
animationProgress += 0.01;
drawRadarChart(animationProgress);
requestAnimationFrame(animate);
}
これは毎フレームごとに描画し直す仕組みです。
requestAnimationFrame()はブラウザに「次のフレームで関数を呼んでね」とお願いする関数です。
そのため、データの多角形がスーッと浮かび上がるように描画されます。
メリット・デメリットを整理しよう
| 項目 | 内容 |
|---|---|
| メリット | 一目で複数項目を可視化できる、アニメーションで動きが出て視覚的に面白い |
| デメリット | 項目数が多すぎると見にくくなる、数値の正確な比較はやや難しい |
おわりに｜次は何を学べばいい？
今回のコードで学んだことは：
canvasの使い方- 多角形の描画方法（cosとsinの応用）
- アニメーションの作り方（
requestAnimationFrame）
次のステップとしては：
- クリックでデータを変更する機能を付けてみよう！
- 6角形や8角形のレーダーチャートに挑戦してみよう！
- SVGやD3.jsなどのライブラリも使ってみると幅が広がります。