JavaScript フォーマッター

アップロード

0 文字

ブラウザ上で動作するJavaScript/TypeScript/JSX/TSX/CSS/HTML/JSONコードフォーマッター。Prettierスタイルの詳細設定、Terser圧縮・難読化に対応し、CodeMirrorエディター内蔵、リアルタイムプレビュー、ショートカット操作、ファイルアップロード・ダウンロード機能を搭載。

ユースケース

フロントエンド開発中に圧縮されたサードパーティ製JSコードを貼り付けて、すばやく整形して読みやすくし、デバッグを容易にする
チームのコードレビュー前にJavaScript/TypeScriptコードを統一フォーマットし、インデント、引用符、セミコロンなどのスタイルの違いを解消してロジックレビューに集中
レガシープロジェクトを引き継いだ際に、整形が乱れた古いJSコードをワンクリックでフォーマットし、コード構造とロジック階層をすばやく把握
本番環境デプロイ前に、Terserを使用してJavaScriptコードを圧縮・難読化し、ファイルサイズを削減してWebページの読み込み速度を向上
オンラインでJS/JSXデモを作成する際に、リアルタイムフォーマットでコードを整理し、同僚やコミュニティと共有しやすくする
Prettierの各設定項目の効果を学ぶ際に、オプションを調整しながらフォーマット結果を即座にプレビューし、tabWidth、trailingCommaなどのパラメーターの作用を理解
Stack Overflow、GitHubなどのプラットフォームからコピーしたコードスニペットのインデントと改行の問題を自動修正
JSON設定ファイルを作成する際に、インデントと改行を自動フォーマットし、カンマ、括弧のエラーによる解析失敗を回避
CSS/HTMLページ開発時に、同プロジェクト内のJS+CSS+HTMLコードを一括フォーマットしてスタイルを統一
面接・筆記試験前にアルゴリズム問題のJSコードをすばやく整理し、コードの見栄えを向上

使い方

JavaScriptフォーマッターツールページを開き、左側の編集エリアにコードを直接貼り付けるか、アップロードボタンをクリックしてローカルファイル（.js/.ts/.jsx/.tsx/.css/.html/.json形式に対応）を選択
対応する言語タイプを選択：ツールは通常自動認識しますが、認識が正確でない場合は言語ドロップダウンからJavaScript/TypeScript/JSX/TSX/CSS/HTML/JSONを手動で選択
フォーマットオプションを設定：プリセットクイックスタイル（default/modern/classic）を選択するか、Prettierオプション（インデント幅、タブ/スペース、行幅、セミコロン、引用符、末尾のカンマ、アロー括弧）を手動調整
コードを圧縮する必要がある場合は、圧縮モードに切り替え、Terser圧縮オプション（compressを有効にするかどうか、mangleで変数名を難読化するかどうか、トップレベル変数を圧縮するかどうか）、CSS最適化レベル、HTML圧縮オプションを設定
ツールはコードをリアルタイムで処理し、右側の編集エリアにフォーマットまたは圧縮後の結果を即座に表示。下部ステータスバーに文字数、バイト数、圧縮率の統計をリアルタイム表示
キーボードショートカットを使用して効率化：Ctrl+Shift+Bでフォーマット実行、Ctrl+Shift+Mで圧縮モード切り替え、Ctrl+Shift+Oでファイルを開く、Ctrl+Shift+Dで結果をダウンロード、Ctrl+Shift+Kでエディターをクリア
満足したらコピーボタンをクリックして結果をクリップボードにコピーするか、ダウンロードボタンをクリックしてローカルファイルとして保存。共有ボタンをクリックしてコードと設定を含むURLリンクを生成し、他の人と共有することも可能

特徴

