フロントエンドエンジニアにおすすめchrome拡張機能


# はじめに

こんにちは、都内でソフトウェアエンジニアをしている[YSasago](https://qiita.com/YSasago)です。
私はフロントエンドの開発時に、[Chrome](https://www.google.com/intl/ja/chrome/)のブラウザを使うことが多いです。
Chrome には開発を便利にする[chrome 拡張機能](https://chrome.google.com/webstore/category/extensions?hl=ja)がたくさんあります。
普段、フロントエンド開発時に私が使っている拡張機能を紹介したいと思います。

# [UI Build Assistant](https://chrome.google.com/webstore/detail/ui-build-assistant/clbhieamajlakjobcoiheklaoldcjhjf?hl=ja)

アイコンは IT 大学と面白いですが、こちらの拡張機能を使えば、ワンクリックで背景と線に色付けをしてくれて、レイアウトが見やすくなります。こちらの拡張機能を使うとマージンの調整等が簡単にできるようになりとても便利です。
また、作成者の[しまぶーさん](https://www.youtube.com/watch?v=CXrW5rqP-WY)の Youtube 動画は、フロントエンド学習にとても有益なのでよく拝見させていただいてます。

| OFF                                                                                                                                                                                             | ON                                                                                                                                                                                              |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![FireShot Capture 563 - KDDIアジャイル開発センター株式会社 - kddi-agile.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/af30d6be-3350-0310-d5c9-31ea54d20ea0.png) | ![FireShot Capture 564 - KDDIアジャイル開発センター株式会社 - kddi-agile.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/6798191a-3df4-e332-8970-6e4cf8cae8b7.png) |

https://chrome.google.com/webstore/detail/ui-build-assistant/clbhieamajlakjobcoiheklaoldcjhjf?hl=ja

# [Responsive Viewer](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=ja)

次に紹介するのは、Responsive Viewer です。
こちらはワンクリックで開発してきた画面を１度に様々な大きさで確認することができます。
レスポンシブデザインをレビューをするときに、最終チェックでよく利用しています。

![FireShot Capture 565 -  - kddi-agile.com.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/0139b6fa-e1ce-dee2-6651-d8cd590ae8ca.png)

https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=ja

# [ウェブページ全体をスクリーンショット - FireShot](https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja)

こちらは、普段の使用率 No1 のスクリーンショットを簡単にとることができる拡張機能です。
ページ全体のキャプチャを簡単にとることができるので、開発したものをレビューしてもらうときによく使っています。

https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

# [WhatFont](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja)

次に紹介するのは、使用しているフォントの書体を教えてくれる拡張機能です。
こちらの拡張機能を ON にすれば、知りたい web 上のフォントをカーソルを当てればわかるようになります。
開発している中で、数字と文章でフォントの種類が決まっており、フォント変更の忘れがないか確認するときに使っていました。

![スクリーンショット 2023-07-21 9.25.58（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/d9dec443-7368-58f1-cf96-fff844ffbf3d.png)

# [Talend API Tester - Free Edition](https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja)

こちらの拡張機能を使うと、ブラウザ上で、API の動作検証ができるようになります。
開発中にさくっと API のレスポンスを知りたいときにこちらを使っています。
全体的にわかりやすい UI なので、初心者でもすぐに試せるかと思います。

![FireShot Capture 567 - get_meeting_list - Talend API Tester - aejoelaoggembcahagimdiliamlcdmfm.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/4cf3eda8-1481-9dc5-183e-22285b6e061f.png)

https://chrome.google.com/webstore/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm?hl=ja

# [CSSViewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=ja)

CSSViewer の拡張機能を使うと、ブラウザ上で CSS の確認ができるようになります。
拡張機能を使うまでは、毎回 Chrome のデベロッパーツールを表示し、確認したい CSS を選択して確認していました。
CSSViewer を使うと、CSS を確認したい箇所へカーソルを当てると、CSS を表示してくれます。
サクッと CSS を確認したいときに便利です。

![スクリーンショット 2023-08-18 11.55.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/02daeba7-ec53-6818-5499-db9bd51b4a12.png)

# おわりに

今回、私がフロントエンド開発時によく使っている Chrome 拡張機能をまとめてみました。
まだまだ紹介したい Chrome 拡張機能がたくさんあるので、追々追加していきたいと思います。
無料で開発に便利にしてくれる拡張機能がたくさんあり、Chrome 拡張機能は素敵ですね。
他におすすめの拡張機能がありましたら、教えていただけると幸いです。
最後まで読んでくださりありがとうございました。