Help us understand the problem. What is going on with this article?

GitHubをむっちゃ多機能にするためのChrome拡張を紹介するぜ

概要

  • GitHub上で動作するChrome拡張についてざっくばらんに紹介
  • 検証をChromeで行っただけで、他ブラウザでも使えるものも含む

ご注意

  • 紹介してるもの同士の互換性は考慮していません。組み合わせによって動作しなくなる拡張もあります
  • 拡張機能は本家GitHubの変更を強く受けるため、突如使えなくなるリスクがあることをご認識ください
  • プライベートリポジトリでは使用できない、あるいはAPIトークンを渡したり認可する必要があるものを含みます
  • 本記事で紹介している拡張はいずれも2020/05/03時点の最新版をChrome81系で動作確認済み

Refined GitHub

Octotree

サイドバーにディレクトリツリーを表示する

スクリーンショット 2020-05-03 18.22.11.png

  • こちらもド定番の拡張

Awesome Autocomplete for GitHub

検索機能を強化する

スクリーンショット 2020-05-03 19.05.07.png

  • 人気のリポジトリをグラフィカルに検索できるように
  • アクティブなユーザを検索対象としてサジェスト
  • 内部的にalgoliaを使うことで検索精度、パフォーマンス向上

PR Monitor

自分が関連するPRの一覧を状態別に管理したり、通知を受けることができるボードを表示する

unnamed.png
(画像はストアより引用)

  • 「レビューするPRあるかな?」 「私が出したPRどうなってるっけ」などの確認がより手軽にできるようになり、レビューの効率化を促せそう。
  • 複数リポジトリを横断できる上、個別にミュート設定、無効化設定も可能
  • 操作性に一部難があり、カスタマイズが難しいような印象もある

Git History Browser Extension

Open in Git History メニューが追加され、Git Historyをアニメーションで可視化出来るようになる

スクリーンショット 2020-05-03 17.49.04.png
(デモ)

  • 実用性云々より楽しさのほうが強い
  • コードの追加削除がアニメーションで見られるだけで、diffが確認できるわけではない
  • プライベートリポジトリの場合は認可する必要があるので注意

npmhub

package.jsonを元に、npmパッケージの依存関係を可視化する

通常はREADME.md の下に続けて表示される
スクリーンショット 2020-05-03 18.46.24.png

使用できる関連ツールがあれば、Visualize full treeなどのボタンで依存関係のツリーが可視化できたりする

スクリーンショット 2020-05-03 18.46.53.png

Octohint

GitHub上で、vscodeなどのIDEのようなインテリセンスが機能し、型推論や関数のシグネチャの確認などが行えるようになる

スクリーンショット 2020-05-03 17.15.46.png

  • シンプルながら強力で、OSSのコードリーディングやコードレビューで役立つ
  • インテリセンスの対応言語は .ts .js .css .scss .less とやや限られている

Module Linker

モジュールをインポートするコードで、パスに対してリンクを設定する。

(↓の画像の場合、mutations.js actions.js getters.js に対してリンクが貼られる)

スクリーンショット 2020-05-03 17.37.02.png

  • 拡張子が省略されててもちゃんとリンクするのはエライ
  • JSに限らず色んな言語がサポートされている
  • フロントエンドに限ると、webpackでaliasなんか貼ってると解決できないのでちょっと辛い
  • この辺りは素のGitHubでも最近有能になってきてるからあえて入れるほどかは怪しい

GitHub Code Folding

コードをブロックレベルで開閉することができるようになる

スクリーンショット 2020-05-03 18.02.25.png

  • PR上では不可なので、これもコードリーディング用の印象
  • 手軽に使えるし他の拡張機能をバッティングすることもないので入れちゃって損は無さそう

Enhanced GitHub

いくつかの地味ながら強力な機能を追加
スクリーンショット 2020-05-03 18.58.25.png
スクリーンショット 2020-05-03 19.02.15.png

  • リポジトリ全体のファイルサイズを表示
  • ファイルごとのファイルサイズを表示
  • ファイルごとのダウンロードリンク
  • 開いているファイルの内容をクリップボードにコピー

GitHub Story Points

GitHub Projectで、storypointを使ったカンバンを実現する

スクリーンショット 2020-05-03 17.06.36.png
(画像はサンプルプロジェクトより引用)

  • Issueのタイトルに [1pt] のようなプレフィックスを付けることで、それを1storypointとして扱い、集計を行ってくれる
  • タイトルで管理するというややハックな仕組みだが、上手く運用に載せられると捗りそう

File Icon for GitHub and GitLab

ファイル一覧に対して、ファイル名や拡張子に対応したアイコンを表示させる

before(そっけない)
スクリーンショット 2020-05-03 16.51.27.png

after(直感的!!)
スクリーンショット 2020-05-03 16.51.43.png

  • 拡張子だけじゃなくて、ちゃんとファイル名に基づくのがステキ(.gitignore .eslintrc.js など)
  • 名前的に、GitHubに限らずGitlabでも使えるらしい。

Gifhub Pull Request

PR画面にて、GIF画像を検索、プレビューしつつコメントに添付することができる

スクリーンショット 2020-05-03 16.37.49.png

  • LGTM画像生成系は色々あるけど、これもお手軽で良さそう
  • 日本人用ではないので、検索ワードのチョイスに慣れが必要

さいごに

他にも良さそうな拡張があった場合や、ここで紹介してる拡張が動かなくなってしまった場合など、教えていただけると幸いです。

Sa2Knight
下の上ぐらいの伸び悩んでるWebプログラマ。色々な記事を読んで勉強しつつ、自ら学んだことを投稿して整理したりしているので誤った情報を発信してるかもしれません。お気づきの際はご指摘頂ければ幸いです。
https://github.com/Sa2Knight/Curriculum-Vitae
studist
「伝えることを、もっと簡単に」をミッションにビジュアルSOPマネジメントプラットフォームのBtoB SaaS「Teachme Biz」を開発・運営するスタートアップ
https://medium.com/studist-dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした