# マーケターの救世主：Vibe CodingによるカスタムURL短縮ツール

> Claude + MongoDB + Zeaburのおかげで、私はテクノロジーの初心者から卒業しました！

## 記事の構成

- 前書き：私はテクノロジーの初心者から卒業しました！
- 課題と解決策
- 開発プロセス：Vibe Codingの魔法の発祥地
  1. とりあえず、プロンプトを送ろう
  2. AIの魔法でAIに立ち向かう！Claudeのコードのロジックを整理する
  3. 本当にワンクリックで済むの！？MongoDBデータベースをワンクリックでデプロイ
  4. 実行させろ！変数の設定を試みてデータベースとコードを接続
  5. デバッグ！デバッグ！デバッグ！
- Vibe Coding初心者の感想
- 参考文献

## 前書き：私はテクノロジーの初心者から卒業しました！

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/1.png)

2025年3月21日、私は正式に「テクノロジーの初心者」から脱出し、Vibe Codingアカデミーの門をくぐり、AIコーディングのインターン生になりました！

この出来事のきっかけは、会社の異なるマーケティングチャネルで外部リンクを整理しているときに、 **「完全にカスタマイズされたブランドURL」と「追跡プロセスの簡素化」** の両方を同時に提供できるツールが市場に存在しないことに気づいたことです。実際、この痛点は私の初めてのB2Bマーケティングの仕事で経験したもので、多くのデジタルマーケターも同様の問題に直面しています。

これまで、DNSのリダイレクトなどの技術的詳細に不慣れだったため、また、独自の開発のための適切な**MarTech（マーケティングテクノロジー）ツール** がなかったため、これらの問題は通常、技術チームの介入を必要としていました。プログラミングのバックグラウンドがない人間にとって、必要な「カスタムツール」を開発することはほぼファンタジーでしたし、既存の解決策を使用することしかできませんでした。

しかし、CursorやClaudeのようなAI協力ツール、低コードプラットフォームサービスの[Zeabur](https://zeabur.com/zh-TW)のおかげで、プログラミングのバックグラウンドがない人でも短時間で開発を完了し、デプロイできるようになりました。

今回は、Zeaburのテンプレートを使って[完全にカスタマイズ可能な短縮URL生成器](https://deploy.zeabur.app/)を開発してみました。プロセスの中で、Claude AIを使ってコードを生成し、MongoDBに短縮URLデータを保存し、さらにワンクリックでZeaburにデプロイしました。わずか2-3時間で、私は稼働中の小さなツールを開発し、元々の痛点を解決することに成功しました。

## 課題と解決策

本題に入る前に、市場にある短縮URLサービスの2つの大きな制限についてお話ししましょう。

### 1. 完全にカスタマイズされたドメインが使用できない

ほとんどの短縮URLサービスは、プラットフォームのブランドが残ります。たとえば、最も有名なBitlyは、ブランドマーケティングには不適切です（特に私のような強迫性障害のある人にとっては）。

私は、[https://deploy.zeabur.app/buildtemplate](https://deploy.zeabur.app/buildtemplate)のような**完全にカスタマイズ可能なドメイン** を使用したいと考えていました。

### 2. リンク管理機能が簡素であること

- これらのサービスは基本的な分析インターフェースを提供していますが、通常はUTMパラメータを管理するためにGoogleシートを追加で使用する必要があり、さらにキャンペーンビルダーを使用して追跡リンクを作成する必要があります。
- 長期的には、手続きが面倒になるだけでなく、人為的なエラーによりデータの正確性にも影響を与える可能性があります。

リンクの「生成」、「管理」、および「追跡」の3つの機能を統合し、カスタマイズ可能な短縮URLのニーズも解決するために、私は3時間Claudeと会話し、ドメインをカスタマイズできる短縮URL生成器を開発しました。また、MongoDBを使用してリダイレクトデータを保存できる基本的なクリックデータ追跡メカニズムを内蔵し、ユーザーが短縮URLの効果をバックエンドで確認できるようにしました。

## 開発プロセス：Vibe Codingの魔法の発祥地

### 1. とりあえず、プロンプトを送ろう

今回の短縮URL生成器の開発プロセスでは、手書きのコードは一切なく、Claude AIとの対話を通じて必要なプログラムロジックを段階的に生成しました。Node.jsの開発経験が全くなかったため、データベースを接続することは言うまでもありません。

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/2.png)

### 2. AIの魔法でAIに立ち向かう！Claudeのコードのロジックを整理する

次に、Claudeのコードのロジックを理解するためにコードをGPTに投げ返しました。

- **短縮URL生成ロジック** ：Claudeは`crypto.randomBytes(3).toString('hex')`というメソッドを生成し、短縮URLに6桁のランダムIDを付与して、衝突が起こりにくいようにしています。
- **MongoDBモデル設計** ：mongooseを使ってshortUrlとoriginalUrlのスキーマを設定し、アプリケーションがURL情報を保存および照会できるようにします。
- **リダイレクト処理とカウント更新** ：短縮URLがアクセスされるたびにMongoDB内の記録を自動で検索してリダイレクトし、同時にクリックデータを更新するAPIを構築しました。
- **Expressルーティング設計** ：`app.post("/shorten")`でユーザーがURLを送信できるようにし、`app.get("/:shortId")`でリダイレクトリクエストを処理し、完全なAPI構造を形成しました。
- **エラーハンドリングとセキュリティ** ：AIは、URL形式チェックや短縮URLが見当たらない場合の応答など、エラーハンドリングロジックを追加するのにも役立ち、システムの安定性を確保しました。

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/3.png)

ロジックが整理された後、ダッシュボードに進み、ホストを選択し、GitHubからデプロイを選択して、コードをデプロイしました！

### 3. 本当にワンクリックで済むの！？MongoDBデータベースをワンクリックでデプロイ

コードが準備できた後、コードを実行するための他の設定をどうすればよいかを調べ始めました。大学ではデータベース管理を学んでいなかったため、環境設定について何をどうすればよいかわかりませんでした。Zeaburの公式ウェブサイトを検索したところ、確かに公式のテンプレートが存在することがわかりました。

デプロイをクリックし、サーバーを選択すると、データベースが直接作成され、実際に「ワンクリック」で済みました！（その時、ダッシュボードがすぐにリダイレクトされて本当に驚きました？？？）

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/4.png)

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/5.png)

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/6.png)

