家系図アプリの開発を行いました
前々から家系図アプリほしいな～と思っていたのですが、有料アプリは使いたくないし、無料アプリではJSON出力機能などがついていなく、かゆいところに手が届きませんでした。。。
（無料で、JSON出力できて、家族間で共有できる家系図アプリが欲しかった）
いろいろ考えた末に個人開発するしかないと思い、一昨日くらいから作り始めた家系図アプリですが、AIを使うことで 2日程度 で開発できたので、その方法について紹介しようと思います。
1. Claude 3.7 Sonnetに画面イメージと画面仕様、コーディング規約などを作成してもらう
Claude 3.7 Sonnetに作りたい画面の仕様を伝えてざっくりとした画像イメージと画面仕様を作成してもらいます。
ついでにコーディング規約なども作成してもらうと開発で考えることが減ります。
コーディング規約サンプル
家系図アプリケーションコーディング規約
1. プロジェクト構造
1.1 ディレクトリ構造
src/
├── components/ # UIコンポーネント
│ ├── common/ # 共通コンポーネント
│ ├── family-tree/ # 家系図関連コンポーネント
│ ├── form/ # フォームコンポーネント
│ ├── layout/ # レイアウトコンポーネント
│ ├── modal/ # モーダルコンポーネント
│ └── pages/ # ページコンポーネント
├── hooks/ # カスタムフック
├── utils/ # ユーティリティ関数
└── types/ # 型定義
1.2 ファイル命名規則
- コンポーネント:
PascalCase.jsx（例：PersonNode.jsx）
- フック:
useCamelCase.js（例：useFamily.js）
- ユーティリティ:
camelCase.js（例：formatDate.js）
- テスト:
*.test.jsまたは*.spec.js
- Storybook:
*.stories.jsx
2. コンポーネント設計
2.1 基本構造
import React from 'react';
import PropTypes from 'prop-types';
const ComponentName = ({ prop1, prop2 }) => {
return div>{/* JSXの内容 */}/div>;
};
ComponentName.propTypes = {
prop1: PropTypes.string.isRequired,
prop2: PropTypes.func,
};
export default ComponentName;
2.2 Props
- 必須のpropsには必ず
isRequiredを設定
- 型は具体的に指定（
anyは使用しない）
- デフォルト値は分割代入で指定
- 複雑なオブジェクトは
PropTypes.shapeで定義
3. スタイリング
3.1 Tailwind CSS
- ユーティリティクラスを優先して使用
- 共通のスタイルはコンポーネント間で再利用
- 複雑なスタイルは@applyディレクティブでカスタムクラスとして定義
- レスポンシブデザインはTailwindのブレークポイントを使用
3.2 命名規則
- BEMライクな命名（Tailwindの機能を活用しつつ）
- コンポーネント固有のクラス:
コンポーネント名-要素
- 状態クラス:
is-状態名またはhas-状態名
4. ロジック実装
4.1 カスタムフック
- 単一責任の原則に従う
- 状態ロジックは必ずフックとして分離
- 命名は
useプレフィックスで始める
- 戻り値は一貫した形式のオブジェクトで返す
4.2 関数
- アロー関数を基本とする
- 複雑な関数は適切に分割
- メモ化（useMemo, useCallback）を適切に使用
- 副作用は明確に分離（useEffect内で管理）
5. コードフォーマット
5.1 基本ルール
- インデント: スペース2個
- 最大行長: 100文字
- セミコロン必須
- 文字列はシングルクォート
- オブジェクト/配列の最後のカンマは必須
5.2 import順序
- Reactコア
- サードパーティライブラリ
- 自作コンポーネント
- カスタムフック
- ユーティリティ
- 型定義
- スタイル
6. コメント
6.1 必須コメント
- 複雑なロジックの説明
- 関数の仕様（JSDoc形式）
- バグ修正や一時的な対応（TODO/FIXME）
6.2 JSDocフォーマット
/**
* 関数の説明
* @param {型} 引数名 - 説明
* @returns {型} 戻り値の説明
*/
7. テスト
7.1 テストの種類
- ユニットテスト: 個々の関数やフック
- コンポーネントテスト: レンダリングとインタラクション
- 統合テスト: 複数のコンポーネントの連携
7.2 テスト規約
- テストファイルはテスト対象の隣に配置
- describe/itで適切にグループ化
- テストケースは given-when-then パターンで記述
- モックは最小限に留める
8. Storybook
8.1 ストーリー作成
- コンポーネントごとに基本ケースと変種を用意
- インタラクションテストを含める
- アクセシビリティテストを実施
- 適切なドキュメントを記述
2. ChatGPTにロゴを作成してもらう
アプリの概要等を伝えて画像を生成してもらう。
アプリのロゴとして使用することを伝えると正方形で出てくる
3. Cline（Claude 3.7 Sonnet）に画面イメージと画面仕様からアーキテクチャを考えてもらう
- まず、Gitリポジトリ作成（プロジェクト作成）とESLint, Pretterの設定をClineにやってもらう
- 次に画面イメージと画面仕様からアーキテクチャを考えてもらう
- アーキテクチャはなるべく細かくファイル分けして作ってもらう
- 技術スタック
- ディレクトリ構造
- コンポーネント設計
- データモデル
- バリデーションルール
- ルーティング
4. Clineルールファイルを作成する
- rules.mdファイルの作成を行う
- rules/rules.mdには「日本語で出力すること」などを記載する
- rules-code/rules.mdにはコーディング規約の内容を記載する
- .clineignoreに参照されたくないファイルやフォルダを定義する
.roorules と .clinerulesは非推奨となっているらしい
5. Cline（Claude 3.5 Sonnet）にStorybookを作成してもらう
- 画面イメージと画面仕様からStorybookを最小の部品単位で作ってもらう
- 最初からページを作らせるのではなく、ページで使用する部品から小さく作ってもらう
- 各部品が出来上がったら粒度を上げてStorybookの作成を行ってもらう
- 最初はボタン、次にフォーム、次にページのように粒度を少しずつ大きくしていくと成功しやすい
6. 動作確認を行う
- データ上のバグや部品同士の結合が期待と違った場合はCline（Claude 3.5 Sonnet）に修正してもらう
-
「～直して」 というよりは askモード を使用して 「～をどう直したらよいか？」 を考えさせてから codeモード で修正するほうがエラーは少ない
- 動作するところまで完成したらGitにCommitする
- 最近はコミットメッセージもAIが作成してくれるためかなり助かっています
- あとは納得がいくまで5を繰り返すだけ
7. デプロイする
- Clineにデプロイしてもらう
- 最近はGitHub Pagesにデプロイしています
- 追加したい機能ができたら5に戻る
GitHub
今回作成した家系図アプリのコードはGitHubに公開しています。
最後に
今回は手軽にAIを使って個人開発する手順を紹介しました！
AIの普及で個人開発を行うハードルも下がっているように感じます。
ぜひ皆さんも、「こういうアプリほしいな～」と思う瞬間があったらAIでサクッと個人開発することを検討してみてください！！
Source link
