非エンジニアがVibe Codingで業務システムを2ヶ月で作った話 - 司法書士向け法務局判定マップ開発記

# 非エンジニアがVibe Codingで業務システムを2ヶ月で作った話 - 司法書士向け法務局判定マップ開発記

## はじめに

私は司法書士関係の仕事をしていた、いわゆる「非エンジニア」です。プログラミング経験はほぼゼロ。JavaScriptをコピペしたことがある程度。

そんな私が2025年2月、**Vibe Coding**という概念を知りました。

「日本語で指示するだけでコードが書ける」

正直、最初は半信半疑でした。でも、実際にやってみたら...本当に動くシステムが作れてしまったんです。

この記事は、コードが書けない私が、AIと日本語での対話だけで実用的な業務システムを作った2ヶ月間の記録です。

## 作ったもの

### 🗺️ 司法書士向け法務局管轄判定マップ

![スクリーンショット 2025-06-22 14.26.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4120090/b395d0af-e035-4054-8697-81d59eabd2d9.png)


**デモURL**: https://nextjsfrontend-prototype.up.railway.app/

（※URLが "Create Next App" のままなのは...試作品だから許してください😅）

### 何ができるの？

- 📍 住所を入力すると、管轄の法務局を瞬時に判定
- 🗾 地図をクリックしても判定可能
- 🔍 表記揺れ（全角/半角、旧字体など）を自動補正
- 🏘️ 地番と住居表示の両方に対応

### なぜ作ったの？

司法書士の実務では、不動産登記の際に「どこの法務局に申請すればいいか」を判定する必要があります。

これが意外と面倒で...
- 「〇〇市（旧××町区域を除く）」みたいな複雑な管轄
- 地番と住居表示の使い分け
- 京都の「〇〇通〇条下ル」みたいな特殊な住所

こういった複雑な判定を自動化したかったんです。

## Vibe Codingとは

簡単に言うと、**プログラミング言語を書かずに、日本語でAIに指示を出してシステムを作る**手法です。

```
私：「住所を入力したら管轄の法務局を表示するWebアプリを作って」
AI：「了解しました。Next.jsとTypeScriptで実装しますね」
私：「え、なにそれ...でもお願いします」
```

こんな感じのやり取りでコードが生成されていきます。

## 開発環境の変遷 - 波乱万丈の2ヶ月

### Phase 1: Windsurf + Claude 3.5 Sonnet（2025年2月）

最初に使ったのは**Windsurf**というツール。VS Codeをベースにした、AI機能付きのエディタです。

#### 最初の挫折

Claude 3.5 Sonnetは...なんというか、**暴れ牛**でした。

最大の問題は**コンテキスト長の短さ**。

```
私：「A.jsでログイン処理を実装して」
Claude：「了解です！」
私：「次にB.jsでも同じ認証チェックを...」
Claude：「了解です！（全く違う実装をする）」
私：「さっきと同じように...」
Claude：「さっき？なんのことですか？」
```

ちょっと前の指示をすぐ忘れる。同じ処理を違うファイルで重複実装する。この繰り返しで、最初の2週間で作ったものは**何も残っていません**。

### Phase 2: Gemini 2.5 Pro登場（2025年3月）

3月に入って、Google's Gemini 2.5 Proが使えるようになりました。

これが...本当に**時代が変わった**と感じた瞬間でした。

- 指示を正確に理解してくれる
- 既存のコードを壊さない
- 適切な提案をしてくれる

ようやくプロジェクトが形になり始めました。

### Phase 3: Cursor移行 + GPT-4.1/OpenAI o3（2025年4月〜）

WindsurfでMCPサーバーの不具合が発生し、**Cursor**に乗り換えました。

CursorではGPT-4やOpenAI o3も使えるようになり、モデルを使い分けながら開発を進められるように。

## 非エンジニアが学んだVibe Codingのコツ

### 1. ドキュメント管理が命

AIには「コンテキスト長」という制限があります。読み込める文字数に限界があるんです。

だから、プロジェクトの情報を適切に文書化しておくことが超重要。

```markdown
# プロジェクト設計書

## 概要
司法書士向けの法務局管轄判定システム

## 技術スタック
- Frontend: Next.js, TypeScript, MapLibre GL
- Backend: Rust, Axum, PostGIS
- 住所正規化: abr-geocoder

## 主要機能
1. 住所入力による管轄判定
2. 地図クリックによる判定
3. 表記揺れの自動補正
...
```

