WebStorm 入門

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

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

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

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

WebStorm ショートカットを学ぶ

後で別の JetBrains IDE に切り替えることにした場合でも、WebStorm ショートカットの学習は役に立ちます。ショートカットはほとんどすべてで同じです。より早く学ぶのに役立つものは次のとおりです。

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

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

• WebStorm ショートカットのチートシートを使用する – 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 プログラムに接続したりできます。

AI 機能

WebStorm とネイティブに統合された AI コーディングアシスタントをお探しの場合は、JetBrains AI Assistant(英語) をお試しください。コンテキスト認識型スマートチャットや、コード生成、ドキュメント作成などの多くの機能が含まれています。7 日間の無料トライアルをご利用いただけます。

WebStorm では、GitHub Copilot、Supermaven、Tabnine、その他の AI ツールも使用できます。設定 | プラグインのマーケットプレースタブで対応するプラグインを検索してください。これらのプラグインは JetBrains によって管理されていないことに注意してください。

保存時のアクション

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

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

WebStorm は、リモートで共同作業を行い、プロジェクトに取り組むのに役立つツールを提供します。