HOW TO2018.9.10 (Mon)

【コーダー向け】開発効率がアップするChromeのおすすめ拡張機能

 0827murayama.png

  • 村山浩靖 | Hiroyasu Murayama
  • 株式会社シグナル Webエンジニア

こんにちは。Webエンジニアの村山です。
1日に何時間もWeb開発をしていると、少しでも作業を効率化したくなるものです。幸い、Google Chromeにはコーディングに役立つ拡張機能が多数ありますが、みなさんは何を使っていますか?

僕もいろいろと試してきた中で、特に便利だと感じた優秀な拡張機能をここでご紹介します。

コーダーにおすすめしたいChrome拡張機能4選

1.Vimum


Vimum

「Vimum」はテキストエディタ「Vim」を使っているエンジニアにおすすめの拡張機能です。「Vim」の操作に慣れていると、ついついChrome上でページをスクロールする際にも「k」や「j」のキーを押してしまう……なんてことはないでしょうか? そんな時、この拡張機能を使えば、ストレスなく「vim」と同じキーバインドでChromeを操作することができます。

2.Wappalyzer

wappalyzer
Wappalyzer(画像:Chromeウェブストアより)

イケてるWebサイトを見て、「どんなテクノロジーを使っているんだろう?」と調べて参考にすることって、よくありますよね。そうした時に便利なのが、この「Wappalyzer」です。「Wappalyzer」の紫色のアイコンをクリックするだけで、どんなテクノロジーを使っているのか、バージョンはいくつなのかをひと目で確認することができるため、自分でコードを確認する手間が省けます。

3.HTMLエラーチェッカー


HTMLエラーチェッカー

サイト制作中、HTMLタグの記述ミスをさっとチェックしたいときに重宝しているのが、「HTMLエラーチェッカー」です。機能は、開始タグと閉じタグの過不足をチェックして要修正箇所を表示してくれるというシンプルなもの。対象のページを表示中に「HTMLチェッカー」のアイコンをクリックするだけなので、チェックの手間を大幅に省くことができます。ちなみに僕は使用していませんが、オリジナルの警告ルールも追加できるようです。

4.Quick QR Code Generator

quickqrcode
Quick QR Code Generator(画像:Chromeウェブストアより)

スマホでサイトの表示をテストする際、いちいちPCからスマホ宛てにチャットやメールなどでリンクを送るのは手間ですよね。この「Quick QR Code Generator」を使えば、アイコンをクリックするだけでQRコードを瞬時に生成してくれるため、スマホでQRコードを読み取るだけでサイトにアクセスできます。テスト用のスマホに個人のチャット、メールのログイン履歴を残さずに済むので、セキュリティ面でも助かります。

“ちょっとした不満”を拡張機能で改善

Chromeのようによく使うツールの場合、ほんのちょっとの不満であっても放置せずに改善することで、その後の日々のストレスが軽減されるのを感じます。もしまだ使ったことがない拡張機能があれば、ぜひ試してみてください!

構成:福田さや香