こんな感じの文書を用意して、新しいチャットを始める時に読み込ませます。

### 2. AIモデルの使い分け

それぞれのAIには個性があります：

- **Claude 3.5**: 創造的だけどコンテキストが短い。ゼロからドキュメントの雛形を作るのに向く
- **Gemini 2.5 Pro**: コンテキスト長が長い。プロジェクト全体の整合性を保つのに最適
- **GPT-4**: スクリプトを書くまでもないような簡単な変換処理に
- **OpenAI o1**: 複雑な問題解決に強い。迷ったらこれ

### 3. 適切な指示の出し方

#### ❌ 悪い例
```
「もっといい感じにして」
「エラーが出るから直して」
```

#### ⭕ 良い例
```
「住所入力フォームに、入力中の住所候補を表示するオートコンプリート機能を追加して。
候補は最大5件まで表示し、キーボードの上下キーで選択できるようにして」
```

具体的に、何をどうしたいかを明確に伝えることが大切です。

## 技術スタック（AIが選んでくれた）

私「住所を判定するシステムを作りたい」

AI「それなら、こんな構成はどうでしょう？」

私「Rustがいい（無茶）」

AI「死ね（わかりました）」

### Frontend
- **Next.js + TypeScript**: モダンなWebフレームワーク
- **MapLibre GL**: 地図表示ライブラリ

### Backend  
- **Rust + Axum**: 高速なAPIサーバー
- **PostGIS**: 地理空間データベース
- **abr-geocoder**: デジタル庁製の住所正規化ツール

### インフラ
- **Railway.app**: デプロイが簡単なPaaS

正直、Rustなんて当然書けません。でもAIが全部セットアップしてくれるので、なんとかなりました。

後から調べたら、めちゃくちゃ良い技術選定だったことが判明。さすがAI。

## 実際の開発風景

こんな感じで進めていました：

```
私：「地図の表示が重すぎて、ちょっと触っただけでサーバーのCPUが30個も動いてる...」

AI：「それはベクトルタイルを動的生成してるからですね。pmtilesという形式で事前に生成して静的配信すれば軽くなりますよ」

私：「よくわからないけど、軽くなるならお願い！」

AI：「了解です。ビルドスクリプトを作成して...」
```

結果：CPUリソース使用量が95%削減。マジで神。

## 2ヶ月間の開発で感じたこと

### エンジニアを目指していた気持ちの変化

正直、Gemini 2.5 Proが出た時は衝撃でした。

「プログラミングを勉強してエンジニアになろう」と思っていた気持ちが、打ち砕かれたような...

でも、逆に考えれば、**プログラミングを学ばなくても、アイデアを形にできる時代**が来たということ。

### Vibe Codingの可能性と限界

#### 可能性
- 非エンジニアでも実用的なシステムが作れる
- アイデアから実装までのスピードが圧倒的に速い
- 最新の技術スタックを自然に使える

#### 限界
- AIの気分（？）に左右される
- 細かい調整は結局理解が必要
- デバッグは相変わらず大変

### 今後の展望

現在は試作品レベルですが、今後は：

- 登記所備付地図データへの移行
- UIの改善
- モバイル対応

などを進めていく予定です。

## まとめ

非エンジニアの私でも、2ヶ月で実用的なシステムを作ることができました。

必要だったのは：
- 💪 諦めない心（これが一番大事）
- 📝 ドキュメントを書く力
- 🗣️ AIに明確に指示を出す力

もしあなたも「作りたいもの」があるなら、ぜひVibe Codingに挑戦してみてください。

プログラミングができなくても、アイデアを形にできる時代が来ています。

---

**作ったもの**: https://nextjsfrontend-prototype.up.railway.app/

質問や感想があれば、ぜひコメントください！

--- 


...この記事はClaude Code でClaude 4 Opusが作成しました。

元記事はこちら。
↓
https://note.com/jolly_lilac46/n/nba60bb53352d


この僕の記事をベースに書いてもらったらなんか換骨奪胎されすぎて別物になってるんですけど...

非エンジニアなのはあってるからええか。

https://zenn.dev/parmenion/books/c5e1a311372a5e

こちらは開発時に使用したドキュメント。応援してくださる方はご購入いただけると感謝しながらコーヒー代にします