多言語対応：JavaScript、TypeScript、JSX、TSX、CSS、HTML、JSONのフロントエンドでよく使われる7言語のフォーマットに対応し、フロントエンドコードを一元的に処理
Prettierスタイルの詳細設定：tabWidthインデント幅（2/4/8スペース）、useTabsタブとスペースの選択、printWidth行幅、semiセミコロン、singleQuote一重引用符と二重引用符、trailingComma末尾のカンマ、arrowParensアロー関数の括弧などの完全なオプションをサポート
コード圧縮機能：Terser圧縮エンジンを統合し、compressコード圧縮、mangle変数名難読化、toplevelトップレベル変数圧縮などの本番環境向け圧縮オプションをサポート
CSS特別最適化：CSS最適化レベル設定を提供し、CSS圧縮、コメント除去、空白除去などの特別処理に対応
HTML圧縮オプション：HTML minify設定に対応し、空白の折りたたみ、コメント除去、属性引用符の除去などが可能
リアルタイム処理：コードを入力するとリアルタイムでフォーマット結果をプレビュー。ボタンをクリックせずに整形結果を確認可能
CodeMirrorエディター：プロフェッショナルなCodeMirrorエディターを内蔵し、シンタックスハイライト、行番号表示、括弧一致、コード折りたたみなどのプロフェッショナルな編集体験を提供
ファイルアップロード・ダウンロード：ローカルの.js/.ts/.jsx/.tsx/.css/.html/.jsonファイルを直接アップロード可能。フォーマット後は処理済みファイルをワンクリックでダウンロード
共有リンク：URL hashでコードと設定を保存し、共有リンクを生成して同僚に送信すると、現在のフォーマット設定を再現可能
履歴：フォーマット履歴をlocalStorageに自動保存し、過去のコードバージョンと設定をいつでも呼び戻し可能
キーボードショートカット：Ctrl+Shift+Bでフォーマット、Ctrl+Shift+Mで圧縮、Ctrl+Shift+Oでファイルを開く、Ctrl+Shift+Dでダウンロード、Ctrl+Shift+Kでクリアなどのショートカット操作に対応
クイックプリセット：defaultデフォルト、modernモダン、classicクラシックの3種類のクイック設定プリセットを提供し、よく使うスタイルをワンクリックで切り替え
文字統計：元のコードと処理後のコードの文字数、バイト数、圧縮率の比較をリアルタイムで表示
サンプルコード：各言語のサンプルコードを内蔵しており、クリックするだけで読み込んですぐに機能を体験可能

よくある質問

フォーマット後にJavaScriptコードのロジックは変わりますか？

いいえ。フォーマットはコードの空白、インデント、改行、括弧の位置、引用符スタイルなどの「整形」関連の内容のみを調整します。これはAST（抽象構文木）変換に基づいており、フォーマット前後でコードのAST構造は完全に同一であり、実行ロジックは100%同じです。コード自体の構文が正しく正常に解析できる限り、フォーマットはいかなる実行動作も変更せず、安心して使用できます。ただし圧縮（mangle）もロジックは変わりませんが、eval、グローバル変数のエクスポートなどの特別なシナリオには注意が必要であり、不適切な設定を避けてください。

フォーマッターの結果がローカルのVS Code/Prettierフォーマットと異なる場合はどうすればいいですか？

このツールのフォーマットロジックはPrettier公式の動作と可能な限り一貫性を保つようにしています。結果が異なる場合は、設定項目を確認してください：tabWidth、useTabs、semi、singleQuote、trailingComma、arrowParensのこれらのコアオプションが両者で完全に同じかどうか。またPrettierのバージョンの違いにも注意してください——Prettier 2/3のデフォルト設定には微妙な違いがあります（v3はデフォルトでtrailingComma: all、v2はデフォルトでes5；v2以降arrowParensはデフォルトでalways）。ローカルプロジェクトに.prettierrc設定ファイルがある場合は、その中のオプションに合わせてWebページで調整すれば、フォーマット結果は同じになります。

圧縮後のコードは復元できますか？mangleされた変数名は回復できますか？

フォーマット後のコードは完全に可逆的です——整形が変わっただけで、すべての識別子とロジックは完全に保持されており、再フォーマットすれば元に戻ります。しかし圧縮後のコードについては：空白・コメント除去の部分のみ再フォーマットしてレイアウトを回復できますが、mangle（変数名難読化）は不可逆的です——元の意味のある変数名userNameがaに変わると、このプロセスは一方向であり元の名前に自動的に復元することはできません。本番環境で圧縮後のコードをデバッグする必要がある場合は、Source Mapファイルを生成し、Source Mapを通じてソースコード位置にマッピングする必要があります。そのため圧縮前には必ず元の圧縮されていないソースコードを保持してください！

どのブラウザをサポートしていますか？スマートフォンでも使用できますか？

このツールはすべての最新ブラウザをサポートしています：最新版のChrome、Firefox、Safari、Edgeはすべて正常に動作します。IEブラウザはサポートしていません（現在IEで開発を行っている人もいないでしょう）。レスポンシブレイアウトでスマートフォン画面に適応しますが、小さい画面でのコード編集は体験が良くないため、デスクトップブラウザでの使用を推奨します。大画面の方が効率的です。すべてのフォーマットと圧縮の計算はブラウザのローカルで実行され、コードがサーバーにアップロードされることはなく、コードはブラウザから外に出ないため安全で信頼できます。

