WebStorm 2018.1 Help

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)を持つフォルダです。 .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 | ローカル・ヒストリー | ヒストリーの表示を選択します。変更内容を確認したり、元に戻したり(rollback.png)、パッチ(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)で、エディターの下にあるインスペクションをクリックします。それらのいくつかを無効にしたり、他のものを有効にしたり、各インスペクションの重大度を調整することができます。それをエラーとみなすべきか、それとも単に警告するのかを決定します。

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

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

  1. エディタまたはプロジェクトツールウィンドウで、リファクタリングする式またはシンボルを選択し、 Ctrl+Shift+Alt+Tを押します
  2. リファクタリングのポップアップリストから、必要なリファクタリングを選択します。

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

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

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

  • アプリに合ったタイプの実行コンフィギュレーションを作成し、 runをクリックしてください。
  • 場合によっては、実行コンフィギュレーションを作成せずにアプリケーションやファイルを実行することもできます。WebStormはこれを実行できます。例:Nodeでファイルを実行するには、コンテキストメニューで<ファイル名>を実行を選択するか、 Ctrl+Shift+F10を押してください。これはHTMLファイルでも機能し、WebStormはブラウザでそのファイルを開きます。
  • プロジェクトに開発モードでアプリケーションを起動するnpmスクリプトがある場合は、プロジェクト内の package.json をエディタで開き、 start タスクの隣にあるガターの中の run をクリックし、リストから実行 '開始'を選択します。
    ws_getting_started_run_app_with_npm_start_task.png

デバッグを開始するには

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

  1. 必要に応じて、JavaScriptコードでブレークポイントを設定します。
  2. 開発モードのアプリケーションを npm start 上記のようにで実行し、アプリケーションが実行されているURLアドレスをブラウザにコピーします。
  3. メインメニューで実行 | 構成の編集を選択し、ツールバーの add をクリックし、ポップアップリストからJavaScript デバッグを選択します。開いている実行/デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されているURLアドレスを指定します。このURLは、上記の手順 2の説明に従ってブラウザのアドレスバーからコピーできます。
  4. ツールバーの実行/デバッグ構成を選択しますドロップダウンリストで新しく作成した設定を選択し、 debugをクリックします。実行コンフィギュレーションで指定された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年5月11日