Haruka

Engineer

プロジェクトの詳細

業務委託として開発に参加。SSR対応や共通リンクのバグ修正など、リソースが足りておらず放置されていたバグや修正などの開発タスクを担当。

使用技術

  • フロントエンド：React
  • データベース検索：Redash
  • ログ管理：Sentry
  • 管理画面: Ruby on Rails

参加期間

  • 2022年2月〜2022年6月

開発規模

  • エンジニア3名
  • その他プロジェクト運営に数名

プロジェクトでの課題

SEO対策のためプロジェクト全体で使われているパンクズリストをHTMLに埋め込んで、表示する必要があった。 パンくずはSPAだと、クライアントがJavaScriptを実行してからページを表示するとクローリングする際に取得できないためSEO的にもマイナスということでHTMLに埋め込めるように修正することが課題になっていた。

また、サービス利用ユーザーの流入チャネルのIDをクエリに保持して購入時まで引き回すようになっていたが、購入時までにIDが消えていたため適切に流入チャネルを判別できていなかった。

管理画面を操作している担当者からデータを登録できないとバグ報告があり、業務遂行ができていなかった。

主な取り組み

  • パンクズリストのSSR対応
  • クエリ文字列を保持するため共通のリンクコンポーネントの修正
  • 管理画面での運営側からのバグ修正対応

【フロントエンド】

Next.jsを使えば比較的簡単にSSRにできるが、すでにSSRの処理が作成されていたりとNext.jsへの移行まで含めてしまうと時間がかかってしまうためReactだけで使えるように修正しました。開発タスクを始める際、SEO的にマイナスになるのか一度相談しながら進めていきました。

SSR対応ではパンクズ処理を検索し改修するページの洗い出しを行いパス一覧のオブジェクトを作成してResponse返却前にパンクズで必要な情報の取得を埋め込みページごとのSSR化を実装していきました。パンクズを修正する際の検索などもできる限り、いろんな文字で検索をかけ抜け漏れがないかを注意しながら検索しました。 また、大規模なページ改修が必要だったため全ページの修正を行なってからPRを作成すると大規模な変更点が出てしまいレビューが大変なため、ページごとにPRを作成し１つのブランチにマージし細かくレビューできるよう注意しました。 適切に表示できているかの確認は、Chromeの拡張機能でJavaScriptをオフにしたり、ブラウザの検索欄でview-sourceを指定するなどして、HTMLにパンクズが含まれているかを確認しながら行ないました。

リンクコンポーネント修正では、「どの部分でその現象が起きているのか」「どういった場所で発生してそうか」を担当者と確認しながら、原因の調査しました。結果、共通で使っていたリンクコンポーネントではなく、aタグでリンクを作成して遷移していたため途中でIDが消えてしまっていることが原因でした。 そのため、aタグで遷移している部分を洗い出し、適宜リンクのコンポーネントに書き換える修正を行ないました。

また、リンクコンポーネントでは関数内で遷移させることができていなかったため、コンポーネントの冗長な部分の書き直しを行ったりより使いやすい形に修正しました。 流入チャネルの保持に関しては、チャネルのキーを条件分岐で取得して、付与する煩雑なロジックになっていたためその部分の簡素化を行いました。今後パラメータを増やす可能性があると伺っていたため追加時に毎回条件を付与するのは無駄だと判断し新しいパラメータを追加するだけで保持できるようにしました。その後、追加する必要があった際も、簡単に追加でき動作も問題なかっため時間をかけずに修正できました。

【バックエンド】

管理画面の担当者からバグ報告を受け、タスクを巻き取り調査をしました。ローカルでの再現ができなかったので、どのような操作でそうなったのかをヒアリングをして原因を調べました。 また、エラー時のログをSentryで確認したり、登録できるデータとそうでないデータがあったためRedashを使い該当のデータを検索しました。 データを見比べる中で必要なパラメータが存在していなかったことにより、エラーになっていたことが判明したので追加し、バグを直すことができました。