WebStorm 2019.2ヘルプ

WebStormを始めよう

WebStorm(英語)は最新のJavaScript開発用の強力なIDEです。WebStormは、JavaScript、TypeScript、HTML、CSS、およびReact、Angular、Vue.jsなどのフレームワークを完全にサポートしています。追加プラグインは必要ありません。

WebStormは、クライアント側のアプリケーションに加えて、Node.jsを搭載したサーバーサイドアプリケーション、React NativeまたはCordovaを搭載したモバイルアプリケーション、Electronを使用したデスクトップアプリケーションを開発できます。Node.js(英語)を使用することを強くお勧めしますが、コアWebStormの機能はまだそれなしで自由に使用できます。

プロジェクトを開く、チェックアウトする、またはプロジェクトを作成する

WebStormのプロジェクトは、編集したソースコード、使用するライブラリーとツール(たとえば、node_modules サブフォルダー内)、およびさまざまなアプリ構成ファイル(たとえば、package.json または .eslintrc)を含むフォルダーです。

WebStormでフォルダーを開くと、.idea サブフォルダーが追加されます。WebStormには、プロジェクトコードスタイルやバージョン管理システムなどの内部設定が保存されます。

プロジェクトを開くには

  • ようこそ画面開く をクリックし、表示されたダイアログでアプリケーションのあるフォルダーを選択します。

バージョン管理システムからプロジェクトをチェックアウトするには

  1. ようこそ画面でバージョン管理からチェック・アウトをクリックするか、メインメニューからVCS | バージョン管理からチェック・アウトを選択します。

  2. リストからバージョン管理システムを選択します。

  3. 表示されるVCS固有のダイアログで、アプリケーションのソースをチェックアウトするための資格情報とリポジトリを入力します。

ws_welcomeScreen.png

空のWebStormプロジェクトを作成するには

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

テンプレートからプロジェクトを生成することもできます。詳しくは、フレームワーク固有のプロジェクトの生成を参照してください。

プロジェクトに新しいファイルを作成するには

  • プロジェクトツールウィンドウでは、新しいファイルを作成するフォルダーを選択し、Alt+Insertを押します。

  • または、選択したコンテキストメニューから新規を選択してから、リストからファイルの種類を選択します。

    ws_getting_started_create_new_file.png

詳細はファイルとディレクトリーの作成を参照してください。

WebStormのユーザーインターフェースを理解する

WebStormウィンドウは、コードの読み取り、作成、変更を行うエディターメニューとツールバーナビゲーションバーステータスバー、および多数のWebStorm ツールウィンドウで構成されています。これらのセカンダリーウィンドウはワークスペースの下部と側面に取り付けられているため、コードのデバッグ、テストの実行、バージョン管理システムとの対話などを実行できます。

ユーザーインターフェースの概要エディターの基本ツール・ウィンドウを使った作業の詳細を参照してください。

ws_getting_started_editor.png

WebStormのレイアウトは自由に整理できます。例:自分のコードを書くことに集中したいなら、集中モードを試してください。すべてのツールバー、ツールウィンドウ、エディタータブが削除されるため、空き容量が増えます。このモードに切り替えるには、メインメニューから表示 | 外観 | 集中モードにするを選択します。

集中モードの代替案は、Ctrl+Shift+F12を押してすべてのツールウィンドウを隠すことです。このショートカットをもう一度押すと、レイアウトをデフォルトに戻すことができます。

ツールウィンドウが非表示になっているときは、ショートカットを使用してそれらのウィンドウにアクセスできます。入力フォーカスはツールウィンドウに移動し、そのコンテキスト内で任意のキーボードコマンドを使用できます。エディターに戻るには、Escapeを押すだけです。ツールウィンドウが表示されているときにショートカットを押すと、そのウィンドウにフォーカスが移動するだけです。

以下は、最も頻繁に必要となるツールウィンドウを呼び出すショートカットのリストです:

ツール・ウィンドウ

ショートカット

プロジェクト

Alt+1

バージョン管理

Alt+9

実行

Alt+4

デバッグ

Alt+5

ターミナル

Alt+F12

エディター

Escape