なぜ一部のコードがフォーマットできず、解析エラーが表示されるのですか？

フォーマッターは動作するためにまずコードをASTに解析する必要があります。コードに構文エラー（括弧の不一致、文字列の閉じ忘れ、キーワードのスペルミス、余分なカンマなど）があると、パーサーがコード構造を理解できずエラーをスローします。まずコード自体の構文エラーを確認してください：コンソールにエラーメッセージがないか、エディターにエラー位置を示す赤い波線がないか確認し、構文エラーを修正すれば正常にフォーマットできるようになります。また正しい言語モードが選択されていることを確認してください。JSX/TSXコードをプレーンなJSとして選択しないでください。

コードはサーバーにアップロードされますか？コードは安全ですか？

いいえ。すべてのフォーマット、圧縮、シンタックスハイライトはブラウザのローカルでJavaScriptを通じて完全に実行され、コードがいかなるサーバーにも送信されることはなく、完全にあなたのデバイス上で処理されます。オフラインでテストできます：ネットワークを切断してもツールは正常に動作し続けます。共有リンク機能はコードと設定をURL hashにエンコードするものであり、共有をクリックしてもURLが生成されるだけでコードはアップロードされません——ただしリンクを他の人に送信すると、他の人がリンクを開いたときにあなたのコードが見えるため、機密コードはリンクで共有しないでください。

Vue単一ファイルコンポーネント（.vueファイル）をフォーマットできますか？Svelteはどうですか？

現在このツールの多言語サポートにはJS/TS/JSX/TSX/CSS/HTML/JSONが含まれています。Vueの<template>/<script>/<style>単一ファイル（SFC）とSvelteコンポーネントは現在全体を直接フォーマットすることはサポートしていませんが、script部分（JS/TS）、style部分（CSS）、template部分（HTML）を個別にコピーして対応する言語を選択し個別にフォーマットすることはできます。将来的にVue/Svelte SFCフォーマットのサポートを追加することを検討します。

チームで統一されたフォーマット規則を設定するにはどうすればいいですか？

チームの統一規則には3層の連携を推奨します：①プロジェクトのルートに.editorconfigを配置し、エディターの基本設定（インデント、改行コード、エンコーディング）を統一；②Prettierを使用しプロジェクトに.prettierrc設定ファイルを配置し、全員とCIがこの設定でフォーマットします。このツールでも対応するオプションを選択して設定に一致させることができます；③ESLint + eslint-config-prettierを使用してESLintのスタイルルールを無効にし、コード品質のみを検査します。エディターで保存時に自動フォーマットするよう設定し（VS CodeにPrettier拡張機能をインストールし、editor.formatOnSave: trueを設定）、CIにlintステップを追加してフォーマットを検査し、コミットされるコードが規則に適合することを保証します。

末尾のカンマ（trailingComma）にはどのような利点がありますか？有効にすべきですか？

末尾のカンマは強く推奨されます（少なくともes5レベル、推奨はallレベル）。末尾のカンマの利点は：①Git diffがきれいになる：最後の要素を追加するときに前の行のカンマを修正する必要がなく、追加行のdiffのみとなり、カンマ追加による前の行のdiffの汚染がない；②要素の順序を並べ替えるときにより便利で、末尾のカンマの問題を処理する必要がない；③最新のブラウザとNode.jsは末尾のカンマを完全にサポートしています。古いIEはサポートしていませんが、現在IEを考慮する必要はありません。唯一の欠点はカンマが1つ増えることですが、それによる利便性と比較すると完全に価値があります。Prettier v3のデフォルトはallです。

圧縮時にmangleを有効にすべきですか？compressとmangleの違いは何ですか？

本番環境の圧縮ではcompressとmangleの両方を有効にすることを推奨します。これらは独立した圧縮オプションです：compressはコード最適化（定数畳み込み、デッドコード除去、式の簡略化など）であり、簡略化できる場合にのみコード構造を修正し変数名は変更しません；mangleはローカル変数名の短縮であり、長い変数名を単一文字に変更します。これは体積削減の最大の要因の1つです。コードが外部から直接変数名を呼び出されるライブラリでなく、evalで動的に変数名にアクセスしていない限り、mangleは安全であり体積を大幅に削減できます。オープンソースライブラリでAPI名を保持する必要がある場合は、mangle.reservedを設定してエクスポートされる名前を保持してください。

