WebStorm 2021.1 ヘルプ

WebStorm 入門

WebStorm は、JavaScript と、TypeScriptReactVueAngularNode.jsHTMLスタイルシートを含む関連テクノロジでコーディングするための統合開発環境です。IntelliJ IDEA や他の JetBrains IDE と同様に、WebStorm は開発体験をより楽しくし、日常業務を自動化し、複雑なタスクを簡単に処理できるようにします。

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

WebStorm のプロジェクトは、編集するソースコード、使用するライブラリとツール(たとえば、node_modules サブフォルダー)、およびさまざまなアプリ構成ファイル(たとえば、package.json または .eslintrc)を含むフォルダーです。

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

WebStorm ウェルカム画面からプロジェクトを開き、チェックアウトし、作成できます。

Open, check out, and create projects from the Welcome screen

プロジェクトを開くには

  • ウェルカム画面で、開くをクリックし、開いたダイアログでアプリケーションのあるフォルダーを選択します。

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

  1. ウェルカム画面で VCS から取得をクリックするか、メインメニューから VCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

空の WebStorm プロジェクトを作成するには

  1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

テンプレートからプロジェクトを生成することもできます。詳しくは、フレームワーク固有のプロジェクトの生成を参照してください。

プロジェクトに新しいファイルを作成するには

  • プロジェクトツールウィンドウでは、新しいファイルを作成するフォルダーを選択し、Alt+Insert を押します。

  • または、選択したコンテキストメニューから新規を選択してから、リストからファイルの種類を選択します。

    ws_getting_started_create_new_file.png

詳細はファイルとディレクトリの作成を参照してください。

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

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

ユーザーインターフェースの概要エディターの基本ツールウィンドウの詳細を参照してください。

WebStorm main window

WebStorm のレイアウトは自由に整理できます。例: 自分のコードを書くことに集中したいなら、集中モードを試してください。すべてのツールバー、ツールウィンドウ、エディタータブが削除されるため、空き容量が増えます。このモードに切り替えるには、メインメニューから表示 | 外観 | 集中モードの開始を選択します。

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

ツールウィンドウが非表示になっているときは、ショートカットを使用してそれらのウィンドウにアクセスできます。入力フォーカスはツールウィンドウに移動し、そのコンテキスト内で任意のキーボードコマンドを使用できます。エディターに戻るには、Escape を押すだけです。ツールウィンドウが表示されているときにショートカットを押すと、そのウィンドウにフォーカスが移動するだけです。

以下は、最も頻繁に必要となるツールウィンドウを呼び出すショートカットのリストです:

ツールウィンドウ ショートカット
プロジェクト Alt+1
バージョン管理 Alt+9
実行 Alt+4
デバッグ Alt+5
ターミナル Alt+F12
エディター Escape

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

Nafigation bar

RightRightUpDown キーを使用して、フォルダー間を移動し、その内容を表示します。

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

Speed search in tool windows

探索の方法

WebStorm には、どのようなコードが複雑になっていても、コードを検索するのに役立つ検索機能とナビゲーション機能が付属しています。詳細はソースコードナビゲーションを参照してください。

プロジェクトで特定のシンボルが使用されている場所を見つけるために、WebStorm は使用箇所の検索 Alt+F7 を介したフルスケール検索を提案しています。

Find usages

プロジェクトシンボルを名前で検索する

クラス Ctrl+Nファイル Ctrl+Shift+N、またはシンボル Ctrl+Alt+Shift+N に名前でナビゲートできます。どこでも検索を参照してください。

テキスト断片を検索する

  • 現在のファイルでテキスト断片を見つけるには、Ctrl+F を押して検索パターンを入力します。

  • ディレクトリ、任意の範囲またはプロジェクト全体を検索するには、Ctrl+Shift+F を押して検索パターンと範囲を指定します。

シンボルの宣言にジャンプ

宣言に移動Ctrl+BCtrl+Click は、特定のシンボルが最初に宣言された場所に移動します。このタイプのナビゲーションは、ソースコードの任意の場所から機能します。

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

