📋

【レポート】AI駆動開発ハンズオン会に参加してきました！〜Cursor初心者向け勉強会〜

に公開
AI
イベント
Cursor
AI駆動開発
zennfes2025ai
idea

はじめに

こんにちは！株式会社HARVESTの駆け出しエンジニア、しっしーです。
前回の記事でもご紹介した通り、弊社ではCursorを用いたAI駆動開発を導入しています。
日々の業務でも活用を進めていますが、より実践的な知見を得るために、
AI駆動開発勉強会運営委員会さん主催の「AI駆動開発ハンズオン会」に参加してきました！

本記事では、その参加レポートをまとめていきます 💪

概要

対象：Cursor初心者
目的：機能紹介・ハンズオンを通じてCursorの使い方を学ぶ

https://aid.connpass.com/event/368524/

勉強会内容

自己紹介サイトの改修を通して、Cursorの機能を体験する

使用リポジトリ：https://github.com/taiga-K/cursor-workshop-profile

Pixabay APIを使った画像・動画検索アプリをCursorで作る

使用リポジトリ：https://github.com/eltociear/cursor_handson_20251010

  • Pixabay APIを使った画像・動画検索アプリを、Cursorに指示を出しながら一枚のHTMLで構築
  • 使用モデル: claude-4.5-sonnet
  • 初期プロンプトを用いて、土台となるHTMLファイルを作成
  • 機能追加プロンプトを用いて、初期プロンプトで作成したHTMLをよりリッチなものにする

主催者の方が作成した完成形はこちら

初期プロンプト例

新しいディレクトリを作成してください
Pixabay APIを使って、検索キーワードから写真を取得し、ブラウザ上に表示する
シンプルな index.html を生成してください。
（HTML/CSS/JavaScriptのみで、ローカルHTTPで動作するように）

【要件】
- Pixabayの画像APIを使用（無料）
  https://pixabay.com/api/?key=YOUR_KEY&q=cat&image_type=photo
- 結果を20枚表示（サムネイルのみ）
- 検索フォームを上部に配置して再検索できるようにする
- APIキーは const PIXABAY_KEY = 'YOUR_KEY' として定義
- デザインはシンプルでOK（後で拡張予定）

出力は index.html 1ファイルでお願いします。

初期プロンプトで実装後のイメージ

image.png

機能追加プロンプト例（UIのパワーアップとライト/ダークの実装）

index.html をさらに拡張し、Pixabayの「動画検索」を追加してください。
（HTML/CSS/JS 単一ファイル。フルコード）

【要件】
前ステップで作った index.html を、見た目と体験を大幅に改善した版として作り直してください。
（HTML/CSS/JS 単一ファイル。ローカルHTTPで動作）

【変更・追加】
- ヘッダーを固定（sticky）にして検索フォームを常時表示。検索ワードはURLクエリ(q)に反映・復元。
- レスポンシブなカードグリッド（モバイル2列〜PC4列）。CSS変数・ダークテーマ。
- カード：サムネ＋作者名バッジ。ホバー時に軽い拡大/シャドウのアニメーション。
- ローディング状態は「スケルトンカード」を表示。取得完了で置き換え。
- 結果0件時の空状態UI（アイコンとメッセージ）。
- エラー時はトースト通知。再検索で自動的に消える。
- アクセシビリティ：img に alt、ヘッダー要素に適切な role。
- API_KEYは書き換えないでください。

【出力】
- 完成した index.html（全コード）。差分でなくフル出力。

機能追加プロンプトで実装後のイメージ

image.png

その他

スポンサーLT

株式会社FLINTERSさんによるLTもありました！

Cursorの話題とは少し離れますが、興味深い内容でした👇
発表資料：LintのみでAIに開発スタイルを叩き込めるのか？

学び

カスタムコマンドの機能（ベータ版）

  • チャット入力欄で「/」をつけることで呼び出せるワークフローを作成可能
  • .cursor/commands に Markdown ファイルを配置すれば、いつでも呼び出せる
  • PR作成やレビューなどを標準化でき、レビュー工数削減にもつながる

✅ チーム開発のフローを標準化・自動化する上で非常に有用かと思われます！

例:PR作成コマンド

# PR作成

## 概要
適切な説明、ラベル、レビュアーを含む構造化されたプルリクエストを作成します。

## 手順
1. **ブランチの準備**
   - すべての変更がコミットされていることを確認
   - ブランチをリモートにプッシュ
   - ブランチがmainと最新の状態であることを確認

2. **PR説明の作成**
   - 変更内容を明確に要約
   - コンテキストと動機を含める
   - 破壊的変更があれば記載
   - UI変更がある場合はスクリーンショットを追加

3. **PRの設定**
   - 説明的なタイトルでPRを作成
   - 適切なラベルを追加
   - レビュアーを割り当て
   - 関連するissueをリンク

## PRテンプレート
- [ ] 機能A
- [ ] バグ修正B
- [ ] 単体テストが通過
- [ ] 手動テストが完了

例:コードレビュー用チェックリスト

# コードレビューチェックリスト

## 概要
品質、セキュリティ、保守性を確保するための包括的なコードレビュー実施チェックリスト。

## レビューカテゴリ

### 機能性
- [ ] コードが想定通りに動作する
- [ ] エッジケースが処理されている
- [ ] エラーハンドリングが適切
- [ ] 明らかなバグや論理エラーがない

### コード品質
- [ ] コードが読みやすく構造化されている
- [ ] 関数が小さく焦点が絞られている
- [ ] 変数名が説明的
- [ ] コードの重複がない
- [ ] プロジェクト規約に準拠している

### セキュリティ
- [ ] 明らかなセキュリティ脆弱性がない
- [ ] 入力検証が実装されている
- [ ] 機密データが適切に処理されている
- [ ] ハードコードされた秘密情報がない

MCP機能

https://cursor.com/ja/docs/context/mcp

Context7という、Cursorが最新ドキュメントを自動参照してくれるMCPサーバーを教えてもらいました。

  • CursorがMCPサーバーを通じて取得した、新しく正確な情報に基づいて回答を生成できるようになる
  • 古い情報や誤った情報に基づく手戻りを減らし、開発の効率化に繋がる

Plan Mode

https://cursor.com/ja/docs/agent/planning

  • エージェントチャットのModesのうちの一つ
  • 作業計画を相談すると、markdownファイルで計画を出力し、そのまま実行が可能
  • Askモードでも似たようなことはできるが、より実装計画向けの機能

作業別おすすめLLMモデル

  • バックエンド：gpt-5-high
  • フロントエンド：claud-4.5-sonnet

詳細な理由までは聞けず、、、

まとめ

初心者向けの内容ながら、使ったことのない機能も多く学べて非常に有意義でした。
特にカスタムコマンドのような機能は、カスタムの自由度も高くチーム開発の効率化に大きく貢献しそうです！

プロンプト設計においては、要件を詳細に定義し、段階的に実装を進めることで、AIに意図を正確に伝える重要性を再確認しました👀

今後もこういったカンファレンスに積極的に参加し、AI駆動開発の知見を深めていきたいです！🔥

お知らせ

株式会社HARVESTでは、一緒に働くエンジニアを募集しております。
ご興味のある方は、recruit@harvest-w.com までご連絡下さい！

Discussion