Softonic

JavaScriptフォーマッター

ステップ 1 / 3
次へ

圧縮された、またはインデントが乱れたJavaScriptを貼り付けると、エディタが使うのと同じルールで整形された、読みやすくきれいなコードが返ってきます。タブかスペースか、シングルクォートかダブルクォートか、セミコロンの有無、ES5または全体での末尾カンマなどを選べます。オプショナルチェーン、Null合体、JSX、TypeScript、トップレベルawaitといった最新の構文にも対応しています。

JavaScriptを整形する手順

  1. 1

    ソースを貼り付ける

    有効なJS、JSX、TypeScriptなら何でも構いません。パーサーが構文から方言を自動的に判別します。

  2. 2

    設定を選ぶ

    インデントの幅、タブかスペースか、引用符スタイル、セミコロン、折り返し幅、末尾カンマ。

  3. 3

    整形する

    このツールはPrettier互換の処理を実行し、整形された結果を出力します。

  4. 4

    出力をコピーする

    ワンクリックでコピー、またはファイルとしてダウンロードできます。元のインデントは上書きではなく破棄されます。

スタイルオプション

オプション 値 デフォルト
インデント tab、2、4 スペース2つ
引用符スタイル single、double ダブル
セミコロン always、never 常に付ける
折り返し幅 60 - 120 80
末尾カンマ none、es5、all es5
アロー関数の括弧 always、avoid 常に付ける
括弧内のスペース true、false true
JSXのシングルクォート true、false false

整形が大切な理由

整形は見た目だけの問題ではなく、認知負荷を下げるためのものです。一貫して整形されたコードベースなら、レビュアーは括弧の位置ずれを探すのではなく、ロジックの変更そのものに集中できます。

  • 些細な議論は、プロジェクトがフォーマッターを採用した時点で終わります。git diffにはインデントを巡る論争ではなく、本当の変更だけが表示されます。
  • コミット前フック（Huskyやlint-stagedなどのツール）は、ステージされたファイルをコミット前に自動整形します。
  • エディタ連携（VS Code、WebStorm）は、保存時に同じルールを適用します。

整形がやらないこと

  • リントはしません。 スタイルルール（no-unused-vars、eqeqeq）はESLintの領域です。フォーマッターは空白と記号を整えるだけで、ロジックの問題でコードを拒否することはありません。
  • 構文エラーは直しません。 入力が無効なJSであれば、フォーマッターはエラーを投げます。少なくともパースが通るかを確認する健全性チェックとして使ってください。
  • 命名規則は強制しません。 camelCaseかsnake_caseかはリントのルールであって、フォーマッターのルールではありません。

よくある間違い

  • フォーマッターと張り合う。 実行後に何度も手で整形し直しているなら、お互いに時間の無駄です。オプションを設定するか、プロジェクトの方針を受け入れましょう。
  • 生成ファイルに整形をかける。 バンドラーの出力、トランスパイル済みコード、.min.js、どれも整形の恩恵はありません。成果物ではなくソースを整形しましょう。
  • パースせずに整形する。 正規表現による「見た目だけの整形」は、テンプレートリテラル、正規表現リテラル、JSXを壊します。必ずAST（抽象構文木）ベースのフォーマッター（このツールのような）を使ってください。

よくある質問

はい。パーサーがTypeScriptの構文（型、インターフェース、ジェネリクス、デコレーター）を検出し、それに合わせて整形します。.tsx／.jsxファイル内のJSXにも対応しています。

Prettierの初期設定と同じルールに従っており、通常のオプション（折り返し幅、引用符、セミコロン、末尾カンマ）で調整できます。ここで整形したファイルは、同じ設定のPrettierで整形したものと一致するはずです。

フォーマッターには、有効でパース可能なJavaScriptが必要です。エラーが出た場合、コードに構文上の問題（閉じ忘れの括弧、無効なJSX、タイプミスなど）がある可能性が高いです。メッセージがわかりにくいときは、まずリンターに通してみてください。

はい。行コメント（//）とブロックコメント（/* */）のどちらも出力に保持され、元のソースにあった位置の近くに配置されます。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

EditorConfig ジェネレーター

インデントのスタイルとサイズ、改行コード、文字コード、空白ルールを指定して .editorconfig ファイルを生成し、IDE やエディタをまたいで書式を統一できます。

メールアドレス検証ツール

メールアドレスを検証します。RFC 5322構文チェック、MXレコードのライブ確認に加え、ローカル部、ドメイン、長さの詳細を表示します。メールは送信されません。

Markdownチートシート

見出し、リスト、表、コード、リンク、画像、GFM構文を、実際のプレビューとコピーできる例で確認できる実用的なMarkdownリファレンスです。

このツールは他の言語でも利用できます