Graft

1. コンセプト

本プロジェクトは、独立していた4つのアプリの機能を1つに融合（キメラ化）させた、「インプットから習慣化、アウトプットの可視化」までを一気通貫でサポートするエンジニア向け成長プラットフォームです。

日々の勉強会やLT（ライトニングトーク）での学びを「聞きっぱなし」にせず、確実に自分のスキルとして定着させることを目的としています。

2. 統合された4つの要素技術（改造前元アプリ）

このアプリは、以下の4つの異なるコンセプトを持つ機能を統合しています。

TalkScope（トークスコープ）：リアルタイム辞書機能。発表中にわからない単語をバブルUIですぐに検索。GitHubリンク, デプロイリンク
TimeFaker（タイムフェイカー）：時間の概念をずらし、エンジニアの遅刻を撲滅させる時計。GitHubリンク, YouTubeリンク
RealYou（リアルユー）：自分の性格の認識と現実との「ギャップ」を可視化する分析インターフェース。GitHubリンク, デプロイリンク
GrowTree（グローツリー）：GitHub連携とAIにより、スキル習得状況をスキルツリーで可視化、課題も作成してくれる。GitHubリンク, デプロイリンク

3. アプリの利用フロー（改造後）

① インプット：リアルタイム学習（TalkScope機能）

勉強会やLTの聴講中に、わからない単語をその場で検索。
発表終了後、発表内容のログをAIに送信し、内容に基づいた「復習問題」を自動生成します。

② 習慣化：忘却曲線に合わせた通知（TimeFaker機能）

「エンジニアは時間にルーズ」という逆説的なコンセプトから、あえて時間をずらしてリマインド。
Discordボット（Raspberry Pi連携）を用い、発表終了の1日後や3日後など、記憶に定着しやすいタイミングで復習通知を飛ばします。

③ 自己分析：理解度のギャップ可視化（RealYou機能）

通知からアプリを開き、AI生成の復習問題に回答。
「自分で思っていた理解度」と「実際のテストスコア」のギャップを可視化し、客観的な理解度を把握します。

④ 資産化：スキルツリーへの反映（GrowTree機能）

テスト結果から自身の能力を可視化。
自分の成長が「スキルツリー」や「実績」として反映されます。
プロフィールとして公開・共有することで、仲間とモチベーションを高め合えます。

4. ターゲットユーザー

成長意欲の高いエンジニア（特に学生）
LTや勉強会には参加するが、内容を定着させる習慣が作れていない人
自分のスキルを客観的に証明・可視化したい人

5. 導入によるメリット

インプットとアウトプットの両立 聞き流しを防ぎ、テストを通じて知識を定着させます。

復習の習慣化 Discordへの自動通知により、意識せずとも復習サイクルが回ります。

モチベーション維持スキルツリーによる視覚的な成長実感と、仲間との共有によるコミュニティ形成を促します。

6. 完全新規開発

プラットフォームとしての核となる部分は、今回のためにゼロから構築しました。

サーバーサイド（完全新規）:
- すべてのバックエンド処理を刷新。各アプリの独立したバックエンドを廃止し、統合プラットフォーム専用のサーバーをスクラッチで開発しました。
メインメニュー＆基盤機能:
- アプリのハブとなるメインメニュー画面、およびLocalStorageを活用した独自認証システム。
AI問題生成・永続化フロー:
- TalkScopeで取得した全文データをサーバー経由でAIに渡し、クイズを自動生成してデータベースへ保存する一連のデータパイプライン。
リマインド制御システム:
- Raspberry Piへの通知タイミングを設定するためのUIおよび、設定データを受け付けるAPI。

7. 大幅な改造

既存のUIパーツやロジックを流用しつつも、コードレベルでは「一新」に近い修正を加えています。

RealU（学習・分析画面）:
- 元々の「性格診断」から「問題回答・自己理解」へ目的を変更。問題リスト画面や回答画面、ギャップ算出ロジックなどは、既存のコードが流用できなかったため、大部分を書き換えました。
GrowthTree（スキルツリー）:
- ツリーの描画アルゴリズムを大改造。特に、今回の核となる「成長ポイント」の計算と反映ロジックは完全に一新しました。
ギャップ分析ロジック:
- 「自分の予想」と「実際の正解率」を比較する計算処理を、本プロダクトの学習サイクルに合わせて再設計。

8. 流用

あえて手を加えず、既存の安定した機能を「部品」として組み込みました。

TalkScope（検索コア）:
- リアルタイム検索機能自体は既存のものを維持。代わりに「終了ボタン」を新設し、全文をLocalStorageへ渡す橋渡し機能を強化しました。
Discord通知メソッド:
- 通知を送るための基盤メソッドは、前回の知見を流用。呼び出し側のロジックを新設することで、開発効率を最大化しました。

9. 技術的挑戦

フロントエンドの多重構造

今回最も苦労したのは、「4つのNext.jsプロジェクトを1つのリポジトリで共存させ、シームレスな体験を作る」 ことでした。

リダイレクトではなく「リライト」の採用 当初は単純なページ遷移（Redirect）を考えましたが、それではローカルストレージに保持した認証用IDなどがリセットされてしまう課題がありました。

解決策 Vercel等のデプロイ環境で「Rewrites」を設定。URL構造を維持したまま、中身のアプリを切り替えることで、ユーザー体験を損なわずに独立した4つのフロントエンドを統合しました。

破壊と再生のバックエンド統合

既存アプリのロジックをそのまま使うのではなく、今回の「学習サイクル」に合わせて大幅なスクラップ＆ビルドを行いました。

RealYouの役割変更 元々「性格診断」だったアプリを、クイズ回答と理解度分析のコアエンジンへとロジック・DB構造ともに完全書き換え。

APIの集約 各アプリがバラバラに持っていたデータを、RealU側のバックエンドへ集約。既存のレイヤードアーキテクチャを維持しつつ、仕様変更に強い設計へとリファクタリングしました。

10. こだわり

勉強会の内容からクイズを自動生成する機能では、AI（LLM）の出力の不安定さが課題でした。

Zod × Swagger による実行時バリデーション TypeScriptの型定義だけでなく、Zodを用いた実行時のスキーマ検証を徹底。AIが出力するJSONが期待した形式（クイズデータ）に合致するかを厳格にチェックしました。

堅牢なデータフロー AIの出力が揺れた場合に備え、フロントエンド・バックエンドの両方でバリデーションを行い、不正なデータがDBやUIに流れない「防御的プログラミング」を実践しました。