WebStorm 2024.1 ヘルプ

React

React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイト(英語)からライブラリの詳細を参照してください。

WebStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。

始める前に

  1. お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。

  2. 設定 | プラグインページのインストール済みタブで、React および JavaScript デバッガーに必要なプラグインが有効になっていることを確認します。詳細については、「プラグインのマッピング」を参照してください。

新しい React アプリケーションを作成する

新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、create-react-app(英語) パッケージです。これは、WebStorm が npx(英語) を使用してダウンロードして実行します。その結果、開発環境は webpack、Babel、ESLint、その他のツールを使用するように事前構成されています。

もちろん、Create React App を自分でダウンロードすることも、空の WebStorm プロジェクトを作成して React をインストールすることもできます。

create-react-app を使用して React アプリケーションを生成する

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

  2. 左側のペインで、React を選択します。

  3. 右側のペインで:

    1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

    2. Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

    3. create-react-app リストから、npx create-react-app を選択します。

      または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12npm install --g create-react-app を実行して、create-react-app パッケージを自分でインストールします。アプリケーションを作成するときに、create-react-app パッケージが保存されているフォルダーを選択します。

    4. オプション:

      JSX の代わりに TSX を使用するには、TypeScript プロジェクトの作成チェックボックスを選択します。WebStorm は、アプリケーション用の .tsx ファイルと tsconfig.json 構成ファイルを生成します。

  4. 作成をクリックすると、WebStorm は、必要なすべての構成ファイルを含む React -specific プロジェクトを生成し、必要な依存関係をダウンロードします。WebStorm は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。

空の WebStorm プロジェクトに React をインストールする

この場合、以下の React アプリケーションの構築の説明に従ってビルドパイプラインを自分で設定する必要があります。React オフィシャル Web サイト(英語)からプロジェクトに React を追加する方法の詳細を参照してください。

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

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

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

空のプロジェクトに React をインストールする

  1. React を使用する空のプロジェクトを開きます。

  2. 埋め込まれたターミナルAlt+F12)で、次のように入力します。

    npm install --save react react-dom

既存の React アプリケーションから始めます

既存の React アプリケーションの開発を継続するには、WebStorm で開き、必要な依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

  • ウェルカム画面で開くをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースをチェックアウト

  1. ウェルカム画面で VCS から取得をクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクトGit | クローンVCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

依存関係をダウンロードする

  • ポップアップで 'npm install' の実行または実行 'yarn install' をクリックします。

    Open an application and download the dependencies

    npm(英語)Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。

  • あるいは、エディターまたはプロジェクトツールウィンドウの package.json のコンテキストメニューから 'npm install' の実行または実行 'yarn install' を選択します。

プロジェクトのセキュリティ

WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

Untrusted project warning

次のいずれかのオプションを選択します。

  • セーフモードでプレビュー : この場合、WebStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    WebStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼リンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、WebStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての WebStorm 機能が使用可能になることを意味します。

  • 開かない : この場合、WebStorm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

コード補完

WebStorm は、React API にコード補完を提供し、JavaScript コードに JSX(英語) を提供します。コード補完は、React メソッド、React 固有の属性、HTML タグとコンポーネント名、React イベント(英語)、コンポーネントプロパティなどに対して機能します。React オフィシャル Web サイト(英語)から詳細を参照してください。

React メソッドのコード補完と React 固有の属性を取得するには、プロジェクトのどこかに react.js ライブラリファイルが必要です。通常、ライブラリはすでに node_modules フォルダーにあります。

完全な React メソッド、属性、イベント

デフォルトでは、入力時にコード補完ポップアップが自動的に表示されます。例:

Completion popup

JSX タグでは、WebStorm は classNameclassID などの React 固有の属性(英語)、および keyref などの非 DOM 属性(英語)のコーディング支援を提供します。さらに、自動補完は、プロジェクトの CSS ファイルで定義されているクラスの名前に対しても機能します。

Completion for CSS class names

