先日、社内でDevCampというイベントがあり、チームで「Qiita記事の検索/おすすめ共有アプリ」を開発しました。短期間でフロントからバックエンドまで一通り触る機会だったので、やってみて感じたことを記録がてら書いておきます。
どんなアプリを作ったか
Qiita記事を検索して、気に入った記事をユーザー同士でおすすめとして共有できるアプリです。機能としてはこんな感じです。
- GitHubやGoogleなど複数の方法でログインできる
- タイトル・投稿日・タグを指定してQiita記事を検索できる
- 気に入った記事をおすすめとして共有でき、他の人がおすすめした記事も見られる
技術構成
技術選定はこんな感じでまとめました。
- フロントエンド: Next.js 16 / React 19 / TypeScript / Tailwind CSS v4
- バックエンド: Next.js App Router(Server Actions)
- データベース: Supabase(PostgreSQL) + Prisma
- インフラ: AWS Amplify、開発補助としてClaude
フロントとバックエンドを同じリポジトリで完結させて開発効率を上げつつ、認証とDB周りはSupabaseとPrismaの組み合わせで型安全にまとめる、という方針にしました。
工夫したところ・悩んだところ
工夫した点としては、メールアドレスとパスワードだけでなくGitHubやGoogle経由でもログインできるようにしたこと、ログインしていなくても検索自体は使えるようにしたこと、Qiita記事らしくタグでの検索にも対応したことなどがあります。
逆に最後まで悩んだのが、画面の要素をどこまでコンポーネントとして切り出すべきか、認証の有無を踏まえてどんな画面遷移にするか、共通レイアウトに何を含めるべきか、といったあたりです。これは「正解」が一つに決まる話ではないので、チーム内で何度も話し合いながら進めました。
うまくいったこと
認証周りの実装や、事前に作った設計書をもとにうまくデザインへ落とし込めたあたりは、チームとしてうまくいったと感じています。具体的なイメージを持ちながら段階的に実装を進められたこと、AIに手伝ってもらいつつもコードの意味をちゃんと理解しながら進められたことも、振り返ると良かったポイントでした。
難しかったこと
難しかったのは、最初に設計書を作る段階で「どの要素をどこまで考えておくべきか」の基準が定まっていなかったことです。見積もりが甘くて、後から仕様の考慮漏れに気づいて手戻りする場面もありました。
あとは、AIに実装を手伝ってもらう中で、抜けや漏れに気づかないまま進んでしまうこともありました。提案されたコードをそのまま受け入れてしまうと、本来検討すべきだった分岐や例外処理がいつの間にか抜け落ちている、ということが何度かありました。AIに任せる部分と自分たちで設計を詰める部分のバランスを取るのは、思っていたより難しかったです。
定例ミーティング以外でお互いの進捗を確認しづらかったのも、地味に課題として残りました。
まとめ
フロントからバックエンドまで一通り実装してみたことで、アプリケーション全体の仕組みへの理解がかなり深まったのが、今回のDevCamp一番の収穫だったと思います。AIのサポートを積極的に取り入れた開発でもあったので、便利さと同時に、頼りすぎると見落としが出やすいという感覚も得られました。次にAIを活用した開発をやる機会があれば、この経験を活かしていきたいです。