ナビゲーション・バーは、プロジェクトツールウィンドウのコンパクトな代替品です。ナビゲーションバーにアクセスするには、Alt+Homeを押します。

ws_getting_started_navigation_bar.png
Right , Right , Up キーと Down キーを使用して、フォルダー間を移動してその内容を表示します。

ほとんどのツールウィンドウやポップアップでは、WebStormはスピード検索をサポートしています。これを使用すると、検索クエリを使用してリストをフィルタリングしたり特定の項目に移動したりできます。

ws_getting_started_search_in_tool_windows.png

探索の方法

WebStormには、どのようなコードが複雑になっていても、コードを検索するのに役立つ検索機能とナビゲーション機能が付属しています。詳細はソースコードナビゲーションを参照してください。

プロジェクトで特定のシンボルがどこで使われているかを見つけるために、WebStormは使用箇所の検索Alt+F7)を使って本格的な検索を提案しています:

ws_getting_started_find_usages.png

プロジェクトシンボルを名前で検索する

名前でクラスCtrl+N)、ファイルCtrl+Shift+N)、またはシンボルCtrl+Shift+Alt+N)に移動することができます(名前でターゲットを検索するを参照)。

テキスト断片を検索する

  • 現在のファイルでテキスト断片を見つけるには、Ctrl+F を押して検索パターンを入力します。

  • ディレクトリー、任意の範囲またはプロジェクト全体を検索するには、Ctrl+Shift+F を押して検索パターンと範囲を指定します。

シンボルの宣言にジャンプ

宣言に移動(WindowsおよびLinux用のCtrl+B , Ctrl+Click またはmacOS用の ⌘+Click )を使用すると、特定のシンボルが最初に宣言されている場所に移動できます。この種類のナビゲーションは、ソースコード内の任意の場所から機能します。

タイムラインをナビゲートする

WebStormは、ローカル・ヒストリーでソースコードに加えた変更、リファクタリングの結果などを自動的に追跡します。ファイルまたはフォルダーで表示するには、メインメニューからVCS | ローカル・ヒストリー | ヒストリーの表示を選択します。ここでは、変更を確認したり、元に戻したり(the Rollback icon)したり、パッチを作成したり(the Create Patch icon)することができます。詳細はローカル・ヒストリーを参照してください。

ws_getting_started_local_history.png

コードを完成させる

WebStormは、標準言語APIの、およびプロジェクトの依存関係から、キーワード、シンボルを自動的に補完します。 Ctrl+Space を押して現在のコンテキストのコード補完オプションを取得すると、現在のタイプのメンバーが太字で表示されます。

ws_getting_started_code_completion.png
より多くのバリアントを表示するには、もう一度 Ctrl+Space を押します。

コードとパスの自動補完の詳細を参照してください。

コードをオンザフライでインスペクションして修正する

WebStormはあなたのコードを監視し、正確かつきれいに保ちます。潜在的なエラーと問題を検出し、その問題の迅速な修正を提案します。WebStormは、未使用のコード、無限ループ、シンボルのインポートステートメントの欠落、およびおそらく注意が必要なその他多くのものを見つけるたびに、ハイライトと電球を表示します。この電球をクリックするか、Alt+Enter を押して修正を適用します。

import の声明を忘れましたか?

Autoimport with quick-fix: information tooltip
Alt+Enter を押し、挿入 'インポート'顧客 ''をクリックします:
Autoimport with quick-fix: suggestion list

ES6およびTypeScriptシンボルの場合、WebStormはコード補完に欠落しているインポートステートメントを追加できます。

利用可能なインスペクションの完全なリストを見るには、設定ダイアログ(Ctrl+Alt+S)で、エディターインスペクションをクリックしてください。それらのいくつかを無効にしたり、他を有効にしたりすることができ、さらに各インスペクションの重大度を調整することができます。それをエラーと見なすべきか、単なる警告と見なすべきかを決めます。

コード・インスペクション結果の取得と問題の解決の詳細を参照してください。

コードをリファクタリングする

