知っておくと仕事が捗る便利ツール17選

## はじめに

知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。

## [Squoosh](https://squoosh.app/)

Googleが開発した画像変換・圧縮用のWebサービス。
プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/749d06e4-8b80-f596-1469-57964788a592.png)

## [Documatic](https://www.documatic.com/)

Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/bf18678a-fc80-0564-47df-fd508aab4597.png)

## [transform](https://transform.tools/)

jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。
jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/34fc182f-2e42-cf00-666d-7e9ccda017d4.png)

## [Roadmap.sh](https://roadmap.sh/)

あらゆる言語や技術のロードマップを見ることができる。

以下はReactの場合。ブロックをクリックすると、さらに細かく見ることも可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/b565022b-fc39-d6c8-58ef-affd0f0d108e.png)

## [opensourcealternative.to](https://www.opensourcealternative.to/)

カテゴリ別や言語別でOSSを探すことができる。
代替ツールを見つけるのに便利。また、Githubのリンクなども掲載されている。

例えば、Goで検索すると以下のようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/8826be21-5ef8-c39e-ade4-d7d90d0d5203.png)

## [Storybook](https://storybook.js.org/)

UIカタログのサイト。

StorybookをベースとしたUIテストツール[Chromatic](https://www.chromatic.com/)もある。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/c0893a48-087d-2b29-0a29-eecdc76a1205.png)

## [Code Beautify](https://codebeautify.org/)

HTML、CSS、JavaScript、JSON のいずれであっても、このプラットフォームを使用すると、コードを整理して簡単に維持できる。

![スクリーンショット 2024-06-28 5.30.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/852147c4-db6c-59e2-c6f8-0671e0153d21.png)

## [Zapier](https://zapier.com/)

Zapierは、複数のアプリケーションやサービスの日常的なタスクを自動化するためのワークフローを作成することができる。
お気に入りのツールを接続して`Zap`を構築し、データの同期、アラートなどの操作を自動化することで、作業時間を大幅に節約できる。また、テンプレートなども揃っている。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/40ee32ab-811f-835a-c08b-f74fecd7d825.png)

## [ExplainShell](https://explainshell.com/)

難しいシェルコマンドを分解するツール。
コマンドを貼り付けると、コンポーネントに分解し、解説してくれる。

例えば、`:(){ :|:& };:`を解析すると以下のようになる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/003cc49a-ed51-c5cf-b68c-3cb46c070ce6.png)

## [SmallDevtools](https://smalldev.tools/)

エディターからクレジットカード番号生成まで、さまざまな便利ツールをオールインワンで提供する。
以下のようなことができる。

* プログラムコードを共有する「Code Share」
* JSONを整形する「JSON Formatter」
* BASE64、URL、UTF8のエンコード・デコード
* XMLのデコード
* JavaScript、HTML、CSS、SQLなどのフォーマッターや圧縮
* テストデータ、ダミー文章、ダミー画像、クレジットカード番号の生成
* マークダウンエディター・コンバーター
* diffの表示
* PDFコンバータ
* QRコードの生成、読み取り
* リストの並び替え

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/3cf443c9-85cb-fbbd-8cc8-b1deaa0116ee.png)

## [DevHints](https://devhints.io/)

いくつかのプログラミング言語、フレームワーク、ツールに関するチートシートがたくさんある。

以下は、vimのチートシート

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/c165545b-d559-a397-eef5-d9db6743e79d.png)

## [BundlePhobia](https://bundlephobia.com/)

npm のモジュールを参照した際のバンドルサイズを算出してくれる。
また、依存関係のサイズとパフォーマンスへの影響をチェックしてくれる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/9a977c3d-52ad-1818-6e5b-009d810c1b0b.png)

## [Convertio](https://convertio.co/ja/)

ファイルコンバーター。ファイルをどんなフォーマットにも変換できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/041f9f4c-ff4a-0a87-807f-b40148c92268.png)

## [Unminify](https://unminify.com/)

Unminifyは、JavaScript、CSS、HTML などの圧縮されたコードを、明確かつ編集可能な状態にして、可読性やデバッグの容易さを向上する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/2d3451cb-165d-599c-01f2-0a9757e51c21.png)

## [Carbon](https://carbon.now.sh)

PowerPointなどにソースコードを貼りつけるのに便利です。
ソースコードをいい感じの画像にしてくれるサイト。

自分はスライドを作る時このサイトを使っています。

<script defer class="speakerdeck-embed" data-slide="76" data-id="d13c6a8bf858429d8b10722ff43acb36" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

## [Ray](https://ray.so/)

Carbon同様、ソースコードを画像にしてくれるサービス。
Carbonの方がテーマや設定が多いが、こちらは少ない。ただし、RayではSVG形式のエクスポートやラインハイライトができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/517e06e0-f9ea-7954-ba62-82c2d7ac54d3.png)

以下のスライドの一番最後の方で使用しています。

<script defer class="speakerdeck-embed" data-slide="65" data-id="26042f03b3e5432d8f0451c51cf53677" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

## [CyberChef](https://gchq.github.io/CyberChef/)

下記のようなあらゆる便利ツールがブラウザで使用できる。

* 2・8・10・16進数変換
* Base64、URL、古典暗号（シーザー暗号やヴィジュネル暗号など）、現代暗号（AES/DES/RSAなど）のエンコード・デコード
* IPv4・IPv6アドレスのパースやフォーマット変換
* テキストエンコーディングの変換
* MD5・SHA-1・SHA-2などのハッシュ値計算
* EXIF情報の抽出・削除
* QRコードの作成・読み取り

![スクリーンショット 2024-06-28 0.24.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/ee775e7b-5dbb-79c5-5e28-ce1ee9a2c12f.png)

## 終わりに

ご精読ありがとうございました。
他におすすめのツールがあれば、コメントで教えてください！
また、使用の際は生成AIツール等と同様に、情報漏洩には気をつけましょう。
その他、コンタクトは **X** の[@tomomon1227](https://x.com/tomomon1227)までお願いします。