onClickonChange などのすべての React イベント(英語)は、波括弧 ={} または引用符 "" と一緒に自動的に補完することもできます。

Complete React events

デフォルトでは、波括弧が挿入されます。WebStorm で常に引用符を追加することも、TypeScript 定義ファイル (d.ts)(英語) の型に基づいて引用符または中括弧のどちらかを選択することもできます。デフォルト設定を変更するには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | コードスタイル | HTML に移動して、JSX 属性の追加リストから該当するオプションを選択します。

Add for JSX attributes

また、波括弧内の JavaScript 式の補完も可能です。これは、定義したすべてのメソッドと関数に適用されます。

Completing JavaScript expressions inside curly braces

完全な HTML タグとコンポーネント名

WebStorm は、JavaScript や他のコンポーネントのメソッドの内部で定義した HTML タグとコンポーネント名に対してコード補完を提供します。

Completion for HTML tags and component names

補完は、ES6 形式の構文を持つインポートされたコンポーネントに対しても機能します。

Completion for imported components with ES6 syntax

完全なコンポーネントプロパティ

WebStorm は、propTypes を使用して定義されたコンポーネントプロパティに対してコード補完を提供し、それらの定義を迅速に移動またはプレビューできるように解決します。

Completion for component properties

コンポーネントの名前を自動補完すると、WebStorm は必要なすべてのプロパティを自動的に追加します。必要なプロパティの一部がコンポーネントの使用に欠落している場合、WebStorm はそのことについて警告します。

HTML 属性を JSX に転送する

クラス属性またはイベント時ハンドラーを含む HTML コードをコピーして JSX に貼り付けると、WebStorm はこれらの属性を React 固有のものに自動的に置き換えます。( classNameonClickonChange など)

Transfer HTML to JSX

これは TSX でも機能します。

Transfer HTML to TSX

貼り付けたコードフラグメントに 1 つのタグが含まれている場合、WebStorm はその末尾にスラッシュ / を自動的に追加します。

Transfer HTML to JSX: close single tags

HTML コードをそのまま JSX または TSX にコピーするには、そのまま貼り付け Ctrl+Alt+Shift+V を使用するか、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | 一般 | スマートキー | JavaScript の設定ページに移動して、JSX ファイルに貼り付ける場合に HTML を変換 (属性の変換、単一のタグを閉じる) チェックボックスをオフにします。

React コードスニペット

WebStorm には、React フック(英語)などの React アプリでよく使用されるさまざまなステートメントやコードブロックに展開される 50 を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjc 省略形を使用して、新しい React コンポーネントを定義するクラスを作成する方法を示しています。

Live template for a React component

スニペットから React コード構成を作成する

  • 必要な省略形をエディターに入力し、Tab を押します。

  • Ctrl+J を押して、関連するスニペットを選択します。検索を絞り込むには、略語の入力を開始し、補完リストから選択します。

詳細は、ライブテンプレートを参照してください。

使用可能なすべての React スニペットのリストを表示する

  • 設定ダイアログ (Ctrl+Alt+S) で、エディターライブテンプレートをクリックし、React ノードまたは React hooks ノードを展開します。

    Live templates: React and React hooks

JSX の Emmet

WebStorm では、HTML だけでなく、特別な React twists を利用して JSX コードでも Emmet(英語) を使用できます。例: 略語 div.my-class は JSX では <div className=” my-class"></div> に展開されますが、HTML のように <div class=” my-class"></div> には展開されません。

Expand Emmet template in React

React アプリケーションを移動する

基本的なナビゲーションに加えて、WebStorm は React 固有のコード要素間を移動できます。

  • 波括弧 {} 内のメソッドまたは JavaScript 式の宣言に移動するには、メソッドまたは式を選択して Ctrl+B を押します。

    コンポーネントの宣言に移動するには、コンポーネント名を選択して Ctrl+B を押します。

  • コンポーネント定義を表示するには、Ctrl+Shift+I を押します。定義と型定義の詳細を参照してください。

    View quick definition of a component in a popup
  • コンポーネントの簡単なドキュメントを表示するには、Ctrl+Q を押します。JavaScript ドキュメントの検索の詳細を参照してください。

    Quick documentation popup for React component
  • WebStorm を使用すると、エディターのパンくずリストと、エディターのガターにあるタグツリーのカラフルなハイライト表示を使用して、JSX タグ間を簡単に移動できます。

    Highlighting and breadcrumbs for JSX tags in a React application

