WebStorm 入門

キーマップをカスタマイズする

WebStorm は、環境に基づいて事前定義されたキーマップを提案します。 このキーマップは 設定 | キーマップ にあります。 アクションのショートカットを変更すると、WebStorm は変更内容を事前定義キーマップのコピーとして保存し、今後はそのコピーがデフォルトで使用されます。

別のエディターまたは IDE から移行する場合は、対応するキーマップに切り替えることができます。 使用可能なオプションには、VS Code や Sublime Text などがあります。

IdeaVim プラグイン(英語)を使用して IDE に Vim のような機能を追加することもできます。

WebStorm ショートカットを学ぶ

WebStorm のショートカットを覚えておくと、後で他の JetBrains IDE に切り替えても役立ちます。ショートカットはほとんどの JetBrains IDE で共通です。 次のことが、ショートカットをより早く覚えるのに役立ちます：

• %instance% の最も普遍的なショートカットを覚える – Shift、 Shift、 どこでも検索。 これを使用して、任意のファイル、アクション、クラス、シンボルを検索し、すべての一致を 1 か所で確認できます。

• Key Promoter X をインストールする – この拡張機能(英語)は、作業中に重要なショートカットを学習できます。 IDE 内のボタンでマウスを使用すると、Key Promoter X は代わりに使用できたショートカットを表示します。

• %instance% ショートカットのチートシートを使用する – macOS または Windows と Linux 向けのデフォルト WebStorm キーマップリファレンスをダウンロードできます。

さらに重要なショートカットと生産性向上のヒントについては、以下のビデオを参照してください。

プラグイン

WebStorm では、拡張機能は プラグイン と呼ばれます。 プラグインを使用すると、組み込み機能を拡張し、ニーズに合わせて IDE をカスタマイズできます。 利用可能なプラグインを調べるには、 設定 | プラグイン の マーケットプレース タブに移動します。

UI テーマ

WebStorm には定義済みのテーマがいくつかしか付属していませんが、多様なカスタムオプションが用意されています。 調べるには、 設定 | プラグイン に移動し、 マーケットプレース タブで「テーマ」を検索してください。

その後、エディターに戻って、インストールしたテーマの外観を確認できます。 メインメニューから 表示 | クイックスイッチスキーム を選択するか、 Ctrl+` を押して テーマ を選択します。 そこから、利用可能なテーマをすべて一度にプレビューできます。

プロジェクトビュー設定

WebStorm には独自の エクスプローラー、 プロジェクト ツールウィンドウがあり、デフォルトの動作は他のコードエディターと少し異なります。 たとえば、ファイルをダブルクリックしてエディターで開く必要があります。 デフォルトの設定を変更する方法は次のとおりです。

プロジェクト ツールウィンドウの設定に移動し、 振る舞い にある次のオプションのいずれかまたはすべてを選択できます。

• プレビュータブの有効化 – プロジェクト ツールウィンドウで選択したファイルをエディターでプレビューします。

• シングルクリックでファイル / ディレクトリを開く – ワンクリックでエディターでファイルまたはディレクトリを開きます。

• 開いているファイルを常に選択 – プロジェクト ツールウィンドウで現在開いているファイルを自動選択します。

コンパクトモード

コンパクトモード は、ツールバー、ツールウィンドウ、ボタンのサイズを縮小して、コード用の画面スペースを増やします。 よりクリーンでシンプルなインターフェースを好む場合や、小さい画面で作業している場合に最適です。 これを有効にするには、メインメニューから 移動 | どこでも検索 を選択するか、 Shift + Shift を押して「コンパクトモード」と入力し、オンにします。

画面共有の設定

WebStorm でコードを発表したり機能をデモしたりする際は、これらの設定で可視性を高め、他の人がより簡単についてこられるようになります：

これらの設定はすべて どこでも検索 経由でアクセスできます。

• プレゼンテーションアシスタント – キーボードショートカットは、使用時にリアルタイムで表示されます。 ポップアップに表示される内容をカスタマイズするには、 設定 | 外観 & 振る舞い | プレゼンテーションアシスタント にアクセスしてください。 例: 他のオペレーティングシステムのショートカットを表示するように選択できます。

• ズーム – どこでも検索 に「zoom」と入力すると、IDE インターフェース全体をすばやく拡大または縮小できます。

• プレゼンテーションモード – どこでも検索 ポップアップで プレゼンテーションモードにする を選択すると有効化できます。 同じ方法でモードから退出できます。"exit presentation mode." と入力してください。

バージョン管理​

WebStorm はバージョン管理システムを自動で検出します。 一般的なタスクの処理方法は次のとおりです。

• プロジェクトを更新する – 左上隅のブランチ名をクリックし、 プロジェクトの更新 を選択します。 受信した変更を現在のブランチにマージするか、それらの変更に基づいて現在のブランチをリベースすることができます。

• 変更のコミット – コミット ツールウィンドウを使用して、変更をすばやくコミットします。 部分的なコミットを行うには、特定のファイルのみ、またはそのファイル内の変更のみを選択します。

• 差分を表示 – コミット ツールウィンドウで、差分を表示するファイルをダブルクリックします。

• ログの表示 – Git の場合、コミット履歴を確認できます。 変更の詳細なログを表示するには、 Git ツールウィンドウを開きます。

実行およびデバッグ

WebStorm は Node.js アプリケーションやスクリプト、フロントエンドアプリやテストの実行やデバッグをサポートします。 WebStorm から起動したアプリケーションをデバッグしたり、デバッガーを外部 Node.js プログラムに接続してデバッグできます。

保存時のアクション

ファイルを修正して保存するたびに、WebStorm で特定のアクションを実行したり Prettier や ESLint などのツールを走らせるように設定できます。 これを行うには、 設定 | ツール | 保存時のアクション に移動し、必要なボックスをオンにします。

WebStorm で AI を始める

AI 機能でワークフローを強化するには、WebStorm にネイティブ統合され、さまざまな AI モデルを提供する JetBrains AI サービスをご利用ください。 対応するサードパーティプロバイダーの AI モデルも、独自の API キーを使って利用したり、 ローカルでホストされているモデルに接続したりできます。 詳しくは サポートされているモデル をご覧ください

AI エージェントは AI モデルと連携し、プロジェクト内で複数の開発タスクを自律的に計画・実行します。 WebStorm は Agent Client Protocol（ACP） をサポートしており、外部 AI エージェントと接続して AI チャット で利用できます。 ACP は標準の通信インターフェースを定義しており、プロトコルを実装したエージェントはカスタム統合を必要とせず追加できます。 詳しくは AI エージェントをご覧ください。

共同開発およびリモート開発

WebStorm は、プロジェクトでリモート共同作業や作業がしやすくなるツールも提供しています。