Claude Codeで結婚式web招待状を自作してみた

·5 min read

結婚式の招待状を、既製のweb招待状作成サービスを使わず自分で作ってみることにしました。技術スタックは Next.js + Vercel。フォームの回答は、スプレッドシートAPI経由でシートに直接書き込む形です。

結論からですが、Claude Code のおかげでコーディング自体はかなり楽でした。ただ、ちゃんと動いて安全なものを運用しようとなると、結局はいろんな知識と時間が要るなぁという感じでした。それでも、作っている時間はめちゃくちゃ楽しかったし学びが多かったので記録しておこうと思います。

最初はとにかく順調だった

まずはClaude Codeに叩き台を作らせました。「結婚式招待状を Next.js で作って。」とだけ指示をし、でてきた画面を見て、正直「めっちゃいい感じじゃん!これならすぐ終わりそうだ!」と思いました。フォームがあって、入力できて、見た目もそれっぽい。あまりに速いので、このまますぐ完成するのでは?とそんな気がしていました。

この最初のワクワクは、Claude Codeを触ったことがある人なら分かると思います。ゼロからイチが、本当にあっという間に立ち上がりますよね。

セキュリティが気になりだして本を読む

Claude Code で実装を進めるうちに、セキュリティが気になってきました。扱うのは他人の氏名や電話番号などの個人情報です。もしかしたらなんらかの攻撃が来て全員分のデータが漏れてしまうかもしれない。サイトに攻撃用のスクリプトが仕込まれてしまうかもしれない。心配性な性格もあって、だんだんと不安になってきました。

そこでセキュリティの本を読むことにしました。徳丸 浩さんの「体系的に学ぶ 安全なWebアプリケーションの作り方」という書籍です。ECC のセキュリティレビュー用スキルを回しながら実装していたので、結果的に大きな穴はなかったのですが、それでも、本番に出す前に自分の目で確かめておかないと落ち着きません。セキュリティの本を読んで、攻撃の仕組みや防御の方法をある程度知ることができました。これが大きな開発現場であれば、書籍の知識だけでは足りないのかもしれません。

ただ、知識を知らないと何をレビューすればいいのかすら分かりません。世の中にどんな脆弱性があって、どんな攻撃が成立するのか。そのあたりの知識をもつことで、安心して運用できるかどうかの判断がつくようになりました(まだまだ不完全だと思いますが)。

コードが読めると安心感が違う

幸い、自分はもともとエンジニアを3年くらいやっていた経験があったので、コードはある程度読めます。おかげで Claude Code が書いたものも自分でレビューすることができました。とくにセキュリティまわりは一行ずつ目を通し、Claude になんでその実装になるのか?これがないと何が起きるのか?と質問しながら、納得できるまでレビューしました。

地味だけど、ここがいちばん効いた気がします。Claudeの書いたコードを読めて、良し悪しを判断できるかどうか。これで完成物への安心感が全然違いました。 もし自分がコードを読めない状態で「とりあえず動いたからOK」で終わっていたら、完成物への不安はずっと残ったと思います。

テストは手動で40パターンを確認

バグで招待状がエラーになって、招待客が回答できない。これだけは絶対に避けたかったのでしっかりとテストを行うことにしました。

テストケース自体はいったん Claude Code に出してもいましたが、そこから「この観点だとチェックできてなくない?」「このケース抜けてない?」とやり取りを重ねて、最終的に40パターンになりました。

一周目はバリデーションまわりでいくつかバグが出ました。修正して、念のため全部もう一度通して、ようやく完成。

本来ならテストコードを書いて何度でも自動で回せるようにするのが「正しい」やり方だと思うのですが、一度きりしか使わない招待状でしたし、それなら手で確実に潰したほうが安心かなぁ、と判断しました。継続的に運用するサービスなら、ここは間違いなく自動化したほうがいいと思います。

規模が小さいから成立する

今回の招待状を使用するのは100人程度。アクセスが集中してサーバーが落ちる、みたいな心配はほぼありません。それでも一応、スパムやいたずら送信への最低限の備えを施しました。

これがもし何万人も使うサービスなら、負荷分散とかも含めて、そういった知識がごっそり要るんだろうなと思います。そう考えると、今回の規模だからこそ、Claude Code で作ることができたとも言えます。

要するに今回のものは、「個人の小規模な用途」という前提のうえに成り立っていて、その前提がない場合は必要になる運用知識や工数が一気に増えるのではないかと思います。

既製サービスのほうが早かったのでは...

正直、普通に招待状作成サービスを使ったほうが、作業はずっと早かったと思います。ある程度複雑なフォームも作れるし、表示もそれなりに速くできるし、セキュリティも担保されているでしょう。そう考えると、今回 Claude Code で自作したのは、効率だけで考えればあまり合理的ではなかったかもしれません。

それでも、自分で作ったものにはかなり満足しています。なにより、「あーでもない、こーでもない」と試行錯誤している時間が純粋に楽しく、責任をもって作りきったことで得られた経験は残りました。大きなサービスではないけれど、一つを最後まで作り切ったことで知識はだいぶ深まったと思います。

まとめ:理解できるともっと楽しい

僕はエンジニア経験3年程度で、正直あまり強いエンジニアでもなかったです。いままで自分以外が使用するアプリを1人で作りきったことはありませんでした。Claude Code でその部分を補ってもらいながら、今回の招待状を作ることができました。

Claude Codeを使えば、初心者でも楽にアプリが作れる、これは間違いないと思います。

でも、本番運用をする、漏れてはいけない情報を扱うなどの場合は、やはりある程度は知識をつけておく必要があるなぁと思いました。

そしてシステムの中身が分かってくると、もっと面白くなるし、脆弱性を知る、コードを読む、テストの観点を自分で考える、「この規模ならこの割り切りでいい、本格運用ならここが足りない」を自分で線引きする、そういった試行錯誤の過程も、すごく楽しいと思います。

今後、もっと生成AIの性能は上がり続けるでしょうし、全部 Claude Code に任せちゃうのも一つの正解ですが、自分で噛み砕いていく過程にも、また違った楽しさがあるなと感じました。

なので、すべてを Claude Code に頼りきらずに、自分でもコードを読んで、システムの知識をつけていく。当面はそのスタンスでいこうと思っています。