bambiiiino
【個人開発ハッカソン - Week 2】スマホアプリ開発環境の紹介——MCPサーバー・Skills・CLAUDEルールで整える「AI駆動開発の下地」
2026年04月02日
学習振り返り
Tips
ハッカソン
bambiiiino
2026年04月02日
はじめまして、banbiiiinoと申します！ IT企業でインフラエンジニア（クラウドエンジニア）として5年ほど働いており、メインはAWSを用いたインフラ環境構築をしています。 【好きなこと・趣味】 ジャズ たまにジャムセッションやスタジオでトランペットを吹いています ボルダリング 最近始めてすっかりハマっています。現在はV1〜V2レベルの課題を練習中です 個人開発 独学でプログラミングを学びながら、さまざまなことにチャレンジしています 【意気込み・学びたいこと】 インフラの知識を活かしつつ、個人開発を通して「こういうのがあったらいいな」というアイデアを自分で形にしていきたいと思っています。フロントエンドやデザインはまだ学んでいる途中ですが、アウトプットを重ねながら着実に成長していきたいです。よろしくお願いします！
見出しはありません
要約を生成中...
ボルダリング記録アプリ「ボルログ（仮）」を作るにあたって、私が現状セットアップしている開発環境の設定についてご紹介します。
今回は Claude Code（AI コーディングアシスタント）を積極的に活用しながらアプリ開発を進めていきます（プランはProプランを契約）。
ただ「AI に聞きながらコードを書く」だけではなく、プロジェクト固有のルールや便利なツールを事前に仕込んでおくことで、毎回同じ指示を繰り返さなくて済むようにしています。
上記の記事を参考に、今回は3つの設定を行いました。
MCPサーバー：AIがデータやドキュメントに直接アクセスできるようにする
Skills：特定の作業をワンコマンドで呼び出せるカスタム機能
CLAUDEルール：このプロジェクト専用のコーディング規約や運用ルール
それぞれ詳しく紹介していきます。
MCPについての説明は先の記事に預けます。今回は2つのMCPサーバーを設定しました。
Supabase はこのアプリのバックエンドです。MCPサーバーを通じて、Claude がデータベースの構造やデータに直接アクセスできるようになります。
たとえば「このテーブルのレコード数を確認して」「マイグレーション前後でデータに問題が出ていないか確認して」といった指示を出すと、AIが直接 Supabase に問い合わせて回答してくれます。ダッシュボードを開いてSQLを手打ちする手間が省けるのでかなり便利です。
なお、誤操作防止のため CLAUDE.md にルールを明記し、アクセスできるのは本アプリのプロジェクトのみに制限しています（後述）。
こちらはライブラリの最新ドキュメントを取得するためのMCPサーバーです。
AI の学習データには「知識のカットオフ」があるため、最新バージョンのAPIの書き方や、変更されたオプションを知らないことがあります。Context7 を使うと、質問のたびに最新のドキュメントを取得してから回答してくれるので、「古い書き方で実装されてしまった」というミスが減ります。
React Native / Expo は特にバージョン間の変更が激しいので、こちらのMCPを重宝していこうと思います。
Skills は Claude Code のカスタム機能で、特定の作業に特化した処理をAIにさせることができるようになります。.claude/skills/ ディレクトリに置いたMarkdownファイルでAIの振る舞いを定義します。ユーザーの依頼に応じて、必要なタイミングでスキルが起動し、専門的な処理をおこなわせることができます。詳細は以下の記事がわかりやすく解説してくれています。
https://zenn.dev/acntechjp/articles/554765e5a0d0be
今回は設計フェーズをAIと一緒に進めるために、以下の3つを作りました。
「要件定義をしたい」と言うと起動するスキルです。
個人開発・MVPを前提に、対話形式で機能要件・非機能要件を整理してくれます。「今必要なものだけ」に絞る姿勢を持っていて、ISMS対応やマルチリージョン構成など個人開発には過剰な要件を積極的に除外してくれるのが気に入っています。
最終的に構造化された要件定義書（Markdown）を出力します。
「DB設計をしたい」で起動します。
要件定義書をもとに、テーブル定義・ER図（Mermaid記法）・Supabase のRLSポリシーをまとめた設計書を対話形式で作ってくれます。「論理削除にするか物理削除にするか」「多対多の中間テーブルは必要か」といった曖昧な部分を一つずつ確認しながら進めてくれるので、考え漏れが減りました。
「画面設計をしたい」で起動します。
React Native / Expo のモバイルアプリを前提に、画面一覧・画面遷移図・各画面のAPI/DB連携をまとめた設計書を作ってくれます。遷移図もMermaid記法で出力されるので、そのままドキュメントに貼り付けられます。
Skillを自作するのが面倒臭いという人は、Vercel Labs社が提供するskills.shというCLIツールを使うとラクです。
https://skills.sh/
これはskillsで利用できるスキルセットをワンコマンドでダウンロードして利用できるものです。以下におすすめのスキルなどを紹介してあるので必要に応じて利用すると良いです。私はvercel-react-native-skillsとgit-commitを使っています。
https://zenn.dev/aria3/articles/skills-sh-top-20-agent-skills
Anthropic社が提供しているskill-creatorというスキル作成のためのスキルを使うと便利。上記のスキルもskill-creatorを使って実際に作成してみました。以下で詳細に記載されてます。
https://zenn.dev/yamato_snow/articles/30e8dcf9490c88
Claude Code はプロジェクトルートの CLAUDE.md を読み込み、そこに書かれたルールに従って動きます。「毎回同じ指示に従わせたい」場合はここにルールを書いておけばOKです。
今回設定した主なルールは以下のとおりです。今後の作業に応じてルールは編集していく予定です。
- コンポーネントは関数コンポーネントで書く
- 変数名・関数名はcamelCase
- コメントは日本語で書く
- any型は使用禁止プロジェクトの統一感を保つために基本的なルールをまとめています。「コメントは日本語で」は個人的なこだわりで、後で見返したときに読みやすくするためです。
React Native / Expo のコードを書く際は、vercel-react-native-skills スキルに定義されたベストプラクティスに従うよう指定しています。
【パフォーマンス】
- 大きなリストには FlashList を使用する
- リストアイテムは memo() でメモ化する
- インラインオブジェクト・インライン関数をレンダー内に書かない
【アニメーション】
- アニメーションは transform と opacity のみに限定する
- タップ検知には Pressable の代わりに Gesture.Tap() を使用する
【UI パターン】
- 画像には expo-image を使用する
- TouchableOpacity の代わりに Pressable を使用する
- スタイルは StyleSheet.create で定義する
【レンダリング】
- 条件付きレンダリングに falsy && を使わない
- テキストは必ず <Text> コンポーネントで囲むReact Native はパフォーマンスに関するアンチパターンが多く、「なんとなく動いているけど実は重い」コードになりがちです。スキルと組み合わせてルールを明記することで、Claude が自動的にこれらを意識したコードを書いてくれるようになります。
- Supabase MCP は xxx プロジェクトのみアクセス
- ライブラリのドキュメントは必ず Context7 MCP で最新版を取得するMCPサーバーをせっかく用意しても、使い方のルールがないと意図しない動作につながることがあります。特にSupabaseへのアクセス制限は、誤って他のプロジェクトのデータを触ってしまわないように明示しました。
- タスクは GitHub Projects（Project番号: xx）で管理
- タスクの作成・更新・ステータス変更は gh コマンドで行う
- Issue をクローズするときは Project のステータスも Done に更新する今回プロジェクトのタスク管理はGitHub Issues と GitHub Projects を連携して行っていきます。「Issueをクローズしたのに Projects のカードが残ったまま」という状態を防ぐため、クローズ時のステータス更新もルールとして明記しています。
- Co-Authored-By の付与は不要
- フォーマット: <type>: <subject> + 本文
- タイプ: feat / fix / docs / refactor / chore など
- 日本語可コミットメッセージに自動でAIの署名が入るのが気になったので、それを除外するルールを入れています。また、Conventional Commits に準拠しつつ日本語も許可することで、読み返したときにわかりやすいログを維持しています。
これらの設定を最初にまとめて作っておくことで、AI駆動開発の精度を上げておけると思います
参考までに、今回紹介した設定ファイルの配置場所は以下のとおりです。
bouldering-log/
├── CLAUDE.md # プロジェクトルールの定義
└── .claude/
├── settings.local.json # 許可ツール・権限設定
└── skills/
├── requirements-definer/ # 要件定義スキル
│ └── SKILL.md
├── db-designer/ # DB設計スキル
│ └── SKILL.md
└── screen-designer/ # 画面設計スキル
└── SKILL.mdMCPサーバーの設定は Claude Code のグローバル設定（~/.claude/）に置いています。
要約
コメント
まだコメントはありません。
