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には、プロジェクトコードスタイルやバージョン管理システムなどの内部設定が保存されます。
プロジェクトを開くには
ようこそ画面で 開く をクリックし、表示されたダイアログでアプリケーションのあるフォルダーを選択します。
バージョン管理システムからプロジェクトをチェックアウトするには
ようこそ画面でバージョン管理から取得をクリックするか、メインメニューから を選択します。
呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

空のWebStormプロジェクトを作成するには
メインメニューから を選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトの作成ダイアログが開きます。
左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。
テンプレートからプロジェクトを生成することもできます。詳しくは、フレームワーク固有のプロジェクトの生成を参照してください。
プロジェクトに新しいファイルを作成するには
プロジェクトツールウィンドウでは、新しいファイルを作成するフォルダーを選択し、Alt+Insertを押します。
または、選択したコンテキストメニューから
を選択してから、リストからファイルの種類を選択します。
詳細はファイルとディレクトリーの作成を参照してください。
WebStormのユーザーインターフェースを理解する
WebStormウィンドウは、コード、メニューとツールバー、ナビゲーションバー、ステータスバー、および多数のWebStorm ツールウィンドウの読み取り、作成、変更を行うエディターで構成されています。これらのセカンダリーウィンドウは、ワークスペースの下部と側面に接続されており、コードのデバッグ、テストの実行、バージョン管理システムとの対話などを行うことができます。
ユーザーインターフェースの概要、エディターの基本、ツールウィンドウの操作の詳細を参照してください。

