ID:54509さん

業務内容

• Laravelを用いたREST APIの開発
  • ユーザー認証、カート、住所などのコア機能の開発

成果、学んだ点

設計の刷新(軽量DDDの廃止)

これまでのプロジェクトではDDDのアプローチが取り入れられていましたが、以下のような課題点がありました

• メンバーがDDDに成熟しておらず、どの層でどの課題を解決すべきかの認識が合っていない
  • この状態でDDDのディレクトリ構成を取り入れたためLaravelの良い部分が消えている上、かえって構成が複雑になっている
• そもそもLaravel自体DDDとの相性が良いフレームワークではない

今後もこの構成のまま進めるのはまずいと判断し、Laravelの設計について調査し、以下のような構成を提案して実装しました

• デフォルトの構成にUseCase, Service層のみを取り入れる
• 認可処理はPolicy, バリデーションはFormRequest, レスポンスの作成はAPIリソースを使う

これによりLaravelの機能を活かしつつ、複雑な処理はUseCase, Service層で行うという方向性を定めました

また開発を進めていくにつれ、メンバー間のUseCaseとService層への認識のズレが発生し始めたため、そのタイミングでもう一度MTGを提案してUseCaseとService層の役割を明確にし、全体の設計に関する認識の共有を行いました

自動テストの普及

これまでのプロジェクトはテストコードがほとんど書かれておらず、リファクタリングやコードの修正がスムーズに行えないような状況が続いていました。そこでこのプロジェクトの初期に自ら積極的にテストコードを書き、テストを書くのが当たり前の状態を作り出しました

またペアプロやコードレビューで自動テストの普及を行った結果、チームの中で

• どのようにテストするか
• どうしたらテストしやすいコードになるか

などの会話が生まれるようになり、全体のコード品質の向上に寄与しました

業務内容

• 事業部ごとに分散している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をしっかり整理しておくことの大事さを学びました

業務内容

• 管理画面、APIの保守開発

成果、学んだ点

• 既存機能の修正、リファクタリング
  • テストされていないprivateメソッドをサービス層に切り出し、テストも実装