これは何のウェブサイトですか？
JoMatter は、ブラウザ上で使うフロントエンド向けの断片ツールサイトです。HTML、CSS、JavaScript の整形、圧縮、構造チェック、プレビューを 1 ページにまとめています。貼り付けたコードは手元のマシンで処理され、サイトはアップロードせず、登録も不要だと説明しています。一覧は言語、よく使うもの、最近開いたもの、お気に入りで絞り込めます。マークアップの一部を直す、レイアウトを確認する、提出前に構文を見る、といった用途に向いています。プロジェクト設定を抱えたエディタの代わりにはなりません。HTML 向けのブログと、寄稿者向けの Write for Us ページもあります。
主な機能
- 選んだインデントで HTML、CSS、JavaScript を整え、空白やコメントを除いて圧縮することもできます。
- 閉じていないタグ、重複した id、解析できない JavaScript を指摘します。
- サンドボックスで HTML を描画するか、スクリプトを実行してコンソール出力を表示します。
- タグ数と見出しのアウトラインを集計し、アクセシビリティに関するヒントを出します。
- 操作パネルから線形または放射状のグラデーション、Flex、Grid、影、角丸を作ります。
- 名前、説明、別名で検索できます。お気に入りと最近開いた記録はブラウザ内だけに残ります。
よくある利用ケース
- 静的ページを直しているフロントエンド担当が、1 行に詰まった HTML や CSS をインデントし直し、コピーまたはダウンロードしてファイルへ戻します。
- レイアウトを調整する人が、Flex、Grid、影、グラデーションをスタイルシートに書く前にプレビューで確認します。
- 課題を出す学生が、構造チェックと構文チェックでタグが閉じているか、スクリプトが解析できるかを確認します。
- 断片を外部サーバーへ送りたくない人が、手元で JavaScript を圧縮するか、関数や宣言の数を確認します。
このツールが向いている人
- HTML、CSS、JavaScript の断片を手で直すことが多いフロントエンド担当やウェブ制作者。
- マークアップの描画結果をすぐ見たい学習者。
- 登録なしで、コードを今のブラウザから出したくない人。
- 整形、チェック、バンドルをすでにプロジェクト設定へ任せているチームには向きません。リポジトリも依存関係のインストールもなく、同じコードベースを複数人で同時に編集することもできません。
類似ツールとの比較
手元にあるのがコードの断片か、プロジェクトかを先に分けると判断しやすいです。ブラウザ内で 1 つの断片を整形、圧縮、チェック、プレビューするなら、このサイトが対応しています。複数ファイルを開き、リポジトリにある整形やチェックの設定を使い、リソースをバンドルし、同じブランチを同僚と編集するなら、エディタかオンライン IDE を使う方が適しています。JoMatter のチェックはページ内蔵の規則で、タグが閉じているか、id が重複しているか、スクリプトが解析できるかを見ます。チームの規約は読みません。スタイル用パネルはコピーできる CSS を出しますが、プロジェクトのファイルへは書き戻しません。
よくある質問
Q: JoMatter は登録が必要ですか？貼ったコードはアップロードされますか？
A: サイトは、すべてのツールが無料で、アカウントは不要、回数制限もないと説明しています。整形、圧縮、検証、分析、プレビューはブラウザ内で行われ、貼り付けた内容はアップロードされません。お気に入りと最近使った記録は、端末の localStorage に保存されます。
Q: どんなツールがありますか？
A: 全部で 15 個あり、HTML、CSS、JavaScript がそれぞれ 5 個です。整形、圧縮、検証または構文チェック、HTML のライブプレビュー、コード分析に加え、グラデーション、Flex と Grid、影、角丸のジェネレーターがあります。JavaScript Playground はサンドボックスでコードを実行し、コンソール出力を表示します。
Q: スマートフォンでも使えますか？
A: サイトは、画面がスマートフォン、タブレット、デスクトップに対応すると説明しています。長いコードやレイアウトのプレビューは、広い画面の方が操作しやすいです。
