はじめに Vue 3系 + TypeScript での API によるデータ操作をリポジトリパターンを用いてまとめたときの実装内容を、実際の手順とコードを踏まえつつまとめます。 リポジトリパターンとは リポジトリパターン とは、データ操作の処理を一元管理することで、ビジネスロジックからデータ操作ロジックを切り離すデザインパターンです。 これにより、データ操作ロジックの保守性・再利用性を向上させることができます。 つまり axios の多重管理が発生し、エンドポイントや axios のプロパティに変更があった際など保守するのが大変 コンポーネント内で同じようなデータ操作ロジックを何度も書くのが大変 コンポーネント内でのデータ操作ロジックの直書きによって単体テストが大変 このような大変を解消してくれるのが、リポジトリパターンです。 サンプルコード では、実際に手を動かしてみていきましょう。 1