WebStorm入門

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

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

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

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

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

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

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

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

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

WebStormのレイアウトは、好きなように整理できます。例：コードの作成に集中する場合は、集中モードを試してみてください。すべてのツールバー、ツールウィンドウ、およびエディタータブが削除されるため、空き領域が増えます。このモードに切り替えるには、メインメニューで表示 | 集中モードにするを選択します。

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

ツールウィンドウが表示されていないときは、ショートカットを使用してそれらのいずれかにアクセスできます。入力フォーカスはツールウィンドウに移動し、そのコンテキストで任意のキーボードコマンドを使用できます。エディターに戻るには、 Escapeを押してください。以下は、最も頻繁に必要となるツールウィンドウを呼び出すショートカットのリストです：

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

ほとんどのツールウィンドウおよびポップアップウィンドウでは、WebStormはスピード検索をサポートしています。スピード検索を使用すると、検索クエリを使用してリストをフィルタリングしたり、特定のアイテムにナビゲートしたりできます。

方法を見つける

WebStormには、どんなに複雑なコードであっても、あらゆるコードを検索するのに役立つ一連の検索機能とナビゲーション機能が付属しています。

プロジェクトシンボルの使用箇所を見つける

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

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

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

コードを完成させる

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

コードをオンザフライで検査して修正する

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

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

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

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

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

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

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

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

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

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を自由に調整して、ニーズに完全に合うようにしてください。