ID:77380さん

# プロジェクトの概要 既存のRailsアプリケーションにおけるフロントエンド部分を、Next.js と TypeScript を用いてフルリニューアルしたプロジェクトです。技術負債の解消と表示速度の改善を主な目的とし、UIの刷新とともにコンテンツ管理の体制も見直しました。 # 背景と目的 長年運用されてきたRailsベースのアプリは、JavaScriptのスパゲッティ化や保守の難しさが課題となっていました。また、表示速度の遅さやSEO対応の限界もあり、モダンなフロントエンドフレームワークへの移行が急務でした。 # チーム構成、担当した役割 - エンジニア：2名 - デザイナー：1名 エンジニアチームにはNext.jsやTypeScriptの知見がほとんどない状態からのスタートでしたが、各自がキャッチアップを進めつつ実装に取り組みました。 その中で私は主に 記事コンテンツ部分のリニューアル を担当。従来は自社管理画面で管理していた記事コンテンツを、外部CMS（microCMS）へ移行する方針に従って、移行・実装・表示ロジックの構築まで一貫して担当しました。 # 課題と工夫した点 - 社内にNext.jsの知見がなかった ため、公式ドキュメントやコミュニティの情報を活用し、ベストプラクティスを常に意識しながら実装。 - CMS移行では、従来の運用フローとのギャップやビジネス要望の調整が必要でした。ビジネスサイドとのコミュニケーションを密に行い、デザイナーと相談しながら最適なUI設計とAPI連携を実現。 - 記事ページではSEOを意識し、構造化データの導入やOGP対応も含めた設計に。 - レンダリング戦略としてキャッシュ利用とコンテンツ更新時のWebhookも併せて実装し、表示速度と更新性を両立。 # 成果 - パフォーマンス改善：Search Consoleの指標が向上しました。 - 運用負荷の軽減：外部CMSへの移行により、非エンジニアでも記事更新が可能になり、運用チームの負担を大幅に軽減。 - 保守性向上：TypeScriptによる型安全とNext.jsのファイルベースルーティングにより、機能追加や修正が容易になりました。

# プロジェクトの概要 Railsアプリケーションにおける、社内の別サービスとの連携を目的としたAPIの開発プロジェクト。別サービスからのアクセスに対応するためのエンドポイント群を新たに設計・実装しました。 # 背景と目的 ビジネス要件として別サービスとデータをリアルタイムに連携する必要が生じたことから、新たにAPIを用意することになりました。既存の社内向け機能とは認証やデータの扱いが異なるため、専用の設計が必要とされていました。 # チーム構成、担当した役割 プロジェクトは4名体制（エンジニア3名、PM1名）で進行し、その中で私はAPIの仕様設計・認証設計・実装・テスト設計を主導しました。特に認証まわりについては明確な仕様が定まっていなかったため、拡張性を意識して設計を行いました。 # 課題と工夫した点 - 認証方式の仕様が曖昧だったため、自ら要件を整理しトークン認証方式を提案・導入。 - 既存の内部APIとの処理の重複を避けるため、既存処理とのロジック共有を意識した設計と抽象化を行い、コードの再利用性を高めました。 - 実装と並行してRSpecによる自動テストを整備し、保守性と安全性の両立を図りました。 # 成果 - 共通ロジックの切り出しと設計により、今後のAPI追加や仕様変更にも柔軟に対応できる基盤を整備。