React アプリケーションをリントする

JavaScript および HTML 用のすべての WebStorm 組み込みコードインスペクションは、JSX コードでも機能します。WebStorm は、未使用の変数や関数、終了タグの欠落、ステートメントの欠落などの場合に警告を発します。

JavaSxript inspections in React application

いくつかのインスペクションのために WebStorm はクイックフィックスを提供します。たとえば、欠落しているメソッドを追加することを提案します。クイックフィックスポップアップを表示するには、Alt+Enter を押します。

インスペクションのリストをカスタマイズするには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | メニューに移動します。インスペクションを無効にし、重大度レベルを表示したくない、変更したくないインスペクションを無効にします。詳細については、インスペクションの無効化と有効化およびインスペクションの重大度を変更するを参照してください。

ESLint

組み込みコードインスペクションを提供することに加えて、WebStorm は、JSX コード用の ESLint(英語) などのリンターとも統合されます。ESLint は、プラグインで拡張できるさまざまな lint ルールを提供します。WebStorm は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint を使用すると、JavaScript 標準スタイル(英語)を使用したり、TypeScript コードをリントしたりすることもできます。

詳細は、ESLint を参照してください。

ESLint に React JSX 構文を正しく理解させるには、eslint-plugin-react(英語) が必要です。このプラグインでは、表示名が React コンポーネントに設定されていない場合や、危険な JSX プロパティが使用されている場合など、警告が表示されます。

ESLint with React: errors and warnings are highlighted, the description of a problem is shown in a tooltip.

React プロジェクトに ESLint をインストールして構成する

  1. 組み込みターミナル表示 | ツールウィンドウ | ターミナル)で、次のように入力します。

    npm install --save-dev eslint npm install --save-dev eslint-plugin-react
  2. ESLint 構成ファイル .eslintrc.* をプロジェクトに追加します。これは、.eslintrc.eslintrc.json.eslintrc.yaml ファイル、または別のサポートされている形式のファイルです。詳細については、ESLint 公式 Web サイト(英語)を参照してください。

  3. 設定ダイアログ (Ctrl+Alt+S) で、言語 & フレームワーク | JavaScript | コード品質ツール | ESLint に移動し、自動 ESLint 構成を選択します。WebStorm は、プロジェクト node_modules フォルダー内の ESLint を自動的に見つけて、.eslintrc.* ファイルまたは package.jsoneslintConfig プロパティからのデフォルト構成を使用します。

    または、手動 ESLint 構成を選択して、カスタム ESLint パッケージと構成を使用します。

    詳細は WebStorm での ESLint のアクティブ化と構成を参照してください。

.eslintrc 構造体の例 (react プラグイン付き ESLint 1.x)

  1. ecmaFeatures オブジェクトに "jsx" = true を追加します。ここでは、ES6 クラスやモジュールなど、使用したい追加の言語機能を指定することもできます。

  2. plugins オブジェクトに、react を追加します。

  3. rules オブジェクトでは、有効にしたい ESLint ビルトインルール(英語)と、react プラグインを介して利用可能なルール(英語)を一覧表示できます。

    { "parser": "babel-eslint", "env": { "browser": true, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }], "react/jsx-props-no-spreading": "off", "react/jsx-sort-props": ["error", { "reservedFirst": ["key"] }], "react/require-default-props": "off", "react/sort-prop-types": "error", "react/state-in-constructor": ["error", "never"], "semi-spacing": "warn" }, "overrides": [ { "files": [ "sample/**", "test/**" ], "rules": { "import/no-unresolved": "off" } } ] }

ESLint 公式 Web サイト(英語)から ESLint および react プラグイン構成の詳細を学びましょう。

