JavaScript の最小化

縮小または圧縮とは、ソースコードの機能を変更せずに、スペース、新しい行、コメントなどの不要な文字をすべて削除することを意味します。開発およびデバッグ中、これらの文字によりコードが読みやすくなります。実稼働段階では、転送されるコードのサイズを増やすだけです。

ほとんどの場合、圧縮はビルドプロセスのステップとして、webpack(英語) などのビルドツールを使用して実行されます。ビルドツールを使用していない場合は、terser(英語) などのスタンドアロンツールを使用できます。

コードを自動的に縮小するには、縮小ツールをインストールし、ファイルへの変更を追跡して縮小ツールを実行する File Watcher を構成する必要があります。

デフォルトでは、File Watcher のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに、縮小が開始されます。ツールを呼び出す他のイベントを指定することもできます。詳細については、File Watchers を参照してください。

生成された縮小コードは、ソース JavaScript ファイルの名前と拡張子 min.js を持つ別のファイルに保存されます。この生成されたファイルの場所は、新規ウォッチャーダイアログのリフレッシュする出力パスフィールドで定義されます。ただし、プロジェクトツリーでは、縮小コードを含むファイルは、ノードとして表示されるソース JavaScript ファイルに表示されます。このデフォルトの表示を変更するには、プロジェクトツールウィンドウ Alt+1 でファイルのネストを構成します。

以下の例は、terser を使用して PhpStorm から JavaScript コードを縮小する方法を示しています。

サンプル: terser で JavaScript を圧縮する

コードを自動的に圧縮するには、terser をインストールし、ファイルの変更を追跡してツールを実行する UglifyJS ファイルウォッチャーを構成する必要があります。

デフォルトでは、File Watcher のスコープ内の JavaScript ファイルが変更されて保存されるとすぐに、縮小が開始されます。terser を呼び出す他のイベントを指定することもできます。詳細については、File Watchers を参照してください。

始める前に

お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
設定で JavaScript and TypeScript バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
設定で File Watchers バンドルプラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに File Watchers と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

インストールの簡潔化

埋め込まれたターミナル（Alt+F12）で、次のように入力します。
npm install --save-dev terser
詳細については、npmjs 公式 Web サイト(英語)を参照してください。

File Watcher を作成する

設定ダイアログ（Ctrl+Alt+S）で、ツールの File Watchers をクリックします。開く File Watchers ページには、構成済みのファイルウォッチャーのリストが表示されます。
をクリックするか、Alt+Insert を押して、リストから UglifyJS 定義済みテンプレートを選択します。
新規ウォッチャーダイアログが開きます。
プログラムフィールドで、terser 実行可能ファイルの場所を指定します。パスを手動で入力するか、をクリックして、表示されるダイアログでファイルの場所を選択します。
デフォルトでは、スコープフィールドにはプロジェクトファイルが表示されます。すでに縮小されたファイルの縮小を回避するには、新しいスコープを定義するに従って、file:*js&&!file:*.min.* パターンを使用してカスタムスコープを構成します。
次に、スコープリストから新しいスコープを選択します。
その他のデフォルトの File Watcher 設定を受け入れるか、必要に応じて File Watchers の説明に従って再設定し、OK をクリックします。PhpStorm をクリックすると、新しい File Watcher がリストに追加される File Watchers ページに戻ります。
「有効」チェックボックスが選択されていることを確認します。
デフォルトでは、File Watcher は現在のプロジェクトで使用できます。他のプロジェクトで使用するには、レベルリストからグローバルを選択します。

さらに簡潔に

選択したスコープから JavaScript ファイルを変更すると、PhpStorm は自動的に terser を実行します。

最終更新日: 2025 年 2 月 14 日

関連ページ：

File Watchers

File Watcher は、ファイルの変更を追跡し、サードパーティのスタンドアロンアプリケーションを実行する PhpStorm システムです。PhpStorm は、多数の標準的な一般的なサードパーティツール (コンパイラー、コンプレッサー、整形ツールなど) 用に定義済みの File Watcher テンプレートを提供します。カスタム File Watcher を設定して、他のサードパーティツールを実行することもできます。File Watchers には 2 つの専用コードインスペクションがありま...

新規ウォッチャーダイアログ

File Watchers ページの追加または編集ボタンをクリックすると、ダイアログが開きます。このダイアログを使用して、定義済みの PhpStorm File Watcher テンプレートに基づいてプロジェクト File Watcher を作成したり、既存のプロジェクト File Watcher を編集したりします。各テンプレートには、選択したツールに最適な設定が含まれています。ほとんどの場合、必要なのは、ツールの実行可能ファイルへのパスを指定することだけです。名前：名前フィールドに、Fil...

ファイルのネスト規則

同じ名前だが接尾辞が異なるファイルの表示を設定できます。このようなファイルの束は、プレーンな構造として表示することも、親ファイルを子ファイルを含むフォルダー (ネスト) として表示することもできます。このようなファイルの束は、たとえば Angular を使用している場合、フレームワーク固有のプロジェクトに表示されることがあります。ファイルのネストを調整するプロジェクトツールウィンドウ () で、をクリックして外観を選択し、次にファイルのネストを選択します。ファイルのネスト規則を構成できるダイアログが...

プラグインのインストール

プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

スコープとファイルの色

スコープは、プロジェクト内のファイルとフォルダーのグループです。スコープを使用して、さまざまな IDE ビューでプロジェクト項目を視覚的に区別し、特定の操作の範囲を制限できます。スコープは、プロジェクト内のファイルを論理的に編成するように設計されています。テストソースはテスト関連のスコープに移動でき、製品コードは製品ファイルのスコープに関連付けることができます。これらの論理チャンクにより、プロジェクトの管理が容易になります。例: テスト関連のインスペクションをテストクラスでのみ実行すると、アプリ...

モジュールの依存関係ダイアグラム

PhpStorm を使用すると、JavaScript および TypeScript プロジェクトのコンテキスト内でのインポートとエクスポートの視覚化を行うことができます。モジュール依存関係ダイアグラムの作成：JavaScript、TypeScript、HTML ファイルのコンテキストメニュー、またはフォルダーのコンテキストメニューからを選択します。node_modules およびフォルダーでは、この操作は使用できません。複数の型のダイアグラムを作成できるフォルダーでアクションが呼び出された場合は...