# React/GraphQLによるフロントエンド開発
## プロジェクト概要
**GraphQL + Reactによるフロントエンドのプロトタイプ作成および技術検証**
外部協力会社が構築したベースシステム(React / Rails API)を活用し、新機能のプロトタイプ作成および周辺技術の導入検証を担当。モダンな開発フローの吸収と、AIを活用した迅速な技術キャッチアップを並行して実施。
### 担当フェーズ
* UIデザイン(Figma)
* フロントエンド開発
* バックエンド機能追加(API実装)
* 機械学習アルゴリズムの技術検証
---
## 業務内容
### 1. フロントエンド・UI/UX開発 (TypeScript / Next.js)
* **UIコンポーネント実装**: `Chakra UI` を採用し、一貫性のあるデザインシステムに基づいたUIを構築。
* **ユーザー体験(UX)の最適化**: レイアウトシフトの防止など、描画後のガタつきを抑えたストレスのない画面遷移・操作感を実現。
* **型安全な開発基盤の強化**: `Apollo Client` と `GraphQL Code Generator` を組み合わせ、自動生成を活用した堅牢かつ効率的なTypeScript開発フローを構築。
* **リファクタリング**: カスタムフックへのロジック抽出により、コンポーネントの責務を明確化し保守性を向上。
### 2. バックエンド・API連携 (Ruby on Rails / GraphQL)
* **開発環境の整備**: Dockerを用いたRails開発環境の構築。
* **API拡張**: Rails APIモードにおけるGraphQLスキーマおよびリゾルバーの追加実装。
* **パフォーマンス最適化**: `N+1問題` 等のデータ取得ロジックを精査し、クエリ効率を改善。
### 3. 機械学習によるレコメンドエンジンの技術検証 (Python / Gemini)
Google Colabを活用し、生成AIによるコード生成と理論検証を高速に回すサイクルを確立。
* **Word2Vec**: 特徴量のベクトル化による類似アイテム抽出の検証。
* **協調フィルタリング**: アイテムベースの手法を用いたレコメンドロジックの試作。
---
## 実績・取り組み
* **外部ノウハウの積極的な吸収**: 協力会社の開発フロー(GraphQLの自動生成等)を短期間で習得。未経験の技術スタックに対しても、生成AIによるコード解説を補助として活用することで、即戦力として開発に貢献しました。
* **自律的なスキルアップ**: レコメンドシステムの試作を通じて、アルゴリズムの背景にある数学・統計学的理解の重要性を再認識。現在は実務への応用を見据え、統計学の知識強化を継続的に行っています。
---
### 使用技術
* **フロントエンド**: React, Next.js, TypeScript, Chakra UI
* **バックエンド**: Ruby on Rails (APIモード), Docker
* **API / ツール**: GraphQL, Apollo Client, GraphQL Code Generator, Figma
* **機械学習・検証**: Python, Word2Vec, Google Colab, Gemini (AI)