はじめに
本記事では、Cursorという次世代型エディタを使って、Qiita記事一覧を表示する自分用Webサイトを、GitHubとVercelを連携して開発・公開した体験を紹介します。開発経験が浅い方や非エンジニアでも、驚くほど簡単かつスピーディにプロダクトを構築できるのが今回のポイントです。
今回のプロジェクトでは以下のツールとサービスを使いました：
- Cursor: AI搭載のエディタ。自然言語での開発指示が可能
- GitHub: ソースコード管理
- Vercel: デプロイ&ホスティング
- Qiita API: Qiitaから記事データを取得
全体の開発フロー
- CursorでNext.jsプロジェクトを作成
- Qiita APIを利用して記事一覧を取得するコードを生成
- デザイン・検索機能・ページネーションを実装
- GitHubにPush
- Vercelで自動ビルド&公開
Step 1: プロジェクトの作成
まずは以下のコマンドでNext.jsプロジェクトを作成。
npx create-next-app@latest .
Cursorを使えば、この手順すらも自然言語で「Next.jsプロジェクトを新規作成して」と打ち込めば完了。驚くほど手間が省けます。
今回はすでに構築済みのものを更新する内容になっています。最初のとっかかりについては別途記事を書きます。
こんな感じの個人サイトを実験的に作成しています。
Step 2: Qiita APIとの連携
Qiitaの公式APIを使って、自分のアカウントから記事を取得します。Cursorに対して：
Qiitaのアクセストークンを使って、自分の投稿記事を取得するAPIクライアントを書いて。
と指示するだけで、lib/qiita.ts のような形でコードを生成してくれました。
Qiitaアクセストークンの取得
- Qiitaにログイン
- アクセストークン作成ページにアクセス
- 必要なスコープを指定してトークンを発行
-
.env.localに下記のように記載。キー名は任意に決めて大丈夫です。
QIITA_ACCESS_TOKEN=your_token_here
Step 3: 記事一覧の作成とスタイリング
pages/articles.tsx を新規作成し、記事のタイトル・タグ・投稿日などを表示。CSSはTailwind CSSを利用。
- 記事一覧のレイアウトはPodcast風にカード形式で表示
- タイトル・タグによる検索機能付き
- ページネーション（10件ずつ表示）
- スマホでも見やすいレスポンシブデザイン
Cursorに指示するだけで、必要なスタイルや機能を簡単に実装できます。
今回はすでに実装しているPodcastページのようなレイアウトや検索機能をつけてほしいと指示しました。
修正後は、npm run devで開発環境上で確認します。
Step 4: GitHubとVercelで公開
開発が一通り終わったら、GitHubにコードをPushします。ただし、.env.localなど機密情報はGitに含めないように注意。
代わりに、Vercelの環境変数に登録します：
- Vercelのプロジェクトページを開く
- 「Settings」→「Environment Variables」へ
-
QIITA_ACCESS_TOKENを登録
これでGitHubからPushすると、Vercelが自動でビルドを行い、公開されます。
ちなみに、コミットする際に修正内容をAIにまとめてもらいコメントとすることも簡単にできます。
エラーが出たとき
環境変数を登録し忘れると記事が反映されません。Vercel上でエラー内容を確認して再ビルドしましょう。
Step 5: 自動更新と注意点
-
getStaticPropsを使って、1時間ごとに記事を更新（ISR） - Qiita APIの使用にはアクセストークンが必要
-
.env.localは必ず.gitignoreに追加
まとめ
Cursorを使えば、開発経験が浅くても、まるで会話するようにWebアプリを構築できます。QiitaのAPIとの連携も簡単で、GitHub + VercelによるCI/CDの流れもスムーズです。
生成AIの活用により本当にウェブ開発は簡単になりましたね！