WebStorm は、ローカル履歴でソースコードに加えた変更、リファクタリングの結果などを自動的に追跡します。ファイルまたはフォルダーを表示するには、メインメニューから VCS | ローカル履歴 | 履歴の表示を選択します。ここで、変更を確認したり、the Rollback icon を元に戻したり、パッチ the Create Patch icon を作成したりできます。

Local History

ローカル履歴の詳細を参照してください。

コードを完成させる

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

Code completion

より多くのバリアントを表示するには、もう一度 Ctrl+Space を押します。

デフォルトでは、JavaScript ファイルと TypeScript ファイルの補完候補は、機械学習アルゴリズムに基づいて関連性によって並べ替えられます。この並べ替えをオフにするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | コード補完に移動して、Machine Learning に基づいてコード補完の候補を並び替えるチェックボックスをオフにします。機械学習に基づいて提案を並べ替えるから詳細を参照してください。

コード補完の詳細を参照してください。

コードをオンザフライでインスペクションして修正する

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

import ステートメントを忘れましたか? WebStorm は、シンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。

Autoimport with quick-fix: information tooltip

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

Autoimport with quick-fix: suggestion list

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

Add ES6 imports on code completion

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

コードインスペクション結果の取得と問題の解決の詳細を参照してください。

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

リファクタリング(英語)とは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry(英語) に保ち、保守を容易にできます。WebStorm は、プロジェクト全体にスマートに変更が加えられるため、コードのリファクタリング後も以前と同じように機能することを保証します。例: クラスの名前を変更すると、WebStorm はすべての使用箇所とインポートステートメントの名前を自動的に変更します。

Rename refactoring for classes: renaming the file accordingly

詳細は、コードリファクタリングJavaScript のリファクタリングTypeScript のリファクタリングを参照してください。

  1. エディターまたはプロジェクトツールウィンドウで、リファクタリングする式またはシンボルを選択し、Ctrl+Alt+Shift+T を押します

  2. リファクタリングリストから、必要なリファクタリングを選択してください。

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

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

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

  • アプリに合ったタイプの実行構成を作成し、Run をクリックしてください。

  • 場合によっては、実行構成を作成せずにアプリケーションやファイルを実行することもできます。WebStorm はこれを実行できます。例: Node でファイルを実行するには、コンテキストメニューで <ファイル名> を実行を選択するか、Ctrl+Shift+F10 を押してください。これは HTML ファイルでも機能し、WebStorm はブラウザーでそのファイルを開きます。

  • プロジェクトに開発モードでアプリケーションを起動する npm スクリプトがある場合は、プロジェクト内の package.json をエディターで開き、start タスクの隣にあるガターの中の Run をクリックし、リストから実行 'start' を選択します。

    Getting started: running an application

詳細は、アプリケーションを実行するブラウザーで JavaScript を実行するnpm スクリプトの実行とデバッグを参照してください。

デバッグを開始するには

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

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

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

  3. メインメニューから実行 | 構成の編集を選択し、ツールバーの the Add button をクリックしてリストから JavaScript デバッグを選択します。

    表示される実行 / デバッグ構成: JavaScript デバッグダイアログで、アプリケーションが実行されている URL アドレスを指定します。この URL は、上記のステップ 2 に従って、ブラウザーのアドレスバーからコピーできます。

  4. ツールバーの実行 / デバッグ構成を選択リストから新しく作成した構成を選択し、the Debug button をクリックします。

    または、Ctrl+Shift を押しながら、実行ツールウィンドウのアプリケーション URL リンクをクリックします。

    実行構成で指定された URL アドレスがブラウザーで開き、デバッグツールウィンドウが表示されます。

  5. デバッグツールウィンドウで、通常どおりに続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し中断時に調べ、実際の HTML DOM を表示し、コンソールで JavaScript コードスニペットを実行します。

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バージョン管理ページに移動します。

