フロントエンド開発者のための便利なオンラインツール11選

本記事は、[Chidume Nnamdi](https://medium.com/@kurtwanger40)氏による「[11 Useful Online Tools for Frontend Developers](https://blog.bitsrc.io/12-useful-online-tools-for-frontend-developers-bf98f3bf7c63)」（2020年2月11日公開）の和訳を、著者の許可を得て掲載しているものです。

#フロントエンド開発者のための便利なオンラインツール11選

>私が愛用するオンライン開発ツール

![Image for post](https://miro.medium.com/max/700/1*Jp9zH2dXLXD7p6q_PwOS4Q.jpeg)

インターネット上には、フロントエンド開発者の生活を楽にしてくれる素晴らしいツールが沢山あります。この記事では、私が開発の仕事で頻繁に使っている11のツールについて簡単に説明します。

##1. CanIUse

Web APIが特定のブラウザで互換性があるのか、モバイルブラウザで使用できるのか、分からないことはありませんか？このオンラインツールを使えば、ブラウザの互換性についてWeb APIを簡単にテストできます。

>**Can I use―HTML5、CSS3などの対応表。**
>「Can I use」は、デスクトップとモバイルにおけるフロントエンドWebテクノロジーを支援する、最新のブラウザ対応表を提供します。
> [caniuse.com](https://caniuse.com/)

Web Share APIの`navigator.share(...)`に対応しているブラウザとバージョンを知りたいとします。

![Image for post](https://miro.medium.com/max/700/1*pq1UczjJ8dhTsO6hCPntyw.png)

結果を見てください。`navigator.share(...)`に対応しているブラウザとバージョンがすべて一覧になっています。

##2. Minify

アプリコードのバンドルサイズを縮小するために、ここで空白文字やデッドコードなどを削除します。その結果、アプリのバンドルサイズが大幅に縮小され、ブラウザでの読み込み時間が短縮されます。

このオンラインツール[minify.com](https://gist.github.com/philipszdavido/3a4c8720ea3fbf982e9dcfacd0f9860b)で、Webアプリのコードを縮小できます。

##3. Bit.dev

**[Bit.dev](https://bit.dev/)は素晴らしいコンポーネントハブです。私は、さまざまなプロジェクトで再利用可能なコンポーネントをホストし、文書化し、管理するため、これを使っています。コードの再利用を増やし、開発を迅速化し、チームの共同作業を最適化するのに良い方法です。**

また、設計システムをゼロから構築するのにも良い代替手段です（設計システムに必要なものが基本的にすべて揃っているため）。[Bit.dev](https://bit.dev/)は、コンポーネントの分離と公開を担うオープンソースツール[Bit](https://github.com/teambit/bit)と完全に連携します。

[Bit.dev](https://bit.dev/)は、React、React with TypeScript、Angular、Vueなどに対応しています。

![Image for post](https://miro.medium.com/max/700/1*Nj2EzGOskF51B5AKuR-szw.gif)

例：Bit.devで共有Reactコンポーネントを検索する

>**Bit―再利用可能なコードコンポーネントをチームで共有。**
>チームでより迅速に構築するため、プロジェクトとアプリケーション間で、再利用可能なコンポーネントを簡単に共有します。共同開発。
>[bit.dev](https://bit.dev/)

##4. Unminify

このツールは、minifyと逆のことをします。

>**Unminify**
>このツールは、見苦しいJavaScript、CSS、HTMLコードを縮小、再フォーマット、再インデントして、再び読めるようにします。
>[unminify.com](https://unminify.com/)

このツールで、縮小されたJavaScriptコードを解凍し、明瞭にし、整えることで、再び読めるようにできます。

##5. Stackblitz

これは誰もが知っているツールです。Stackblitzは、世界で最も人気で、最も使用されているIDEのVisual Studio CodeをWeb上で使用する機能を提供してくれます。

>**StackBlitz―Webアプリ用オンラインコードエディタ。Visual Studio Code搭載。**
>[stackblitz.com](https://stackblitz.com/)

Stackblitzは、Angular、React、Vue、Vanilla、RxJS、TypeScriptのプロジェクトをワンクリックで素早く、スキャフォールドしてくれます。

Stackblitzは、現在のJavaScriptフレームワークのコードや機能をブラウザから試してみたい時に特に便利です。Angularの記事を読んでいて、試してみたいコードを見つけたとします。ブラウザを最小化し、数行だけで新規Angularプロジェクトをスキャフォールドできます。

速くて簡単です。

他にも素晴らしいオンラインIDEはありますが、Stackblitzの勝因は、誰もが使い慣れていて、誰もが好きなツールVisual Studio Codeフィールを使用したことだと思います。

##6. JWT.io

JSON Web Token（JWT）を使用してアプリを保護している時、またはユーザがバックエンドで保護されたリソースにアクセスできるようにしている時。

ルートやリソースにアクセスする必要があるかを判断する1つの方法は、トークンの有効期限を確認することです。JWTをデコードしてペイロードを確認したいことがありますが、jwt.ioでそれがまさにできるようになります。

>**JWT.IO**
>JSON Web Token（JWT）は、2者間で転送されるクレームを表現するための、コンパクトでURL safeな方法です。
>[jwt.io](https://jwt.io/)

このオンラインツールを使用すると、トークンをプラグインしてペイロードを確認できます。 トークンを貼り付けると、jwt.ioはトークンをデコードし、そのペイロードを表示します。

##7. BundlePhobia

`node_modules`のサイズがわからないことや、マシンにインストールされるpakckage.jsonのサイズを知りたいことはありませんか？BundlePhobiaで分かります。

>**BundlePhobia**
>Bundlephobiaは、フロントエンドバンドルにnpmパッケージを追加した時の、パフォーマンスへの影響を調べるのに役立ちます。
>[bundlephobia.com](https://bundlephobia.com/)

このツールで、package.jsonファイルをアップロードすると、package.jsonからインストールされる依存関係のサイズを表示します。

##8. Babel REPL

Babelは無料のオープンソースJavaScriptトランスコンパイラで、最新のECMAScriptコードを古いプレーンなES5 JavaScriptに変換するために使用されます。

このツールは、Babeljsチームが設定したオンラインWebアプリで、ES6+コードをES5にトランスパイルできます。

>**Babel―次世代JavaScript用コンパイラ。**
>[babeljs.io](https://babeljs.io/en/repl)

これにより、ECMAScriptに最近追加された機能や、追加段階にあるいくつかの機能を試すことができます。コードを整え、ファイルサイズを制限し、トランスパイルの時間を節約できます。

##9. Prettier Playground

Prettierは、意見の分かれるJavaScriptコードフォーマッタです。コードを解析し、JavaScriptのベストコーディングプラクティスに沿った形で、一貫したスタイルを適用します。

このツールは、開発環境で広く使用されていますが、オンラインでもコードを整えられます。

>**Prettier**
>[prettier.io](https://prettier.io/playground)

##10. Postman

このツールは、APIエンドポイント（GET、POST、DELETE、OPTIONS、PUT）のクイックテストに役立ちます。

私も使用したことがありますが、11選に入れる価値があります。

##11. JSLint

JavaScriptの静的解析ツールでは、JSLintがトップに立っています。JSLintのオンラインバージョンを使用すると、ブラウザでJavaScriptのコードやファイルをリントできます。

[https://jslint.com](https://jslint.com/)に行って試してみてください。

>**JSLint―The JavaScriptコード品質管理ツール。**
>JSLintはJavaScriptコード品質管理ツールです。このファイルでWebブラウザからJSLintを実行できます。ソースを受け取ることができます。
>[jslint.com](https://jslint.com/)

##まとめ

他にも沢山ありますが、ここで紹介したのは私が愛用しているものです。

ご質問や、追加・修正・削除すべきものがある場合は、コメント、メール、DMなどで遠慮なくお知らせください。

ありがとう！！！

##もっと詳しく知りたい方は

>**Reactコンポーネントを公開する方法**
>どのリポジトリからでもReactコンポーネントを素早く公開する方法
>[blog.bitsrc.io](https://blog.bitsrc.io/how-to-publish-react-components-d04e0a7e33b9)

##

>**2020年版　便利なReactコンポーネント10選**
>さまざまな場合のさまざまなReactコンポーネント
>[blog.bitsrc.io](https://blog.bitsrc.io/10-useful-react-components-for-2020-35fd6af56909)

##

>**フロントエンド開発者におすすめのツール11選**
>愛用しているフロントエンドツール一覧
>[blog.bitsrc.io](https://blog.bitsrc.io/11-recommended-tools-for-frontend-developers-97942c35f9bd)

注）コメント欄で＠standard-software様より助言をいただきましたので、コメントもご参照いただければ幸いです。

>**こちらもどうぞ**
>[ウェブ開発者は必ず入れたいブラウザ拡張機能13選](https://qiita.com/baby-degu/items/83f674c0eb91d1ea1521)
>[フロントエンド開発者が知らない11の秘訣](https://qiita.com/baby-degu/items/1cfbf203d74bfd0b856c)

##翻訳協力

Original Author: [Chidume Nnamdi](https://medium.com/@kurtwanger40)（[@ngArchangel](https://twitter.com/ngarchangel)）
Original Article: [11 Useful Online Tools for Frontend Developers](https://blog.bitsrc.io/12-useful-online-tools-for-frontend-developers-bf98f3bf7c63)
Thank you for letting us share your knowledge!

この記事は以下の方々のご協力により公開する事ができました。改めて感謝致します。
選定担当: @gracen
翻訳担当: @gracen
監査担当: -
公開担当: @gracen

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