### 4. 実行させろ！変数の設定を試みてデータベースとコードを接続

プロジェクトのバックエンドに入ると、変数のセクションに移動してMongoDBの環境変数キーと値を追加しました。すると、コードが実行されました！

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/7.png)

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/8.png)

### 5. デバッグ！デバッグ！デバッグ！

すべてが整ったと思いきや、最初の接続が失敗し、バックエンドのログに赤いエラーコードが表示されているのを見たとき、私は非常に愚かな命名ミスを犯していたことに気づきました（笑）。最初の方で特に注意を払っていなかったため、アップロードしたGitHubのコードは正常な命名規則や階層構造を守っておらず、実行時に対応するコードを取得できなかったのです。

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/9.png)

調整後、コードはついに実行されました！（さらにはチームのチャンネルで公表しました（笑））

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/10.png)

## Vibe Coding初心者の感想

![](https://cdn.zeabur.com/blogs/vibe-coding-claude-mongodb-url-shortener/11.png)

この短縮URL生成器はまだ非常に単純なMVPステージにありますが、私の想像の中では（およびスムーズなワークフローの追求において）、その拡張性は非常に高いです。将来的には、このツールをさらに発展させたいと考えています：

- 統合管理：リンクの生成から管理までを同じインターフェースで処理し、UTMライブラリを統合する
- データ分析：Google Data StudioやMetabaseと連携し、より詳細なデータインサイトを提供する
- A/Bテスト機能：異なる短縮URLバージョンを異なるページに導くことで、マーケティング素材のパフォーマンスをテストする

今回のVibe Coding体験を通じて、**技術的なバックグラウンドがなくても、AIやZeaburのような低いプログラムのハードルを持つプラットフォームを通じて、自分自身のデジタルマーケティングツールを作ることができること、マーケティングプロセスの自動化を実現できること** に気づきました。私は、マーケターがより自立してパーソナライズされたMarTechソリューションを創造できるように、Zeaburのさらなる利用シーンを探求することを楽しみにしています。

## 参考文献

- [短縮URL生成器のレビュー、重複短縮URL機能の回避](https://medium.com/@iCuisine/%E5%9B%9E%E9%A1%A7%E7%9F%AD%E7%B6%B2%E5%9D%80%E7%94%A2%E7%94%9F%E5%99%A8-%E9%81%BF%E5%85%8D%E9%87%8D%E8%A4%87%E7%9F%AD%E7%B6%B2%E5%9D%80%E5%8A%9F%E8%83%BD-3a565fefadc3)
- [Google URL Shortenerのリンクはもう利用できません](https://developers.googleblog.com/en/google-url-shortener-links-will-no-longer-be-available/)
- [短縮URL生成器 - 実装メモ](https://hackmd.io/@yy933/r1tHop5Kj)
- [MongoDB公式ドキュメント](https://www.mongodb.com/docs/)