このプロジェクトは、Laravel（バックエンド）・GraphQL API・React（Material UI, TypeScript）によるモダンな TODO アプリです。
このアプリは「みんなでオープンに開発する」ことを目的に作成しています。
もともとはバイブコーディングで作成した機能をベースに、今後もどんどん新しい機能を追加していく予定です。
💬 誰でも気軽に Issue や Pull Request を送ってください！
📦 ある程度の機能が揃った段階で正式リリースを予定しています。
みなさんのご参加・ご貢献をお待ちしています！
- 🔧 バックエンド: Laravel + rebing/graphql-laravel
- 🎨 フロントエンド: React + TypeScript + Material UI + Apollo Client
- 🗄️ DB: MySQL（Docker コンテナ）
- 🐳 Docker / Docker Compose
- 🟢 Node.js（開発時のみ、Docker 内で完結も可）
- 🧰 Git
- 📥 リポジトリをクローン
git clone <このリポジトリのURL> cd laravel-graphql-memo-app 以下は、絵文字付きで装飾された `README.md` の後半部分（手順・起動方法・テスト・Contributors）をマークダウン形式で再構成したものです。元の構成は変えず、絵文字のみ追加しています。
cp .env.example .env
cp server/.env.example server/.env※ 必要に応じて .env を編集してください。
フロントエンドの環境変数（オプション）:
Docker 環境ではデフォルト設定で動作しますが、ローカル開発時に API URL を変更する場合は以下を実行してください。
cp frontend/.env.example frontend/.env.local
# frontend/.env.local を編集して REACT_APP_API_URL を設定📖 詳細は「API 接続先（REACT_APP_API_URL）の切り替え方法」セクションを参照してください。
docker-compose up -ddocker-compose exec backend composer installdocker-compose exec backend php artisan key:generatedocker-compose exec backend php artisan config:cachedocker-compose exec backend php artisan migrate --seeddocker-compose exec frontend npm install- 🔌 バックエンド API: http://localhost:8000/graphql
- 🖥️ フロントエンド: http://localhost:3000
フロントエンドの GraphQL API 接続先は環境変数 REACT_APP_API_URL で設定できます。
docker-compose.yml に設定されているため、特別な設定は不要です。
# docker-compose.yml で自動的に設定されます
environment:
- REACT_APP_API_URL=http://localhost:8000/graphqlフロントエンドディレクトリに .env.local ファイルを作成して設定します。
# フロントエンドディレクトリに移動
cd frontend
# .env.example をコピー
cp .env.example .env.local
# .env.local を編集してAPI URLを設定
# 例: REACT_APP_API_URL=http://localhost:8000/graphql本番環境のビルド時に環境変数を設定するか、.env.production ファイルを作成します。
# frontend/.env.production
REACT_APP_API_URL=https://your-production-domain.com/graphqlpackage.json の scripts セクションで直接指定することもできます。
{
"scripts": {
"start": "REACT_APP_API_URL=http://localhost:8000/graphql react-scripts start",
"start:prod": "REACT_APP_API_URL=https://api.example.com/graphql react-scripts start"
}
}
.env.localファイルは.gitignoreに含まれているため、リポジトリにコミットされません- Create React App での環境変数ファイルの優先順位（高い順）:
.env.local（ローカル開発用、Git 管理外）.env.production.local,.env.development.local（環境別ローカル設定）.env.production,.env.development（環境別設定）.env（全環境共通のデフォルト設定）- 注意: Docker 環境では
docker-compose.ymlのenvironment設定が上記ファイルより優先されます- React アプリでは
REACT_APP_で始まる環境変数のみが使用できます- 詳細は Create React App のドキュメントを参照してください
- Host:
localhost - Port:
3306 - User:
todo_user - Password:
todo_password - Database:
todo_app
💡 .env ファイルで DB_HOST_PORT を変更することでポート競合回避が可能です。
例：.env に DB_HOST_PORT=13306 と設定すれば、localhost:13306 で MySQL に接続できます。
cd frontend
npm test# フロントエンドディレクトリに移動
cd frontend
# Cypressを開発モードで実行（GUIあり）
npm run cypress:open
# または、コマンドライン実行（ヘッドレスモード）
npm run cypress:runcd server
./vendor/bin/phpunit
# または
php artisan test📚 詳細な開発手順やコマンドは docs/SETUP.md を参照してください。
❓ 不明点・トラブルは issue または README 末尾に追記してください。
このプロジェクトでは、AI を活用した仕様書の自動生成・更新の仕組みを構築しています。 現在は GraphQL API 仕様書の生成に対応しており、今後はデータベース設計書やテストケースなど、様々な仕様書を自動生成する予定です。
- GraphQL API 仕様書の自動生成: スキーマファイル（
.graphql）を Gemini AI で解析 - 階層構造での整理: Query/Mutation/Type 別に分類された読みやすい構造
- Notion 連携: 階層構造で Notion ワークスペースに自動アップロード
# 1. Python仮想環境のセットアップ（初回のみ）
cd scripts
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
# 2. 環境変数設定（初回のみ）
# .envファイルに以下を設定:
# - GEMINI_API_KEY (Google AI Studio から取得)
# - NOTION_TOKEN (Notion Integration から取得)
# - NOTION_PARENT_PAGE_ID (Notion親ページID)
# 3. 仕様書生成・アップロード
python generate_spec_structured.py
python upload_to_notion_structured.py仕様書📕
├── 📊 Query仕様
│ ├── todos, categories, user, todo, me
├── ✏️ Mutation仕様
│ ├── createTodo, updateTodo, deleteTodo
│ ├── createCategory, updateCategory, deleteCategory
│ └── login, logout, register
└── 🧱 型定義
└── Todo, Category, User, Priority
詳細は scripts/README.md を参照してください。
フロントエンドで GraphQL Code Generator を活用して型安全な開発を行います。
このリポジトリは、GraphQL Code Generator の設定ファイル（frontend/codegen.ts）や package.json のスクリプトがすでに含まれています。
- 依存パッケージのインストール
cd frontend
npm install- コード生成の実行
# Dockerコンテナ内で実行（推奨）
docker-compose exec frontend npm run codegen
# または、ローカルで実行
cd frontend
npm run codegen
⚠️ 注意点
- バックエンド（Laravel）が起動している必要があります
- Docker 環境では
http://backend:8000/graphqlをエンドポイントとして使用します
- 生成されたコードの利用例
import { useGetTodosQuery } from "../generated/graphql";
const { data, loading, error } = useGetTodosQuery({
variables: {
/* クエリ変数 */
},
});⚡ クローン直後は
npm installだけで OK！設定ファイルやスクリプトの再作成は不要です。
この機能は開発の生産性向上と型の安全性確保に役立ちます。
このリポジトリは、下記のように GraphQL Code Generator の設定がすでに済んでいます。
- 必要なパッケージをインストール
cd frontend
npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo --save-dev- 設定ファイル作成例
💡 TypeScript 形式の設定ファイルのメリット
- 型安全性: TypeScript の型チェックにより設定ミスを防止
- エディタサポート: 自動補完やインラインドキュメントが利用可能
- 柔軟性: プログラマティックな設定が可能
// frontend/codegen.ts
import type { CodegenConfig } from "@graphql-codegen/cli";
const config: CodegenConfig = {
schema: {
"http://backend:8000/graphql": {
headers: {
Accept: "application/json",
},
},
},
documents: [
"./src/**/*.graphql",
"./src/services/**/*.ts",
"./src/features/**/graphql/**/*.graphql",
],
generates: {
"src/generated/graphql.ts": {
plugins: [
"typescript",
"typescript-operations",
"typescript-react-apollo",
],
config: {
withHooks: true,
withComponent: false,
withHOC: false,
skipTypename: false,
documentMode: "documentNode",
dedupeFragments: true,
},
},
},
};
export default config;⚡ Docker 環境では
backend:8000で GraphQL エンドポイントに接続します。 ローカル環境ではlocalhost:8000に変更してください。
- package.json にスクリプト追加例
"scripts": {
"codegen": "graphql-codegen --config codegen.ts"
}Thanks goes to these wonderful people (emoji key):
 Arnesh Pal 📖 |
 emilythedev 📖 |
|||||
Add your contributions
|
||||||
📘 This project follows the all-contributors specification. 💬 Contributions of any kind welcome!