寒い日が続きますね。冷え性で手先が冷たくなってキーボードを打つのも辛い今日この頃です。
ところで皆さん、Githubのホーム画面、使いにくくないですか？
私は毎日Githubを使っていますが、正直なところホーム画面のUXには不満があります。
- リポジトリ一覧が中途半端にしか表示されない
- Copilotの宣伝エリアが邪魔でスクロールが面倒
- 自分のプロフィールに辿り着くまでのクリック数が多すぎる
- PRやIssueの確認が直感的にできない
開発者のためのプラットフォームなのに、開発者にとって使いやすくないのはおかしくないですか？
そんな不満から生まれたのが、今回紹介するGitJinです。
GitJinとは？「最速」で情報にアクセスできるGithubダッシュボード
GitJinは、Githubアカウントでログインするだけで、リポジトリ・PR・Issueを一画面で見やすく表示するWebアプリです。
https://gitjin.com/
GitJinが解決する3つの課題
-
情報の散在
Githubはリポジトリ、PR、Issueが別々のページに分かれています。
GitJinなら一つの画面に集約し、ページ遷移なしでスピーディ！ -
表示速度の遅さ
Githubよりも初期表示が速く、並列APIリクエストで快適に！
-
プライバシー
データはその都度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/
今後の展開
GitJinはまだまだ改善の余地があります。
- 通知機能の強化
- カスタマイズ可能なダッシュボードレイアウト
- PR/Issueのフィルタリング機能
フィードバックやご意見があれば、ぜひお聞かせください！
終わりに
「自分が欲しいものを作る」─ それが個人開発の醍醐味です。
GitJinは私にとって理想のGithubホーム画面。
もしあなたも同じ不満を感じていたら、ぜひ一度試してみてください！