📦

使いにくいGithubのホーム画面からおさらばできるウェブアプリ「GitJin」を作った

に公開
GitHub
Next.js
dashboard
tech

寒い日が続きますね。冷え性で手先が冷たくなってキーボードを打つのも辛い今日この頃です。

ところで皆さん、Githubのホーム画面、使いにくくないですか？

私は毎日Githubを使っていますが、正直なところホーム画面のUXには不満があります。

Githubホーム画面

  • リポジトリ一覧が中途半端にしか表示されない
  • Copilotの宣伝エリアが邪魔でスクロールが面倒
  • 自分のプロフィールに辿り着くまでのクリック数が多すぎる
  • PRやIssueの確認が直感的にできない

開発者のためのプラットフォームなのに、開発者にとって使いやすくないのはおかしくないですか？

そんな不満から生まれたのが、今回紹介するGitJinです。

GitJinとは？「最速」で情報にアクセスできるGithubダッシュボード

GitJinの説明

GitJinは、Githubアカウントでログインするだけで、リポジトリ・PR・Issueを一画面で見やすく表示するWebアプリです。
https://gitjin.com/

GitJinが解決する3つの課題

  1. 情報の散在
    Githubはリポジトリ、PR、Issueが別々のページに分かれています。
    GitJinなら一つの画面に集約し、ページ遷移なしでスピーディ！

  2. 表示速度の遅さ
    Githubよりも初期表示が速く、並列APIリクエストで快適に！

  3. プライバシー
    データはその都度Github APIから取得。必要最小限の情報しか保存しません

ざっくり技術構成

個人開発では「パパっと作れる」ことが重要。今回は最近ハマっているNext.jsを中心に構成しました。

採用理由

  • 直感的で実装が早いファイルベースルーティング
  • TypeScriptによる堅牢な開発
  • フロントとバックエンドを一つのフレームワークで完結

個人開発で短期間にプロダクトを形にするなら、Next.js一択だと思います。

認証周り

ユーザー認証にはbetter-authを採用しました。
以前はAuth.JS（旧NextAuth）を使っていましたが、better-authの方が直感的で実装がシンプル。乗り換えて正解でした。

その他の主要ライブラリ

  • octokit: Github APIとの通信
  • drizzle: データベースORMとして軽量で快適
  • @primer/octicons-react: Github公式アイコンを使用

こだわりポイント

スケルトン表示で体感速度を向上

GitJinの最大の特徴は、初期表示の速さです。
Githubよりも早く画面が表示され、データが揃うまでスケルトンで待機状態を可視化しています。

実装のポイント:

  • 初期レンダリング後にAPIリクエストを開始
  • リポジトリ、Issue、PRのリクエストを並列実行
  • 取得できたものから順次表示することで、体感速度を大幅に改善

「読み込み中」を感じさせないUI設計を意識しました。

メニューの閉じにくさを計算

右下のフローティングメニューは、あえて許容エリアを広く設定しています。

通常の実装では、メニューエリアからマウスが外れると即座に閉じてしまいますが、GitJinでは少しマウスがブレても閉じないよう余白を持たせました。

細かい配慮ですが、ストレスフリーな操作感に繋がります。

ウェブフォントのちらつき対策

const geistMono = Noto_Sans_JP({
  weight: ["400"],
  subsets: ["latin"],
  variable: "--font-geist-mono",
  display: "swap", // 👈 読み込み中も文字を表示
});

Noto Sans JPを使用していますが、display: "swap"を指定することで、フォント読み込み中も代替フォントで文字を表示します。

初期表示のちらつきを防ぎ、UXを損なわない設計です。

（余談: クラス名がgeistMonoになってるのは気づいてなかった…後で直します😅）
https://gitjin.com/

名前

実は名前にも拘りました。
自分はGithubをブラウザで開く際、
「github.com」
とキーボードで打ち込んでいます。

GitJinでは、GitHubとほぼ同じ指の動かし方で名前を打てるようにしました。
キーボードをご覧ください。
HUBとJINって隣同士ですよね！

今後の展開

GitJinはまだまだ改善の余地があります。

  • 通知機能の強化
  • カスタマイズ可能なダッシュボードレイアウト
  • PR/Issueのフィルタリング機能

フィードバックやご意見があれば、ぜひお聞かせください！

終わりに

「自分が欲しいものを作る」─ それが個人開発の醍醐味です。

GitJinは私にとって理想のGithubホーム画面。
もしあなたも同じ不満を感じていたら、ぜひ一度試してみてください！

https://gitjin.com/

Discussion