💻

AI駆動開発勉強会women's base #2【Cursor編】〜準備・当日〜

に公開

私はAI駆動開発勉強会 Women's Base の運営をしています。
この記事では、2025/7/5(土)に開催した Cursor入門イベントの「準備から当日」までの様子をレポートします。

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

イベント構成

イベントは以下の2部構成で実施しました。

  • Cursor入門
     基本機能やアップデート情報を紹介
  • ハンズオン
     実際に手を動かして、AIと一緒にアプリ開発を体験

私はこの中で、ハンズオンを担当しました!

参加者のスキル傾向

Connpass での事前アンケート結果は以下のとおりです。

  • Cursor利用経験あり:31%
  • Cursor以外のAI駆動開発支援ツール経験あり:31%
  • コーディング経験
    • あり:55%
    • 少しあり:25%
    • なし:20%

参加者の約半数が「コーディング経験が少ない」ということもあり、
初心者にもわかりやすい構成環境構築のサポートを重視して準備しました。

ハンズオン準備

テーマ選定の条件

ハンズオンのテーマを決めるにあたって、以下の条件にしました。

  • 約2時間で完成できること
  • 出力結果が人によって異なっても問題ないこと
  • 初心者〜経験者まで幅広く楽しめること
  • 女性向けイベントとして親しみやすい内容であること

最初は ChatGPT や Claude に相談してアイデア出しをしましたが、
なかなかピンとくる案に出会えず、、、、

アイデアのきっかけ

そんな中で思い出したのが、私がエンジニアを目指していた頃に見ていたClever ProgrammerさんのYouTubeです。
https://www.youtube.com/live/XtMThy8QKqUF

当時、「Netflix」「Amazon」「Airbnb」などのアプリを模倣して学習していました💻
私自身、フロントエンドからキャリアをスタートしたいと思っていたこともあり、
普段使っているサービスを自作出来たことに感動しまくりでした✨

今回の参加者層もコーディング経験が浅い方が多く、
「この感動を味わってもらえるのでは?」と考え、
Netflixクローンの動画配信アプリをハンズオンテーマに決定しました!!

ハンズオン構成

ハンズオンの構成は以下3ステップです。

  1. 環境構築
  2. 動画情報の取得準備
  3. 動画配信アプリ作成

1.環境構築

第一回目で開催した GitHub Copilot のハンズオンでは、サポーターとして参加しました。
その際に特に印象に残っているのが、
「Copilotの使い方」よりも、「Git操作」で詰まる人が多い
という点です。

Copilotでは、提供されている学習リポジトリを使ってハンズオンが出来たため、あらかじめ環境が整っている状態からスタートできます。
https://github.com/skills/getting-started-with-github-copilot

一方で、今回の Cursor ハンズオンはゼロから環境構築を行う必要があったため、
以下の点に配慮して事前準備を行いました:

  • Fork/Clone/ブランチ作成までを分けて案内
  • 入力する プロンプト例を掲載
  • Windowsユーザーも考慮した分岐説明

できる限り Cursor 以外のところでつまずかないように配慮しました。

2. 動画情報の取得準備

映画情報はTMDB API(The Movie Database)を使用しました。
TMDBとは、世界中の映画・テレビ番組の情報が集まるデータベースで、個人開発にも使いやすいAPIが提供されています。

取得できるデータ例:

  • 映画タイトル
  • ポスター画像
  • あらすじ
  • 評価
  • ジャンル など

公式:
https://developer.themoviedb.org/

実際にAPIキーを取得した際に、登録フォームの入力バリデーションで引っかかってしまい、申請だけでも少しハードルが高く感じました。

直面したエラー:

  • 英語で記述しないとエラーになる
  • APIの使用目的を詳しく記載しないと申請が通らない(内容が短すぎるとNG)

こうした点を踏まえ、参加者がスムーズに進められるよう、キャプチャ付きの登録手順書を事前に準備しました。