JSONをフォーマットするときになぜ一部の文字が自動的にエスケープされるのですか？

JSON仕様には厳密な構文要件があります：文字列は二重引用符でなければならず、末尾のカンマは許可されず、特殊文字はエスケープする必要があります（改行→\n、引用符→\"、バックスラッシュ→\\、Tab→\tなど）。JSON文字列にエスケープされていない特殊文字がある場合、フォーマット時にJSON仕様に従って自動的にエスケープされます。これは正しい動作です。注意：JSONはJavaScriptではありません。JSONにコメントを書くことはできず、一重引用符は使用できず、undefinedは使用できません——これらはすべてJSON解析失敗の原因となります。

アロー関数のパラメーターを常に括弧付きにするには？あるいは括弧なしにするには？

arrowParensオプションを調整してください：alwaysは常に括弧を追加（(x) => x）で、これはPrettier v2+のデフォルトであり、パラメーターを追加/削除するときに括弧を追加/削除する必要がなく、diffがきれいになる利点があります；avoidは単一パラメーターで括弧を省略（x => x）で、コードがより簡潔になります。チームのスタイルに合わせて選択してください。どちらのスタイルが正しい/間違っているということはなく、統一されていればよいです。注意：パラメーターの型注釈、デフォルトパラメーター、分割パラメーターは設定に関係なく常に括弧が付きます。

フォーマットでESLintが報告するスタイルの問題を自動修正できますか？

このツールはPrettierスタイルのフォーマットであり、Prettierが担当するスタイルの問題（インデント、引用符、セミコロン、末尾のカンマ、行幅、スペースなど）のみを修正できます。ESLintが報告するコード品質の問題（未使用変数、returnの欠落、===の問題など）はロジックの問題であり、フォーマッターが自動修正することはできず手動で修正する必要があります。ESLintにeslint-config-prettierが設定されている場合は、Prettierでフォーマットした後にESLintがスタイル関連のエラーを報告しなくなり、残りの品質の問題を手動で修正すればよくなります。

最大どのくらいの大きさのコードファイルをサポートしていますか？大きなファイルのフォーマットは重くなりますか？

フォーマットはブラウザのローカルで実行されるため、サポートされるファイルサイズはデバイスのパフォーマンスに依存します。一般的に数十KBから数MBのJSファイルは正常に処理でき、通常のプロジェクトの単一ファイルJSであれば完全に十分です。特に大きなバンドル後のJSファイル（数十MB）の場合は、遅延が発生したりメモリ不足になったりする可能性があるため、このような超大きなファイルはローカルでNode.js+Prettier/Terserコマンドラインを使用して処理することを推奨します。日常の開発における個々のソースファイルは通常処理範囲内です。

ChromeでCtrl+Shift+Bを押すとなぜブックマークマネージャーが開くのですか？

これはChromeブラウザのデフォルトショートカットの競合です：Ctrl+Shift+BはChromeのブックマークバー表示/非表示のショートカットであり、ブラウザのショートカットの優先度はWebページのJSショートカットより高いため、Chromeによってインターセプトされます。解決方法：①フォーマットボタンをクリックして操作；②Macユーザーの場合はCmd+Shift+BはChromeと競合しません；③Chromeの設定でブラウザのショートカットを変更できます；④まずエディター内にフォーカスすると、場合によってはエディターのフォーカスがショートカットをキャプチャできることがあります。他のブラウザでもショートカットの競合が発生する場合は、いつでもボタン操作で対応できます。

トラブルシューティング

フォーマット時に「構文解析エラー」が表示され、フォーマットできない

