Zenn
👋

ユーザー間のコードレビューサービス「Duet Code」をリリースしました

2022/12/22に公開・約5,000字
Next.js
Rails
TypeScript
個人開発
Tailwind CSS
tech

サービスの概要

Duet Codeは、①プライベートで書いたコードをレビューしてもらう機会がない問題②他人の書いたコードを読んだり、自分の書いたコードに意見を貰うことで、技術力を上げたいニーズを解決するサービスです。レビューしてほしいプルリクエストを投稿し、レビュアーを募集することができます。ログインすることでレビュイーにもレビュアーにもなることができます。

  • サービスURL

https://www.duet-code.com/

  • リポジトリ

https://github.com/daiki0381/duet-code/

使用技術

バックエンド

フロントエンド

※API関連のコードはOpenAPI Generator TypeScript Axiosで自動生成しています。

インフラ

テスト

CI/CD

※Lefthookを使用してコミット前にESLint、Prettier、RuboCopを実行し、コードの品質を保っています。

環境構築

外部サービス

使用方法

レビュイー

①「ログイン」or「無料で始める」をクリックして、GitHub認証でログインします。

②ヘッダーの「募集する」をクリックします。

③「タイトル」「プルリクエスト」「使用言語」「プルリクエストの説明」「レビューしてほしい点」を入力して「保存する」をクリックします。（プルリクエストは、GitHub APIを使用してPublicリポジトリを取得しています）

④レビュアーが「レビューする」をクリックすると通知が届きます。また、レビュアーが「レビューする」をクリックすると、GitHub APIを使用して自動でリポジトリのコラボレーターに追加され、レビュアーにレビューリクエストが届きます。プルリクエスト上でレビューを行うので、コメントがありましたら、返信をお願いします。

⑤レビュアーがプルクエストをApproveして、フィードバックを送信すると通知が届きます。通知をクリックし「お礼する」をクリックして、お礼を送信します。お礼を送信するとレビューは完了になります。

レビュアー

①「ログイン」or「無料で始める」をクリックして、GitHub認証でログインします。

②レビュー募集中からレビューしたい投稿を探します。レビューする場合「レビューする」をクリックします。「レビューする」をクリックすると、GitHub APIを使用して自動でリポジトリのコラボレーターに追加され、レビューリクエストが届きます。プルリクエスト上でレビューを行い、問題が無ければApproveしてください。プルリクエストをApproveしたら「フィードバックする」をクリックして、フィードバックを送信します。

③レビュイーがお礼を送信すると通知が届き、レビューは完了になります。

工夫したこと

スキーマ駆動開発を導入しました

スキーマ駆動開発とは、OpenAPIの仕様書を最初に定義し、その定義をもとにバックエンドとフロントエンドの開発を同時に進めるという開発手法です。スキーマ駆動開発を導入したことで、フロントエンド側は①APIクライアントのコードを自動生成できるので、余分なコードを書く必要が無くなったり、リクエストとレスポンスに型が付いているので安全に開発を行えました②モックサーバーを立てることでバックエンドの実装を待つことなくフロントエンドの実装を進めれました③ドキュメントを見ればどこにリクエストを送れば、何が返ってくるか分かるので、わざわざバックエンドのコードを見たりする必要が無く楽でした、バックエンド側は①APIを事前に定義しているので、何を実装すべきかが明確で迷うことなく実装できました。

パフォーマンスを意識しました

2017年のGoogleのリサーチ結果によると、ページの表示に3秒以上かかると、53%のユーザーは離脱してしまうそうです。そこで下記の施策を行い、パフォーマンスを向上させました。

  • React Queryを導入し、サーバーから取得したデータをキャッシュし、サーバーからのデータ取得回数を減らしました。
  • Next.jsのSSG+CSRの構成にし、データフェッチをしない箇所はビルド時に生成することで表示速度を速くしました。
  • PublicリポジトリのPRを取得するには、①Publicリポジトリを全て取得する②それぞれのPublicリポジトリからPRを取得するという手順が必要です。特に何も考えずに実装したところ、10個のPublicリポジトリから5個のPRを取得するのに6秒〜8秒かかっていました。そこでParallel Gemを導入して、②の箇所を並列処理にすることで1秒〜2秒で取得できるようにしました。

GitHub APIを導入することでユーザーの手間を減らし、UI/UXを改善しました

レビュー自体はプルリクエスト上で行うことを考えていたのですが、そうすると①レビュイーがレビュアーをリポジトリのコラボレーターに追加する②レビュアーが招待を承認する③レビュイーがレビュアーにレビューリクエストを送るという手順が必要になります。これを手動で行うとレビューをするまでに数日かかってしまいます。この手間を省くためにGitHub APIを導入し、レビュアーが「レビューする」をクリックするだけで①レビュイーがレビュアーをリポジトリのコラボレーターに追加する②レビュアーが招待を承認する③レビュイーがレビュアーにレビューリクエストを送るという手順を自動化し、UI/UXを改善しました。

Discussion

ログインするとコメントできます