[OSSCA 2024] 応募記と Githru VSCode Extension 使用レビュー
Open Source Contribution Academy に応募するまでの過程と Githru VSCode Extension を実際に試した感想をまとめた記録。
- #振り返り
- #オープンソース
- #レビュー
コメント
入力したパスワードは秘密コメントの閲覧、修正、削除に使われます。
まだコメントがありません。
Open Source Contribution Academy に応募するまでの過程と Githru VSCode Extension を実際に試した感想をまとめた記録。
入力したパスワードは秘密コメントの閲覧、修正、削除に使われます。
まだコメントがありません。
링크 정보를 불러오는 중...
日常の中でより多くの情報を得たり、現場で働く開発者とつながりたいと思い、Twitter アカウントを作りました。いくつかの開発者をフォローして情報を見ているうちに、タイムラインで Open Source Contribution Academy(OSCCA) が体験型メンティーを募集している投稿を見つけました。
卒業と並行して取り組める 意味のあるチームプロジェクト を探していました。開発分野の文化の中でも特に価値があると感じていた オープンソース活動 に、メンターのサポートを受けながら参加できる点はとても魅力的でした。
募集ページに掲載されている複数のプロジェクトをすべて確認した後、TypeScript を使用しフロントエンド開発者を募集しているプロジェクトを 2 つ選び、第1志望と第2志望として応募しました。

링크 정보를 불러오는 중...
このオープンソースプロジェクトは Git のメタデータ構造を視覚的に分析できる VSCode 拡張機能です。
これまで私は Git の GUI ツールとして SourceTree や Git Graph を使っていました。しかし、エラーが発生することも多く、最終的には Git Bash に戻ることがよくありました。それでも GUI ツールが持つ視覚的な利点は常に魅力的だと感じていました。
Githru は Git Bash や VSCode の Git 機能をそのまま使いながら、コミット構造やコントリビューションの関係を視覚的に分析できる機能を提供しています。

応募前の課題として実際にツールを試す必要があったため、拡張機能をインストールして動作を確認しました。README の Getting Started には npm build:all を実行するように書かれていましたが、何度試しても正常に動作しませんでした。
そのため VSCode の拡張機能として直接インストールし、デバッグモードで起動した後 Git トークンを入力すると、他の拡張機能と同じように下部のボタンからツールにアクセスすることができました。
事前課題では「改善点や追加されると良さそうな機能」を書く必要があったため、実際に使いながら複数の観点からツールを分析しました。
画面右側には ファイル構造とコントリビューターの割合が視覚的に表示されています。
ファイル構造を移動する際のアニメーションはとても滑らかで、UI も整理されていると感じました。しかし 「戻る」操作の流れについては少し分かりにくい部分がありました。
例えばファイル構造を深く辿ったあとに親ディレクトリへ戻るとき、親ノードが左側に表示される形になっていれば現在の位置関係をより直感的に理解できると思いました。
また、特定のコントリビューターのコミットだけを表示した後、再び全体のコントリビューター表示に戻る場合にも、より明確な 戻る操作(back interaction) があると UX が自然になると感じました。
さらに、画面上部に表示される大きなグラフは コード量と日付の関係を表しているのですが、初めて見るユーザーにとってはやや抽象的に感じられる可能性があります。マウスオーバー時に具体的な数値が表示されると、情報をより理解しやすくなると思いました。
ポイントカラーを RGB 値で自由に選択できる機能は面白い試みだと感じました。
しかし、実際に色が反映される仕組みは少し曖昧に感じられました。色を変更すると 現在表示しているブランチにはすぐに適用されますが、他のブランチは以前の色のままです。そして Githru を再起動すると初めて すべてのブランチに変更した色が適用される状態になります。
ユーザーの視点から見ると、この挙動は少し分かりにくいと感じました。
どちらかの動作に統一された方が UX は理解しやすくなると思いました。
また、インターフェース全体で使われている色が ほぼ同じトーンで表示されるため、視覚的な区別が少し弱い印象もありました。グラフやフォルダ構造などの情報を読みやすくするためには、明度差を持つ 4〜5 段階のカラーパレットを使うと良いのではないかと感じました。
ただし RGB カラーを自由に設定できる仕様では、こうした階層的な色を自動生成するのが難しい可能性があります。そのため
といった方法も考えられると思いました。
最後に ドキュメントについても改善の余地があると感じました。
GitHub の README を最初に開いたとき、コントリビューター情報が大きく表示されている一方で、プロジェクトの概要や使い方の説明はやや少ない印象でした。
他の有名なオープンソースプロジェクト、例えば ArgoCD では、インストール手順やプロジェクト構造が非常に詳しく説明されており、新しく触れる開発者でも理解しやすい構成になっています。
Githru でもドキュメントがもう少し補強されれば、新しく参加する開発者にとってより親切なプロジェクトになると思いました。
このように実際にツールを試してみた結果、自分が改善や貢献できそうなポイントがいくつかあると感じ、このプロジェクトに応募することにしました。