コード自体に構文エラーがある：括弧の不一致、文字列の閉じ忘れ、キーワードの欠落、余分なカンマなど。構文エラーはAST解析の失敗を引き起こしフォーマットできなくなるため、まず構文エラーを修正してください言語モードの選択が間違っている：例えばJSX/TSXコードをJavaScriptとして選択し、ジェネリクス構文がJSXタグと誤判定される、またはその逆。手動で正しい言語タイプを選択してください実験的構文が含まれている：標準化されていない新しすぎるJavaScript構文提案（デコレーター、Pipeline演算子など）をコードが使用しており、パーサーがサポートしていないファイルにBOMヘッダーがある：先頭にUTF-8 BOM（EF BB BF）の3バイトがあり、一部のパーサーが処理できない可能性がある。BOMなしUTF-8で保存し直してみてください他言語のコードが混在している：例えばHTMLに埋め込まれたテンプレート言語（EJS、Handlebars、Vueテンプレートディレクティブ）は純粋なJS/HTMLではなく、パーサーが認識できないコード内に閉じられていないブロックコメントがある：/* に対応する */がなく、コメントが閉じられていないため後続のコードがすべてコメントとして扱われる正規表現の曖昧さ：除算/演算子のように見える箇所が実際には正規表現リテラルであり、パーサーが誤判定する。正規表現の前にセミコロンを追加して曖昧さを解消できます

圧縮（Minify）時にエラーが発生し、圧縮できない

コードの構文エラー：フォーマットと同様に圧縮もASTに基づいているため、コードは構文的に正しい必要があります。まず構文エラーを修正してください ES Moduleのimport/exportを使用しているがモジュールタイプが正しくマークされていない、または圧縮設定がモジュールタイプと一致していないプロパティ名のmangle時に問題が発生：プロパティ名mangleを有効にした場合（デフォルトは無効）、動的プロパティアクセスobj['key']によりプロパティが見つからなくなります。プロパティmangleはむやみに有効にしないでくださいコード内にeval()またはwith文がある：Terserがeval/withに遭遇すると、evalがスコープの変数名に動的にアクセスできるためmangleでエラーが発生する可能性があります。本番コードではevalの使用を避けてください予約名の設定ミス：mangle.reservedを設定したがスペルミスがあるか、必須の予約名（jQuery、$などのグローバルライブラリ）が漏れていると、実行時エラーが発生する可能性があります toplevel圧縮設定の問題：コードがIIFE/モジュール内にバンドルされておらずグローバルスコープで実行される場合、compress.toplevel: trueを有効にするとグローバル変数の参照が壊れる可能性があります対象ブラウザバージョンの設定が古すぎる：Terserの圧縮時に対象ブラウザがサポートしていない構文が使用される可能性があります。ecmaバージョンを設定して出力するJS構文バージョンを指定できます

フォーマット後に日本語/日本語コメントが文字化けする

ファイルエンコーディングがUTF-8ではない：アップロードしたローカルファイルがGBK/GB2312などの中国語エンコーディングで、ツールがデフォルトでUTF-8解析するため文字化けが発生します。エディターでファイルをUTF-8エンコーディングで保存し直してからアップロードしてくださいブラウザページのエンコーディングが誤って変更された：最近のブラウザはデフォルトでUTF-8ですが、一部の古いブラウザや特別な設定でエンコーディングが正しくない場合があります。ブラウザメニューでページエンコーディングがUTF-8に設定されているか確認してくださいファイルにUTF-8 BOMヘッダーがある：BOMは通常文字化けを引き起こしませんが、一部のパーサーがBOMを異常処理する場合があります。エディターでBOMを除去してBOMなしUTF-8で保存してくださいコピー＆ペースト時のエンコーディング変換の問題：古いソフトウェア（旧版メモ帳、Wordなど）からコードをコピーすると、特殊文字（日本語の引用符、全角スペースなど）が誤って変換される可能性があります。VS Codeなどの最新のエディターからコピーするようにしてくださいフォントの問題：一部の等幅フォントは日本語のサポートが不十分で表示異常を引き起こします。これはエンコーディングの問題ではなく表示フォントの問題なので、日本語をサポートする等幅フォントに変更してください特殊なUnicode文字：コードにemoji、ゼロ幅スペース、制御文字などの特殊な不可視文字が含まれており、表示異常やフォーマットエラーを引き起こす可能性があります。エディターの不可視文字表示を有効にして確認できます gzip圧縮またはプロキシの問題：デプロイ後のアクセスで文字化けが発生する場合は、サーバーがContent-Type: application/javascript; charset=utf-8レスポンスヘッダーを正しく設定しているか確認してください

JSX/TSXコードのフォーマットが失敗するか解析エラーが発生する

