ID:69892さん

# アクセスコード発行・管理システム開発プロジェクト ## 概要 自社サービスへのアクセスを外部アプリケーションからAPI経由で可能にするため、アクセスコード発行・管理システムを開発しました。このプロジェクトでは、以下の主要なシステムを構築しました。 - 外部向けAPIの構築: 発行されたアクセスコードを用いて、外部サービスが自社APIをセキュアに利用し、自社機能にアクセスできるようにしました。 - アクセスコード管理画面の作成: アクセスコードの発行、管理、停止などを効率的に行える管理インターフェースを提供しました。 - 認証システムの構築: 社内の別サーバーで管理されているユーザー情報と連携し、セキュアで効率的な認証プロセスを確立しました。 これらの取り組みにより、自社サービスの機能を外部に拡張し、サービス連携の機会を創出することができました。 ## API開発 外部アプリケーションからのアクセスを受け付けるAPIは、軽量かつ高速なWebフレームワークであるhonoを採用して構築しました。 honoのDI（hono-simple-di）を活用することで、middlewareから依存関係を注入し、Service層とRepository層の各層の責務を明確に分離し、コードの疎結合性を高め、テスト容易性と保守性の向上に大きく貢献しました。 また、honoのRPCを活用することでクライアントサイドに対してもAPIリクエストの型を共有でき、APIとフロントエンドで一貫して型安全なアプリケーションとしました。 外部からのAPIの使いやすさを考慮し、hono-open-apiというZodスキーマからOpenAPIドキュメントを自動生成するライブラリを活用することで、APIの仕様を外部に明確にしました。これにより、クライアント開発時に最新のAPI仕様を常に参照でき、開発効率の向上に寄与しました。また、Zodスキーマにより型推論されることで堅牢で安全性の高いコードとすることができました。 ## フロントエンド開発（SSR） アクセスコードの一覧管理ページは、Remix（react-router v7）を用いて開発しました。管理画面では状態変化が比較的少なく、初回表示の速度がボトルネックになりそうなことから、Remixのサーバーサイドレンダリング（SSR）を採用することで、初回レンダリング速度の向上とを実現しました。 フォームの送信はconformというフォームのバリデーションライブラリを採用し、型安全にフォームを送信できるようにしました。 ユーザー認証については、Remixのミドルウェアを活用し、別サーバーから取得したユーザー情報に基づいた認証処理を実装しました。これにより、セキュアなアクセス制御とスムーズなユーザー体験を提供しています。 開発速度を最大化するため、v0やclineなどのAIの活用を積極的に行いました。特に、プロジェクト内のclineやGitHub Copilotのエージェントのrulesを定めることで、プロジェクト固有のコーディング規約やテスト自動化を実現しました。 フロントエンドの技術スタックとしては、v0との親和性を考慮しReact.js、Tailwind CSS、コンポーネントライブラリのShadcn/uiを採用しました。また、HonoRPCの恩恵を最大限に受けるため、TypeScriptを採用し型安全なシステムとしました。 エラー処理では、ErrorBoundaryなどのReact標準の例外処理機能を使用しながら、副作用を適切に扱うためにneverthrowという関数型エラー処理ライブラリを導入しました。これにより、try~catch構文で生じる型の不確実性を排除し、型安全性を取り入れた、より安全なエラー処理を実現しました。 フロントエンドはFSD（Feature-Sliced Design）アーキテクチャを採用することで、コードの変更やスケーラビリティを行いやすく、管理運用が容易な設計としました。 ## 別サービスとの連携 ユーザー情報を管理する既存サービスがPHPとVue.jsで構築されていたため、アクセスコードの発行画面は、既存サービスとの親和性を考慮し、Vue.jsを用いて開発しました。これにより、既存のUI/UXを損なうことなく、シームレスな統合を実現しました。 サーバーサイドでは、認証に必要なユーザー情報を取得するためのAPIをPHPで実装しました。これにより、異なる技術スタック間での安全なデータ連携を実現し、システム全体の整合性を保ちました。 ## 成果と影響 本プロジェクトでは以下の成果を得ました： - HonoやRemix（react-router v7）といったモダンなフレームワークをキャッチアップし、そのメリットを最大限に享受できる設計とすることができました。 - アプリケーション全体を通してTypeScriptを採用し、HonoRPCやZodによるスキーマ検証など型の恩恵を最大限に受けられる設計とすることで、安全性の高いアプリケーションを実現することができました。 - DIの積極的な活用やFSDを採用することで変更に柔軟でテストやスケーリングが行いやすいアプリケーションとすることができました。 - v0などのAIを積極的に活用し、技術選定をAIと親和性の高いものとすることで、フロントエンドの開発をスピーディに行うことができました。結果的に当初のスケジュールよりも早く実装を進めることができ、余裕を持ってプロジェクトを進めることができました。