今回は社内勉強会「CursorでVue3開発環境構築体験」を開催しました。その様子をご紹介します。
本勉強会では、AIエディタ「Cursor」を活用しながら、Vue3の開発環境構築を実際に体験することを目的に実施しました。
エンジニアだけでなく、非エンジニアの方にも多くご参加いただき、非常に活気のある会となりました。
なお、環境構築は技術者ブログをベースに進めています。
勉強会の流れ
- Vue3の概要
- 開発環境の構築
- Vue3プロジェクト作成
- 起動デモ
① Vue3の概要
まずはVue3の立ち位置について解説しました。
VueはMVCモデルにおける「V(View)」に特化したフレームワークであり、
画面表示やユーザー操作に対する動きの制御を主な役割とします。
- Vue:見せる・触る・切り替える
- サーバー側:守る・判断する・覚える
という対比で、フロントエンドとサーバーサイドの役割の境界線を説明しました。
「Vueはあくまで画面担当」という点を強調することで、初学者にも理解しやすい内容となりました。
② 開発環境の構築
続いて、開発に必要なツールの全体像を説明しました。
- Node.js:JavaScriptを実行するための基盤
- Vue3 + Vue Router:画面を構築する仕組み
- Cursor:AI機能を備えた開発エディタ
その後、実際に以下のインストール作業を実施しました。
- Node.js のインストール
- Cursor のインストール
- Cursorの推奨プラグイン導入
参加者同士でサポートし合いながら進める場面も多く、実践的な学びの場となりました。
③ Vue3プロジェクト作成
環境が整った後は、以下のコマンドでVue3プロジェクトを作成します。
npm create vue@latest
この工程では、一部の参加者で npm コマンドが認識されない事象が発生しました。
エラーが発生した時には、メンバー同士でフォローしあい、無事にプロジェクト作成まで進めることができました。
④ 起動デモ
最後に、以下のコマンドで開発サーバを起動し、画面表示を確認しました。
npm run dev
ローカルサーバが立ち上がり、ブラウザにVueの初期画面が無事表示されることを確認できました。
さらに時間に余裕のある方には、UIライブラリであるElement Plusの導入にも挑戦してもらいました。
VueとUIコンポーネントを組み合わせることで、画面開発のイメージを体験できたと思います。

今回の勉強会では、
- Vue3の役割理解
- Cursorを使った開発環境構築
- Vueプロジェクト作成と起動体験
までを一通り実施しました。
今後もCursorをテーマにした開発勉強会を継続して開催していく予定です。
次回の記事もぜひお楽しみに!




















































