• keigoさん流 Nuxt UIとCursorを組み合わせた爆速Webアプリ開発

keigoさん流 Nuxt UIとCursorを組み合わせた爆速Webアプリ開発

2024.11.30読了目安: 8分
メンター執筆
keigoさん流 Nuxt UIとCursorを組み合わせた爆速Webアプリ開発

この記事に登場するメンター

こんにちは、keigoです。最近、趣味としてNuxt UIを使った管理画面開発に取り組んでいます。

Nuxt UIについてあまり詳しくない状態からスタートしましたが、Cursorというエディタを活用することで、驚くほどスムーズに開発を進めることができました。

今回は、Nuxt UIとCursorを活用した開発について、私が個人的に心がけている点も交えながら紹介します。

Nuxt UIとは

Nuxt UI は、美しく一貫性のあるUIを簡単に構築できるUIコンポーネントライブラリです。Tailwind CSSとshadcn/uiをベースとしています。

Nuxt UI Proのテンプレート

Nuxt UI Proには、様々なテンプレートがあります。

https://ui.nuxt.com/pro/templates

記事執筆時点では、以下の4つです。

  • Landing
  • Docs
  • SaaS
  • Dashboard

私が管理画面を開発する際、Dashboardのテンプレートを参考にしました。

Dashboardのテンプレートは、管理画面開発に役立つコンポーネントが多く揃っています。

Dashboardデモページ のスクリーンショット

Nuxt UIを使うことで感じたメリット

私がNuxt UIを使って特に嬉しいと感じたポイントは以下の通りです。

  • アクセシビリティサポート：アクセシビリティ対応が苦手でも、一定水準のアクセシビリティが担保されているため、安心して機能開発に専念することができました。
  • レスポンシブ対応：レスポンシブ用のスタイルを当てずとも表示が崩れないため、マークアップ工程を大幅に削減できました。
  • スタイリングの学習コスト削減：スタイリングの学習コスト削減：Nuxt UIはTailwindとshadcnベースで作られており、既存の知識や、比較的汎用性の高い知識で実装できました。
  • ライトモードとダークモード対応：独自で対応すると意外と手間がかかるものです。Nuxt UIに標準で備わっていたおかげで、機能開発に集中することができ、大いに助かりました。

Cursorの活用

次に、Cursor について紹介します。Cursorは、AI支援機能付きのコードエディタです。次の作業を予測する、エディタ上でAIに技術的な質問をする等、様々なAI支援機能を搭載しています。

Cursorの@Docs機能について

@Docsシンボルを使用することで、指定したドキュメントをクロール、インデックス化し、ドキュメントに従って固有の知識を読み取ってくれます。

これにより、ソースコード予測の精度が高まったり、ドキュメントの内容に対して的確な質問回答ができるようになります。

Nuxt公式ドキュメントをDocsに指定する様子

現時点で、Nuxt UIのドキュメントを読み込ませる場合は Custom Docs を使用する必要があります。

詳細については、以下の公式ドキュメントをご覧ください。

https://docs.cursor.com/context/@-symbols/@-docs#docs

ちなみにDocs機能を使用しなくとも、CursorはNuxt UI独自の構文の補完をしてくれました。

補完の精度が低かったり、ハルシネーションが発生してしまっている場合に、Docs機能が役に立つと考えます。

Cursorを効果的に使うために心がけていること

Cursorを効果的に使うために、以下のことを心がけています。

1. タスクを明確にし、細かく分割する

まずは作りたい機能を明確にし、それを小さなステップに分解します。AIに対しても人間に対しても、広範囲な作業を一度に依頼すると期待通りに物事が進まない可能性が高いのです。

タスク分割についての詳細な記事は画像をクリック:

2. ロジックとUIを分離する

マークアップの前に、ロジックを composables や utils に実装することを心がけています。

このアプローチを取ることで、ロジックの開発と見た目の開発を分離でき、AIに対してより具体的な指示を与えられるようになります。

3. 明確なプロンプトを作成する

Cursorに指示を出す際は、具体的で明確なプロンプトを心がけています。

例えばユーザーリストテーブルの見た目を作成する場合、抽象的な指示と具体的な指示の例を以下に示します。

- 🙅‍♂️: ユーザーリストを作成して

- 🙆‍♂️: UTableコンポーネントを使用して、ユーザーリストを表示するテーブルコンポーネントを作成してください。カラムには、名前、メールアドレス、場所を表示するようにしてください。また、それぞれのカラムはsortableをtrueにし、ソート可能にしてください。

具体的な指示を心がけることで、より適切なコードを提案してくれるようになりました。

おわりに

Nuxt UIとCursorを組み合わせることで、爆速でWebアプリの開発を進めることができました。

このアプローチに慣れると、自ら試行錯誤しながらコードを書く機会が大幅に減少します。

タスク分解の段階でCursor向けのプロンプトを事前に練り上げておけば、場合によってはプロンプトをコピペするだけで、ロジックやUIデザインの開発をほぼ完結することも可能です。

ぜひ皆さんも試してみてください！

いかがでしたか？

記事の内容について気になることがあれば、TechTrainの面談からkeigoさんに質問もできます。

みなさんの「記事、読みました！」の声がメンターにとっても運営にとっても励みになります。ぜひ読んだ方は感想などを伝えてもらえたらとても嬉しいです。

メンター執筆シリーズについて

メンター執筆シリーズはこれからも定期的に配信中。

次回のテーマは「これであなたもAIエンジニア！AIエンジニアリングのファーストステップ」です。お楽しみに〜！