WebStorm 2018.3ヘルプ

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
RightRightUp 、および 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+BCtrl+Click 、macOSでは ⌘+Click )は、特定のシンボルが最初に宣言された場所に移動します。このタイプのナビゲーションは、ソースコードの任意の場所から機能します。

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

WebStormは、ローカル・ヒストリーでのソースコードの変更、リファクタリングの結果などを自動的に追跡します。ファイルまたはフォルダを表示するには、メインメニューでVCS | ローカル・ヒストリー | ヒストリーの表示を選択します。変更内容を確認したり、元に戻したり(icons actions rollback svg)、パッチ(iconCreatePatch.png)を作成することができます。

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はすべての使用箇所とインポート文の名前を自動的に変更します。

  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

デバッグを開始するには

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

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

  2. 上記のよう開発モードでアプリケーションを実行してください(おそらく npm start で)、アプリケーションが実行されているURLアドレスをブラウザにコピーしてください。

  3. メインメニューで実行 | 構成の編集を選択し、ツールバーの icons general add をクリックし、ポップアップリストからJavaScript デバッグを選択します。開いている実行/デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されているURLアドレスを指定します。このURLは、上記のステップ 2の説明に従ってブラウザのアドレスバーからコピーできます。

  4. ツールバーの実行/デバッグ構成を選択しますドロップダウンリストで新しく作成した設定を選択し、 icons actions startDebugger svgをクリックします。実行コンフィギュレーションで指定されたURLアドレスがブラウザで開き、デバッグツールウィンドウが表示されます。

  5. デバッグツールウィンドウで、プログラムのステップ実行、プログラムの実行の再開一時停止時の検査実際のHTML DOMの表示など、通常どおり実行します 。

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

WebStormは、各言語に固有のコードスタイル設定に従って新しいコードをすべて自動的にフォーマットします。TSLint(英語)またはESLint(英語)設定ファイルから、コードスタイルを自分で設定したり、コードスタイルルールを適用することができます。WebStormでのTSLintの有効化と設定ESLintからのコードスタイルのインポートの詳細をご覧ください。

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

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

ソースコードをバージョン管理下に置いておけば、WebStormはGit(GitHub)、Mercurial、Perforce、TFS、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 を押し、外観および振る舞いキーマップを選択します。

最終更新日: 2018年12月12日