【初心者必見】【君はいくつ知っている？】Web開発の生産性を100倍アップしてくれるChrome拡張機能 16選

はじめに

今回の記事では、特にプログラミング初心者向けにWeb開発で重宝するChrome拡張機能を16も紹介する。今回の記事で、1つでも興味のあるChrome拡張機能を見つけることができれば幸いだ。

Chrome Remote Desktop

Chromeを経由して画面共有ができる。スマホやタブレット、別のパソコンを使って離れた場所から自分のパソコンに安全かつ簡単にアクセスできる。画面を共有してリアルタイムで共同作業もできる。

ChromeをWeb開発でフル活用している人は導入して損はない。

DeepL Translate

DeepLのWebアプリやデスクトップアプリを開かずに、直接ドラッグした文章を翻訳できる。公式ドキュメントを翻訳するうえで重宝する。別のブラウザを開かずに文章を翻訳できるので作業効率が格段にアップする。

学習や仕事で翻訳ツールを活用しているならインストールして損はない。

GoFullPage

Web記事のスクリーンショットを出力してくれる。自分が制作しているWebページのデザインをワンクリックで保存できる。自分が制作したWebページを共有したり、お気に入りの技術記事を保存したりする上で非常に重宝する。

Google翻訳

DeepLと同様に、ドラッグした文章を翻訳してくれる。単語だけをドラッグすると、その単語の発音も確認できる。DeepLは有料のオプションがあるものの、こちらの場合は無料で使える。精度はさすがにDeepLには劣るものの、無料で回数に上限なく使える。導入して損はない。

Whatruns

特定のWebサイトに使われている技術やフォント等をワンクリックで確認できる。自分が普段使っている技術やフォントの活用事例がわかる。

Grepper

Google検索で、例えば、「Python 関数 書き方」というように特定のコードの書き方に対する質問をするときにその回答をソースコード付きで出力してくれる。しかも、出力されたソースコードはコピペして使い回すこともできる。

コードの書き方がまだわからないプログラミング初心者が絶対にインストールしておくべきChrome拡張機能。

Toggl Button

自分が今行っている作業にかかった時間を確認できる。Togglのアカウントを持っていることが前提になるが、作業にかかった時間を管理する上で重宝する。

ポモドーロ・テクニックを仕事でフル活用している人は導入して損することはない。

Any.do extension

ブラウザ上でタスク管理をしている人なら導入して損はない。これもAny.doのアカウントを持っていることが前提になるものの、簡単にタスクの共有、管理やメモの追加などをブラウザ上で済ませられる。

1Password – Password Manager

パスワード管理ソフト1PasswordのChrome拡張機能。パスワードを入力する際に別でアプリを開かずに、ブラウザ上でワンクリックでフォームに入力できる。パスワード管理が面倒な人や、すでに1Passwordを導入している人におすすめ。

Gossip Site Blocker

自動でゴシップサイト等の有害サイトをGoogle検索上にヒットさせなくしてくれる。ネット記事の質を見極めたり、内容を判断したりすることが難しい初心者におすすめ。自動で有害なサイトを排除できるので安心してGoogle検索を活用できる。

Select Search

ドラッグした単語や文章を複数の検索エンジンで検索できる。プログラミング学習でわからない専門用語が出た時、別途新しいタブを開かずにドラッグと右クリックメニューだけで簡単に調べられる。

普段の調べ物にも応用できるので、インプットの効率を上げる上では絶対にインストールして損はない。

JSONView

JSONドキュメントをブラウザ上で確認できる。原則、ブラウザ上にJSONを出力するとプレーンテキスト(何も色付けされていないテキスト)で出力される。ところが、この拡張機能をインストールするとブラウザ上に出力されるJSONをシンタックスハイライトしてくれる。

JSONをWeb開発でフル活用している人はインストールするべきである。

Lighthouse

自分の開発したWebアプリケーションの生産性や質、内容の正確さ等を数値化してくれる。自分が作ったWebアプリケーションのパフォーマンスを確認したり、挙動をテストしたりする上では必要不可欠である。

Marker.io

開発したWebアプリケーションのバグやフィードバック等をブラウザ上で視覚的に行うことができるWebサービスMarker.ioのChrome拡張機能。Marker.ioを使っている人や、効率的にアプリケーションのフィードバックを返したい人におすすめ。(ただしサービスは有料)

Web Developer Checklist

Web制作とWeb開発におけるベストプラクティスをチェックリスト形式で確認できる。自分が現在開発しているWebアプリケーションの状況やパフォーマンス、問題点を確認する上で重宝する。

daily.dev

インストールするだけでChromeの新しいタブを常にプログラミング・エンジニアリング関連のネット記事のリストにしてくれる神のChrome拡張機能。自分から積極的に情報を収集する必要がなくなり、インプットの効率が格段にアップする。

自分のお気に入りのネット記事をブックマークしたり、興味のある分野を検索したりすることもできる。情報収集の効率が100倍アップするので絶対に導入するべき。