AIがPull Request作って、ギャルがレビューしてくれる世界へようこそ！〜Cursorで"みんな超ハッピー”を実現する次世代コードレビュー〜

## はじめに
:::note info
### AIがPull Request作って、ギャルがレビューしてくれる世界へようこそ！
:::
* 手作業でプルリク作っていませんか？
* レビューの時、どんな指摘がくるかドキドキしていませんか？
* 自分の実装、不安じゃないですか？
* ハッピーな気持ちになりたくないですか？

みなさんの悩みがいま！解決されることでしょう！

## 準備物

- CursorのProプラン

Composerを使うので、Cursor Proが必要です！

:::note warn
プロンプトで使ってるgit diffをファイル出力して添付ファイルとして使用すれば、Cursorに限らず生成AIツールどれでも使えると思います。
:::


## やり方は超シンプル！

1. Cursor Proを契約してComposerを使えるようにする
1. 普通にコード書く
1. [ギャル設定ファイル](https://github.com/KouheiOkazaki/gal/blob/develop/gal-culture-book.md)を開発環境に配置(mdファイル)
1. [プロンプト](https://qiita.com/drafts/af7966c315bb4167e2a9/edit#%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%82%92composer%E3%81%AB%E3%82%B3%E3%83%94%E3%83%9A%E3%81%97%E3%81%A6%E5%AE%9F%E8%A1%8C)をコピーしてCursorのComposerで実行することで、PRとギャルエンジニアにレビューを依頼できる！

##  ギャル構文設定ファイルを開発環境に配置(mdファイル)
[ギャル構文設定ファイル](https://github.com/KouheiOkazaki/gal/blob/develop/gal-culture-book.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アプリを作ってます。
作ったコードはこちら：[サンプルリポジトリ](https://github.com/KouheiOkazaki/gal)

## AIが作ってくれたPR
```markdown
## やったこと
* TODOリストアプリケーションの実装
* カンバンボード形式でのタスク管理機能の追加
* モダンなUIコンポーネントの実装（Button, Checkbox等）
* Zustandを使用したステート管理の実装
* Framer Motionを使用したアニメーション効果の追加
* ドラッグ&ドロップ機能の実装（@dnd-kit）

## やらないこと
* 無し

## できるようになること
* TODOタスクの作成、編集、削除
* タスクのステータス管理（未着手、進行中、完了）
* ドラッグ&ドロップでのタスク移動
* アニメーション付きのスムーズなUI操作

## できなくなること
* 無し

## 動作確認
* コンポーネントの基本機能（CRUD操作）
* ドラッグ&ドロップ機能
* アニメーション効果
* レスポンシブデザイン
* ステート永続化（LocalStorage）

## メモ
* Zustandを使用してステート管理を実装
* Framer Motionでアニメーション効果を追加
* TailwindCSSでスタイリングを実装
* @dnd-kitでドラッグ&ドロップ機能を実装
```

## ギャルエンジニアからのレビュー

ちょりーっす！PRチェックしたんだけど、まじ天才的な実装じゃない？😍✨

### つよみポイント！
* さりげZustandでステート管理してるの、まじいけてる！LocalStorageとの連携もばっちりだし、パフォーマンスも良さげ！
* Framer Motionのアニメーション、ユーザー体験がめっちゃクリーンになってて最高！
* コンポーネントの分割がまじ神！再利用性もバッチリだし、メンテナンス性も高いの！

### ちょっと気になったとこ！
1. `TodoList`コンポーネントで、さりげエラーハンドリングの考慮があるといいかも？例えば：
```typescript
try {
  const filteredTodos = todos.filter((todo) => {
    // ... existing code ...
  });
} catch (error) {
  console.error('タスクのフィルタリングでエラーが発生したよ！', error);
  return <div>エラーが発生しちゃった...！もう一度試してみてね！</div>;
}
```

2. `useTodoStore`で、さりげバリデーション入れとくと安全かも？
```typescript
addTodo: (title) => {
  if (!title.trim()) return; // 空文字チェック
  set((state) => ({
    // ... existing code ...
  }));
},
```

3. アクセシビリティ的な観点で、ちょっとだけ改善できそう！例えば：
```typescript
<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
## さいごに

開発生産性を高めながら、ギャルお姉ちゃんとの快適開発生活をエンジョイしよう！！！

## 参考リンク
- [PRテンプレートはこちらを参考にさせていただきました。](https://dev.classmethod.jp/articles/pull-request-template/)
- [お世話になっているCursor君](https://cursor.sh/)
- [今回作ったサンプルコード](https://github.com/KouheiOkazaki/gal)