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 Welcome 画面からプロジェクトを開き、チェックアウトし、作成できます。

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

WebStorm のレイアウトは自由に整理できます。例:自分のコードを書くことに集中したいなら、集中モードを試してください。すべてのツールバー、ツールウィンドウ、エディタータブが削除されるため、空き容量が増えます。このモードに切り替えるには、メインメニューから を選択します。
集中モードの代替案は、Ctrl+Shift+F12 を押してすべてのツールウィンドウを隠すことです。このショートカットをもう一度押すと、レイアウトをデフォルトに戻すことができます。
ツールウィンドウが非表示になっているときは、ショートカットを使用してそれらのウィンドウにアクセスできます。入力フォーカスはツールウィンドウに移動し、そのコンテキスト内で任意のキーボードコマンドを使用できます。エディターに戻るには、Escape を押すだけです。ツールウィンドウが表示されているときにショートカットを押すと、そのウィンドウにフォーカスが移動するだけです。
以下は、最も頻繁に必要となるツールウィンドウを呼び出すショートカットのリストです:
ツールウィンドウ | ショートカット |
---|---|
プロジェクト | Alt+1 |
バージョン管理 | Alt+9 |
実行 | Alt+4 |
デバッグ | Alt+5 |
ターミナル | Alt+F12 |
エディター | Escape |
ナビゲーションバーは、プロジェクトツールウィンドウのコンパクトな代替品です。ナビゲーションバーにアクセスするには、Alt+Home を押します。

Right , Right , Up キーと Down キーを使用して、フォルダー間を移動してその内容を表示します。
ほとんどのツールウィンドウとポップアップで、WebStorm はスピード検索をサポートしています。スピード検索を使用すると、検索クエリを使用してリストをフィルターしたり、特定のアイテムに移動したりできます。

探索の方法
WebStorm には、どのようなコードが複雑になっていても、コードを検索するのに役立つ検索機能とナビゲーション機能が付属しています。詳細はソースコードナビゲーションを参照してください。
プロジェクトシンボルの使用箇所を見つける
プロジェクトで特定のシンボルが使用されている場所を見つけるために、WebStorm は使用箇所の検索 Alt+F7 を介したフルスケール検索を提案しています。

プロジェクトシンボルを名前で検索する
クラス Ctrl+N、ファイル Ctrl+Shift+N、またはシンボル Ctrl+Alt+Shift+N に名前でナビゲートできます。どこでも検索を参照してください。
テキスト断片を検索する
現在のファイルでテキスト断片を見つけるには、Ctrl+F を押して検索パターンを入力します。
ディレクトリ、任意の範囲またはプロジェクト全体を検索するには、Ctrl+Shift+F を押して検索パターンと範囲を指定します。
シンボルの宣言にジャンプ
宣言に移動(Ctrl+B , Ctrl+Click は、特定のシンボルが最初に宣言された場所に移動します。この型のナビゲーションは、ソースコードの任意の場所から機能します。
タイムラインをナビゲートする

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

より多くのバリアントを表示するには、もう一度 Ctrl+Space を押します。
コード補完の詳細を参照してください。
コードをオンザフライでインスペクションして修正する
WebStorm はあなたのコードを監視し、正確かつきれいに保ちます。潜在的なエラーと問題を検出し、その問題の迅速な修正を提案します。WebStorm は、未使用のコード、無限ループ、シンボルのインポートステートメントの欠落、およびおそらく注意が必要なその他多くのものを見つけるたびに、ハイライトとバルブを表示します。このバルブをクリックするか、Alt+Enter を押して修正を適用します。
import
ステートメントを忘れましたか? WebStorm は、シンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。

または、Alt+Enter を押して「インポート " お客様 "」を挿入をクリックします。

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

使用可能なインスペクションの完全なリストを表示するには、設定ダイアログ Ctrl+Alt+S で、エディターのインスペクションをクリックします。それらのいくつかを無効にしたり、他のものを有効にしたり、各インスペクションの重大度を調整したりできます。エラーと見なすか警告と見なすかを決定します。
コードインスペクションと結果の取得と問題の解決の詳細を参照してください。
コードをリファクタリングする
リファクタリング(英語)は、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dry(英語) を維持しやすくします。WebStorm は、リファクタリング後にコードが以前と同じように機能するようにします。変更はプロジェクト全体にスマートに行われるためです。例:クラスの名前を変更すると、WebStorm はすべての使用箇所とインポート文の名前を自動的に変更します。

詳細は、コードリファクタリング、JavaScript のリファクタリング、TypeScript のリファクタリングを参照してください。
エディターまたはプロジェクトツールウィンドウで、リファクタリングする式またはシンボルを選択し、Ctrl+Alt+Shift+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 に従って、ブラウザーのアドレスバーからコピーできます。
ツールバーの実行 / デバッグ構成を選択しますリストから新しく作成した構成を選択し、
をクリックします。
または、Ctrl+Shift を押しながら、実行ツールウィンドウのアプリケーション URL リンクをクリックします。
実行構成で指定された URL アドレスがブラウザーで開き、デバッグツールウィンドウが表示されます。
デバッグツールウィンドウで、通常どおりに進みます。プログラムをステップ実行し、プログラムの実行を停止して再開し、一時停止時に調べ、実際の HTMLDOM を表示します。
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+0 では、あなたのチームメイトが行った変更の表示と追跡、変更リストの作成、変更のコミットとプッシュなどを行うことができます。
メニューは、使用可能なコマンドに関する手がかりを提供します。コミット、プッシュ、履歴の表示などの最も使用される操作は、VCS 操作ポップアップ Alt+` からも利用できます。
詳細については、バージョン管理を参照してください。
環境をカスタマイズする
WebStorm を自由に調整して、ニーズに完全に適合し、できるだけ便利で快適になるようにしてください。
外観
最初に微調整することは、一般的な「ルックアンドフィール」です。デフォルトの WebStorm テーマは明るいです。より暗い環境が必要な場合は、設定 / 環境設定ダイアログ Ctrl+Alt+S で、外観および振る舞いの外観をクリックして、Darcula を選択します。
エディター
Drag'n' Drop を有効または無効にしたり、エディタータブの動作をカスタマイズしたり、サポートされる各言語のハイライトを設定したり、コード折りたたみ設定を編集したり、コード補完ポリシーを変更するなど、エディターの動作のあらゆる面を調整することもできます。エディターの機能をカスタマイズするには、Ctrl+Alt+S を押し、設定 / 環境設定ダイアログで、エディターの該当するページを選択します。
キーマップ
WebStorm はキーボード中心の IDE です。つまり、その中のほとんどすべてのアクションがキーボードショートカットにマッピングされます。WebStorm にはデフォルトのキーマップが付属しています。キーボードショートカットを設定するに従って、習慣に合わせていつでも変更できます。Ctrl+Alt+S を押して、外観および振る舞いでキーマップを選択するだけです。
関連ページ:

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

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

プロジェクトツールウィンドウ
プロジェクトツールウィンドウでは、様々な視点からプロジェクトを見て、新しいアイテム(ディレクトリ、ファイル、クラスなど)の作成、エディターでのファイルのオープン、必要なコードフラグメントへのナビゲートなど、様々なタスクを実行することができます。このツールウィンドウのほとんどの機能には、コンテンツペイ...

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

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

ユーザーインターフェースの概要
WebStorm でプロジェクトを開くと、デフォルトのユーザーインターフェースは次のようになります。プラグインのセットと構成設定によっては、IDE の外観と動作が異なる場合があります。エディター :フォーカス :エディターを使用して、ソースコードの読み取り、書き込み、探索を行います。アクションインジ...