React課題 スキルシート記載用
研修で実装した React 課題を、スキルシート（職務経歴書）にそのまま転記できる形でまとめたもの。 課題は「フォーム課題」「ブラックジャック課題」「総合課題（ブログサービス）」の3本立て。案件数を分けたい場合は下記のいずれか単位で切り出せる。
案件1：会員登録フォームの実装（Reactフォーム課題）
■ 概要
研修期間で、会員登録ページのフォーム機能を制作
■ 詳細
- 会員登録ページのフォーム機能作成
- 入力フォーム機能（氏名・メールアドレス・パスワード・住所 等）
- バリデーション機能
- 必須入力チェック
- メールアドレス形式チェック（正規表現）
- パスワード文字数・パスワード一致チェック
- 郵便番号 API 連携機能
- 外部API（zipcloud）を叩き、郵便番号から都道府県・市区町村・町名を自動入力
- 画像アップロード・プレビュー表示機能（FileReader によるプレビュー）
■ 使用技術
React / TypeScript / Tailwind CSS / 外部API連携（fetch）
案件2：ブラックジャックゲームの実装（Reactブラックジャック課題）
■ 概要
研修期間で、トランプゲーム「ブラックジャック」の簡易版 Web アプリケーションを制作
■ 詳細
- ブラックジャックゲーム機能
- カード配布・ランダム抽選機能（重複しないカード抽選ロジック）
- 得点計算機能（エースを 1点/11点 で自動判定する合計点算出ロジック）
- ヒット / スタンド等のゲーム進行機能
- 勝敗判定機能
- 賭け（ベット）機能付きバージョンの実装
- レスポンシブ対応（画面サイズ取得によるレイアウト制御）
■ 使用技術
React / TypeScript / Tailwind CSS / カスタムフック（ロジックの共通化）
案件3：ブログサービスの開発（React総合課題）
■ 概要
ブログサービスの開発 PJ にアサインされた体で、フロントエンドの開発を担当。 Atomic Design に基づくコンポーネント設計と、モックサーバー（MSW）を用いた API 疎通を実施
■ 詳細
- 認証・会員機能
- ログイン機能
- 会員登録機能（バリデーション付き）
- 会員情報変更機能
- ログイントークンの有効期限チェック機能（一定時間で自動失効）
- 記事投稿機能
- 記事の投稿機能（useReducer による入力状態管理）
- 記事一覧表示機能
- 記事詳細表示機能
- バリデーション機能（必須入力チェック・エラーメッセージ表示）
- ページネーション機能
- 共通機能・設計
- Atomic Design（atoms / molecules / organisms）によるコンポーネント設計
- 再利用性を意識したコンポーネント実装
- React Router による画面遷移（ルーティング）
- MSW によるモックAPI環境の構築（インターフェース仕様書に沿ったAPI実装）
- Jest による reducer の単体テスト
■ 使用技術
React / TypeScript / Tailwind CSS / React Router / MSW（モックサーバー）/ Jest
全体を通して身についたこと（自己PR・面談用メモ）
- React.js を用いた機能実装を一人称で進められる
- TypeScript を用いた型安全な実装
- 再利用性の高いコンポーネント実装（Atomic Design の理解）
- API を叩く非同期処理の実装
- git / GitHub を用いたチーム開発手順の理解
- MSW を用いたモック環境の構築
作成日時: 2026/07/10