リファクタリング(英語)は、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dry(英語)を維持しやすくします。WebStormは、リファクタリング後にコードが以前と同じように機能するようにします。変更はプロジェクト全体にスマートに行われるためです。例:クラスの名前を変更すると、WebStormはすべての使用箇所とインポート文の名前を自動的に変更します。

詳細は、コードのリファクタリングJavaScript のリファクタリング、およびTypeScript のリファクタリングを参照してください。

  1. エディターまたはプロジェクトツールウィンドウで、リファクタリングする式またはシンボルを選択し、Ctrl+Shift+Alt+Tを押する

  2. リファクタリングリストから、必要なリファクタリングを選択してください。

アプリケーションの実行とデバッグ

WebStormでは、アプリケーションの実行またはデバッグの開始点は実行/デバッグ構成です。WebStormには、さまざまな種類のアプリケーションとファイル用に事前定義された実行/デバッグ設定テンプレートが多数用意されています。設定で提供する必要のある情報は、そのタイプによって異なります。実行するファイルまたはテストにすることができます。いくつかの設定はすでに実行中のアプリケーションにアタッチすることができます。この場合、アタッチするURLとポートを指定する必要があります。

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

  • アプリに合ったタイプの実行構成を作成し、Runをクリックしてください。

  • 場合によっては、実行構成を作成せずにアプリケーションやファイルを実行することもできます。WebStormはこれを実行できます。例:Nodeでファイルを実行するには、コンテキストメニューで<ファイル名>を実行を選択するか、Ctrl+Shift+F10を押してください。これはHTMLファイルでも機能し、WebStormはブラウザでそのファイルを開きます。

  • プロジェクトに開発モードでアプリケーションを起動するnpmスクリプトがある場合は、プロジェクト内の package.json をエディターで開き、start タスクの隣にあるガターの中の Run をクリックし、リストから実行 'start'を選択します。

    ws_getting_started_run_app_with_npm_start_task.png

詳細は、アプリケーションの実行ブラウザでのJavaScriptの実行、およびnpmスクリプトの実行とデバッグを参照してください。

デバッグを開始するには

WebStormを使用すると、クライアントサイドアプリケーション、Node.jsアプリケーション、テストなど、さまざまな種類のアプリケーションをデバッグできます。Node.jsを使用して、たとえば外部の開発用Webサーバー上で実行されているクライアントサイドJavaScriptをデバッグする方法は次のとおりです。

  1. 必要に応じて、JavaScriptコードにブレークポイントを設定します。

  2. おそらく npm start を使用して開発モードでアプリケーションを実行し、ブラウザでアプリケーションが実行されているURLアドレスをコピーします。

  3. メインメニューから実行 | 構成の編集を選択し、ツールバーの the Add button をクリックしてリストからJavaScript デバッグを選択します。

    表示される実行/デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されているURLアドレスを指定します。このURLは、上記のステップ 2に従って、ブラウザのアドレスバーからコピーできます。

  4. ツールバーの実行/デバッグ構成を選択しますリストから新しく作成された構成を選択して、the Debug buttonをクリックします。実行設定で指定されたURLアドレスがブラウザで開き、デバッグツールウィンドウが表示されます。

  5. デバッグツールウィンドウで、通常どおり進みます: プログラムをステップ実行し、プログラムの実行を停止して再開し、中断時にそれを調べ実際のHTML DOMを表示します:

WebStormには、アプリケーションのプレビューとデバッグに使用できるビルトインのWebサーバーがあります。このサーバーは常に稼動しており、手動構成は必要ありません。すべてのプロジェクトファイルは、プロジェクトの構造に関して、ルートURL http://localhost:<built-in server port>/<project root>を使用してビルトインサーバー上で提供されます。詳細は組み込みサーバー上で実行されているアプリケーションのデバッグを参照してください。

ChromeのJavaScriptのデバッグWebStormブログ(英語)の詳細を参照してください。例については、例についてはReactアプリケーションのデバッグ(英語)Angularアプリケーションのデバッグ(英語)を参照してください。

コードスタイルの標準に従う

WebStormは、各言語に固有のコードスタイル設定に従って、すべての新しいコードを自動的にフォーマットします。これらの設定はリファクタリング中にも適用されます。