React アプリケーションでのコードリファクタリング

一般的な WebStorm リファクタリングに加えて、React アプリケーションでは、React コンポーネントに対して名前変更を実行し、コンポーネントの抽出を使用して新しいコンポーネントを作成することもできます。

コンポーネントの名前を変更する

以下は、1 つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。

Rename component used in one file

同じ方法で、1 つのファイルで定義されたコンポーネントの名前を変更し、名前付きエクスポートを使用して別のファイルにインポートすることもできます。

Rename a component defined in another file and imported through a named import
  1. コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、コンテキストメニューからリファクタリング | 名前の変更を選択します。

  2. React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。

状態値の名前を変更する

状態値の名前を変更すると、WebStorm は、対応する setter(React useState フック(英語)でこの状態値を更新する関数)の名前を変更することを提案します。

Renaming a state value and the corresponding setter
  1. 状態値の名前の中にキャレットを置き、Shift+F6 を押すか、コンテキストメニューからのメインメニューからリファクタリング | 名前の変更を選択します。

  2. 新しい値の名前を指定して、Enter を押します。フォーカスは setter に移動し、そこで値の新しい名前が提案されます。Enter を押して、提案を受け入れます。

コンポーネントを抽出する

既存のコンポーネントの render メソッドから JSX コードを抽出することで、新しい React コンポーネントを作成できます。新しいコンポーネントは関数またはクラスとして定義できます。React 公式 Web サイトの関数とクラスのコンポーネント(英語)を参照してください。

Extract a React component
  1. 抽出するコードを選択し、コンテキストメニューからリファクタリング | コンポーネントの抽出を選択します。

    あるいは、メインメニューでリファクタリング | 抽出 / 導入 | コンポーネントの抽出に移動するか、Ctrl+Alt+Shift+T を押してポップアップからコンポーネントの抽出を選択します。

  2. 開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。

  3. OK をクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。

  4. オプション : シンボルの移動リファクタリングを使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。

  5. オプション : WebStorm が新しいコンポーネントに使用するコードテンプレートを変更します。設定ダイアログ (Ctrl+Alt+S) で、エディター | ファイルおよびコードテンプレートに移動し、コードタブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。

関数をクラスコンポーネントに変換する

クラスコンポーネントに変換リファクタリングを使用すると、WebStorm は変換する関数の名前を持つ ES6 クラスを生成します。このクラスは React .Component を拡張し、関数本体が移動される render() メソッドを含みます。React オフィシャル Web サイト(英語)の詳細を参照してください。

Convert a function to a class component
  • 変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューからリファクタリング | クラスコンポーネントに変換を選択します。

  • または、Ctrl+Alt+Shift+T を押して、ポップアップからクラスコンポーネントに変換を選択します。

クラスを機能コンポーネントに変換する

関数コンポーネントに変換リファクタリングを使用すると、WebStorm は変換するクラスの名前で関数を生成し、render() メソッドの内容を関数本体に移動します。

Convert a class to a functional component
  • 変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューからリファクタリング | 関数コンポーネントに変換を選択します。

  • または、Ctrl+Alt+Shift+T を押して、ポップアップから関数コンポーネントに変換を選択します。

React アプリケーションでの破壊

構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要があるときによく使用されます。

React クラスコンポーネントを使用する場合は、オブジェクト / 配列の破壊を導入するインテンションアクションの使用を検討してください。JavaScript での構造化の詳細を参照してください。

Destructuring with intention action: Introduce object destructuring in a React class

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

  1. package.jsonstart スクリプトの横にあるガターで the Run icon をクリックするか、ターミナル Alt+F12npm run start を実行するか、npm ツールウィンドウ ( 表示 | ツールウィンドウ | npm) で start タスクをダブルクリックします。

    Run a React app in the development mode from package.json
  2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。アプリケーションが create-react-app で生成された場合、デフォルトの URL は http://localhost:3000/ です。このリンクをクリックすると、アプリケーションが表示されます。

    React app is running

