WebStorm 入門
WebStorm 入門ガイドへようこそ！ ほとんどの機能がすぐに使用できる状態で、この JetBrains IDE をすばやくセットアップする方法を学びます。
最初のプロジェクトを開くか作成する
WebStorm をダウンロードしてインストールすると、開始にはプロジェクトが必要なことに気づくでしょう。 プロジェクトファーストのアプローチにより、WebStorm は作業内容のコンテキストをより適切に理解し、より高度なコーディング支援を提供できます。
プロジェクトを開始するには、いくつかのオプションから選択できます。
リポジトリのクローン – Git または GitHub から既存のプロジェクトを取得します。
新規プロジェクト – 空のプロジェクトを作成するか、React、Angular、Vue などの既存のテンプレートからプロジェクトを生成します。
開く – マシンに保存されているプロジェクトを開きます。
主な機能をすばやく見たい場合は、プレイグラウンドプロジェクトから始めることもできます。 新規プロジェクト | 新規プロジェクト に進み、 オンボーディングのヒント付き playground プロジェクトを生成する ボックスにチェックを入れてください。
プロジェクトを開いたら、通常どおりコーディングを開始できます。 最初のファイルを作成するには、 プロジェクト ツールウィンドウを開き、ファイルを作成するフォルダーを選択して右クリックし、 新規 を選択して、リストからファイルの種類を選択します。
ショートカットで時間を節約
これまで WebStorm や他の JetBrains IDE を使ったことがない場合、新しいショートカットに慣れるのは難しいことがあります。 これを支援するためのヒントをいくつか紹介します。
キーマップをカスタマイズする
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 をカスタマイズ
WebStorm の UI は、最初は圧倒的に見えることがあります。 カスタマイズして、不要なものをオフにすることができます。 ここでは、一般的なカスタマイズのヒントをいくつか紹介します。
プラグイン
WebStorm では、拡張機能は プラグイン と呼ばれます。 プラグインを使用すると、組み込み機能を拡張し、ニーズに合わせて IDE をカスタマイズできます。 利用可能なプラグインを調べるには、 設定 | プラグイン の マーケットプレース タブに移動します。
UI テーマ
WebStorm には定義済みのテーマがいくつかしか付属していませんが、多様なカスタムオプションが用意されています。 調べるには、 設定 | プラグイン に移動し、 マーケットプレース タブで「テーマ」を検索してください。
その後、エディターに戻って、インストールしたテーマの外観を確認できます。 メインメニューから 表示 | クイックスイッチスキーム を選択するか、 Ctrl+` を押して テーマ を選択します。 そこから、利用可能なテーマをすべて一度にプレビューできます。
プロジェクトビュー設定
WebStorm には独自の エクスプローラー、 プロジェクト ツールウィンドウがあり、デフォルトの動作は他のコードエディターと少し異なります。 たとえば、ファイルをダブルクリックしてエディターで開く必要があります。 デフォルトの設定を変更する方法は次のとおりです。
プロジェクト ツールウィンドウの設定に移動し、 振る舞い にある次のオプションのいずれかまたはすべてを選択できます。
プレビュータブの有効化 – プロジェクト ツールウィンドウで選択したファイルをエディターでプレビューします。
シングルクリックでファイル / ディレクトリを開く – ワンクリックでエディターでファイルまたはディレクトリを開きます。
開いているファイルを常に選択 – プロジェクト ツールウィンドウで現在開いているファイルを自動選択します。
コンパクトモード
コンパクトモード は、ツールバー、ツールウィンドウ、ボタンのサイズを縮小して、コード用の画面スペースを増やします。 よりクリーンでシンプルなインターフェースを好む場合や、小さい画面で作業している場合に最適です。 これを有効にするには、メインメニューから 移動 | どこでも検索 を選択するか、 Shift + Shift を押して「コンパクトモード」と入力し、オンにします。
画面共有の設定
WebStorm でコードを発表したり機能をデモしたりする際は、これらの設定で可視性を高め、他の人がより簡単についてこられるようになります：
これらの設定はすべて どこでも検索 経由でアクセスできます。
プレゼンテーションアシスタント – キーボードショートカットは、使用時にリアルタイムで表示されます。 ポップアップに表示される内容をカスタマイズするには、 設定 | 外観 & 振る舞い | プレゼンテーションアシスタント にアクセスしてください。 例: 他のオペレーティングシステムのショートカットを表示するように選択できます。
ズーム – どこでも検索 に「zoom」と入力すると、IDE インターフェース全体をすばやく拡大または縮小できます。
プレゼンテーションモード – どこでも検索 ポップアップで プレゼンテーションモードにする を選択すると有効化できます。 同じ方法でモードから退出できます。"exit presentation mode." と入力してください。
共通のワークフローを設定する
WebStorm では、ほとんどの構成がすぐ使えるため、すぐにコーディングを始められます。 以下に、重要なワークフローを設定するためのヒントを示します。 その他のヘルプについては、ドキュメント検索を使用してください。
バージョン管理
WebStorm はバージョン管理システムを自動で検出します。 一般的なタスクの処理方法は次のとおりです。
プロジェクトを更新する – 左上隅のブランチ名をクリックし、 プロジェクトの更新 を選択します。 受信した変更を現在のブランチにマージするか、それらの変更に基づいて現在のブランチをリベースすることができます。
変更のコミット – コミット ツールウィンドウを使用して、変更をすばやくコミットします。 部分的なコミットを行うには、特定のファイルのみ、またはそのファイル内の変更のみを選択します。
差分を表示 – コミット ツールウィンドウで、差分を表示するファイルをダブルクリックします。
ログの表示 – Git の場合、コミット履歴を確認できます。 変更の詳細なログを表示するには、 Git ツールウィンドウを開きます。
実行およびデバッグ
WebStorm は Node.js アプリケーションやスクリプト、フロントエンドアプリやテストの実行やデバッグをサポートします。 WebStorm から起動したアプリケーションをデバッグしたり、デバッガーを外部 Node.js プログラムに接続してデバッグできます。
Node.js アプリケーションとスクリプト
WebStorm で Node.js アプリケーションまたはスクリプトをデバッグするには、エディターで右クリックし、コンテキストメニューから デバッグ を選択します。 エディターの左側の領域をクリックしてブレークポイントを設定することもできます。 すでに実行中のアプリケーションにデバッガーをアタッチする手順については、 このセクションを参照してください。
フロントエンドアプリケーション
フロントエンドアプリケーションのデバッグセッションを開始するには、まず npm スクリプトを実行してアプリケーションを起動します。 次に、 ターミナル または 実行 ツールウィンドウの出力のリンクで Ctrl+Shift クリック をして、ブラウザーで JavaScript デバッグを開始します。
Next.js の場合、サーバー側のデバッグを開始するには、まず npm スクリプトをデバッグします。 次に、 ターミナル または 実行 ツールウィンドウの出力のリンクで Ctrl+Shift クリック をして、クライアント側のデバッグを開始します。
テスト
エディターの左側にあるアイコンを使用して、特定のテストファイルまたはスイートを実行またはデバッグします。 また、 プロジェクト ツールウィンドウでフォルダーを右クリックして テストの実行 を選択することで、複数のテストを実行することもできます。 詳細については、 このセクションを参照してください。
AI 機能
WebStorm のワークフローを AI 機能で強化したい場合は、IDE にネイティブ統合されている JetBrains AI を利用できます。 JetBrains AI には、インテリジェントなコーディング支援ツールである AI Assistant と、コーディングタスクを独立して実行できる AI コーディングエージェントである Junie の両方が含まれています。
AI Assistant は、IDE に直接統合できるインテリジェントな機能により、開発ワークフローを強化します。 主な機能は以下のとおりです。
コード補完 – コードの単一行やブロック全体を自動補完し、コーディングスタイルや命名規則の順守を担保します。
次の編集提案 – コードの次の編集候補を提案します。 提案をすばやく適用し、変更が必要な可能性のある次の箇所に移動して、ファイル全体の関連コードを更新します。
エージェントモードによる AI チャット – サポートされている言語モデルのいずれかとチャットしたり、プロジェクトに関する質問をしたり、タスクを反復処理したりできます。 エージェントモードに切り替えて、修正の実装、コードのリファクタリング、テストの生成など、より複雑なアクティビティを実行できます。
コンテキスト管理 – ファイル、フォルダー、画像、シンボル、コミット、他の項目を追加して、質問に関連する追加のコンテキストを AI Assistant に提供できます。
応答処理 – AI が提案する変更を確認して適用します。 単一または複数のファイルを変更したり、コードスニペットを適用したり、AI チャットから直接ターミナルコマンドを実行したりできます。
クラウドベースの LLM サポート – AI チャットで動作させるには、お好みの AI モデルを選択してください。 Google Gemini、OpenAI、Anthropic などのクラウドプロバイダーからお選びいただけます。
ローカルモデルの使用 – サードパーティが提供するカスタムローカルモデルを設定し、コード補完、エディター内コード生成、コミットメッセージ生成などの AI Assistant 機能に使用できます。
そして、 その他にもたくさんあります。
Junie は、単独でタスクを実行することも、開発者と連携して作業することもできます。 定型的なタスクは Junie に完全に委譲でき、より複雑な作業にも対応できます：
プロジェクトのコンテキストと構造を使用してタスクを実行します。
コードを分析および検索して関連情報を検索します。
IDE インスペクションを使用してコードを編集し、チェックします。
コードとテストを実行して警告とエラーを減らします。
変更後のプロジェクトの状態とテスト結果を確認します。
変更のレビューとガイダンスにより、複雑なタスクでのコラボレーションをサポートします。
その他 多数。
AI 機能は、無料プランを含む新しいサブスクリプションモデルでご利用いただけます。 無料プランでは、コード補完が無制限に利用可能で、ローカルモデルへのアクセスとクラウドベースの機能が制限されています。 さらに機能を追加するには、AI Pro または AI Ultimate プランにアップグレードしてください。
AI Assistant を有効にする
有効な JetBrains アカウント(英語)を使用してログインしていることを確認してください。
AI Assistant ヘルプの説明に従ってライセンスをアクティブ化してください。
また、WebStorm では GitHub Copilot、Tabnine、その他の AI ツールも利用できます。対応するプラグインは マーケットプレース タブで、 設定 | プラグイン から検索してください。 これらのプラグインは JetBrains ではメンテナンスされていませんのでご注意ください。
保存時のアクション
ファイルを修正して保存するたびに、WebStorm で特定のアクションを実行したり Prettier や ESLint などのツールを走らせるように設定できます。 これを行うには、 設定 | ツール | 保存時のアクション に移動し、必要なボックスをオンにします。
共同開発およびリモート開発
WebStorm は、プロジェクトでリモート共同作業や作業がしやすくなるツールも提供しています。
Code With Me
この機能を使用すると、ローカルで実行中のプロジェクトをリアルタイムで共有できます。 共同作業者はコーディングセッションに参加し、編集を行い、一緒にコードを実行またはデバッグできます。 開始するには、 Code With Me アイコンをクリックして、チームメイトに招待を送信します。
詳細については、 このセクションを参照してください。
リモート開発
WebStorm はリモート開発もサポートしているため、リモートマシンに接続して、まるでプロジェクトがローカルで動いているかのように作業できます。 IDE から直接、リモートサーバー上のコードを開いて編集、実行、デバッグできます。 設定するには、 ファイル | リモート開発 にアクセスしてください。
詳細については、 このセクションを参照してください。
サポートを受ける方法
コミュニティフォーラムをチェックして、多くの一般的な質問への回答を見つけたり、他の WebStorm ユーザーに助けを求めたりすることができます。
バグを報告したり、新機能をリクエストしたりするには、 こちら(英語)で新しい問題を作成してください。 詳細は サポートに連絡 と バグ報告 をご参照ください。