WebStorm 2024.3 ヘルプ

スクラッチファイル

一時的なメモを作成したり、プロジェクトのコンテキスト外でコードを作成したりする必要がある場合があります。別のアプリケーションに切り替える代わりに、スクラッチファイルスクラッチバッファを使用できます。

  • スクラッチファイルは、構文のハイライト、コード補完、対応するファイルタイプのその他すべての機能をサポートする、完全に機能し、実行可能で、デバッグ可能なファイルです。例: あるプロジェクトに取り組んでいるときに、後で別のプロジェクトで使用できるメソッドのアイデアを思いつくことがあります。メソッドのドラフトを含むスクラッチファイルを作成できます。これはプロジェクトディレクトリには保存されませんが、他のプロジェクトで作業しているときに開くことができます。スクラッチファイルを使用して、コード構成要素、HTTP リクエスト、JSON ドキュメントなどを作成できます。

  • スクラッチバッファは、コーディング支援機能のない単純なテキストファイルです。スクラッチバッファは、簡単なタスクリストや自分へのメモに使用できます。また、プロジェクトディレクトリには保存されず、他のプロジェクトから開くことができます。デフォルトの名前で最大 5 つのスクラッチバッファを作成できます。これらのバッファは、コンテンツをクリアすることでローテーションされ、再利用されます。

スクラッチファイルとバッファは、scratchesIDE 構成ディレクトリに保存されます。

スクラッチファイルを作成する

  1. ファイル | 新規 | スクラッチファイルに移動するか、Ctrl+Alt+Shift+Insert を押します。あるいは、プロジェクトツールウィンドウで任意の領域を右クリックし、新規 | スクラッチファイルに移動します。

  2. スクラッチファイルの言語を選択します。

    同じタイプのスクラッチファイルには自動的に番号が付けられ、プロジェクトビューのスクラッチとコンソールディレクトリに追加されます。

または、エディターで現在選択されている内容を使用して、新しいスクラッチファイルを作成することもできます。テキストまたはコードを選択し、Alt+Enter を押してから、選択対象から新規スクラッチファイルを作成を選択します。WebStorm は、選択されたフラグメントの言語を検出し、適切なタイプと拡張子を使用しようとします。選択した言語を検出できない場合、WebStorm は元のファイルと同じタイプと拡張子のファイルを作成します。

スクラッチバッファを作成する

  • 新しいスクラッチバッファを作成するアクション専用のメニュー項目はありませんが、アクションの検索ポップアップ Ctrl+Shift+A を使用して新規スクラッチバッファーアクションを実行できます。

Find the New Scratch Buffer action

利用可能なスクラッチを表示

  • 作成したスクラッチファイルとバッファのリストを表示するには、プロジェクトツールウィンドウを開き、スクラッチとコンソール | スクラッチを選択します。

    Scratches in the Project window
  • デフォルトでは、スクラッチファイルとバッファは名前のアルファベット順、次に拡張子(タイプ)のアルファベット順にソートされています。これは自動的に buffer ファイルが常に最初に来ることを意味します。タイプ別にスクラッチファイルをソートするには、the Show Options Menu button をクリックするか、プロジェクトタブを右クリックして型で並べ替えを選択します。

    The Sort by Type action

    WebStorm は、スクラッチを拡張子に基づいてアルファベット順に並べ替えます。

    Scratches sorted by type

スクラッチの名前を変更する

  1. プロジェクトツールウィンドウでは、スクラッチとコンソールスクラッチをクリックし、名前を変更するファイルを選択して、Shift+F6 を押します。

  2. 表示されたダイアログで、新しい名前を入力します。別の拡張子を指定してもファイルタイプには影響しないことに注意してください。言語の変更アクションを使用してください。

詳細は、ファイルとフォルダーの名前を変更するを参照してください。

スクラッチをコピーする

  1. プロジェクトツールウィンドウスクラッチとコンソール | スクラッチディレクトリで、コピーするスクラッチファイルを選択します。

  2. F5 を押します。開いたダイアログで、新しいファイル名を入力します。ここでファイルの種類を変更するために別の拡張子を指定することもできます。必要に応じて、コピーを保存したいフォルダーを選択してください。

詳細は、ファイルとフォルダーのコピーを参照してください。

スクラッチの言語を変更する

  1. プロジェクトツールウィンドウで、スクラッチとコンソールスクラッチをクリックし、スクラッチファイルのコンテキストメニューから言語の変更 (<現在の言語>) を選択して言語を変更します。

  2. 目的の言語を選択します。次の点に注意してください。

    • 最後に使用された 4 つのアイテムは、セパレータの上のリストの上にあります。

    • リストを絞り込むには、言語名の入力を開始します。

    • 言語の変更アクションは、拡張機能が存在する場合は同期を維持します。

キーボードショートカットの構成の説明に従って、言語の変更アクションにショートカットを割り当てることができます。

