０．はじめに
この度、G's（旧G's ACADEMY）でG's Playgroundというのが立ち上がり、
自分の作りたいアプリを設計・開発・運用まで1人でやりきり、
それを月に1度アウトプットとして記事を上げて、
LP会で進捗報告を行うという形式のラボに参加することになりました。
自分は昨年10月にG'sのLAB18期として入学し、今年4月に卒業をして、
現在就職活動中です。
そんな状況もあって、何となくだらけた気分に自らケツを叩く気持ちで、
こちらのラボに参加した次第です。
今回が1回目の記事作成ということで、
現状の進捗報告として本記事を作成しました。
※今回は作成アプリの検討。技術選定、スケジュール策定、
上記3つのAI活用についての記事となります。
１．何を作るか
作成アプリ： 自己紹介LP
自己紹介＋ポートフォリオとしてGithub、QiitaのAPIを使って、
自身のレポジトリや記事の一覧をLPに表示させる。
■作成機能
- 自己紹介（軽い職務経歴）
- スキル情報一覧（Github・Qiita一覧表示）
- コンタクトフォーム
２．技術スタック
■フロントエンド
- Next.js 15
- TypeScript
- Styled-componets(CSS-in-JS)
■バックエンド
- NestJS
-
PrismaDBのCRUDが無いため -
PostgreSQLDBのCRUDが無いため
■開発環境
- Docker
- DevContainer
- Turborepo (モノレポ管理)
- Github Actions（CI/CD）
- Jest + React Testing Library(UT)
- Playwright(e2e)
- Husky、Commitlint（Conventional Commits）
- Resend(メール)
- reCAPTCHA v2
- React Hook Form＋Zod
■AI
- Cursor(IDE)
- Gemini Code Assist ＋ Coderabbit(コードレビュー)
■デプロイ
- Vercel(フロント)
- Render(バックエンド)
３．開発フロー
スケジュール
全体
- 2025/07〜2024/11（1日4h ※月〜金で週20h目安）
学習期間
- 7/18〜7/31
Next.js、Nest.js、Docker、DevContainer、Turborepo、Figmaの学習期間
画面設計
- 8/1〜8月LT会
Figma使って画面レイアウト設計
開発環境構築
- 8月LT会後〜2W
開発環境を構築して初期状態をGithubにPush
実装・リファクタリング（フロントエンド）
- 9月上旬〜9月末
テスト（フロントエンド）
- 10/1〜10/10(AIコーディング予定)
実装・リファクタリング（バックエンド）
- 10/14〜11/7
テスト（バックエンド）
- 11/10〜11/21(AIコーディング予定)
デプロイ
- 11/25〜11/28
作成後
- デプロイ先をAWS（or Cloudflare）に移行
- 他に作成したアプリや機能を検討
４．上記を検証するうえでAIをどのように活用したか
■技術選定
- Claude課金しているため（個人的にClaude Codeを使っているため）、
Claude（Opus）を使って技術選定やライブラリの選定を壁打ちしました。
- 同じ類のライブラリを複数提示された際は、
一般的に利用されているか、個人レベルの開発で何をつかっているか、
適用する際のメリット・デメリットを聞いた上で選定しました。
- フロント・バックの言語については、
個人として興味のある言語を選定してます
■開発フローサポート
- 技術選定したものをベースとして、スケジュール感をAIと壁打ち
総工数：約3-4ヶ月（週20-30時間作業想定）という提示を受け、
週20h（1日4h）をベースに学習期間含めスケジュールを策定。
さいごに
これから約1年間、毎月進捗状況を記事に挙げていきます。
目標はReact（Next.js）＋NestJSの理解を深めて、
フルスタックエンジニアとして活躍出来るエンジニアに成長することを目指して
日々自己研鑽に励みたいと思います。