2020年向け 開発者向けブラウザ拡張機能９選

>こちらの記事は、[Indrek Lasn](https://medium.com/@indreklasn) 氏により2019年 7月に公開された『 [9 Useful Browser Extensions for Developers — 2020 edition](https://medium.com/better-programming/9-productivity-browser-extensions-for-developers-2020-edition-eb84cda6f038) 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。
著者Twitter https://twitter.com/lasnindrek

Web開発者として、私達はブラウザの拡張機能を存分に利用することができます。ブラウザの拡張機能は、作業環境とコーディングの生産性の向上にとても役立ちます。

2020年に近づき、数多くの新しい拡張機能が登場しました。そこでWeb開発者にとって最も便利な拡張機能を紹介します。

>「私がかなたを見渡せたのだとしたら、それは巨人の肩の上に乗っていたからです。」 アイザック・ニュートン

# Refined GitHub
Refined GitHubはGitHubインターフェースを簡素化し、便利な機能を追加します。

![](https://miro.medium.com/max/640/1*OVV0B52xYEx0-kyE30zbvg.jpeg)

>「私たちの希望は、GitHubがこれらの改善点の必要性に気づき、実装されることです。Refined GitHubの気に入った箇所は、ぜひGitHubサポートにメールしてください。」 — Refined Github開発者

## インストールガイド

- [Chrome拡張機能](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf)
- [Firefoxアドオン](https://addons.mozilla.org/en-US/firefox/addon/refined-github-/)
- Opera拡張機能：[Opera拡張機能](https://addons.opera.com/en/extensions/details/download-chrome-extension-9/)を使用して、Chromeバージョンをインストールしてください。

#Hacker Tab
Hacker Tabは、ブラウザの新しいタブ画面に今人気のGitHubプロジェクトの情報を表示します。新しいタブを開くたびに、すべての新しいプロジェクトのリストが表示されるので、オープンソースプロジェクトがどのくらい賑わっているのかについて知りたい場合に役立つでしょう。

また、毎日、毎週、および毎月のタイムスケジュールを切り替えることや、異なるプログラミング言語に切り替えることもできます。

![](https://miro.medium.com/max/1580/1*0gJ9ZuTacdRcGBlqtib9IQ.png)

## インストールガイド

- [Chrome拡張機能](https://github.com/huchenme/hacker-tab-extension)
- [Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/hacker-tab/)

# Daily 2.0 — 忙しい開発者のための情報源

優れたソフトウェア開発者であるということは、世の中の最新技術を把握し続け、もっと学ぼうと”常に”努力する必要があるということです。

![](https://miro.medium.com/max/2880/1*gwaDTpw19zlZhgjLjVFY7g.png)

毎日新しい、あるいは、更新されたソフトウェア開発技術がインターネットを介してリリースされています。開発者の私たちにとって、最新情報を把握し続けるのは非常に面倒です。

Dailyは、開発者をWeb上のニュースを絶えず検索することから解放し、コードに集中できるように、開発者向けに、開発者によって作られました。

## インストールガイド

- [Chrome拡張機能](https://chrome.google.com/webstore/detail/daily-20-source-for-busy/jlmpjdjjbgclbocgajdjefcidcncaied?hl=en)
- [Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/daily/)

# No Coin

世の中には、CPUに暗号通貨をマイニング（採掘）させるWebサイトがあります。No Coinは、Coinhiveなどの利用者の同意なしでコンピュータのリソースを使用するコインマイナー（採掘者）をブロックすることを目的とした小さなブラウザー拡張機能です。

![](https://miro.medium.com/max/1270/1*y-m1uuVppQ2IXabbtMwa_w.png)

マイナーがCPUや電力を使用するのをブロックする安全な方法を提供しており、数千のユーザーから信頼されています。

また、No Coinには、マイニングを必要とするキャプチャまたはショートリンクを渡す必要がある場合に、限られた時間だけマイナーを許可する簡単な方法もあります。

## インストールガイド

- [Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/no-coin/)

※Chrome拡張機能は原記事のリンクが切れているため訳文では削除しています

# JSON Formatter
この拡張機能は、JSONを読みやすくします。また、JSON Formatterはオープンソースです。

![](https://miro.medium.com/max/640/1*pmcFbEYqPBVZPr9fFslN7g.png)

JSON Formatterは、シンプルにJSONを読みやすい形式で表示するので、同様の拡張機能とは異なり、これは単純にきれいに印刷します。ビューア、色、または折りたたみは一切追加されません。

##インストールガイド
[Chrome拡張機能](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa)
[Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/basic-json-formatter/)

# Pomodoro Timer
![](https://miro.medium.com/max/1176/1*pjqRskqG-meB2Q6F5iqiGg.png)

まず、**ポモドーロ・テクニック**は、時間管理方法で、元の手法には6つのステップがあります。

1. 実行するタスクを決定します。
2. Pomodoroタイマーを設定します（従来は25分）。
3. タスクに取り組みます。
4. タイマーが鳴ったら作業を終了し、紙にチェックマークを付けます。
5.  チェックマークが4つ未満の場合は、短い休憩（3〜5分）をとり、ステップ2に進みます。
6. 4つのポモドーロの後、長い休憩（15〜30分）をとり、チェックマークカウントをゼロにリセットしてから、手順1に進みます。

皆さんが読んでいるこの記事を書いた時も、私はポモドーロテクニックを使用しました。ポモドーロは、物事を成し遂げる実用的な方法であり、時間を集中して管理する方法を学ぶのに役立ちます。

もしこの実用的な方法についてより詳しく知りたい場合は、[この本](https://www.amazon.com/dp/B07F3DM7C1/ref=as_li_ss_tl?_encoding=UTF8&btkr=1&linkCode=ll1&tag=thegeniusde07-20&linkId=460fb54c3a2b40b17f43117f6390e03e&language=en_US)が役に立つでしょう。

## インストールガイド
[Chrome拡張機能](https://chrome.google.com/webstore/detail/marinara-pomodoro%C2%AE-assist/lojgmehidjdhhbmpjfamhpkpodfcodef)
[Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/tomato-clock/)

# Meta SEO Inspector
Meta SEO Inspectorは、通常の閲覧では表示されないWebページ内にあるメタデータを検査するのに役立ちます。また、メタタグを調べて、良好なSEOスコアの確認もできます。

![](https://miro.medium.com/max/640/1*GCc9GYvua8NZuYtrqoZvTA.png)

この拡張機能は、Googleウェブマスター向けガイドラインに従うためにサイトのHTMLを確認する必要があるWeb開発者を主な目的としていますが、通常は表示されないページコンテンツを表示したい人にも役立ちます。

たとえば、descriptionタグが短すぎるか長すぎる場合など、メタデータが特定の範囲内にない場合に、アラートを表示してくれます。

SEOは独自領域ですので、SEOのベストプラクティスとヒントについては、[3 Months to No.1: The 2019 “No-Nonsense” SEO Playbook for Getting Your Website Found on Google](https://www.amazon.com/Months-No-1-No-Nonsense-Playbook-Getting-ebook/dp/B075HGN2L5/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=thegeniusde07-20&linkId=2f743511fe6012a60bf50835854c59e8&language=en_US)を読むことをお勧めします。

## インストールガイド
- [Chrome拡張機能](https://chrome.google.com/webstore/detail/meta-seo-inspector/ibkclpciafdglkjkcibmohobjkcfkaef)
- [Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/seo-inspector/)

# OctoLinker

OctoLinkerは、`include`や`require`、`import`などの言語で異なるインポート系の表記を純粋なリンクに変換し、GitHub上のプロジェクトを効率的にナビゲートします。

![](https://miro.medium.com/max/640/1*7BoccAio8xh_7VUV9kHGow.jpeg)

ソースコードはGitHubにあります
https://github.com/OctoLinker/OctoLinker

## インストールガイド
- [Chrome拡張機能](https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp)
- [Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/octolinker/)

#Octotree

Octotreeは、GitHub上のソースコードツリーを表示する拡張機能です。多くのリポジトリをローカルにダウンロードすることなく、プロジェクトのソースコードを探索するのに最適でしょう。

![](https://miro.medium.com/max/640/1*ErOzSw7mGCvtwJni0ThMbQ.jpeg)

##インストールガイド
- [Chrome拡張機能](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc)
- [Firefox拡張機能](https://addons.mozilla.org/en-US/firefox/addon/octotree/)

#さいごに
皆様のコーディング環境が少しでも良くなれば幸いです。
読んでくれてありがとうございます！頑張りましょう！


# 翻訳協力　
Original Author:  **[Indrek Lasn](https://medium.com/@indreklasn)** 
Thank you for letting us share your knowledge! 

この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当:  yumika tomita
翻訳担当:  @rokumura7 
監査担当:  @nyorochan
公開担当:  @aoharu