VCS メニューは、使用可能なコマンドに関する手がかりを提供します。コミットツールウィンドウ Alt+0 では、あなたのチームメイトが行った変更の表示と追跡、変更リストの作成、変更のコミットとプッシュなどを行うことができます。

コミット、プッシュ、履歴の表示などの最も使用される操作は、VCS 操作ポップアップ Alt+` からも利用できます。

詳細については、バージョン管理を参照してください。

環境をカスタマイズする

WebStorm を自由に調整して、ニーズに完全に適合し、できるだけ便利で快適になるようにしてください。

外観

最初に微調整することは、一般的な「ルックアンドフィール」です。デフォルトの WebStorm テーマは明るいです。より暗い環境が必要な場合は、設定 / 環境設定ダイアログ Ctrl+Alt+S で、外観および振る舞い外観をクリックして、Darcula を選択します。

エディター

Drag'n' Drop を有効または無効にしたり、エディタータブの動作をカスタマイズしたり、サポートされる各言語のハイライトを設定したり、コード折りたたみ設定を編集したり、コード補完ポリシーを変更するなど、エディターの動作のあらゆる面を調整することもできます。エディターの機能をカスタマイズするには、Ctrl+Alt+S を押し、設定 / 環境設定ダイアログで、エディターの該当するページを選択します。

キーマップ

WebStorm はキーボード中心の IDE です。つまり、その中のほとんどすべてのアクションがキーボードショートカットにマッピングされます。WebStorm にはデフォルトのキーマップが付属しています。キーボードショートカットを設定するに従って、習慣に合わせていつでも変更できます。Ctrl+Alt+S を押して、外観および振る舞いキーマップを選択するだけです。

関連ページ:

JavaScript | WebStorm

WebStorm を使用すると、JavaScript および Node.js を使用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。WebStorm は、React、Angular、Vue.js、その他のフレームワークもサポートし、Web 開発用のさまざまなツールとの緊密な統合を提供します。JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィック...

TypeScript | WebStorm

WebStorm は、TypeScript ソースコードの開発、実行、デバッグをサポートしています。WebStorm は .ts および .tsx ファイルを認識し、追加の手順なしで編集するための幅広いコーディング支援を提供します。TypeScript ファイルはアイコンでマークされています。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で Type...

React | WebStorm

React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイトからライブラリの詳細を参照してください。WebStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。新しい React アプリケーションの作成:新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、create...

Node.js | WebStorm

Node.js は、ブラウザーの外部、たとえばサーバーやコマンドラインで JavaScript を実行するための軽量なランタイム環境です。WebStorm は Node.js と統合し、アプリケーションの構成、編集、実行、デバッグ、テスト、プロファイリング、メンテナンスを支援します。Node.js がアプリケーションのローカルランタイムとして、または npm パッケージの管理、JavaScript リンターの実行、ツールのビルド、フレームワークのテストなどにのみ必要な場合は、Node.js をインス...

HTML | WebStorm

CLion は、構文とエラーのハイライト、コードスタイルに従ったフォーマット、構造検証、コード補完、デバッグセッション中のオンザフライプレビュー(ライブ編集)またはコードエディターの専用プレビュータブを含む HTML の強力なサポートを提供します。HTML 仕様は、設定 / 環境設定の言語およびフレームワーク | スキーマと DTD ページのデフォルトの HTML 言語レベル設定で構成できます。デフォルトでは、W3C の HTML 5.0 仕様が想定されています。HTML ファイルを作成する:メ...

スタイルシート | WebStorm

WebStorm を使用すると、Sass、Less、SCSS、Stylus など、CSS およびそれにコンパイルされるさまざまな言語でスタイル定義を記述できます。スタイルシートのドキュメントの検索、ルールセットの作成と移動、変数の導入などもできます。コード補完:WebStorm は、プロパティ、その値、セレクタ、変数、ミックスインにコード補完を提供します。完全なスタイルシートクラス CSS、SCSS、Less、Sass のクラスと ID の補完は、HTML ファイル、さまざまな種類のテンプレート(A...