実行 / デバッグ構成を介して React アプリケーションを実行する

上記のように、WebStorm 新しいプロジェクトウィザードで create-react-app を使用して作成されたアプリケーションの場合、WebStorm は、デフォルト名 npm startnpm 構成を生成します。この構成は、開発サーバーを起動し、開発モードでアプリケーションを起動する react-scripts start コマンドを実行します。

それ以外の場合は、ホスト、ポートなどの実際の設定を手動で実行 / デバッグ構成を作成するする必要があります。

npm 実行 / デバッグ構成を作成する

  1. 実行 | 実行構成の編集に進みます。あるいは、ツールバーのリストから実行構成の編集を選択します。

    Open the Edit Configurations dialog

    開いた実行構成の編集ダイアログで、ツールバーの追加ボタン (the Add button) をクリックし、リストから npm を選択します。

  2. 開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。

    コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの start スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。

    npm run/debug configuration
  3. オプション:

    ブラウザーでアプリケーションを開くには、次のように構成を更新します。ブラウザー / Live Edit タブで、起動後チェックボックスをオンにし、アプリケーションを開くブラウザーを選択して、アプリケーションが実行される URL アドレスを指定します。

    アプリケーションをデバッグする場合は、Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択します。

    Browser / Live Edit tab: select browser

アプリケーションの実行

  1. ツールバーのリストから npm start run 構成を選択し、その横にある Run をクリックします。

    Run a React app in the development mode via a run/debug configuration
  2. アプリケーションがコンパイルされ、開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。このリンクをクリックすると、アプリケーションが表示されます。

    React app is running

    または、上記のように、 WebStorm が起動時にアプリケーションを開くようにします。

React アプリケーションをデバッグする

デバッグセッションは、実行 / デバッグ構成を起動するから開始することも、開発モードでアプリケーションが実行されている URL を表示する実行ツールウィンドウから開始することもできます。

実行 / デバッグ構成を介してデバッグを開始する

React アプリケーションをデバッグするには、2 つの実行 / デバッグ構成が必要です。

  • 上記のように、開発モードでアプリケーションを起動するための npm 構成。

  • 開発モードで実行されているアプリケーションにデバッガーを接続するための JavaScript デバッグ構成。

npm 実行 / デバッグ構成を使用して React アプリケーションを実行およびデバッグするに従って、npm 構成内に JavaScript デバッグ構成を作成して、一度に起動することができます。

または、JavaScript デバッグ実行 / デバッグ構成でデバッグを開始するに従って、npmJavaScript デバッグの実行 / デバッグ構成を個別に作成して起動します。

単一の npm 実行 / デバッグ構成で React アプリケーションを実行およびデバッグする

  1. コードにブレークポイントを設定します。

  2. 上記の説明に従って npm 構成を作成します。

    create-react-app を使用してアプリケーションを生成した場合、WebStorm は npm start というデフォルト名の npm 構成をすでに作成しています。この構成は、実行ウィジェットおよび実行 / デバッグ構成ダイアログから利用できます。

    Autogenerated npm run/debug configuration
  3. 開いた実行 / デバッグ構成: npm ダイアログの構成タブで、使用する package.json の場所、Node.js インタープリター、およびパッケージマネージャーを指定します。

    コマンドフィールドで、リストから実行を選択し、次にスクリプトリストから実行するスクリプトを選択します。ほとんどの場合、デフォルトの start スクリプトになりますが、カスタムポートでアプリケーションを実行するなど、package.json で別のスクリプトを構成することもできます。

    npm run/debug configuration
  4. ブラウザー / Live Edit タブで、起動後チェックボックスを選択し、リストから Google Chrome(英語) または別の Chromium ベースのブラウザー(英語)を選択し、JavaScript デバッガーを使用するチェックボックスを選択して、アプリケーションを実行する URL を指定します。

    npm configuration, Browser tab
  5. 実行をクリックします。

    構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある Run をクリックします。

    WebStorm はアプリケーションを開発モードで実行し、同時にデバッグセッションを起動します。

    Debugging session
  6. 最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します

