はじめに

本記事では、Cursorという次世代型エディタを使って、Qiita記事一覧を表示する自分用Webサイトを、GitHubとVercelを連携して開発・公開した体験を紹介します。開発経験が浅い方や非エンジニアでも、驚くほど簡単かつスピーディにプロダクトを構築できるのが今回のポイントです。

今回のプロジェクトでは以下のツールとサービスを使いました：

全体の開発フロー

まずは以下のコマンドでNext.jsプロジェクトを作成。

npx create-next-app@latest .

Cursorを使えば、この手順すらも自然言語で「Next.jsプロジェクトを新規作成して」と打ち込めば完了。驚くほど手間が省けます。

今回はすでに構築済みのものを更新する内容になっています。最初のとっかかりについては別途記事を書きます。

こんな感じの個人サイトを実験的に作成しています。

Qiitaの公式APIを使って、自分のアカウントから記事を取得します。Cursorに対して：

Qiitaのアクセストークンを使って、自分の投稿記事を取得するAPIクライアントを書いて。

と指示するだけで、lib/qiita.ts のような形でコードを生成してくれました。

QIITA_ACCESS_TOKEN=your_token_here

pages/articles.tsx を新規作成し、記事のタイトル・タグ・投稿日などを表示。CSSはTailwind CSSを利用。

Cursorに指示するだけで、必要なスタイルや機能を簡単に実装できます。

今回はすでに実装しているPodcastページのようなレイアウトや検索機能をつけてほしいと指示しました。

修正後は、npm run devで開発環境上で確認します。

開発が一通り終わったら、GitHubにコードをPushします。ただし、.env.localなど機密情報はGitに含めないように注意。

代わりに、Vercelの環境変数に登録します：

これでGitHubからPushすると、Vercelが自動でビルドを行い、公開されます。

ちなみに、コミットする際に修正内容をAIにまとめてもらいコメントとすることも簡単にできます。

環境変数を登録し忘れると記事が反映されません。Vercel上でエラー内容を確認して再ビルドしましょう。

Cursorを使えば、開発経験が浅くても、まるで会話するようにWebアプリを構築できます。QiitaのAPIとの連携も簡単で、GitHub + VercelによるCI/CDの流れもスムーズです。

生成AIの活用により本当にウェブ開発は簡単になりましたね！