2026/03/08

【技術解説】確認行為サポートアプリ「Kakune（かくね）」の技術選定や設計思想について解説します

Tech

こんにちは、やまだゆうです。

今回は先日リリースした確認行為サポートアプリ「かくね」の技術選定や設計思想についてご紹介します。

プロダクト自体の紹介は以下の記事をご覧ください。

▶ 確認行為に苦しむ方のためのチェックアプリ「Kakune（かくね）」を公開しました

また、かくねはGithubでソースコードを公開していますのでご興味がある方はこちらもご覧ください！

▶ yamaday0u/kakune

この記事の内容

なぜ「かくね」でこの技術を試したのか
Remixと統合されたReact Router v7を使ってみた
Supabase / Vercelの選定理由
Claude Codeを開発体制に組み込んでみた
個人開発を通じて感じた成長と次の課題

なぜ「かくね」でこの技術を試したのか

今回「かくね」を開発するにあたって、技術スタックを選ぶ前にこんなことを考えていました。

「せっかく個人開発をするなら、普段の業務では試しにくい技術を使ってみたい」

仕事のプロダクトでは、学習コストやリスクを考えると新しい技術をいきなり投入しづらいことがあります。

でも個人開発なら話は別です。

失敗しても自分の責任。むしろ失敗から学ぶことのほうが多かったりします。

そこで今回は、以下の2つを個人的なテーマとして設定しました。

Remixと統合されたReact Router v7を実際に使ってみる
Claude Codeを開発体制に組み込んでみる

それぞれ試してみて感じたことを、以降のセクションで正直にお伝えします。

Remixと統合されたReact Router v7を使ってみた

選んだ理由

React Router v7はRemixと統合されたフレームワークで、SSR（サーバーサイドレンダリング）にも対応しています。

業務ではNext.jsを使っているのですが、「他にはどんなフレームワークがあるんだろう？」と競合を調べているうちにRemixに出会いました。

Remixの「薄いフレームワーク」という思想に強く共感して、必要以上に抽象化せず、Webの基本的な仕組みに忠実に作られているところが好きで、一度使ってみたいと思っていました。

RemixはReact Router v7として統合され、その思想がさらに洗練されたタイミングで試せたのはちょうどよかったです。

Reactからの完全脱却を目指したRemix3にも興味があります。正式にリリースされたら使ってみたいと思います！

Remix3に関する良い記事がありました。

Remix v3とReactのトレードオフを徹底考察：AI時代に再評価される「Web標準」への回帰 | レバテックラボ（レバテックLAB）

使ってみた感想

実際に触ってみると、ルーティングとデータ取得の設計がとてもシンプルで気持ちよかったです。

loaderでデータを取得してactionで更新する、というパターンが一貫していて、コードの見通しがよくなりました。

SSRに対応しているので、Supabaseへのアクセスをサーバー側で完結させられる点も、セキュリティ面で安心感がありました。

一方で、React Router v7はまだ情報が少なく、日本語のドキュメントがほぼない状態です。

公式ドキュメントを読み込む必要があり、そこは少し苦労しました。

とはいえ、英語の公式ドキュメントはしっかり整備されていましたし、わからないことはClaude Codeに相談しながら進められたので、大きな障壁にはなりませんでした。

React Router v7のチュートリアルをやると一気に理解ができるようになりました！

Supabase / Vercelの選定理由

Supabase

Supabas eはDB・認証・ストレージをまとめて扱えるBaaSです。

元々Supabaseについて存在すら知らなかったですが、技術選定についてClaudeに相談している中で知りました。

今回のアプリはDB管理・ユーザー認証・写真ストレージという3つの機能が必要でしたが、Supabaseひとつですべて完結できたのは大きな魅力でした。

個人開発での相性は抜群だと思います。

類似のサービスとしてFirebaseがありますが、あちらのDBはNoSQLだったので採用を見送りました。

無料枠でも今回作りたいものは十分実現できた点も、コストを気にせず開発に集中できる理由になりました。

Vercel

