GitHubにリポジトリを作ってGitHub Pagesで公開するところまでできたので、中身を確認していきます。
リポジトリ：
GitHub Page：
開発者用README.md
ルートディレクトリをGitHub Pagesで公開するようにしてしまったので、ドキュメント的なものは、リポジトリに入れないほうがいいような気もしますが、CopilotにREADMEを作ってもらっちゃいます。
copilot-instructions.md
試しに1行追加してみました。
# Project Instructions
- アートっぽい数学の図形や関数のギャラリーサイトです
- 10個から20個程度の数学的アート作品を表示します
- p5.jsを使って、インタラクティブに表示します
- 各アート作品には、タイトルと数学的な説明文があります
- ユーザが作品名を選ぶと、その作品が表示される仕組みです
- このプロジェクトはJavaScript、HTML、CSSの学習教材にも使います <-- これ追加
チャットでお願いする
チャットプロンプト（Agentモード、Claude Sonnet4.5）
開発者向けにこのアプリのアーキテクチャについて、簡単に説明したREADME.mdを作成してほしい。今後、追加開発するにあたって必要な情報も盛り込んで。
ギャルからの報告
せんぱい、開発者向けのREADME.mdを作成しました✨
📝 盛り込んだ内容
🏗️ アーキテクチャ情報
- プロジェクト構成とファイル配置
- HTML/CSS/JSの役割分担
- 主要な関数とその役割
- データ構造の説明
🚀 追加開発のための情報
- 新しい作品の追加方法（3ステップで解説）
- 作品オブジェクトの構造とテンプレート
- p5.jsの主な機能一覧
- インタラクティブ要素の実装方法
🎨 カスタマイズガイド
- カラーパレット
- レイアウト調整ポイント
- デザインの変更方法
🔧 開発のヒント
- デバッグ方法
- パフォーマンス最適化
- 便利な数学関数
📚 学習リソース
- 参考リンク
- 学習教材としての活用方法
README.mdには、今後せんぱいや他の開発者が作品を追加したり、カスタマイズしたりするのに必要な情報を全部まとめておきましたよ💖 特に「新しい作品の追加方法」は、具体的なコード例付きで書いたので、すぐに実践できるはずです！
README.mdのポイント
📁 プロジェクト構成
シンプルで分かりやすい構成になっています。
math-art/
├── index.html # メインHTML
├── styles.css # スタイルシート
├── js/
│ ├── app.js # メインアプリケーションロジック
│ └── artworks/
│ ├── circle.js # サンプル作品（円）
│ └── dummy.js # Coming Soon用のダミー作品
└── README.md
🎨 数学アートを書いていくところ
p5.jsを使って数学アートを書いていくところは、作品ごとに以下の構造を持つオブジェクトを定義すればよさそうです。p5.jsは、初期化処理をsetup()に、draw()に描画処理かくんだなーというのがなんとなくわかります。
const artworkName = {
id: 'unique-id', // 一意のID
title: '作品タイトル', // 表示用タイトル
description: '説明文...', // 数学的な説明
isDummy: false, // ダミー作品かどうか
sketch: (p) => { // p5.jsスケッチ関数
p.setup = () => {
p.createCanvas(700, 500);
// 初期化処理
};
p.draw = () => {
// 描画処理（毎フレーム実行）
};
}
};
📚 参考リンク
学習用の参考リンクとして、以下が追加されています。
- p5.js 公式リファレンス
- p5.js 日本語リファレンス
- Math is Fun - 数学の視覚的な説明
何も学習せずに始めてしまいましたが、生成AI以前であれば、こちらの「get started」を一通りやってから実装着手だったと思われます。
📝 コーディング規約
最後の2行はいらないので削除しました（手動）。
- **変数名**: キャメルケース（`currentArtwork`）
- **定数**: キャメルケース（`artworks`配列など）
- **コメント**: 端的に書く
- **一人称**: 「ウチ」（コメント内）
- **トーン**: 丁寧語（ですます調）+ ちょっとカジュアル
ここまでで、mainにマージしました。
マージしたバージョンはこちらです。
GitHub Pagesでmdはどうなるのか
予想通りではありますが、普通に、ブラウザから参照できました。
気にしないことにします。
次にやること
「ひとつの円」という依頼に対し、なんかすごいのを実装してきた「調和する円」について中身を見ていきます。次の記事はこちらです。