WebStormのレイアウトは自由に整理できます。例:自分のコードを書くことに集中したいなら、集中モードを試してください。すべてのツールバー、ツールウィンドウ、エディタータブが削除されるため、空き容量が増えます。このモードに切り替えるには、メインメニューから を選択します。
集中モードの代替案は、Ctrl+Shift+F12を押してすべてのツールウィンドウを隠すことです。このショートカットをもう一度押すと、レイアウトをデフォルトに戻すことができます。
ツールウィンドウが非表示になっているときは、ショートカットを使用してそれらのウィンドウにアクセスできます。入力フォーカスはツールウィンドウに移動し、そのコンテキスト内で任意のキーボードコマンドを使用できます。エディターに戻るには、Escapeを押すだけです。ツールウィンドウが表示されているときにショートカットを押すと、そのウィンドウにフォーカスが移動するだけです。
以下は、最も頻繁に必要となるツールウィンドウを呼び出すショートカットのリストです:
ツール・ウィンドウ | ショートカット |
---|---|
プロジェクト | Alt+1 |
バージョン管理 | Alt+9 |
実行 | Alt+4 |
デバッグ | Alt+5 |
ターミナル | Alt+F12 |
エディター | Escape |
ナビゲーション・バーは、プロジェクトツールウィンドウのコンパクトな代替品です。ナビゲーションバーにアクセスするには、Alt+Homeを押します。
ほとんどのツールウィンドウやポップアップでは、WebStormはスピード検索をサポートしています。これを使用すると、検索クエリを使用してリストをフィルタリングしたり特定の項目に移動したりできます。
探索の方法
WebStormには、どのようなコードが複雑になっていても、コードを検索するのに役立つ検索機能とナビゲーション機能が付属しています。詳細はソースコードナビゲーションを参照してください。
プロジェクトシンボルの使用箇所を見つける
プロジェクトで特定のシンボルが使用されている場所を見つけるために、WebStormは使用箇所の検索 Alt+F7を介したフルスケール検索を提案しています。
プロジェクトシンボルを名前で検索する
クラス Ctrl+N、ファイル Ctrl+Shift+N、またはシンボル Ctrl+Shift+Alt+N に名前でナビゲートできます。名前でターゲットを検索する (どこでも検索)を参照してください。
テキスト断片を検索する
現在のファイルでテキスト断片を見つけるには、Ctrl+F を押して検索パターンを入力します。
ディレクトリー、任意の範囲またはプロジェクト全体を検索するには、Ctrl+Shift+F を押して検索パターンと範囲を指定します。
シンボルの宣言にジャンプ
宣言に移動(Ctrl+B , Ctrl+Click は、特定のシンボルが最初に宣言された場所に移動します。このタイプのナビゲーションは、ソースコードの任意の場所から機能します。
タイムラインをナビゲートする
WebStormは、ソースコードに加えた変更、リファクタリングの結果などをローカル・ヒストリーで自動的に追跡します。ファイルまたはフォルダーを表示するには、メインメニューから を選択します。ここでは、変更を確認したり、を元に戻したり、パッチ
を作成したりできます。詳細はローカル・ヒストリーを参照してください。

コードを完成させる
WebStormは、標準言語APIの、およびプロジェクトの依存関係から、キーワード、シンボルを自動的に補完します。 Ctrl+Space を押して現在のコンテキストのコード補完オプションを取得すると、現在のタイプのメンバーが太字で表示されます。
コードとパスの自動補完の詳細を参照してください。
コードをオンザフライでインスペクションして修正する
WebStormはあなたのコードを監視し、正確かつきれいに保ちます。潜在的なエラーと問題を検出し、その問題の迅速な修正を提案します。WebStormは、未使用のコード、無限ループ、シンボルのインポートステートメントの欠落、およびおそらく注意が必要なその他多くのものを見つけるたびに、ハイライトと電球を表示します。この電球をクリックするか、Alt+Enter を押して修正を適用します。
import
の声明を忘れましたか?
ES6およびTypeScriptシンボルの場合、WebStormはコード補完に欠落しているインポートステートメントを追加できます。
利用可能なインスペクションの完全なリストを表示するには、設定ダイアログ Ctrl+Alt+Sで、エディターのインスペクションをクリックします。それらの一部を無効にしたり、他を有効にしたり、各インスペクションの重大度を調整したりできます。エラーと見なすか、単なる警告と見なすかを決定します。
コード・インスペクションと結果の取得と問題の解決の詳細を参照してください。
コードをリファクタリングする
リファクタリング(英語)は、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dry(英語)を維持しやすくします。WebStormは、リファクタリング後にコードが以前と同じように機能するようにします。変更はプロジェクト全体にスマートに行われるためです。例:クラスの名前を変更すると、WebStormはすべての使用箇所とインポート文の名前を自動的に変更します。
詳細は、コードのリファクタリング、JavaScript のリファクタリング、およびTypeScript のリファクタリングを参照してください。
エディターまたはプロジェクトツールウィンドウで、リファクタリングする式またはシンボルを選択し、Ctrl+Shift+Alt+Tを押する
リファクタリングリストから、必要なリファクタリングを選択してください。
アプリケーションの実行とデバッグ
WebStormでは、アプリケーションの実行またはデバッグの開始点は実行/デバッグ構成です。WebStormには、さまざまな種類のアプリケーションとファイル用に事前定義された実行/デバッグ設定テンプレートが多数用意されています。設定で提供する必要のある情報は、そのタイプによって異なります。実行するファイルまたはテストにすることができます。いくつかの設定はすでに実行中のアプリケーションにアタッチすることができます。この場合、アタッチするURLとポートを指定する必要があります。
アプリケーションを実行するには
アプリに合ったタイプの実行構成を作成し、
をクリックしてください。
場合によっては、実行構成を作成せずにアプリケーションやファイルを実行することもできます。WebStormはこれを実行できます。例:Nodeでファイルを実行するには、コンテキストメニューで<ファイル名>を実行を選択するか、Ctrl+Shift+F10を押してください。これはHTMLファイルでも機能し、WebStormはブラウザでそのファイルを開きます。
プロジェクトに開発モードでアプリケーションを起動するnpmスクリプトがある場合は、プロジェクト内の package.json をエディターで開き、
start
タスクの隣にあるガターの中のをクリックし、リストから実行 'start'を選択します。
詳細は、アプリケーションの実行、ブラウザでのJavaScriptの実行、およびnpmスクリプトの実行とデバッグを参照してください。
デバッグを開始するには
WebStormを使用すると、クライアントサイドアプリケーション、Node.jsアプリケーション、テストなど、さまざまな種類のアプリケーションをデバッグできます。Node.jsを使用して、たとえば外部の開発用Webサーバー上で実行されているクライアントサイドJavaScriptをデバッグする方法は次のとおりです。
必要に応じて、JavaScriptコードにブレークポイントを設定します。
おそらく
npm start
を使用して開発モードでアプリケーションを実行し、ブラウザでアプリケーションが実行されているURLアドレスをコピーします。メインメニューから
を選択し、ツールバーのをクリックしてリストからJavaScript デバッグを選択します。
表示される実行/デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されているURLアドレスを指定します。このURLは、上記のステップ 2に従って、ブラウザのアドレスバーからコピーできます。
ツールバーの実行/デバッグ構成を選択しますリストから新しく作成された構成を選択して、
をクリックします。実行設定で指定されたURLアドレスがブラウザで開き、デバッグツールウィンドウが表示されます。
デバッグツールウィンドウで、通常通りに進みます。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断時にそれを調べ、実際の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のバージョン管理ページに移動します。
バージョン管理ツール・ウィンドウ Alt+9では、あなたのチームメイトが行った変更の表示と追跡、変更リストの作成、変更のコミットとプッシュなどを行うことができます。
メニューは、使用可能なコマンドに関する手がかりを提供します。コミット、プッシュ、履歴の表示などの最も使用される操作は、VCS 操作ポップアップ Alt+`からも利用できます。
詳細については、バージョン管理を参照してください。
環境をカスタマイズする
WebStormをあなたのニーズにぴったり合ったものにし、それが出来る限り役立つそして快適なものに調整してください。
外観
最初に微調整することは、一般的な「ルックアンドフィール」です。デフォルトのWebStormテーマはライトです。より暗い環境を希望する場合は、設定/環境設定ダイアログ Ctrl+Alt+Sで、外観および振る舞いの外観をクリックしてからDarculaを選択します。
エディター
Drag'n' Dropを有効または無効にしたり、エディタータブの動作をカスタマイズしたり、サポートされる各言語の強調表示を設定したり、コード折りたたみ設定を編集したり、コード補完ポリシーを変更するなど、エディターの動作のあらゆる面を調整することもできます。エディターの機能をカスタマイズするには、Ctrl+Alt+S を押し、設定/環境設定ダイアログで、エディターの該当するページを選択します。
キーマップ
WebStormはキーボード中心のIDEです。つまり、その中のほとんどすべてのアクションはキーボードショートカットにマッピングされています。WebStormにはデフォルトのキーマップが付属していますが、キーボードショートカットの設定の説明に従って習慣に合わせていつでも変更できます。Ctrl+Alt+S を押して外観および振る舞いのキーマップを選択します。
関連ページ:

WebStormのライセンス購入と登録
WebStormは最大30日間評価できます。その後、ライセンスを購入して登録する必要があります。早期アクセス・プログラムの一部であるWebStormのプレリリースビルドは登録を必要とせず、30日間のライセンスで提供されます。次のいずれかを実行してライセンス認証ダイアログを開きます。ようこそ画面で、を...

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

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

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

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

ユーザーインターフェースの概要
WebStormでプロジェクトを開くと、デフォルトのユーザーインターフェースは次のようになります。プラグインのセットと構成設定によっては、IDEの外観と動作が異なる場合があります。エディター:フォーカス:エディターを使用してコードを読み書きします。詳しくは、エディターの基本を参照してください。ナビゲ...