Day15までで、「正多角形の変容」の実装は終わりにしました。ちゃんと正しく動いてる?を確認するチェックリストをつくっていきたいと思います。
リポジトリ:
GitHub Page(最新):
テストケースをつくる
Day10でフィボナッチ螺旋用にテストケースを作ってもらったのと同じようなのを作ってみます。プロンプトを少し改善してみました。
チャットプロンプト (Askモード、Claude Sonnet4.5):
「正多角形の変容」の動作確認をほかの人にお願いしたいと考えています。どういう観点で、何を確認してもらえばよい?判断基準が人によってぶれないようなチェックリストつくってほしい。
おや?チャットの本文ではなく、MD形式で作ってくれています!

以下にMD形式の部分をそのまま貼り付けてみます。
↓ここからがAIが作ってくれたもの
正多角形の変容 - 動作確認チェックリスト
基本動作確認 ✅
1. 初期表示
- ページ読み込み後、キャンバスが表示される
- 背景が明るいグレー(ほぼ白)で表示される
- 中央に多角形が表示される
- エラーメッセージがコンソールに出ていない
2. アニメーション
- 図形が自動的に変化している(静止していない)
- 図形がゆっくり回転している
- 頂点数が増減している(角が増えたり減ったりする)
- アニメーションがカクつかず滑らかに動く(30fps以上)
3. レイヤー表示
- 複数の多角形が重なって表示される(5つのレイヤー)
- 外側のレイヤーほど薄く(透明度が高く)見える
- 各レイヤーの回転速度が異なる
- 中央に小さな多角形が表示される
インタラクティブ機能 🎮
4. マウス操作(横方向)
確認手順: マウスを画面の左端から右端までゆっくり動かす
- 左端: 回転がほぼ止まっているか、非常にゆっくり
- 中央: 中程度の速度で回転
- 右端: 速く回転する
- マウスを動かすと、回転速度が滑らかに変化する
5. マウス操作(縦方向)
確認手順: マウスを画面の上端から下端までゆっくり動かす
- 上端: ある色で表示される
- 中央: 別の色に変化している
- 下端: また別の色に変化している
- 色相が連続的に変化する(急な色変化がない)
ビジュアル品質 🎨
6. パステルトーン
- 色が鮮やかすぎない(パステル調の柔らかい色)
- 線の色も柔らかい(強すぎるコントラストがない)
- 背景と図形のバランスが良い
7. 頂点変化の「パタパタ」効果
確認手順: 図形をじっと見て、頂点が増える瞬間を観察
- 新しい頂点が中心から徐々に外側に伸びる動きが見える
- 花びらが開くような有機的な動きをしている
- 頂点が突然現れたり消えたりしない
レスポンシブ対応 📱
8. ウィンドウリサイズ
確認手順: ブラウザウィンドウの幅を変更する
- ウィンドウを狭くすると、キャンバスも小さくなる
- ウィンドウを広くすると、キャンバスも大きくなる
- リサイズ後も図形が中央に表示される
- リサイズ後もアニメーションが継続する
9. 画面サイズごとの表示
確認手順: 以下の幅で表示を確認
- 1920px幅: 図形が大きく綺麗に表示される
- 1024px幅: 適切なサイズで表示される
- 768px幅(タブレット): 見やすいサイズで表示される
- 375px幅(スマホ): 小さいが認識できるサイズで表示される
パフォーマンス ⚡
10. 動作速度
- ファンが回らない(CPUを使いすぎていない)
- 他のタブの操作に影響しない
- 5分間表示し続けても動作が重くならない
- メモリリークが発生していない(devtoolsで確認)
ブラウザ互換性 🌐
11. 各ブラウザでの動作
以下のブラウザで基本動作(項目1〜7)を確認:
- Chrome(最新版)
- Firefox(最新版)
- Safari(最新版)
- Edge(最新版)
エラーハンドリング 🔧
12. 異常系のテスト
- ページを何度もリロードしても正常に動作する
- 他の作品から切り替えても正常に動作する
- キャンバス外でマウスを動かしても問題ない
- 高速にマウスを動かしても問題ない
チェック結果の判定基準
✅ 合格条件
- 基本動作確認(1〜3): 全項目クリア必須
- インタラクティブ機能(4〜5): 全項目クリア必須
- ビジュアル品質(6〜7): 全項目クリア必須
- レスポンシブ対応(8〜9): 80%以上クリア
- パフォーマンス(10): 全項目クリア必須
- ブラウザ互換性(11): 主要2ブラウザ以上でクリア
- エラーハンドリング(12): 80%以上クリア
⚠️ 要修正
- 基本動作、インタラクティブ、ビジュアル品質のいずれかで1つでも問題がある場合
確認者情報
- 確認日: _______________
- 確認者: _______________
- ブラウザ: _______________
- OS: _______________
- 画面解像度: _______________
備考・気づいた点
(自由記述)
↑ここまでがAIが作ってくれたもの
ちゃんとチェックしようかなーと思いましたが、後ろのほうをまじめにやると大変そう&実装したつもりになってるけどできてないものもなさそうな気がするので、次行きます。
次やること
「三角関数の波」行きたいと思います。Day17