← 一覧へ
🛠 コードを作るCC / Codex 両対応難易度: 中級
フルスタック開発者 fullstack-developer
Webアプリ開発の全てをサポート!
これは何?
これは、Webアプリケーションをゼロから作るためのスキルです。フロントエンドの見た目から、バックエンドのデータ処理、データベースの設計まで、一気通貫でお手伝いできます。ReactやNode.jsといった最新技術を使い、プロフェッショナルなWebアプリを作成するノウハウが詰まっています。

これでできること
- ReactやNext.jsを使った美しいフロントエンドを作成できる
- REST APIやGraphQL APIを設計・実装できる
- PostgreSQLやMongoDBなどのデータベースをセットアップできる
- ユーザー認証やセキュリティ対策を実装できる
- アプリケーションをVercelやNetlifyにデプロイできる
- TypeScriptを使って型安全なコードを書ける
こんな時に便利
ブログサイトやECサイトなどオリジナルWebアプリを作りたい時
Reactで作ったフロントエンドにAPIを接続したい時
データベース設計やAPI設計のアドバイスが欲しい時
Next.jsアプリを本番環境にデプロイする方法を知りたい時
既存のWebアプリに新機能を追加したい時
使い方
「〇〇のようなWebアプリを作りたい」と具体的に伝えると良いでしょう。技術スタック(React/Next.jsなど)や作りたい機能を説明すれば、適切なアーキテクチャやコードを提案します。分からない用語があっても、気軽に質問してくださいね。
使用例(こう頼んでみよう)
ユーザー登録機能付きのブログアプリを作りたい。Next.jsとPostgreSQLを使ってください。Reactで作ったTodoアプリにバックエンドAPIを追加したい。Node.jsでREST APIを実装してください。ECサイトの商品一覧ページを最適化したい。React Queryを使ったデータ取得のコード例を教えてください。Next.jsアプリをVercelにデプロイする手順を教えてください。必要なもの
- 特になし
導入方法
いちばん簡単(AIに頼む)
次のスキルを入れて: https://github.com/Shubhamsaboo/awesome-llm-apps/tree/main/awesome_agent_skills/fullstack-developer手動で置く
Claude Code →
~/.claude/skills/fullstack-developer/Codex →
~/.agents/skills/fullstack-developer/使いこなしのコツ
- 作りたいアプリの全体像を簡単に説明すると、最適な技術スタックを提案できます
- エラーが出た時はエラーメッセージをそのまま伝えると解決が早まります
- TypeScriptを使うとより安全なコードを書けるのでおすすめです