生産性を高めるすごいフロントエンド開発ツール10選

本記事は、[Mehdi Aoussiad](https://mehdiouss.medium.com/)氏による「[10 Awesome Front-End Development Tools to Boost Your Productivity](https://javascript.plainenglish.io/10-awesome-front-end-development-tools-to-boost-your-productivity-b1d2efc4c4ba)」（2021年2月5日公開）の和訳を、著者の許可を得て掲載しているものです。

#生産性を高めるすごいフロントエンド開発ツール10選
>使った方がいい便利なフロントエンド開発ツールを紹介します。

![Developer Setup.](https://miro.medium.com/max/700/0*7oj0-ApAmbzGXHuJ)
Photo by [ThisisEngineering RAEng](https://unsplash.com/@thisisengineering?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)

##はじめに

開発者として、私たちは常に、プロジェクトに取り組んだり何かを学んだりする時に、作業を楽にしたり生産性を高めたりするリソースやツールを使う必要があります。web上には開発者向けに作成されたツールがたくさんあるので、安心してください。その多くは無料で、何も支払う必要はありません。

この記事では、webで入手できる無料の、非常に便利なフロントエンド開発ツールのリストを紹介します。さっそく始めましょう。

##1. UiGradients

[UiGradients](https://uigradients.com/#Peach)は便利なwebツールで、カスタマイズして選べる素晴らしいカラーグラデーション集です。また、カラーグラデーションは、CSSコードとして取得したり、JPG形式でダウンロードしたりすることもできます。

![uiGradients](https://miro.medium.com/max/571/1*f3sYkbWA0UvbXYsp4WQ2eQ.png)
>[uiGradients](https://uigradients.com/#Peach)

##2. Responsively app

[Responsively](https://responsively.app/)は、レスポンシブwebアプリをより速く開発するのに役立ちます。仕事が楽になるので、すべてのフロントエンド開発者が持つべき優れた開発ツールです。

![Responsively](https://miro.medium.com/max/670/0*BYCGRClEPrJncdBj.png)
>[Responsively](https://responsively.app/)

##3. Public APIs

[Public APIs](https://public-apis.io/)は、映画API、音楽API、オープンデータAPIなど、開発者向けの無料公開APIを集めたサイトです。自分のAPIを投稿することもできます。

![Public APIs](https://miro.medium.com/max/641/1*Evz175PjFnIe6jxxSKoSuQ.png)
>[Public APIs](https://public-apis.io/)

##4. Undraw

[Undraw](https://undraw.co/illustrations)は、webページで使えるSVG画像やイラストがたくさんある素晴らしいwebアプリです。

また、SVG画像をwebサイトに埋め込む機能と組み合わせることもできます。

![Undraw](https://miro.medium.com/max/700/0*oz24lXomr9l9E3U2.png)
>[Undraw](https://undraw.co/illustrations)

##5. Lorem Picsum

[Lorem Picsum](https://picsum.photos/)は、必要に応じて、ランダムでも特定のものでも、画像を簡単に取得できるシンプルなwebサイトです。写真のLorem Ipsumです。

![Lorem Picsum](https://miro.medium.com/max/444/1*Wb8QEZB1So-WbLkLq6wwZA.png)
>[Lorem Piccsum](https://picsum.photos/)

##6. DevDocs

[DevDocs](https://devdocs.io/)は非常に便利なオープンソースのwebアプリで、複数のAPIドキュメントを、操作やアクセスが簡単なインターフェースでまとめています。DevDocsには、さまざまなweb技術に関するたくさんのドキュメントがあり、簡単にアクセスして学習できます。オフラインモードでも動作します。

![DevDocs](https://miro.medium.com/max/631/1*5lPI9tInm_o7j-0kc1kjYg.png)
>[DevDocs](https://devdocs.io/)

##7. Onepagelove

[Onepagelove](https://onepagelove.com/)は、フロントエンド開発における学習のヒントとなるテーマやテンプレートをたくさん提供しているwebサイトです。インスピレーションを得るのに最適です。また、無料のテンプレートをダウンロードして使うこともできます。

![Onepagelove](https://miro.medium.com/max/700/0*yYIyCK6T5jzRwpRT.png)
>[Onepagelove](https://onepagelove.com/)

##8. RegEx 101

[RegEx 101](https://regex101.com/)は、無料の正規表現デバッガーで、リアルタイムの説明、エラー検出、強調表示の機能があります。PHP、JavaScript、Python、Golangに対応しています。

![RegEx 101](https://miro.medium.com/max/674/0*F1-ep0gjP917T_pn.png)
>[RegEx 101](https://regex101.com/)

##9. Prettier

[Prettier](https://prettier.io/)は、コードを適切にフォーマットするための無料ツールです。多くの言語をサポートしており、VSCodeやSublimeなど、ほとんどのエディタと統合できます。

![Prettier](https://miro.medium.com/max/649/0*b06bQSLl6gTDjVm1.png)
>[Prettier](https://prettier.io/)

##10. Flaticon

[Flaticon](https://www.flaticon.com/)は、SVG、PNGなどの形式で無料ベクターアイコンを入手できます。データベース上の何千ものアイコンにアクセスできます。時間をかけて自分でアイコンを作成するよりも、はるかに簡単です。

![Flaticon](https://miro.medium.com/max/649/1*bSe-OdWQI0Qq6HRukf3f0A.png)
>[Flaticon](https://www.flaticon.com/)

##おわりに

ご覧のとおり、ここで紹介したツールはすべて便利で無料です。これを使えば、さまざまなタスクを簡単に達成でき、フロントエンドweb開発者としての生産性を高めることができます。

記事を読んでいただき、ありがとうございました。お役に立てれば幸いです。

##もっと読む

JavaScriptやweb開発関連のより有用なコンテンツに興味がある場合は、私のニュースレターを[購読](https://mehdiouss.ck.page/)してください。

以下のリンクにも役立つ記事があるので、チェックしてみてください。

>**知っておくべき便利なJavaScriptの配列メソッド20選**
>JavaScriptで配列を簡単に操作するのに役立つ20の便利なメソッド
>[medium.com](https://medium.com/javascript-in-plain-english/20-useful-javascript-array-methods-that-you-should-know-6f0e5a9c710a)

##翻訳協力

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。

Original Author: [Mehdi Aoussiad](https://mehdiouss.medium.com/) ([@AoussiadMehdi](https://twitter.com/AoussiadMehdi))
Original Article: [10 Awesome Front-End Development Tools to Boost Your Productivity](https://javascript.plainenglish.io/10-awesome-front-end-development-tools-to-boost-your-productivity-b1d2efc4c4ba)
Thank you for letting us share your knowledge!

選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

##ご意見・ご感想をお待ちしております
今回の記事はいかがでしたか？
・こういう記事が読みたい
・こういうところが良かった
・こうした方が良いのではないか
などなど、率直なご意見を募集しております。
頂いたお声は、今後の記事の質向上に役立たせて頂きますので、お気軽に
コメント欄にてご投稿ください。[Twitter](https://twitter.com/BabyDegu?lang=ja)でもご意見を受け付けております。
皆様のメッセージをお待ちしております。