0. はじめに
この度、G's（旧G's ACADEMY）でG's Playgroundというのが立ち上がり、
自分の作りたいアプリを設計・開発・運用まで1人でやりきり、
それを月に1度アウトプットとして記事を上げて、
LP会で進捗報告を行うという形式のラボに参加することとなりました。
自分は昨年10月にG'sのLAB18期として入学し、今年4月に卒業をして、
現在就職活動中です。
そんな状況もあって、何となくだらけた気分に自らケツを叩く気持ちで、
こちらのラボに参加した次第です。
今回が2回目の記事作成ということで、
現状の進捗報告として本記事を作成しました。
※1回目の記事はこちら
1. 進捗状況
1.1 スケジュール
全体
- 予定
2025/07〜2024/11（1日4h ※月〜金で週20h目安） - 実績
進捗遅延
学習期間
- 予定
7/18〜7/31
Next.js、Nest.js、Docker、DevContainer、Turborepo、Figmaの学習期間 - 実績
Devcontainer未完
画面設計
- 予定
8/1〜8月LT会
Figma使って画面レイアウト設計 - 実績
進捗通り（ざっくりレベルですが作成対象の画面作成完了）
1.2 作業詳細
1.2.1 Next.js学習
- （G's EXP）Next.js講座（7/17〜8/10）
G'sのEXPでNext.jsの講座があり、フロントエンド編を受講
ルーティング形式がPages Routerでしたが、
講師の方の丁寧な説明でPages Routerのお作法の理解が深まりました。
「福○の女」「一○大学卒のエンジニア」の談話は鉄板ネタ。
1.2.2 NestJS学習
NestJSは下記2つのUdemy講座を受講しました。
こちらはフロントがReact、バックエンドがNestJS(GraphQL)で
機能としては、アカウント作成・ログインとタスク管理（CRUD）の
簡単なTODOアプリでしたが、NestJSのお作法や
基本的なGraphQLの利用方法を学べるには適した講座だなと思いました。
但し、コース開講した時期がだいぶ古く
使用しているライブラリなどが古いバージョンだったり、
動画の通りに実装すると、lintエラーが起きたり
非推奨のコンポーネントが使われたりするので、
そこはAIやネットで対応方法を探りながら進める必要があります。
【技術スタック】
フロントエンド
- React - UI ライブラリ
- TypeScript - 型安全な開発
- Vite - 高速ビルドツール
- Apollo Client - GraphQL クライアント
- Material-UI - UI コンポーネント
バックエンド
- NestJS - Node.js フレームワーク
- TypeScript - 型安全な開発
- GraphQL - API クエリ言語
- Prisma - データベース ORM
- JWT - 認証システム
- 開発環境：Docker（Docker Compose）※PostgreSQLサーバー構築
こちらの講座が中々の曲者で・・・。
もう1つの講座と同様に開講からだいぶ日が経っているせいか、
ライブラリ自体が非推奨となっているものや、
（CSRF保護にcsurfを利用しているが現在非推奨）
Next.jsのルーティングもApp Routerではなく、Pages Routerを使っているため、
App Routerで想定して受講する方はだいぶ肩透かしを食らうことにんらいます。
自分はNext.jsはApp Routerで作成、CSRF保護には公式ドキュメントで推奨されていた
「csrf-csrf」ライブラリを使って受講を進めました。
Udemyの場合、講師によって、バージョンアップのたびに動画更新してくれる方がいれば、
ほぼ更新せずにそのまま放置の方もおり、
講師によっての良し悪しがあるので注意が必要ですね・・・。
因みに、「csrf-csrf」ライブラリについてQiitaで記事を書いたので、
参考までにリンクを貼ります。
【技術スタック】
フロントエンド
- フレームワーク: Next.js15.4.5 + React19
- 開発言語: TypeScript
- UI ライブラリ: Mantine + Tailwind CSS
- 状態管理: Zustand
- データフェッチング: TanStack React Query + Axios
- フォーム管理: Mantine Form + Yup
- アイコン: Heroicons + Tabler Icons
- セキュリティ: DOMPurify（XSS 対策）
バックエンド
フレームワーク: NestJS 11
データベース: PostgreSQL + Prisma ORM
認証: JWT + Passport
セキュリティ: bcrypt（パスワードハッシュ化）、csrf-csrf（CSRF 保護）
バリデーション: class-validator + class-transformer
開発言語: TypeScript + Jest（テスト）
開発環境：Docker（Docker Compose）※PostgreSQLサーバー構築
1.2.3 Figma学習
Figmaもだいぶ久しく触れてなかったので、
以前に購入していて積んデミー状態だった下記2講座を受講
こちらはFigmaのUI3版として、リニューアルされており、
講座を進める際に動画と異なる箇所はほとんど見当たらなかったので、
スムーズに学習を進める事ができました。
各種ツールの使い方やコンポーネント（インスタンス）、
オートレイアウトやバリアントなど、
基本的な操作が網羅されていたので、
初めの1歩として、最適な講座でした。
こちらの講座もちゃんとUI3版にリニューアルされていて、
特に困ることなく、学習をすすめられたのですが、
如何せんボリュームがありすぎて、まだ60%くらいしか消化出来てない・・・。
（UI3分だけでも15h程度）
もう1つの講座はバナー画像やボタンなどパーツ単位での作成方法がメインでしたが、
こちらの講座はちゃんとしたサイトのページ単位での学習となっており、
センスのある方はこの講座だけ受ければ大抵のことが出来るのではと思います。
本講座はまだ受講中ですが、8月のPlayGroundまでに
画面設計を終えるスケジュールに間に合わないので、一旦中断！
9月のPlayGroundの間に一通り受講したいと思います。
1.2.4 Docker、DevContainer、Turborepo学習
実際のLPサイト構築をする前に一度学習として、
Claude Codeを使いながらですが、
環境構築とアプリ作成を行っております。（実装は一部機能のみ）
アプリはチャットアプリで、アカウント管理とルーム・チャット管理が対象機能となります。
フロントはNext.js、バックエンドはGo言語
Go言語にしたのは、就職活動でGo言語未経験可の求人でいいねを頂き、
カジュアル面談をしたことでGo言語に興味を持ち始めたのがきっかけです。
（求人自体応募したのですが、会社の求人方針見直しでお断りされました）
現状のソースコードはこちらにあります。
実装済はアカウント作成・ログインのみ、チャット機能の一部はAPIのみ、
画面はチャットメインのモック画面のみの作成となっております。
こちらは引き続き完成まで課題アプリと並行して進めていきます。
また、今回学習したところはこちらとは別に技術記事として投稿予定です。
1.2 課題の提出（画面設計）
画面設計はFigmaで行いました。
G'sの卒業制作でも画面設計として使いましたが、
とにかくわからないことだらけで、ネットで調べたり、
テンプレのUIを利用したりで何とか形にしたのですが、
混乱とコード触れないストレスであんまり記憶に残ってないのが正直なところでした。
今回はUdemy講座でインプットしたものをちゃんとアウトプットとして、
形になるように、記憶に残るように心がけて作成しました。
講座自体がモバイルだったので、デスクトップのLP作成で
どこから手をつければ良いんだっけの状態となり最初は思考回路がフリーズ。。。
正直デザインセンスは無い（むしろ苦手意識あり）のですが、
自分がやりたい方向性は出せたかなと思います。
これを完成形とはせず、作業進めながら学習もしながら
都度ブラッシュアップはしていけたらと思います。
Figmaは課金するとMCPやDevツールも使えて、
Cursorとの連携とか試してみたいことですね。
MCPもまだまだ使いこなせてないのが現状なので、
開発スキル全般的に上げていきたいです。
これからの時代、AIも使いこなせるようにならないと。
2. 次回（9月）のPlayGroundに向けて
スケジュールが
■開発環境構築
- 8月LT会後〜2W
開発環境を構築して初期状態をGithubにPush
■実装・リファクタリング（フロントエンド）
- 9月上旬〜9月末
となっているため、課題の進捗を進めるのと並行して
を行っていきます。