スクラッチを実行してデバッグする

  1. 必要なパッケージをインストールし、対応するインポートステートメントをスクラッチファイルに追加します。例: JQuery(英語) を使用するには:

    1. package.json を開き、次のパッケージを dependencies プロパティに追加します。

      "dependencies": { "jquery": "^3.5.0", "jsdom": "^16.2.2", "core-js": "^3.6.5", "nuxt": "^2.14.5" }
    2. package.json のコンテキストメニューから、'npm install' の実行を選択します。

    3. スクラッチファイルを開き、次のインポートステートメントを追加します。

      const {JSDOM} = require("jsdom"); const {window} = new JSDOM(""); const $ = require('jquery')(window);
  2. スクラッチファイルのコンテキストメニューから、<scratch_file_name> を実行しますを選択します。

  3. スクラッチファイルをデバッグするには、必要に応じてブレークポイントを設定し、コンテキストメニューからデバッグ <scratch_file_name> を選択します。

プロジェクトにスクラッチファイルを含める

スクラッチファイルがプロジェクトで使用したいものに成長した場合は、プロジェクト構造の目的のディレクトリに移動します。

  • エディターでスクラッチファイルを開くか、プロジェクトビューのスクラッチとコンソール | スクラッチディレクトリでファイルを選択し、F6 を押して、プロジェクトのターゲットディレクトリを選択します。

    詳細は、ファイルとフォルダーの移動を参照してください。

  • スクラッチファイルをプロジェクトビューのスクラッチとコンソール | スクラッチディレクトリからプロジェクトのターゲットディレクトリにドラッグします。

  • プロジェクトビューのスクラッチとコンソール | スクラッチディレクトリでスクラッチファイルを選択して Ctrl+X を押し、次にプロジェクトのターゲットディレクトリを選択して Ctrl+V を押します。

スクラッチのドキュメントを表示する

  • プロジェクトツールウィンドウでスクラッチファイルまたはバッファを選択し、Ctrl+Q を押して、ファイルの場所、タイプ、サイズ、作成および変更日を含むクイックドキュメントを表示します。

関連ページ:

HTTP クライアント

HTTP クライアントプラグインを使用すると、WebStorm コードエディターで HTTP リクエストを直接作成、編集、実行できます。HTTP リクエストを作成して実行する必要がある場合、主に 2 つのユースケースがあります。RESTful Web サービスを開発していて、それが期待どおりに機能し、仕様に準拠してアクセス可能であり、正しく応答することを確認したい場合。RESTful Web サービスに対応するアプリケーションを開発している場合。この場合、開発を開始する前にサービスへのアクセスと...

IDE で使用されるディレクトリ

デフォルトでは、WebStorm は、各 IDE インスタンスのユーザー固有のファイル(構成、キャッシュ、プラグイン、ログなど)をユーザーのホームディレクトリに保存します。ただし、必要に応じて、これらのファイルを保存する場所を変更できます。IDE ディレクトリの場所を変更するたとえば、ユーザープロファイルドライブの容量が不足している場合や低速ディスクにある場合、ホームディレクトリが暗号化されている(IDE の速度が低下している)場合、またはネットワークドライブにある場合は、デフォルトの IDE...

プロジェクトツールウィンドウ

プロジェクトツールウィンドウを使用すると、さまざまな視点からプロジェクトを確認し、新しい項目 (ディレクトリ、ファイル、クラスなど) の作成、エディターでのファイルのオープン、必要なコードフラグメントへの移動などのさまざまなタスクを実行できます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコマンドとして、関連するショートカットを介してアクセスします。また、ビューには、作成したスクラッチファイルと拡張スクリプトを管理できるスクラッチとコンソールフォルダーが含ま...

コードリファクタリング

リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。WebStorm は、影響を受けるコード参照を自動的に追跡して修正する、さまざまなコードリファクタリングを提供します。ゴールとワークフローの違いにもかかわらず、すべての WebStorm リファクタリングにはいくつかの必須ステップが必要です。以下は、コードのリファクタリング時に実行する主な手順の概要です。リファクタリングの呼び出し...

キーボードショートカットを設定する

WebStorm には定義済みのキーマップがいくつか含まれており、頻繁に使用するショートカットをカスタマイズできます。キーマップ構成を表示するには、設定ダイアログを開き、キーマップを選択します。WebStorm は、環境に基づいて事前定義されたキーマップを自動的に提案します。使用している OS と一致することを確認するか、使用している別の IDE またはエディターからのショートカットと一致するものを選択してください(たとえば、Eclipse または NetBeans)。キーマップは、対応するキ...

WebStorm の Vim

IdeaVim は、WebStorm エディター用の Vim エンジンです。通常モード、挿入モード、ビジュアルモード、コマンドラインモードと Ex モード、Vim 正規表現と構成、およびその他の機能をサポートしています。IdeaVim プラグインをインストールする設定ダイアログで、プラグインを選択します。マーケットプレースで IdeaVim プラグインを見つけて、インストールをクリックします。WebStorm を再起動してください。WebStorm を再起動すると、Vim が有効になり、エディターが...