ID:54509さん

## 業務内容 - 事業部ごとに分散しているECサイトの統合 - フロントエンドのリーダーとして開発を主導 - Nuxt.jsを用いたフロントエンドの開発をメインで実装 - 認証、既存機能の再実装、新機能の実装など - フロントの決済機能 - 通常決済 - Amazon Pay V2 - CI導入 - GitHub Actions - ESLint - Jest - husky, lint-stagedによるコミット時のLint ## 成果、学んだ点 ### TypeScriptの導入 前回JSでのプロジェクトを経験し、型が欲しくなる場面が多々あったため、TypeScriptを自分主導で導入しました TypeScriptの導入により、フロントエンドの型安全による開発体験、コード品質の向上に寄与しました ### Swaggerによるスキーマ駆動開発提案、導入 バックエンドとフロントエンド間での認識の齟齬、それによる手戻りの発生が深刻な課題となっていたため、その解決のため上記のスキーマ駆動開発を提案して導入しました 導入後に自ら積極的にスキーマを書いていくことで、バックエンドとフロントエンドで協力して作成したスキーマを共通の規約として、スキーマを中心にイテレーションを回すという流れを構築しました これにより手戻りの削減や、PrismでのAPIのモックによるフロントエンドの開発速度向上に大きく寄与しました ### 不確実性へのアプローチ 上記のSwaggerによるSDD導入の際、不確実性という言葉を多用し、メンバー全員へ不確実性を事前に潰しておくことのメリットを周知しました その結果、全員が当たり前に不確実性という言葉を使用するようになり、振り返りの際にも不確実性に対して全員が議論するようになりました ### E2Eテスト フロントエンドでCypressを利用したE2Eテストを実装しました 導入初期に公式ドキュメントを読み込み積極的にテストを書き、ノウハウを他のメンバーにも積極的に共有しました またE2Eテストがあることでの安心感や不安定なE2Eテストの保守の大変さも経験し、E2Eテストはあくまで最後の砦扱いで、ロジックのテストはJestをメインに行うべきだと感じています ### フロントの決済機能実装 前回担当したプロジェクトでは時間が足りず決済機能を先輩方に実装していただいたということもあり、こちらのプロジェクトでは自ら手を上げて通常決済とAmazon Payによる決済を担当しました バックエンドチームと密に連携を取り、決済で利用するAPIの仕様とスキーマは全て自分が担当しました。APIの仕様とスキーマを決定後、Prismを用いてバックエンドと並行してフロントエンドの開発を行いました またAmazon Payは当時最新のバージョン(V2)でしたがドキュメントを読み込んで仕様を理解し、実装を進めていきました ### フロントエンドのRepositoryFactoryパターン導入 HTTP clientとしてaxios（Nuxtのaxiosモジュール）を使用していたのですが、vueファイルから`this.$axios.get(url)`といったように直接APIを叩いており、以下のような課題がありました - どのページでなんのAPIが叩かれているかわからない - 複数のページで同じAPIを叩く際、完全に同じロジックが書かれている - 複数のページで使用されているAPIの仕様が変わった時、修正するのがつらい この課題解決のため、RepositoryFactoryパターンを用いてAPI通信部分を一箇所にまとめて隠蔽するという手法を提案して導入しました `repositories`ディレクトリを切ってAPIのエンドポイント毎に1ファイル1クラスで作成し、Nuxtのplugin機能を使ってそれらをコンテキストにinjectするというやり方で運用しました 結果としては上記の課題を解決でき、さらにインテリセンスと型も効いて開発体験が各段に良くなりました

## 業務内容 - 可動中のECサイトのフルリプレイス - Nuxt.js(SSR)を用いたフロントエンドの実装をメインで担当 - 認証、既存機能の再実装、新機能の実装など、決済周り以外のほぼ全てを一人で担当 - 既存の要件、デザインを反映しつつ、新規機能の実装、変更が容易に行えるように改善 - 1000行近くある責務盛り盛りのコンポーネントを単一責任の原則に則りリファクタリング - ネストが深くなり、再利用不可能になっているSCSSのリファクタリングなど ## 成果、学んだ点 ### モダンフロントエンド開発の基礎 こちらのプロジェクトを通して状態管理、コンポーネント設計、ライフサイクルなどのモダンフロントエンドの基礎を学びました またNuxtでSSRをすべき理由を把握するため、SSR, CSR, SPA, SSGなどのフロントエンド技術を背景も合わせてインプットしました ### コードレビューの心得 初めての業務でのチーム開発で、大きいPRを出さない、事前に自分でチェックする、レビューして欲しい点を明確にするなどのコードレビューを依頼する際の基本的な心得を学びました レビュアーの時間を極力奪わないように、必要な情報は全て記載することを重視しています ### キャッチアップ力 Railsでのモノリシックなアプリ開発経験しかない状態で、Nuxt(SSR)でのフロントエンド開発をやり切りました このプロジェクトでNuxt, Vueなどの使ったことのない技術を公式ドキュメントを読みながら実装を進めなければいけない状況を経験し、公式ドキュメントを読む大事さも実感できました ### 要件をしっかりと固めることの大事さ 要件がしっかり固まっておらず、誰も詳細を把握していない機能をディレクター、バックエンドを巻き込んで要件の整理、実装を行いリリースしました この経験からコードを書く前に要件を固め、TODOをしっかり整理しておくことの大事さを学びました