はじめに

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

Squoosh

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

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

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

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

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

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

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

UIカタログのサイト。

StorybookをベースとしたUIテストツールChromaticもある。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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