WebStorm 2024.3 ヘルプ

新しい UI

新しいユーザーインターフェース (UI) は、WebStorm およびその他の JetBrains IDE の外観を再設計したものです。デザインを簡素化し、重要な機能にアクセスしやすくするために作成されました。その結果、よりクリーンでモダンなルックアンドフィールが得られます。

この記事では、新しい UI の主な変更点と、それを使い始める方法について説明します。

New UI
Classic UI

主な変更点

テーマ

この UI には 3 つの新しいテーマ ( ライトダークライトヘッダー付きライト ) が導入されました。これらはすべて、改善されたコントラストと一貫したカラーパレットを提供するように設計されています。

Light theme in the new UI
Light with Light Header theme in the new UI
Dark theme in the new UI

設定 | 外観 & 振る舞い | 外観で別のテーマに切り替えることができます。すべてのカスタムテーマが完全にサポートされているわけではないことに注意してください。

フォント

Inter フォントが UI 要素に使用されるようになりました。以前は、各プラットフォームのデフォルトの OS フォントが使用され、異なる方法でレンダリングされていました。

UI フォントを変更する場合は、設定 | 外観 & 振る舞い | 外観に移動し、カスタムフォントの使用チェックボックスを選択して、推奨するフォントを選択します。

アイコンとコンパクトモード

新しいアイコンセットは、読みやすさを向上させるために独特の形状と色を備えています。小さい画面で作業する場合は、メインメニューの表示 | 外観 | コンパクトモードからコンパクトモードを有効にできます。これにより、ツールバーとツールウィンドウヘッダーの高さが縮小され、間隔とパディングが縮小され、アイコンとボタンが小さくなります。

New UI: Compact mode on
New UI: Compact mode off

メインウィンドウヘッダー

メインウィンドウのヘッダーを簡素化しました。アイコンとウィジェットを介して重要なアクションへのアクセスを提供します。メインウィンドウのヘッダーもカスタマイズ可能で、Git push などのアクションをツールバーに追加できます。これを行うには、アイコンまたはウィジェットを右クリックし、そのコンテキストメニューからツールバーのカスタマイズを選択し、開いたメインツールバーのカスタマイズダイアログで優先アクションを追加します。

Window header

1. メインメニュー (Windows および Linux のみ)

メインメニューはハンバーガーアイコンにあります。それを開くには、Alt+\ を押します。

標準のメニューバーに戻すことができます。これを行うには、設定 | 外観 & 振る舞い | 新しい UI に移動し、別のツールバーでメインメニューを表示オプションを有効にします。

2: プロジェクトウィジェット

プロジェクトウィジェットには現在のプロジェクトの名前が表示され、最近のプロジェクトを切り替えたり、新しいプロジェクトを作成したり、既存のプロジェクトを開くことができます。

3: VCS ウィジェット

VCS ウィジェットは、現在のブランチを表示し、ブランチの切り替えを許可し、更新、コミット、プッシュ変更などの重要な VCS アクションへのアクセスを提供します。

これは、以前はメインウィンドウの下部にあるステータスバーにあった古いブランチウィジェットと、以前は右上隅のナビゲーションバーにあった VCS アクションアイコンを置き換えます。

4: 実行ウィジェット

このウィジェットを使用すると、実行 / デバッグ構成を使用してアプリケーションを実行およびデバッグできます。実行する構成を選択したり、そのモード (実行またはデバッグ) を変更したり、構成を編集、固定、削除したりできます。

Run widget actions

メインツールバーからより多くの機能に直接アクセスできる一方で、新しいウィンドウヘッダーウィジェットはドロップダウンメニューのアクションを非表示にしてレイアウトを簡素化します。

New UI: header widgets

ツールバーにアクションをすばやく追加する

メインツールバーのアクションを見逃した場合は、人気のあるアクションのリストから追加できます。

  • ツールバーを右クリックし、メインツールバーに追加をポイントし、リストから追加するアクションを選択します。

    追加したいアクションが人気のあるアクションのリストにない場合は、メインツールバーのカスタマイズダイアログを使用します。

    Adding actions to the main toolbar

選択したアクションがツールバーに表示されます。メインツールバーのカスタマイズダイアログを使用して、アイコンを削除したり、アイコンを変更したりできます。

ツールウィンドウ

