オンボーディングの改善からインフラ監視、リアルタイム通信、그리고 3Dキャラクターの最適化まで、7週間にわたるグループプロジェクトの完走記録
入力したパスワードは秘密コメントの閲覧、修正、削除に使われます。
まだコメントがありません。
링크 정보를 불러오는 중...
ついにプロジェクトが終了しました。開発初期は、7週間という短い期間で計画した機能をすべて実装できるか不安でしたが、なんとかやり遂げました！ 猛スピードで駆け抜けたため、毎週振り返りを書くという野心的な計画は守れませんでしたが、これまでの足跡を記録しておきます.
Duolingoのようにログインなしでもサービスを体験できる構造をチームメイトが提案しました。私たちのプロジェクトのモットーが「気軽に一問でも解いてみよう」であるため、全員が同意しました。非ログインユーザーのデータを維持するために Local Storage を活用しました。
標準の Fetch API を使用してフロントエンドのログイン連携を実装しました。Application/JSONとForm Dataを分離して処理し、Refresh/Accessトークンロジック を直接作成しました。チャレンジ期間中にTCPでHTTPを直接実装した経験のおかげで、データがヘッダーとボディにどのように載るかをイメージしながら作業できました。
インタラクションとアニメーションが強調される画面の楽しさ
クイズページを改善し、ストリーク達成時のエフェクト画面を実装しました。Framer Motion と Gemini を活用する中で、視覚的フィードバックの強い画面を作るのが最も楽しく、自分のこだわりを発揮できる環境であることを再確認しました。
Duolingoを参考にした「中間/最終チェック」段階を導入しました。これらは以前の問題をランダムに組み合わせる方式であるため、DB設計から悩みました。結局、NestJS でDBとは別にSteps情報を生成し、orderIndex で段階を区別するロ지ックを導入しました。
3週目のビルドエラーの経験から Husky を強化しました。
| 構成要素 | 役割 | 説明 |
|---|---|---|
| Prometheus | メトリクス収集 | サーバー指標を時系列で保存 |
| Grafana | ダッシュボード | 指標/ログの統合可視化 |
| Loki | ログ保存 | アプリログの中央管理 |
| Promtail | ログ収集 | コンテナログをLokiへ転送 |
| Node Exporter | システム指標 | CPU/メモリ/ディスク監視 |
また、監視システム（Loki, Grafana等）を導入し、サーバーアクセスの恐怖を克服しました。
ユーザーの再訪問を促すメール通知サービスを一人で実装しました。ADR (Architecture Decision Record) を作成し、技術的な意思決定を下す過程で大きな達成感を感じました。
良かった点
リアルタイムバトル機能のために Socket.io を導入しました。複数のページで一貫してイベントを管理するため、専用の ProviderとHook を設計しました。一度コードをすべて捨てて作り直す過程を経て、拡張性のある構造を備えることができました。
Blender で作成したキャラクターをウェブに載せる作業に丸一日費やしました。AIに頼るだけでなく、根本原因を突き止めるための段階的なデバッグの重要性を痛感しました。
ユーザーの学習記録を表示する際、HTTPヘッダー にローカルタイムゾーン情報を含めて送るように改善し、サーバーが正確な時間を計算して返すようにしました。
Gzip/Brotli 圧縮やサブセットフォントを適用しました。3Dキャラクターには、表情は Three.js の Shape Key で、動きは Blender で処理するハイブリッド方式を採用しました。クリック時のリアクションや視線追跡を追加し、「ワオ・ポイント」を完成させました.
「選択関係が分かりにくい」というフィードバックを反映し、SVGレンダリング を活用して選択肢を視覚的に結ぶようにUXを改善しました。