言語モードがJSX/TSXではなくJavaScriptに選択されている：通常のJSパーサーは<タグ>構文を認識せず、JSXタグを比較演算子として扱ってエラーを報告します。手動でJSXまたはTSX言語を選択してください TSXジェネリクス構文の曖昧さ：TSXで<T>ジェネリックパラメーターがJSXタグと誤判定される可能性があります（const f = <T>(x: T) => x）。<T>の後にカンマ<T,>を追加して曖昧さを解消できます（これはTSXの一般的な書き方です） JSXタグが閉じられていない：JSXではすべてのタグが正しく閉じられている必要があり、自己閉鎖タグには/>が必要です。HTMLと異なり、<img>は<img/>と記述する必要があります JSX内のJS式の括弧の問題：{}内のJS式は正しく閉じられている必要があります。{obj.prop}で}がないと後続の解析が混乱します Fragment短縮構文の問題：<></>空タグはReact 16+のサポートが必要で、正しく閉じられている必要があります。<Fragment>を使用する場合は正しくインポートする必要があります JSX属性値の引用符の問題：JSX属性値が文字列の場合は引用符（二重引用符）を使用する必要があり、式の場合は{}を使用します。混在させないでください TSXファイルの拡張子が.tsではなく.tsx：TypeScriptパーサーは.tsx拡張子の場合のみJSX解析を有効にします。.ts拡張子でJSXを記述するとエラーになるため、正しい拡張子を使用してください

フォーマット後のインデントが正しくなく、期待と一致しない

tabWidthの設定が間違っている：インデント幅の設定が2か4か確認してください。チームでは2スペースが一般的です。4スペースを期待する場合はtabWidthオプションを手動で調整してください useTabsの設定が間違っている：チームがTabインデントを使用しているのにスペースに設定している、またはその逆。useTabsオプションが正しいか確認してくださいコード自体に構文エラーがある：構文エラーはAST構造を異常にし、フォーマット後のインデントが乱れる原因となります。まず赤い波線で示される構文エラーを修正してください Tabとスペースが混在している：元のコードでTabインデントの箇所とスペースの箇所が混在している場合、フォーマットは設定されたスタイルに統一しますが、元のコードの乱れがひどい場合は複数回フォーマットが必要な場合があります printWidthの設定が小さすぎる：行幅が小さすぎる（40など）と、コードが頻繁に改行されてインデントが乱れて見えます。80または100に設定するのがより適切です bracketSameLine/arrowParensなどのレイアウトオプションが期待と一致しない：中括弧の位置、アロー関数の括弧などのスタイルは設定で決まるものでインデントの問題ではありません。該当するオプションを調整してください EditorConfigとローカルエディターの設定が競合している：ローカルエディターで.editorconfigによる自動インデント設定が使用されていて、Webページで設定したオプションと異なる場合、両者のフォーマット結果が一致しなくなります。設定を統一してください

キーボードショートカットが無効で、押しても反応しない

フォーカスがエディターにない：ショートカットはエディターがフォーカスを持っているときにのみ機能します。フォーカスがボタン、入力ボックス、またはページの他の場所にあるとショートカットはトリガーされません。まずエディター領域をクリックしてフォーカスしてくださいブラウザのショートカットと競合している：一部のショートカット（ChromeでのCtrl+Shift+Bはブックマークバーを開く、FirefoxでのCtrl+Shift+Oは履歴を開くなど）がブラウザによって占有されています。ボタンをクリックして操作するか、（Macの場合は）Ctrlの代わりにCmdを試してください入力メソッドの問題：日本語入力メソッドの状態では一部のショートカットがインターセプトされる可能性があります。英語入力メソッドに切り替えてからショートカットを試してください他の拡張機能/プラグインによる占有：ブラウザにインストールされたショートカット拡張機能、Tampermonkeyスクリプト、プロキシプラグインなどがショートカットを占有している可能性があります。プライベートモードでページを開いて試してくださいシステムショートカットとの競合：オペレーティングシステムまたは他の実行中のソフトウェア（スクリーンショットソフト、入力メソッド、IDEなど）のグローバルショートカットが該当するキーの組み合わせを占有している可能性があります。他のソフトウェアのショートカットを変更するか、このツールのボタン操作を使用してください Mac/Windowsキーボードの違い：MacではCmd（⌘）キー、Windows/LinuxではCtrlキーを使用することに注意してください。混在させないでください。MacのOptionはWindowsのAltに対応しますブラウザのセキュリティ制限：ファイルアクセスに関連する一部のショートカットはブラウザのセキュリティポリシーにより制限され、JSで完全にシミュレートできない場合があります。必要に応じて直接対応するボタンをクリックして操作してください

用語集

