AIとCursorで作るPDF編集アプリ｜開発からデプロイまで2時間で完了

## はじめに

最近、生成AI（特にLocal LLM）を扱う開発に関わっているのですが、ふと「Cursor使ったことないな」と思い、試してみることにしました。

ちょうどそのタイミングで、**PDFのページ編集（削除・複製・結合）がオンラインで手軽にできる無料サイトがほとんど存在しない**ことに気づき、「あれ、これAIで爆速開発してみたら面白いんじゃ？」と。

結果的に、**AIとCursorの力を借りて、開発からデプロイまで2時間で**完了したので、その記録を残しておきます。

---

## 完成したアプリはこちら！（公開中）

![Screen Recording 2025-04-06 at 21.02.55.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2646082/3701e99a-b895-4f51-8f4f-f1d038142bb6.gif)


📎 実際に使ってみたい方はこちら：

- ✅ 公開アプリ（無料）:\
  [https://pdf.motoya.click/](https://pdf.motoya.click/)

- 💻 GitHubリポジトリ（コードも公開中）:\
  [https://github.com/motoya0118/edit\_pdf\_made\_in\_cursor](https://github.com/motoya0118/edit_pdf_made_in_cursor)

---

## たった2時間でここまでできた！開発＆デプロイの内訳

### ⏱ 所要時間内訳

- **実装時間**：約45分
- **デプロイ時間**：約1時間（CloudFrontで完了）

最初は Lambda をバックエンドに想定していたのですが、「あれ、PDF編集ってフロントだけで完結できるのでは？」と気づき、**途中で方向転換**。結果的に、完全に JS だけで完結しました。

### 👓 開発者タイプ別の感想まとめ

#### 🧑‍💼 マネージャー視点

「フロントエンドが超強いエンジニアとペアプロしてる気分」でした。

#### 🧪 テスター視点

バグも出るけど、Cursorに“再現手順”と“現象”を伝えると**即修正される**。まるで理想のチームメイト。

#### 👨‍💻 エンジニア視点

正直、**自分の数倍の速度で動いてくれてる**と感じました。人間の限界を超えてる…

### ✅ 総括

「世界、もう変わっちゃってるんだな」と実感しました。

---

## AIと一緒に開発するってどういう感じ？実際のやりとりを公開！

ここからは、**実際にCursorとどんなやりとりをしたか**をダイジェストで紹介します。

---

#### 🧠 仕様の提示（初期プロンプト）

```text
オンラインでPDF編集できるサイトは多いけど、ページ削除・複製・結合は有料になるから、
無料で提供できるようにしたい。

フロントは S3 + CloudFront、バックエンドは Lambda（Python希望）で構築したい。
```

→「作成しました！」&#x20;

(必要なファイルを一気に生成。UIも含めてベースがサクッと出てきて驚き...)

---

#### 👀 UI確認の相談

```text
UIで確認したいけど、ローカルでどう確認すればいい？
```

→ 「python3 -m http.server 8000 を使ってブラウザで確認できます。」

---

#### 🤔 ユーザーの気づき → UI改善

```text
読み込んだPDFのページ数しか表示されない。
アップロード後に中身が見えて、ページを選択して削除・複製できるようにしたい。
```

→ 「修正しました！」

---

#### 😤 UX改善要望 → 即対応

```text
ページ数が多いと、ボタンが下の方に行って操作しづらい。
ヘッダーに固定できないかな？
```

→ 「了解！修正しました。」

---

#### 💡 ユーザーの本質的な気づき → 構成変更

```text
あれ？フロントでPDF展開できてるってことは、削除・複製も全部フロントでできるのでは？
```

→ 「その通り！Lambda不要ですね。修正しました。」

---

#### 🐛 バグ報告 → デバッグ対応

```text
複製・削除のボタンを押すとエラーが起こるよー
```

→ Chromeの開発者ツールでコンソール確認してログ張ってー
(ログ提出 → 修正完了（3回ほどやり取り）)

---

#### 🚀 Git操作・デプロイ相談も一緒に

```text
このレポジトリの main に force push して！
```

→ 「OK牧場！」

```text
このプロジェクト構成のまま S3 に展開すればいいのかな？
AWS の操作手順教えて！
```

→ 「カスタムドメイン使う？ …不要ならこの手順で行くね」

```text
s3 と CloudFront 設定して公開までお願いー！
```

→ 「終わったよー」

```text
（あれ、403だ…）
デプロイしたURLにアクセスすると403になる
```

→ 「S3バケットのアクセス権限の設定をマネジメントコンソールから修正してみて」

```text
（指示通りにやったら…）
あ、正常に動いた！ここまでで2時間弱…やば…
```

---

## 技術スタック・使ったツール

| 項目      | 内容                      |
| ------- | ----------------------- |
| エディタ    | Cursor                  |
| 表示ライブラリ | PDF.js                  |
| 編集ライブラリ | PDF-Lib                 |
| 開発言語    | JavaScript / HTML / CSS |
| デプロイ方法  | AWS S3 + CloudFront     |

---

## まとめ｜AI駆動開発、まじでアリです

今回、PDF編集というちょっとややこしい領域でも、\*\*AIと一緒ならここまでできるのか…！\*\*と衝撃を受けました。

- 専門知識が浅くても動くものが作れる
- デプロイまで含めて“フル開発”ができる
- わからないところを相談しながら進められる

Cursor × AI、**これは間違いなく開発の新しい形**です。

---

## ⭐ GitHub Star & フィードバック募集中！

もし面白い！と思ってくれたら、GitHubにスターお願いします！\
開発の参考になれば嬉しいです。

👉 [https://github.com/motoya0118/edit\_pdf\_made\_in\_cursor](https://github.com/motoya0118/edit_pdf_made_in_cursor)

---

## 🎯 追記：公開後にやったこと（2025/04/07更新）

アプリ公開後、以下の対応を追加しました：

- 独自ドメイン（[https://pdf.motoya.click/](https://pdf.motoya.click/)）を取得し、CloudFrontと連携
- Route53のDNSレコードをCursorが自動設定（サブドメイン構成は手動修正）
- Google Search Consoleへの登録＆SEO対策
  - `sitemap.xml` / `robots.txt` / `使い方ページ` / `利用規約` をCursorが自動生成＆埋め込み

さらに悲劇も発生：

> **ノーテストでデプロイしたら「使い方」ボタンが爆発していて、修正しようとした瞬間にCursorの無料期間が終了**  
> ＝これは課金強制されている感www