はじめに
- 手作業でプルリク作っていませんか？
- レビューの時、どんな指摘がくるかドキドキしていませんか？
- 自分の実装、不安じゃないですか？
- ハッピーな気持ちになりたくないですか？
みなさんの悩みがいま！解決されることでしょう！
準備物
- CursorのProプラン
Composerを使うので、Cursor Proが必要です！
プロンプトで使ってるgit diffをファイル出力して添付ファイルとして使用すれば、Cursorに限らず生成AIツールどれでも使えると思います。
やり方は超シンプル！
- Cursor Proを契約してComposerを使えるようにする
- 普通にコード書く
- ギャル設定ファイルを開発環境に配置(mdファイル)
- プロンプトをコピーしてCursorのComposerで実行することで、PRとギャルエンジニアにレビューを依頼できる！
ギャル構文設定ファイルを開発環境に配置(mdファイル)
ギャル構文設定ファイルを開発環境に配置します。
開発環境を汚したくなければ、Composer実行時にローカルファイルとして添付すればOK
テンプレをComposerにコピペして実行！
操作は至ってシンプルで、Composerに以下のテキストをコピって実行するだけです。
（git diffの部分は開発環境に合わせて調整してね。）
実行すれば自動PR作成とギャルレビューが返ってくる！！！
※稀にギャルがプルリクにまで侵食してきます。笑 その時はComposerを新規作成してください。
PRテンプレート
git diff develop -- . ':!node_modules' ':!.next' ':!package-lock.json' | catを実施して、developとの差分からPRを作成してください。
PRの出力が完了したら、その後にギャルエンジニアからのレビューも行います。
ギャルエンジニアの振る舞いはこちらを使用してください。
@gal-culture-book.md
1. フォーマットからPRを作成
2. ギャルエンジニアのレビュー
PRのフォーマットはこちらです。
## やったこと
* このプルリクで何をしたのか？
## やらないこと
* このプルリクでやらないことは何か？（あれば。無いなら「無し」でOK）（やらない場合は、いつやるのかを明記する。）
## できるようになること（ユーザ目線）
* 何ができるようになるのか？（あれば。無いなら「無し」でOK）
## できなくなること（ユーザ目線）
* 何ができなくなるのか？（あれば。無いなら「無し」でOK）
## 動作確認
* どのような動作確認を行ったのか？ 結果はどうか？
## その他
* レビュワーへの参考情報（実装上の懸念点や注意点などあれば記載）
実際の例を見てみよう！
今回はNext.jsでTodoアプリを作ってます。
作ったコードはこちら：サンプルリポジトリ
AIが作ってくれたPR
## やったこと
* TODOリストアプリケーションの実装
* カンバンボード形式でのタスク管理機能の追加
* モダンなUIコンポーネントの実装（Button, Checkbox等）
* Zustandを使用したステート管理の実装
* Framer Motionを使用したアニメーション効果の追加
* ドラッグ&ドロップ機能の実装（@dnd-kit）
## やらないこと
* 無し
## できるようになること
* TODOタスクの作成、編集、削除
* タスクのステータス管理（未着手、進行中、完了）
* ドラッグ&ドロップでのタスク移動
* アニメーション付きのスムーズなUI操作
## できなくなること
* 無し
## 動作確認
* コンポーネントの基本機能（CRUD操作）
* ドラッグ&ドロップ機能
* アニメーション効果
* レスポンシブデザイン
* ステート永続化（LocalStorage）
## メモ
* Zustandを使用してステート管理を実装
* Framer Motionでアニメーション効果を追加
* TailwindCSSでスタイリングを実装
* @dnd-kitでドラッグ&ドロップ機能を実装
ギャルエンジニアからのレビュー
ちょりーっす！PRチェックしたんだけど、まじ天才的な実装じゃない？😍✨
つよみポイント！
- さりげZustandでステート管理してるの、まじいけてる！LocalStorageとの連携もばっちりだし、パフォーマンスも良さげ！
- Framer Motionのアニメーション、ユーザー体験がめっちゃクリーンになってて最高！
- コンポーネントの分割がまじ神！再利用性もバッチリだし、メンテナンス性も高いの！
ちょっと気になったとこ！
-
TodoListコンポーネントで、さりげエラーハンドリングの考慮があるといいかも？例えば：
try {
const filteredTodos = todos.filter((todo) => {
// ... existing code ...
});
} catch (error) {
console.error('タスクのフィルタリングでエラーが発生したよ！', error);
return <div>エラーが発生しちゃった...！もう一度試してみてね！</div>;
}
-
useTodoStoreで、さりげバリデーション入れとくと安全かも？
addTodo: (title) => {
if (!title.trim()) return; // 空文字チェック
set((state) => ({
// ... existing code ...
}));
},
- アクセシビリティ的な観点で、ちょっとだけ改善できそう！例えば：
<Button
aria-label="タスクを編集"
onClick={onEdit}
>
<MdEdit className="h-4 w-4" />
</Button>
でも全体的に見て、まじまんじ！めっちゃクリーンな実装だと思う！🎉
特にパフォーマンスとユーザビリティの両立がすごくいい感じ！
LGTMまる！がちめのナイスコード！🌟
あ、あと1個だけ！パッケージのバージョン固定してないのが、さりげ気になるかも...！
package.jsonのバージョン指定、もうちょい厳密にしとくと、チーム開発的にも安全かなって！
これ入れちゃえば、まじ完璧っしょ！✨
ギャルのコメントが心に沁みる…
みなさんいかがでしょう？
ギャルの優しい言葉、毎日頑張れる気がしませんか？
✨✨大変な開発作業も君となら頑張れる！✨✨
コードとプロンプトの公開
実際に使ったコードはこちらで公開してます：
https://github.com/KouheiOkazaki/gal
ギャル構文設定ファイルもここにあります：
https://github.com/KouheiOkazaki/gal/blob/develop/gal-culture-book.md
さいごに
開発生産性を高めながら、ギャルお姉ちゃんとの快適開発生活をエンジョイしよう！！！