Prettier: 現在最も普及しているフロントエンドコードフォーマッター。Opinionated設計哲学を採用し、JS/TS/CSS/HTML/Markdownなどの複数言語をサポートし、コードスタイルを強制的に統一してチームのスタイル論争を終わらせます。
Terser: 最新のJavaScript圧縮ツール。UglifyJSのES6+互換フォークであり、ES6+構文の圧縮・難読化をサポートし、Webpack、Rollup、Viteなどの最新ビルドツールのデフォルト圧縮ツールです。
UglifyJS: 古典的なJavaScript圧縮ツールでTerserの前身ですが、ES5以前の構文のみをサポートしES6+の新機能をサポートしていないため、現在の新規プロジェクトでは一般的にTerserが代わりに使用されています。
AST (Abstract Syntax Tree): 抽象構文木。ソースコードの構文構造の木状表現であり、各ノードはコード内の1つの構文構造を表します。Babel、Prettier、Terser、ESLintなどのツールはすべてASTに基づいて実装されています。
ESLint: JavaScript/TypeScriptエコシステムで最も普及しているコード検査ツール（Linter）。コード品質の問題の発見とコードスタイルの統一に使用され、Prettierと併用できます。
EditorConfig: エディター横断的なコードスタイル統一設定ファイル。インデントスタイル、インデントサイズ、改行コード、エンコーディングなどの基本設定を定義し、異なるエディターが同じプロジェクトを開くときに一貫した動作をするようにします。
CodeMirror: ブラウザ側コードエディターコンポーネント。シンタックスハイライト、行番号、括弧一致、コード折りたたみ、マルチカーソルなどのプロフェッショナルな編集機能を提供し、Webベースのコードエディターの主流な選択肢の1つです。
minify (圧縮): コードのロジックを変更せずに、空白、コメントの除去、変数名の短縮、コード最適化などの手段でコード体積を最小化するプロセス。本番環境で読み込み速度を向上させるために使用されます。
mangle (難読化/破壊): 圧縮プロセスで変数名、関数名、パラメーター名を単一文字に短縮するステップ。コード体積を大幅に削減すると同時にコードを読みにくくします。変数名難読化とも呼ばれます。
beautify (整形): コードフォーマットのこと。圧縮されたり乱雑になったりしたコードを再インデント、改行、スペース追加して可読性を向上させます。minifyの反対です。
trailing comma (末尾のカンマ): オブジェクト、配列、関数パラメーターの最後の要素の後のカンマ。要素追加時のGit diffをきれいにするのに役立ち、ES5+環境でサポートされています。
arrow parens (アロー関数の括弧): 単一パラメーターのアロー関数のパラメーターを括弧で囲む必要があるかどうか。例：x => x（括弧なし）vs (x) => x（括弧あり）。
printWidth (行幅): フォーマット時に1行が何文字を超えたら自動改行するか。Prettierのデフォルトは80文字であり、チームはモニターサイズに応じて100または120に調整できます。
semicolons (セミコロン): JavaScriptの文の末尾にセミコロンを付けるかどうか。JSにはASI自動セミコロン挿入機構がありますが、ほとんどのシナリオでは依然としてセミコロンを付けることが推奨されます。
single quote (一重引用符): 文字列に一重引用符を使用するか二重引用符を使用するか。JSでは機能的に完全に等価でスタイルの好みだけの問題です。JSON仕様では二重引用符が必須です。
double quote (二重引用符): 二重引用符で文字列を囲むこと。多くの言語のデフォルトスタイルであり、JSON仕様で要求される文字列形式でもあります。
tab width (インデント幅): 各インデントレベルに対応するスペース数。フロントエンドコミュニティでは2スペースが一般的で、バックエンド言語では4スペースが一般的です。
BOM (Byte Order Mark): バイトオーダーマーク。UTF-8エンコードファイルの先頭に出現する可能性のあるEF BB BFの3バイトで、エンコーディングをマークするためのものです。一部のシナリオでJS解析エラーを引き起こす可能性があります。
UTF-8: Unicode Transformation Format 8-bit。現在のWebとフロントエンドプロジェクトの標準ファイルエンコーディングであり、すべてのUnicode文字をサポートし、推奨されるデフォルトエンコーディングです。
source map (ソースマップ): 圧縮/トランスパイル後のコードを元のソースコード位置にマッピングするファイル。本番環境でのデバッグに使用され、圧縮後のコードでエラーが発生したときにソースコードの行番号に位置を特定できます。

