### チーム規模は?
* プロジェクトマネージャー:1名
* エンジニアディレクター:1名
* エンジニア:2名
* デザイナー:1名
### 開発スタイルは?
* アジャイル開発
### わたしの役割
* 開発メンバー
* 要件定義、基本設計、詳細設計、開発、テスト、保守運用
* 顧客折衝
* スケジュール・タスク管理
### どんなシステムか?
* 別システムで配信された動画をプレイリストとしてまとめて、API公開するシステムです。
### 基本的な仕事の進め方
* 形態:フルリモート
* 開発スタイル:スクラム
* 1週間1スプリント
* 要件に従って基本設計をチームで行う
* 基本設計に沿ってデザイナーさんが作成したUIデザインに従って実装を進める
* GitHubFlowに従って開発を進める
* 必要に応じてインフラからフロントエンドの実装、設計、および仕様書の作成などを行なっています
### 実装において意識した点
* バックエンド
* 技術スタック:Ruby, Ruby on Rails
* Javaを触っていた経験があったので、Rubyの特徴を活かした実装を心がけました。具体的には手続き的になりすぎないような記述、拡張性の高いコードの実装です。また、オブジェクト指向的な疎結合で再利用性の高いコードの設計を意識しておりました。
* テスト駆動開発的にテストを先行して記述するようにしていました。理由は自動テストがあることで、動作の担保、仕様書の代替、保守コストの低減という大きなメリットがあり、実装の工数と比較してメリットが非常に大きいと考えていたからです
* フロントエンド
* 技術スタック:TypeScript, Vue.js, Nuxt.js, React.js, Vitest, Storybook, Cypress
* Vue,Nuxtで作成されていたコードをReactにフルリプレイスする作業がありました。その際に、コンポーネント設計の問題点をチームで議論し、コンポーネントを疎結合に保ち再利用性が高い構成にする方法を検討しました。
* テスト戦略についての見直しも行い、componentごとのテストはVitest、結合テストはStorybookのinterraction test、E2EテストはCypressと棲み分けることでテストごとの実行コストの低減と安定性の向上を検討しました。
### チームに対するアクション
#### 自動テスト実装の提案
* 課題
* システムを本番運用する話が持ち上がっていたが、テストのカバレッジが30%台と低い状態だった。
* アクション
* 自動テストの実装を提案
* アクションを取った理由
* 自分が参画当初だったため仕様の把握を兼ねつつテストが薄いという本番化に向けたボトルネックの解消を効率的に進められると考えたから
* どのように進めたか?
* カバレッジ重視ではなく、Request Specの中でmodelのテストを兼ねられるようにするなど効率重視のテストを記述することで最低限の品質を担保できる状態にした。
* フロントエンドはcomponetテストにstorybook、ユニットテストにvitest、インテグレーションテストにCypressを使用するように用途ごとに棲み分けを行い、効率的なテストが書けるようにした。
* 結果
* 本番化に向けた大規模なリファクタリングが実施されたが、テストがあったことで問題なく進めることができた。
#### MockServerの導入と提案
* 課題
* 複数のシステムとAPIで連携しているため、E2Eテストを記述するためにWeb Mockを作成する必要があり、不安定かつ管理コストが高かった
* アクション
* Mock Serverの導入を提案
* Mock Serverの調査
* アクションを取った理由
* Web Mockをテストごとに作成していくコストが高いという話をプロジェクトメンバーがしていたため、それを解消する手段を模索していたところ、Mock Serverを使用することで解消できる可能性が出てきたため。
* どのように進めたか?
* チームメンバーと現在のプロジェクトで使用している技術スタックに対応しているサービスを探しリストアップした。
* それらのサービスのメリット・デメリットをリストアップして比較できる一覧表を作成した。
* 比較表をメンバーに共有し、特定のサービスを決定した。
* 現在のプロジェクトに導入し、動作の検証を行なった。
* 検証の結果問題なかったため、本格的に導入する運びとなった。
* 結果
* テストの安定化
* 管理コストの低減
* より実際の動作に近い形でE2Eテストを実行できるようになったため、品質が向上(デグレ、不具合の発生率が30%程度低減)