自分でコードスタイルを設定することも、TSLint(英語)またはESLint(英語)設定ファイルからコードスタイルルールを適用することもできます。WebStormでのTSLintの有効化と設定ESLintからのコードスタイルのインポートからさらに学びましょう。

プロジェクトコードスタイルの設定に従ってコードを再フォーマットするには、コードフラグメントまたはファイル全体を選択し、Ctrl+Alt+Lを押します。

ソースコードをバージョン管理下に置く

ソースコードをバージョン管理下に置いている場合、WebStormがGit(またはGitHub)、Mercurial、Perforce、Subversion、CVSなどの多くの一般的なバージョン管理システムと統合されることを知ってうれしいでしょう。ほとんどの場合、WebStormはVCSを自動的に検出します。資格情報と設定を指定するには、設定ダイアログ(Ctrl+Alt+S)のバージョン管理ページに移動します。

VCSメニューは、利用可能なコマンドについての手がかりを与えます。バージョン管理ツール・ウィンドウAlt+9)では、あなたのチームメイトが行った変更、変更リストの作成、コミットと変更のプッシュなどの表示と追跡が可能です。

コミット、プッシュ、履歴の表示など、最もよく使用される操作は、VCS 操作ポップアップ(Alt+`)からも利用できます。

詳細については、バージョン管理を参照してください。

環境をカスタマイズする

WebStormをあなたのニーズにぴったり合ったものにし、それが出来る限り役立つそして快適なものに調整してください。

外観

最初に微調整することは、一般的な「ルックアンドフィール」です。デフォルトのWebStormテーマは明るいです。より暗い環境を望む場合は、設定/環境設定ダイアログ(Ctrl+Alt+S)で、外観および振る舞いにある外観をクリックし、Darculaを選択します。

エディター

Drag'n' Dropを有効または無効にしたり、エディタータブの動作をカスタマイズしたり、サポートされる各言語の強調表示を設定したり、コード折りたたみ設定を編集したり、コード補完ポリシーを変更するなど、エディターの動作のあらゆる面を調整することもできます。エディターの機能をカスタマイズするには、Ctrl+Alt+S を押し、設定/環境設定ダイアログで、エディターの該当するページを選択します。

キーマップ

WebStormはキーボード中心のIDEです。つまり、その中のほとんどすべてのアクションはキーボードショートカットにマッピングされています。WebStormにはデフォルトのキーマップが付属していますが、キーボードショートカットの設定の説明に従って習慣に合わせていつでも変更できます。Ctrl+Alt+S を押して外観および振る舞いキーマップを選択します。

最終更新日: 2019年7月22日

関連ページ:

ようこそ画面

WebStormは、プロジェクトが開かれていない場合にようこそ画面を表示します。例:WebStormを初めて実行するとき、またはプロジェクトの唯一の開いているインスタンスを閉じるとき。この画面から、新しいプロジェクトを作成、インポート、開く、またはバージョン管理から既存のプロジェクトをチェックアウト...

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化さ...

プロジェクトを作成

WebStormでは、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCSからソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべての...

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

このツールウィンドウを使用すると、プロジェクトをさまざまな観点から見て、新しい項目(ディレクトリー、ファイル、クラスなど)の作成、エディターでのファイルの開き、目的のコードフラグメントへの移動などのタスクを実行できます。このツールウィンドウ内のほとんどの機能は、コンテンツペインおよび関連するショート...

ファイルとディレクトリーの作成

空のファイルを作成するにはプロジェクトツールウィンドウでは、ファイルを作成するディレクトリーを選択し、を押してから、リストからを選択します。表示される新規ファイルダイアログで、ファイル名と拡張子を入力します。新しいファイル名の前にディレクトリー構造全体を入力できます。ネストしたディレクトリーがまだ存...

エディターの基本

WebStormエディターは、コードの作成、読み取り、変更に使用するIDEの主要部分です。エディターは次の領域で構成されています。スクロールバーは現在のファイルのエラーと警告を表示します。パンくずリストは、現在のファイルのコード内を移動できます。左のガターは行番号と注釈を示しています。タブには、現在...