Naoya Shimizu

# ヤフーショッピングに商品を掲載するストアがもっと簡単に新しい商品を掲載できるようにしました ## 概要 今まで手間のかかっていた画像投稿処理をReact,Reduxでクリーンアーキテクチャに沿い、 既存の肥大化したjQueryから脱却しつつ、ドラッグ＆ドロップで簡単に画像投稿できるようにしました。 ## 背景 ショッピングではお店を出店するストアが新たに商品を掲載するときはwebなどから商品を入稿しています。その際に商品情報として添付させる画像アップロードは手順がかなり面倒で、ストア側から改善してほしいとの声が上がっていました。 開発環境としても画像投稿は既存のjQueryと新しいReactが共存している場所であり、なかなな手をつけづらい場所でした。なので私がjQueryからの脱却を行いつつ、React+Reduxを用いてドラッグ＆ドロップで簡単に画像投稿できるように開発しました。 ## アピールポイント #### 1. jQueryからのリプレイスメント 既存の画像投稿処理はReactと共存していたjQueryで行われていました。そのためコードの可読性やリファクタリングの行いづらさが問題だったので、新たしい画像投稿の処理はjQueryから脱却してReact+Reduxで全て完結させるようにしました。 その際にはjQueryをただ書き換えるのではなく、Reactの仮想DOMの操作やfluxを意識してReactらしいコードを書くことで、見通しをより良くしました。 #### 2. 既存コードとの兼ね合いと設計思想 既存の設計やライブラリを活用しつつ開発を行いました。 サーバとのajax通信はレスポンスの都合によりaxiosではなくsuperagentが用いられていました。 ドキュメントもaxiosなどに比べて少ないのですが既存のコードを参考にしつつ機能を追加していきました。 また、既存のアーキテクチャに則ってきちんと責務分割させました。 #### 3. 技術選定 Drag&Dropを行うライブラリはreact-dropzoneを採用したのですが、ただ選んだのではなく どれだけコミュニティが活発か、メンテナンスされているか、採用実績があるのかなどを考慮してライブラリを選定しました。 #### 4. 新卒ながら一人で全ての開発を行った チーム内にフロントエンドに詳しい人がいないのでこれらを一人で行いました。 どうしても自分だけでわからない時は他のチームの人に教えてもらいつつ 全体を巻き込んで手戻りが少なく開発を進めることができました。 ## 評価 リリース後のストアからの評判はよく、画像投稿を頻繁に行うストアでは今までかかっていた時間の半分程度で商品が掲載できるようになったそうです。実際に感謝のメールもいただくことができました。内部からの評価としては本部長から直接名指しで称賛されたので、かなりの手応えを感じることができました。