JavaScript デバッグ実行 / デバッグ構成でデバッグを開始する

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL をコピーして、後で JavaScript デバッグ構成で指定します

    Application is running in the development mode
  3. JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 実行構成の編集に移動し、the Add icon をクリックして、リストから JavaScript デバッグを選択します。

  4. 開いた実行 / デバッグ構成: JavaScript デバッグダイアログで、構成の名前と、開発モードでアプリケーションが実行されている URL アドレスを指定します。この URL は、上記のように、実行ツールウィンドウまたはターミナルにコピーできます。

    Create a JavaScript Debug configuration: specify the URL
  5. デバッグをクリックします。

    構成を再実行するには、実行ウィジェットのリストから構成を選択し、その横にある Debug をクリックします。

    Run a JavaScript Debug configuration from the Run widget
  6. 最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します

実行ツールウィンドウまたは組み込みのターミナルからデバッグを開始する

アプリケーションが localhost の開発モードで実行されている場合、特に create-react-app で生成された場合は、> 実行ツールウィンドウまたは組み込みのターミナルから直接デバッグセッションを開始できます。

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

  3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。Ctrl+Shift を押したまま、この URL リンクをクリックします。WebStorm は、タイプ JavaScript デバッグの自動生成された 構成でデバッグセッションを開始します。

    Start debugging a React app from the Run tool window

最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します

React アプリケーションを構築する

既存の WebStorm プロジェクトに React をインストールした場合は、ビルドプロセスを設定する必要があります。React オフィシャル Web サイト(英語)から React アプリケーションのビルドパイプラインを構成するさまざまな方法について説明します。

React アプリケーションをテストする

React アプリケーション create-react-app で作成Jest テスト(英語)を実行およびデバッグできます。始める前に、react-scripts パッケージが package.json依存関係オブジェクトに追加されていることを確認してください。

Jest テストは、エディター、プロジェクトツールウィンドウ、または実行 / デバッグ構成から直接実行およびデバッグできます。詳細については、「Jest」を参照してください。

エディターからテストを実行する

  • ガターで the Run icon または the Rerun icon をクリックし、リストから実行 <テスト名> を選択します。

    Run single test from the editor

    ガターのテストステータスアイコン Test passed および Test failed により、エディターでテストが成功したか失敗したかを確認することもできます。

Jest 実行 / デバッグ構成を作成する

  1. 実行 / デバッグ構成ダイアログ (メインメニューの実行 | 実行構成の編集 ) を開き、左側のペインで the Add button をクリックし、リストから Jest を選択します。「実行 / デバッグ構成: Jest」ダイアログが開きます。

  2. 使用するノードインタープリターとアプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにはプロジェクトのルートフォルダーが表示されます。この定義済みの設定を変更するには、目的のフォルダーへのパスを指定します。

  3. Jest パッケージフィールドに、react-scripts パッケージへのパスを指定します。

  4. Jest オプションフィールドに --env=jsdom と入力します。

    Testing React: Jest run configuration

テストの実行

  1. 構成のリストから Jest 実行 / デバッグ構成を選択し、リストまたはツールバーの the Run icon をクリックします。

    Select run/debug configuration
  2. 実行ツールウィンドウのテストランナータブで、テストの実行を監視し、テスト結果を分析します。詳細については、テスト結果を調べるを参照してください。

デバッグテスト

  1. メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、右側の the Debug button をクリックします。

  2. 開いたデバッグツールウィンドウでは、通常通りに進めます。テストをステップ実行、テスト実行の停止・再開中断中のテストを調査コンソールで JavaScript のコードスニペットを実行する、などです。

既知の制限

デバッグセッション中にアプリケーションを初めて開くと、ページの読み込み時に実行されるコード内のブレークポイントの一部にヒットしない場合があります。その理由は、元のソースコードのブレークポイントで停止するには、WebStorm がブラウザーからソースマップを取得する必要があるためです。ただし、ブラウザーがこれらのソースマップを渡すことができるのは、ページが少なくとも 1 回完全にロードされた後でのみです。回避策として、ブラウザーでページを自分で再ロードします。

