おはようございます。

最初は慣れ親しんだnotionで開発ログを書いていこうとしていたのですが、読んでみるとどうもつまらなく、ただの開発メモだなと思ってしまいました😅

Thanks for reading! Subscribe for free to receive new posts and support my work.

また、誰がどれくらい見にきてくれているのかもわからず、気軽にコメントもできる欄もないので少し寂しい感じもしていました。

なので、せっかくなのでブログっぽく書ければなと思いたちお試しで書いています。

ツールの登録

今回のPJでアーキテクチャ内で主に使おうとしている外部ツールを紹介します。いずれもGPTとのブレストで発見しました。本職ではAWSを使っていますが、今回を機に新しい技術に触れてみようというのと

vercel :webappを簡単にデプロイしてくれるツールです。フロントエンドを主に構成してくれます。
supabase: 認証やDB、ストレージ、簡単なプログラム実行をしてくれます。バックエンドを担当かな。
Browserless: 自動化部分です。ブラウザ操作を自動的にしてくれるツールです。
- ブラウザ操作はplaywrightとか無料のライブラリがあり、それを使おうとしていたのですが、問題がありました。
- それはwebappからローカルPC上のブラウザ操作を実行できないという点です。
- なので、別でサーバーを用意しておいてそこから実行させることが必要でした。（でもそのサーバーの立ち上げや維持は大変、、、そんなことは今回のvibe codingお試しPJの意にそぐわないと思っており悩んでいました😨）
- それを解決するのがこのツール！browserlessがサーバーをたててplaywrightの実行を代行してくれるので、私は簡単な専用のAPIを叩くだけでサーバーレスでブラウザ操作ができる！らしい！

cursorでコアwebapp開発

上のツールの調査はまだ甘いけど、vercel+supabaseでのコア開発をさせていきます。

Cursorで作っていくとき、簡単なアプリなら問題になることはないけど、作り込んでいくと思った通りに生成されずらかったり設計思想とズレた生成をしてくる時が多々出てきます。

こういうルールで作って下さいということを事前に指定しておけば、それが軽減できるのでそのルール作りをしました。

今回のGitHubリポジトリ　の.cursor/rulesを確認してみて下さい。プロジェクトの概要やWebAppの作成上のベストプラクティスなどを盛り込んでいます。

ちなみに僕が作ったのはproject-abstract.mdcだけで、それ以外はこちらの方のを参考にしています。