ツールウィンドウのレイアウトと動作が新しくなりました。

  • ツールウィンドウバーには大きなアイコンがあり、視覚的なナビゲーションが簡単になり、見た目もすっきりします。コンパクトモードで小さいアイコンを選択することもできます。

    ツールウィンドウの名前を表示するには、そのアイコンの上にマウスカーソルを置くとツールヒントが表示されます。

    Tool window icon tooltips
  • ツールウィンドウ名を常に表示したい場合は、ツールウィンドウバーを右クリックし、ツールウィンドウ名を表示するを選択します。

    Tool window names enabled
  • 境界線の左上と右上にあるツールウィンドウアイコンは、それに応じて左側と右側に垂直ウィンドウを開きます。

    境界の左下と右下にあるツールウィンドウアイコンは、WebStorm の下部にある水平ツールウィンドウを開きます。

    Tool windows and tool window icons
  • 垂直分割と水平分割を使用してツールウィンドウを配置します。ツールウィンドウアイコンをサイドバーに沿ってドラッグし、垂直分割の場合はセパレータに、水平分割の場合は他のサイドバーにドロップします。

    Vertical split
    Horizontal split
  • どのツールウィンドウストライプにも存在しないツールウィンドウは、他のツールウィンドウボタンにあります。他のツールウィンドウからツールウィンドウを開くと、そのアイコンが付いたバーがデフォルトの場所に追加されます。

    Move and hide tool windows

ナビゲーションバー

ナビゲーションバーは、メインウィンドウの下部にあるステータスバーに配置されました。

Navigation bar

以前の場所を希望する場合は、上部に戻すか、完全にオフにすることができます。これを行うには、メインメニューに移動して表示 | 外観 | ナビゲーションバーを選択します。

エディタータブ

複数のエディタータブでの作業がより便利になりました。タブが画面に収まらない場合は、スクロールバーを使用するか、タブを圧縮してすべてのタブを画面に配置するかを選択できます。設定ダイアログ (Ctrl+Alt+S) を開き、エディター | 一般 | エディタータブに移動して、必要なオプションを選択します。

Scroll tabs
Squeeze tabs
Multiple rows

ガター

  • 水平方向のスペースを節約するために、デフォルトでブレークポイントが行番号の上に配置されるようになりました。行番号の近くにブレークポイントを配置できます。Ctrl+Shift+A を押し、Breakpoints Over Line Numbers と入力して、オプションを無効にします。

    Breakpoints Over Line Numbers on
    Breakpoints Over Line Numbers off
  • 折りたたみアイコンが更新されました。展開された領域のアイコンはホバー時に表示され、見た目がすっきりします。

    折りたたみアイコンを常に表示するように IDE を構成できます。設定 | エディター | 一般 | コードの折りたたみに移動し、コードの折りたたみの矢印を表示するの隣にある常時を選択します。

    Folding icons in the gutter appear on hover
  • アノテーション (Git Blame) のカラーパレットが更新され、最近の変更をすばやく確認できるようになりました。

    Gutter: Git annotations

関連ページ:

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

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

バージョン管理

Web 開発環境 WebStorm の使い方や高等テクニック満載の JetBrains 日本語公式ヘルプ。最新の英語版ヘルプ内容が随時反映されます。

実行 / デバッグ構成

WebStorm は、実行 / デバッグ構成を使用して、コードを実行、デバッグ、テストします。各構成は、何を実行し、どのパラメーターと環境を使用するかを定義する、名前付きのスタートアッププロパティのセットです。実行 / デバッグ構成には 2 つのタイプがあります。一時的 — コンテキストメニューからを選択するたびに作成されます。コンテキストメニューを呼び出すには、オブジェクトまたは領域を右クリックします。永続的 — テンプレートから明示的に作成されるか、一時的な構成を保存することによって作成されま...

アプリケーションを実行する

WebStorm を使用すると、コンテキストメニューまたはガターアイコンを使用して、エディターから直接、アプリケーション全体、単一のスクリプト、テストを実行できます。アプリケーションにいくつかのパラメーターを渡したり、npm スクリプトなどのツールを起動したりする必要がある場合は、実行する前に、言語またはフレームワーク固有の実行 / デバッグ構成を作成して呼び出します。プロジェクトで現在使用可能なすべての実行構成が実行 / デバッグ構成を選択リストに表示されます。実行 / デバッグ構成の詳細を参...

メニューおよびツールバー

IDE を操作するとき、いくつかのアクションを他のアクションより頻繁に実行します。生産性を最大化するには、お気に入りのアクションのデフォルトのショートカットを学ぶか、それらにショートカットを割り当てます。メニューとツールバーをカスタマイズして、必要なアクションのみを含め、再グループ化し、アイコンを構成することもできます。メニューおよびツールバーをカスタマイズを押して設定を開き、を選択します。使用可能なメニューとツールバーのリストで、カスタマイズするノードを展開し、目的の項目を選択します。選択した...

言語と領域

言語:WebStorm は英語で利用可能ですが、中国語、韓国語、日本語をサポートするバンドルされたプラグインも含まれています。オペレーティングシステムがサポートされている言語であり、WebStorm が別の言語である場合、揃えるための提案が表示されます。このタイプの通知を表示したくない場合は、非表示にすることができます。言語パックプラグインを有効にするこの機能は、WebStorm にデフォルトでバンドルされ有効になっている中国語、日本語、韓国語言語パックプラグインに依存しています。関連する機能...