プロジェクト内で複数のフレームワークを使用する

場合によっては、1 つの React プロジェクト内で他のフレームワークを使用する必要があることがあります。

各ファイルでコンテキスト認識コーディング支援を受けるには、構成ファイル .ws-context を作成し、各ファイルまたはフォルダーで使用するフレームワークを指定します。このファイルの設定は、デフォルトの構成を上書きします。

  1. プロジェクトルートで、コンテキストメニューから新規 | ファイルを選択し、ファイル名として .ws-context を指定します。

  2. .ws-context では、次の 2 種類のプロパティを使用します。

    • コンテキスト値文字列を持つ <context-name>

    • コンテキスト詳細オブジェクトを持つ GLOB パターン

  3. 次のコンテキスト値を使用します。

    • framework : vueangularreactsvelteastro

    • angular-template-syntax : V_2 , V_17

    • nextjs-project : nextjs

    • astro-project : astro

    • vue-store : vuex , pinia

    • vue-class-component-library : vue-class-componentvue -property-decoratorvue-facing-decorator

    • jsdoc-dialect : jsdoc-typescript , jsdoc-closure

  4. 簡単にするためにパスのネストを使用します。

    • GLOB パスの最後のセグメントはファイル名パターンであり、* ワイルドカードのみがサポートされます。

    • 最後のセグメントが ** の場合、ネストされたすべてのディレクトリとファイルと一致します。

    • 最上位レベルのコンテキストプロパティには /** パターンが必要です。

  5. 複数のパターンが同じファイル名に一致する場合、曖昧さを解消するために次のルールが使用されます。

    • ** セグメントを除いて、パスセグメント数が最大となるパターンを選択します。

    • 純粋なファイル名パターンであるパターンを選択します。つまり、** または / で終わらないパターンを選択します。

    • 最初に定義されたパターンを選択します。

サンプル

さまざまなフォルダーで使用されている多数のフレームワークを含むプロジェクトがあるとします。

A project with different frameworks

プロジェクト内の各ファイルに対してコンテキスト認識型の支援を受けるには、次のコードを .ws-context に追加します。

{ "framework": "vue", "angular-template-syntax": "V_2", "src/**/app/**": { "framework": null, "app.component.html" : { "framework": "angular", "angular-template-syntax": "V_17" } }, "src/**/p*-editor/*.html" : { "framework" : "angular" } }

関連ページ:

プラグインのインストール

プラグインは WebStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。デフォルトでは、WebStorm には多数のプラグインがバンドルされています。バンドルされたプラグインを無効にするこ...

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。ロケーションフィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジ...

GitHub でホストされているプロジェクトを管理する

プロジェクトをチェックアウトする (クローン):WebStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...

npm、pnpm、Yarn

WebStorm は npm、pnpm、Yarn、Yarn 2、Yarn 3 と統合されているため、組み込みのターミナルで、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析してスクリプトの定義を認識し、スクリプトをツリービューに表示して、ツリー内のスクリプトと package.json ファイル内のその定...

プロジェクトのセキュリティ

潜在的なセキュリティリスクを防ぐために、WebStorm では、プロジェクトのソースがわからない場合に、プロジェクトの操作方法を決定できます。WebStorm は、実行されるタスク、ファイルウォッチャー、webpack 構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く:WebStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、WebStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログ...

プロジェクトを作成

WebStorm では、空のプロジェクトを作成したり、プロジェクトとしてフォルダーを開いたり、VCS からソースをチェックアウトしたり、プロジェクトを作成することができます。また、フレームワークテンプレートを使用してプロジェクトを生成することもできます。そのため、新しいアプリケーションは、必要なすべてのパッケージと構成ですでにブートストラップされています。WebStorm はまたあらゆるプロジェクトの設定、ファイルおよびホールダーを保存し、新しいプロジェクトを作成するときテンプレートとして使用す...