Haruka

Engineer

プロジェクトの詳細

コーチングや英語学習、一緒に遊ぶなどができるクリエイターとプレイヤーを繋ぐC2CプラットフォームのWebサービス開発に参加。 主にフロントエンドの改修タスクおよび、リプレイスを担当。また、リプレイスに合わせてバックエンドAPIの修正。

使用技術

  • API, 管理画面（Active Admin）：Ruby on Rails, Ruby
  • インフラAWS: ELB, EC2 ECS
  • フロントエンド：Next.js, React, SCSS Typescript

参加期間

  • 2021年8月〜2021年10月

開発規模

  • 6人

プロジェクトでの課題

旧サービスから新サービスへの移行に伴い、ユーザーにとって使いやすく、スムーズな移行を実現することが目標。また、フロントエンドのリプレイスも進める必要があり、その中でマイページとマイページ内の項目の新規ページ作成を担当。

プロフィール変更ページやクレジットカード登録ページ、Line連携ページなど、複数のページの新規作成やバグ修正。

管理画面では使っているActiveAdminで用意されているCSVで表示される予約一覧の形式が適切に表示されないため、指定のフォーマットに変更する事。

主な取り組み

  • プロフィール変更ページの作成
  • Line連携の実装
  • 管理画面で表示される予約一覧のCSVの生成フォーマット修正
  • 完成したページを旧サービスページから新サービスページへの移行

【フロントエンド】

ページデザインはすでにFigmaで作成されていたため、実装は適宜SCSSに落とし込むことで対応しました。Figmaのデザインをそのまま流用できなかったため、間隔の調整などはページでの表示を見つつ調整しました。

マイページで使うデザインは同じようなものが多かったため、ページを実装する前に個々のページで使われていた共通のデザインをコンポーネントに落とし込み同じ実装をしないで済むようにしました。

プロフィール変更ページでは、名前、アイコン画像のアップロード処理などをカスタムフックで作成しました。画像アップロード自体は他でも使う処理なので、カスタムフックとして定義することでロジックを再利用可能な形にして汎用性を持たせた方が便利と判断しました。 画像をアップロードする処理は本番だけ発生するバグがあり、課題解決までの情報を1つに紐づけておくようにすることで、後から見ても何が原因でどうなっているのかが分かるように書くことを心がけました。 バグの修正経験などを通して、初期に比べエラーの特定と修正する力が着実に付いてきたと感じました。また、チームや個人での活動の中で、ある程度自走できる力を持てるようになったことが自信になったと考えています。 すぐ実装に着手せず、大まかに共通化できそうな部分の洗い出しをして実装していたことで、ページ単体の実装が比較的早くできたと考えています。

Lineの連携では、変更するAPIは既に出来ていたため、リクエスト部分のロジックの実装だけで特に難なく実装することが出来ました。バリデーションなどは旧サービスで使われていた正規表現を適用しフロント側でもバリデーションをかけページを作成しました。

【バックエンド】

ActiveAdminではCSV形式をオーバーライドして指定のフォーマットにできるため、必要なデータの確認とそのデータが保管されている場所の確認を行い実装しました。どのデータがどこに保持されているかなどをRails内のモデルやDBのテーブル構造から紐付きの状態を確認しつつアイテム内部で紐付き先のデータを呼び出すことでCSVの形式を変更しました。

【インフラ】

AWSマネジメントコンソールからロードバランサーの設定を変更し、完成したページを旧サービスページから新ページへとリダイレクトする設定をしました。具体的には、ELBのリスナールールから、修正したページパスの転送先であるターゲットグループのECSを変更し新しいページを向くようにしました。 また、リグレッションした際戻せるようにしておく必要があると考え変更する設定の状態をスクリーンショットで撮りつつ修正を行えるようにしました。

自分が作ったページを順次新しく切り替えていくことでユーザーに早く使ってもらえるようにしました。