Prettier コアオプション対照表

オプション名	作用	選択可能な値	デフォルト	説明
`tabWidth`	インデント幅（スペース数）	`2, 4, 8`	`2`	useTabsがfalseのときに有効。フロントエンドでは2スペースが一般的
`useTabs`	Tabタブ文字でインデント	`true/false`	`false`	trueはTabインデント、falseはスペースインデント
`printWidth`	行幅制限（文字数）	`80, 100, 120`	`80`	幅を超えると自動改行。厳密な制限ではない
`semi`	文の末尾にセミコロンを追加	`true/false`	`true`	falseはASIが失敗する可能性のある箇所にのみセミコロンを追加
`singleQuote`	一重引用符を使用	`true/false`	`false`	trueは一重引用符、falseは二重引用符。JSX属性は常に二重引用符
`trailingComma`	末尾のカンマモード	`none, es5, all`	`all (v3+)`	noneは末尾カンマなし、es5はオブジェクト/配列に追加、allは関数パラメーターにも追加
`arrowParens`	アロー関数単一パラメーターの括弧	`avoid, always`	`always (v2+)`	avoidは単一パラメーターで括弧を省略、alwaysは常に括弧を追加
`bracketSpacing`	オブジェクト中括弧内のスペース	`true/false`	`true`	true: { a: 1 }, false: {a: 1}
`bracketSameLine`	HTML/JSX閉じ括弧の位置	`true/false`	`false`	trueは閉じ括弧を最終行の末尾に、falseは別の行に
`vueIndentScriptAndStyle`	Vueファイルのscript/styleインデント	`true/false`	`false`	Vue SFC内のscriptタグとstyleタグ内のコードをインデントするかどうか

JavaScript コード圧縮前後比較例

最適化項目	フォーマット後コード（開発版）	圧縮後コード（本番版）	体積削減率
空白と改行	`function add(a, b) { return a + b; }`	`function add(n,d){return n+d}`	`~60%`
コメント除去	`// 2つの数の合計を計算 function add(a,b){return a+b}`	`function add(n,d){return n+d}`	`~20%`
ローカル変数mangle	`function calculateTotal(price, quantity){const tax=0.1;return pricequantity(1+tax)}`	`function n(n,t){const e=0.1;return nt(1+e)}`	`~40%`
定数畳み込み	`const x = 2 * 3 + 4; console.log(x);`	`console.log(10);`	`~50%`
ブール式簡略化	`if (x === true) { doThing(); }`	`if(x)doThing();`	`~30%`
完全な例（複数の最適化を含む）	`function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return firstName + ' ' + lastName; }`	`function n(n){return n.firstName+' '+n.lastName}`	`~70%`

キーボードショートカット早見表

ショートカット (Win/Linux)	ショートカット (Mac)	機能説明	使用頻度
`Ctrl+Shift+B`	`Cmd+Shift+B`	フォーマット/整形を実行	`★★★★★`
`Ctrl+Shift+M`	`Cmd+Shift+M`	フォーマット/圧縮モード切り替え	`★★★★`
`Ctrl+Shift+O`	`Cmd+Shift+O`	ローカルファイルを開く	`★★★★`
`Ctrl+Shift+D`	`Cmd+Shift+D`	処理後ファイルをダウンロード	`★★★★★`
`Ctrl+Shift+K`	`Cmd+Shift+K`	エディター内容をクリア	`★★★`
`Ctrl+S`	`Cmd+S`	ダウンロード（保存）	`★★★★`
`Ctrl+F / Ctrl+H`	`Cmd+F / Cmd+H`	検索 / 検索と置換	`★★★★`
`Ctrl+Z / Ctrl+Y`	`Cmd+Z / Cmd+Shift+Z`	元に戻す / やり直し	`★★★★★`
`Ctrl+/`	`Cmd+/`	行コメント切り替え	`★★★`
`Tab / Shift+Tab`	`Tab / Shift+Tab`	インデントを増やす / 減らす（選択時）	`★★★★`
`Alt+クリック`	`Option+クリック`	マルチカーソルを追加	`★★★`
`Ctrl+D`	`Cmd+D`	次の同じ単語を選択	`★★★`
`Home / End`	`Cmd+← / Cmd+→`	行頭 / 行末	`★★★★`
`Ctrl+Home/End`	`Cmd+↑ / Cmd+↓`	ファイル先頭 / 末尾	`★★★`