また、CursorのDocs機能を活用して、APIレスポンスの参照もスムーズに行えるようにしました。

3. 動画配信アプリ作成

実際に作成してみたところ・・・

1発でこのクオリティ✨

当時は4,5時間ほどかかって作っていたものが、今では数分もかからず完成。
技術の進化を改めて実感しました・・・

(余談)方向転換の裏側

当初は「Netflixクローン作成」をベースに、経験者向けには追加機能にチャレンジしてもらう予定でした。

しかし

  • 作成完了できるのが思った以上に速かった
  • 前日に Cursor 1.2 の新機能「TODO」機能が追加された

https://x.com/cursor_ai/status/1940817967631200514

これらの要因により、経験者には他の配信サービス風アプリ(Disney+、Prime Videoなど)も作ってもらうスタイルに急遽変更しました!

当日の様子

ステッカー配布 & cursorrulesの活用

Cursor Ambassadorのきのぴーさんから素敵なステッカーをご提供いただき、参加者に配布しました!

また、Cursor入門資料・ハンズオン中で cursorrulesを活用させていただきました。
https://github.com/kinopeee/cursorrules

きのぴーさん、本当にありがとうございました!!

Cursor入門(前半セッション)

ぴよさんが、Cursorの基本機能や便利な活用法を実演つきで丁寧に解説してくれました。
最新アップデートの内容までカバーされていて、とても分かりやすかったです!

https://x.com/nana__mn707/status/1941350736992121197

資料はこちら:
https://speakerdeck.com/tanapiyo/cursorji-chu-jiang-zuo

ハンズオン(後半セッション)

  • 初心者:一緒に手を動かしながら進行
  • 経験者:Issue を見ながら自由に進行

というスタイルで進めました。

トラブル事例

  • 想定した箇所ではないTMDB登録時のバリデーションエラー
  • Git操作で詰まる
  • node や npm が未インストール
  • Cursor CLIにパスが通っていない

私自身もハンズオン中に誤って完成系をmainブランチにマージしてしまい、
参加者に混乱を招いてしまいました、、、(反省)

ある程度のトラブルは想定していましたが、やはり環境構築が一番時間がかかりました。
時間は予定より少し押してしまいましたが、全員アプリを完成させることができました🎊

発生したトラブルの多くは、CursorのAgent機能を使って解決できたので助かりました。
それぞれ出力結果が少しずつ異なっているので、「UIの違いを見せ合う」だけでも盛り上がりました!
その他映画配信アプリを作っていた方もいて、バリエーション豊かな会となりました!!

ハンズオンリポジトリはこちら:
https://github.com/nana-mn707/womens-base-20250705

感想と振り返り

今回運営とハンズオン担当してみて、学びの多い経験が出来ました。

Cursorについて深くキャッチアップできたことに加え、
「イベント駆動での学習」は強制的に学ばざるを得ない環境を作り出してくれるため、個人的にはとても効果的だと感じました🪄
このようなイベント駆動型の学習スタイルはすごい良いので、推奨します👩‍🏫

一方で、「初心者でも完成できる」ことと「経験者でも応用が効く」ことの
バランスを取ることの難しさも痛感しました。

  • 初心者:Git・環境構築の壁
  • 経験者:やや物足りなさ

といった、スキル差によるギャップの課題解決は難しかったです。

AI技術の導入で開発のハードルは確かに下がった印象ですが、
初心者が1人で完全にゼロから作り上げるのは難しい部分もあると感じました。

それでも、Cursorの凄さに感動してもらえたり、
詰まったところをサポートした際に喜んでもらえたりして、
運営して本当に良かったと心から思える1日となりました😊✨

終わりのアンケートでも温かいお言葉をいただき、とても嬉しかったです!!

次回に向けて

第1回・第2回は特定のサービスに特化したイベントを開催してきたので、
今後はアンケート結果も参考にしつつ、より汎用的な企画を開催しようと考えています!

Discussion