VercelはGitHubと連携するだけで自動デプロイが走るので、開発体験がとても快適でした。

また、Vercel Cronというcron機能があり、定期実行の仕組みも簡単に組み込めます。

今回はアップロードした写真を3日後に自動削除する処理をこの仕組みで実現しました。

ルートディレクトリ直下にvercel.jsonという名前でファイルを作ることで簡単にcronを設定できます！

なお、Vercel CronはUTC固定のため、JST 0:00に実行したい場合はUTC 15:00を指定する必要があります。

地味にハマりやすいポイントなので、Vercel Cronを使う方はご注意ください。

Claude Codeを開発体制に組み込んでみた

今回の開発では、Claude Codeをコーディングの補助としてだけでなく、開発体制そのものに組み込む工夫をしました。

CLAUDE.mdでプロジェクト仕様を丸ごと記憶させた

Claude CodeはプロジェクトのルートにCLAUDE.mdというファイルを置くと、その内容を自動で読み込んでくれます。

今回はここに技術スタック・ディレクトリ構成・DBスキーマ・ルーティング・開発コマンドなどをまとめて記載しました。

これにより、毎回「このプロジェクトはReact Router v7を使っていて…」と説明しなくても、Claude Codeがプロジェクトの全体像を把握した状態で会話を始められます。

副次的なメリットとして、個人開発でも仕様書を書く習慣が自然とつくようになりました。

「AIに伝えるために整理する」という行為が、自分の思考整理にもなっていたんだと思います。

settings.jsonで安全な権限設計をした

Claude Codeは.claude/settings.jsonで、実行を許可するコマンドをホワイトリスト形式で制御できます。

今回は以下のように設定しました。

{
  "permissions": {
    "allow": [
      "Bash(npm install:*)",
      "Bash(npm run build:*)",
      "Bash(npm run dev)",
      "Bash(git status:*)",
      "Bash(gh issue view:*)"
    ]
  }
}

許可したコマンドだけClaude Codeが自動実行でき、それ以外はブロックされます。

「AIに好き勝手やられたくない」という不安を持っている方にとって、この権限管理の仕組みは安心して使うためのポイントになると思います。

GitHub Actions × Claude Codeで自動コードレビューを実現

GitHubにはCopilotによるコードレビュー機能がありますが、これは追加課金が必要です。

そこで、GitHub ActionsとClaude Codeを組み合わせることで、追加コストなしで自動コードレビューの仕組みを構築しました。

PRを作成・更新するたびにClaude Codeが自動でコードをレビューし、PRにコメントを投稿してくれます。

問題がなければ「問題ありませんでした」とコメントされるので、レビュー結果が常に可視化された状態になっています。

個人開発はレビュワーがいないのが悩みの種ですが、この仕組みでその問題をかなり解消できました。

@claudeメンションでIssue対応・コード修正まで自動化

もう一つのGitHub Actions設定では、IssueやPRコメントで@claudeとメンションすると、Claude Codeが自動で応答・コード修正・コミットまで行ってくれます。

ただし、rmやcurlといった危険なコマンドは明示的に禁止しています。自動化しながらも安全に動かすためのガードを意識しました。

個人開発を通じて感じた成長と次の課題

できたこと

技術選定・設計・実装・デプロイまでを一人でやり遂げる経験ができました。

特に「Claude Codeをどう使うか」を自分で考えて開発体制に組み込めたことは、大きな収穫でした。

ただAIに頼るのではなく、AIをチームの一員として機能させる仕組みを作れたことに手応えを感じています。

React Router v7についても、公式ドキュメントを読み込みながら実際に動くものを作り上げられたのは自信になりました。

次の課題

一方で、テストコードがほとんど書けていない点は反省しています。

自動コードレビューは導入できましたが、そもそもテストがなければレビューの質にも限界があります。

次の個人開発ではテストも含めた開発フローを意識したいと思っています。

GitHubのリポジトリはPublicで公開しています。CLAUDE.mdやGitHub Actionsの設定も実際のコードで確認できるので、興味がある方はのぞいてみてください。