最近のAIを活用した個人開発をざっくりまとめる

Posted at 2025-04-10

家系図アプリの開発を行いました

前々から家系図アプリほしいな～と思っていたのですが、有料アプリは使いたくないし、無料アプリでは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でサクッと個人開発することを検討してみてください！！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up