yamasan

### ReactのClassコンポーネントからFunctionalコンポーネントへの置き換え 約200ほどのコンポーネントをリスト化し、チームで手分けして行いました。 memo（Mobxから値を注入しているコンポーネントはobserver）、useMemo、useCallbackによる コンポーネント、変数、関数のメモ化を適切に行いました。 また、それに伴いpropsの渡し方が悪いために起きうる不要な再レンダリングを防ぐため、 適切にコンポーネントの切り分けも行い、 不要な再レンダリングの抑制をしました。 それによりコードの可読性も向上しました。 ### 商品フィルタのHistoryAPIを利用した擬似遷移からCSRへの移行 アディダスECでの商品フィルタはもともと、 フィルタ押下 → クライアントでAPIコール → HistoryAPIでURLの置き換え というような流れの擬似遷移で行なっていましたが、 Next.jsとの相性が悪く、ブラウザバック時の挙動に問題がありました。 そこで、Next.jsのShallow Routingを利用し、 getInitialPropsの発火による無駄な処理を避け、 元々の挙動、パフォーマンスを担保するためのリファクタリングを行いました。 その結果、ブラウザバックの挙動での問題も解決しました。 ### TypeScriptの型解決 アディダスはもともとJavaScriptで書かれており、 そこにTypeScriptを導入したためstrictモードで動かしています。 その為、tsエラーが大量に残っている状況でした。 それらをany型ts-ignoreを使用せず、 適切な型を再定義しています。 TypeScriptの型推論が効かない場合はasを利用し、 コメントでasを許容していい理由を書くなどして、 適切な型エラーの握りつぶしを行いました。 こちらは現在まだ取り組んでおります。 ### Jest、playwrightを利用したテスト フロントエンドの単体テストE2Eテストを行い、 バグの発生を事前に抑えました。 ### パフォーマンス改善 パフォーマンスバジェット風の考え方で、 NewRelicで計測中の現在のパフォーマンスを監視するフロー(手動)を提案し、 開発フローに組み込みました。 リリース後のパフォーマンス低下を未然に防ぐことができるようになりました。 speed curveを利用したパフォーマンスの継続的監視も行いました。 ### ABテストの実装 Googleアナリティクスを利用し、アディダス様から依頼された内容で、 UXやSEOを損なわないように工夫し実装しました。 例えばh1要素の位置変更のABテストの場合、 ABテスト発火時の位置変更による視覚的違和感や、 SSR時にh1タグがDOMツリー上に複数または存在しない場合の、 SEOでの影響などをディレクターに報告し、 ABテストによる悪影響を最小限に抑えるような 取り組みをしました。 ### 既存コードのリファクタリング 古い書き方のコードや読みにくいコードが多く、 運用上に問題があったため、 保守性、拡張性、型安全に気をつけてリファクタリングを行いました。 コード改善のミーティングでは積極的に発言し、 自分の発言が改善に取り入れられたこともあります。 ### バグの修正 業務の中で一番行なっているのが、バグの修正です。 ページ遷移でgrtInitialPropsを経由した際の CSR、SSRでの差分が発生した際の、 内部処理の差分を見つけエラーを解決する事が得意です。 ### チーム以外との連携 フロントエンド以外の開発は他社で行われていたため、 常に早めの報告、連絡、相談を心掛け、 他社エンジニアとの認識の違いを減らし、 リリースへの悪影響を最小限に抑えました。 ### 勉強会の主催 週3回朝業務1時間前に簡単なアルゴリズム問題をメンバーと解き、 お互いにコードレビューをし合う勉強会を主催しています。 javascriptで解いておりjavascriptのメソッドの理解の向上と、 読みやすいコードを書く力が身につきました。