LoginSignup
528
631

はじめに

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

Squoosh

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

image.png

Documatic

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

image.png

transform

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

image.png

Roadmap.sh

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

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

image.png

opensourcealternative.to

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

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

image.png

Storybook

UIカタログのサイト。

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

image.png

Code Beautify

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

スクリーンショット 2024-06-28 5.30.05.png

Zapier

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

image.png

ExplainShell

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

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

image.png

SmallDevtools

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

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

image.png

DevHints

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

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

image.png

BundlePhobia

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

image.png

Convertio

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

image.png

Unminify

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

image.png

Carbon

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

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

Ray

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

image.png

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

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

終わりに

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

528
631
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
528
631