Web／Vue×生成AI（Cursor）アプリ開発ハンズオン勉強会を開催しました
2025年08月06日(水曜日)
2025年8月6日（水）に第13回「Web（Vue）×生成AI（Cursor）アプリ開発ハンズオン勉強会・交流会」をオンラインにて開催しました。
● 勉強会の概要
「自分でWebアプリを作ってみたい」
「AIを使って効率的にコーディングしたい」
という方に最適な、Vue.jsによるWebアプリ開発を学ぶハンズオン形式の勉強会を実施しました。
今回は、AI搭載コードエディター「Cursor」を活用しながら、Vue.jsで簡易的なWebアプリケーションを作成することに挑戦しました。
コードを書く際の補完や提案をAIにサポートしてもらいながら、講師や参加メンバーと一歩ずつ開発を進める実践的な内容です。
また、エンジニアとの交流を通じて、現在取り組んでいるプロジェクトの悩みや、「Webを学ぶ際にどの分野を優先すべきか」といったキャリア相談も行われました。
就職活動、業務課題、スキルアップなど、幅広いテーマについて気軽に情報交換ができる場となりました。
● こんな方が参加しました
・Web（JavaScriptやフレームワーク）やフロントエンド・マークアップ技術に興味がある方
・Cursorの活用方法を試してみたい方
・AIを使ったアプリ開発に興味がある方
・エンジニアと交流しながらスキルアップを進めたい方
・未経験からエンジニア志望のため勉強中の方
・勉強会後も継続して学べる場やサポートの場が欲しい方
・エンジニアとして就職活動や情報収集したい方
● 勉強会の流れ
1. 導入と環境確認
本勉強会は「Vue.js × Cursor × 生成AI」を用いた開発をテーマに実施。
開発環境（Node.js、Vue.js、Cursorなど）の設定が未完了の参加者には、過去の勉強会資料（第10～12回）を参照しながら準備を進めていただくよう案内しました。
また、macOSとWindows間での環境差異についても注意喚起を行い、チャットを通じて参加者同士が補完し合う場面も見られました。
2. 各自の進捗共有と相談タイム
ESLintの設定が正常に動作しない参加者が複数いたため、講師が画面共有を行い、設定ファイル（.eslintrc）や拡張機能の確認手順を解説しました。
また、Prettierの設定や日本語化対応など、環境整備に関する実践的なサポートも行いました。
3. 各自のアプリ開発スタート
参加者が各自でAIにプロンプトを与えながらアプリ生成を進め、進捗や発生したエラーを共有しました。
講師もその場で「じゃんけんアプリ」を作成し、ルーティング（router/index.tsの解説）、URL設計、ファイル分割の重要性などを実演しました。
また、AIとのやり取りがうまくいかない場合の対処法として、
・プロンプトを具体化する
・出力コードの意図をAIに再説明させる
・別の生成AIツールを併用する
といった実践的なアドバイスも共有されました。
4. 表示制御・ルーティング・パフォーマンスの話
講師がVue Routerを用いたページ切り替えの仕組みを実演し、「コンポーネントとルーターがアプリ構成の軸になる」などの説明を行いました。
さらに、SPA（シングルページアプリケーション）の仕組みやサーバーサイドレンダリングとの違い、パフォーマンス面での利点についても簡単に解説しました。
● 参加者の声（抜粋）
「Cursorを活用したアプリ開発の流れが理解でき、楽しく進められた」
「ルーター設定やファイル分割方法を実演してもらえて、構造のイメージがつかめた」
「生成されたコードの意味を理解するのがまだ難しいが、その場で相談できてありがたかった」
「ChatGPTやCursorの使い分けなど、AIとのやり取りのコツが勉強になった」
● 次回開催について
次回は、講師が作成した「じゃんけんアプリ」の構成をベースに、Vue.jsにおけるコンポーネントの分割・設計について深掘りする予定です。
疑問点や詰まった点をその都度相談しながら、より実践的なアプリ構成の考え方を解説していきます。
次回開催のお知らせや参加方法、アーカイブ動画は、公式オープンチャット「ガジュマル勉強会」で随時ご案内しています！
オープンチャット「ガジュマル勉強会」
ガジュマル勉強会
● ガジュマルは、エンジニアの“やってみたい”を応援しています
勉強会を通じて、技術の理解だけでなく「アイデアを形にする力」や「共に学ぶ場づくり」を大切にしています。
共感して、一緒に成長できる仲間を募集中です。興味のある方は、ぜひ各SNSよりご連絡ください！
X │ Instagram │ Facebook │ LINEオープンチャット
● 勉強会の概要
「自分でWebアプリを作ってみたい」
「AIを使って効率的にコーディングしたい」
という方に最適な、Vue.jsによるWebアプリ開発を学ぶハンズオン形式の勉強会を実施しました。
今回は、AI搭載コードエディター「Cursor」を活用しながら、Vue.jsで簡易的なWebアプリケーションを作成することに挑戦しました。
コードを書く際の補完や提案をAIにサポートしてもらいながら、講師や参加メンバーと一歩ずつ開発を進める実践的な内容です。
また、エンジニアとの交流を通じて、現在取り組んでいるプロジェクトの悩みや、「Webを学ぶ際にどの分野を優先すべきか」といったキャリア相談も行われました。
就職活動、業務課題、スキルアップなど、幅広いテーマについて気軽に情報交換ができる場となりました。
● こんな方が参加しました
・Web（JavaScriptやフレームワーク）やフロントエンド・マークアップ技術に興味がある方
・Cursorの活用方法を試してみたい方
・AIを使ったアプリ開発に興味がある方
・エンジニアと交流しながらスキルアップを進めたい方
・未経験からエンジニア志望のため勉強中の方
・勉強会後も継続して学べる場やサポートの場が欲しい方
・エンジニアとして就職活動や情報収集したい方
● 勉強会の流れ
1. 導入と環境確認
本勉強会は「Vue.js × Cursor × 生成AI」を用いた開発をテーマに実施。
開発環境（Node.js、Vue.js、Cursorなど）の設定が未完了の参加者には、過去の勉強会資料（第10～12回）を参照しながら準備を進めていただくよう案内しました。
また、macOSとWindows間での環境差異についても注意喚起を行い、チャットを通じて参加者同士が補完し合う場面も見られました。
2. 各自の進捗共有と相談タイム
ESLintの設定が正常に動作しない参加者が複数いたため、講師が画面共有を行い、設定ファイル（.eslintrc）や拡張機能の確認手順を解説しました。
また、Prettierの設定や日本語化対応など、環境整備に関する実践的なサポートも行いました。
3. 各自のアプリ開発スタート
参加者が各自でAIにプロンプトを与えながらアプリ生成を進め、進捗や発生したエラーを共有しました。
講師もその場で「じゃんけんアプリ」を作成し、ルーティング（router/index.tsの解説）、URL設計、ファイル分割の重要性などを実演しました。
また、AIとのやり取りがうまくいかない場合の対処法として、
・プロンプトを具体化する
・出力コードの意図をAIに再説明させる
・別の生成AIツールを併用する
といった実践的なアドバイスも共有されました。
4. 表示制御・ルーティング・パフォーマンスの話
講師がVue Routerを用いたページ切り替えの仕組みを実演し、「コンポーネントとルーターがアプリ構成の軸になる」などの説明を行いました。
さらに、SPA（シングルページアプリケーション）の仕組みやサーバーサイドレンダリングとの違い、パフォーマンス面での利点についても簡単に解説しました。
● 参加者の声（抜粋）
「Cursorを活用したアプリ開発の流れが理解でき、楽しく進められた」
「ルーター設定やファイル分割方法を実演してもらえて、構造のイメージがつかめた」
「生成されたコードの意味を理解するのがまだ難しいが、その場で相談できてありがたかった」
「ChatGPTやCursorの使い分けなど、AIとのやり取りのコツが勉強になった」
● 次回開催について
次回は、講師が作成した「じゃんけんアプリ」の構成をベースに、Vue.jsにおけるコンポーネントの分割・設計について深掘りする予定です。
疑問点や詰まった点をその都度相談しながら、より実践的なアプリ構成の考え方を解説していきます。
次回開催のお知らせや参加方法、アーカイブ動画は、公式オープンチャット「ガジュマル勉強会」で随時ご案内しています！
オープンチャット「ガジュマル勉強会」
ガジュマル勉強会
● ガジュマルは、エンジニアの“やってみたい”を応援しています
勉強会を通じて、技術の理解だけでなく「アイデアを形にする力」や「共に学ぶ場づくり」を大切にしています。
共感して、一緒に成長できる仲間を募集中です。興味のある方は、ぜひ各SNSよりご連絡ください！
X │ Instagram │ Facebook │ LINEオープンチャット
