はじめに
知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。
Squoosh
Googleが開発した画像変換・圧縮用のWebサービス。
プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。
Documatic
Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。
transform
jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。
jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。
Roadmap.sh
あらゆる言語や技術のロードマップを見ることができる。
以下はReactの場合。ブロックをクリックすると、さらに細かく見ることも可能。
opensourcealternative.to
カテゴリ別や言語別でOSSを探すことができる。
代替ツールを見つけるのに便利。また、Githubのリンクなども掲載されている。
例えば、Goで検索すると以下のようになる。
Storybook
UIカタログのサイト。
StorybookをベースとしたUIテストツールChromaticもある。
Code Beautify
HTML、CSS、JavaScript、JSON のいずれであっても、このプラットフォームを使用すると、コードを整理して簡単に維持できる。
Zapier
Zapierは、複数のアプリケーションやサービスの日常的なタスクを自動化するためのワークフローを作成することができる。
お気に入りのツールを接続してZapを構築し、データの同期、アラートなどの操作を自動化することで、作業時間を大幅に節約できる。また、テンプレートなども揃っている。
ExplainShell
難しいシェルコマンドを分解するツール。
コマンドを貼り付けると、コンポーネントに分解し、解説してくれる。
例えば、:(){ :|:& };:を解析すると以下のようになる。
SmallDevtools
エディターからクレジットカード番号生成まで、さまざまな便利ツールをオールインワンで提供する。
以下のようなことができる。
- プログラムコードを共有する「Code Share」
- JSONを整形する「JSON Formatter」
- BASE64、URL、UTF8のエンコード・デコード
- XMLのデコード
- JavaScript、HTML、CSS、SQLなどのフォーマッターや圧縮
- テストデータ、ダミー文章、ダミー画像、クレジットカード番号の生成
- マークダウンエディター・コンバーター
- diffの表示
- PDFコンバータ
- QRコードの生成、読み取り
- リストの並び替え
DevHints
いくつかのプログラミング言語、フレームワーク、ツールに関するチートシートがたくさんある。
以下は、vimのチートシート
BundlePhobia
npm のモジュールを参照した際のバンドルサイズを算出してくれる。
また、依存関係のサイズとパフォーマンスへの影響をチェックしてくれる。
Convertio
ファイルコンバーター。ファイルをどんなフォーマットにも変換できる。
Unminify
Unminifyは、JavaScript、CSS、HTML などの圧縮されたコードを、明確かつ編集可能な状態にして、可読性やデバッグの容易さを向上する。
Carbon
PowerPointなどにソースコードを貼りつけるのに便利です。
ソースコードをいい感じの画像にしてくれるサイト。
自分はスライドを作る時このサイトを使っています。
Ray
Carbon同様、ソースコードを画像にしてくれるサービス。
Carbonの方がテーマや設定が多いが、こちらは少ない。ただし、RayではSVG形式のエクスポートやラインハイライトができる。
以下のスライドの一番最後の方で使用しています。
CyberChef
下記のようなあらゆる便利ツールがブラウザで使用できる。
- 2・8・10・16進数変換
- Base64、URL、古典暗号（シーザー暗号やヴィジュネル暗号など）、現代暗号（AES/DES/RSAなど）のエンコード・デコード
- IPv4・IPv6アドレスのパースやフォーマット変換
- テキストエンコーディングの変換
- MD5・SHA-1・SHA-2などのハッシュ値計算
- EXIF情報の抽出・削除
- QRコードの作成・読み取り
終わりに
ご精読ありがとうございました。
他におすすめのツールがあれば、コメントで教えてください！
また、使用の際は生成AIツール等と同様に、情報漏洩には気をつけましょう。
その他、コンタクトは X の@tomomon1227までお願いします。