ID:38963さん

# プロジェクト概要 ## 目的、背景 楽天ブックスのUIを改善する。ユーザー、クライアント、事業サイド、バックエンド開発サイドからの要望を汲み取り、より使いやすいサービスにしていく。修正対応、新規機能追加、リファクタリングを優先順位に従ってバランス良く進めていく。 ## 規模感、チーム構成、担当した役割 ディレクター1人、UIデザイナー1人、フロントエンドエンジニア2〜3人のチーム。事業サイドとバックエンド開発サイドの間を繋ぐ位置付け。 自分はフロントエンドエンジニアとして主にディレクター、UIデザイナーと連携してデザイナーの作るUIをコードに落とし込む部分、サーバサイドエンジニアと連携してAPIから取得したデータを画面に描画を作ってきました。 ## 使用技術や開発環境等 ReactとjQueryが半々くらいで構成されたWebpack環境。jQueryは主に修正がメインで新規機能はReactで実装。jQueryからReactへの作り替えも並行で進める。CSSはコンポーネントごとにSassで作成し、JSにimport。 歴史の長いサービスのため、Grunt、Galp環境の改修も行いましたが、適宜Webpack環境への移行も並行で進めました。・ ## 取り組んだ課題 歴史が長く、ファイル構成や開発環境が複雑になっているため、全体を調査しドキュメントにまとめ、作り替えの道筋を立てて取り組みました。 実装時に想定していなかったエラーのハンドリング、作業フロー時に起こってしまった人的ミスなどに対しては、再発防止に向け、仕組み化、ドキュメント化に取り組みました。 # どんな課題だったのか どの機能がどのファイルに該当するのかを一覧できる場所がなく、毎回その調査から始まっていたため、ドキュメントを作って貯めていく必要がありました。作ったあともどのようにメンテして最新の状態を保っていくかは課題でした。 ## 技術的なアプローチや工夫した点 jQueryとReactに作り変える時に、API通信の部分のロジックはそれほど変わらないが（Ajax()をFetchに書き換えくらい）DOM生成の部分は大きく違うため、そこを見極める勘所を掴めるようなりました。 ## 取り組みの成果 自分がジョインしたときは毎回ゼロから調査することから始まっていましたが、新しい方にレクチャーする時に、提供できるドキュメントが増えてきたのは成果だと思います。