WebStorm 2020.2ヘルプ

JavaScript

WebStormを使用すると、JavaScript およびNode.jsを使用して最新のWeb、モバイル、およびデスクトップアプリケーションを開発できます。

WebStormは、ReactAngularVue.js、およびその他のフレームワークもサポートし、Web開発用のさまざまなツールとの緊密な統合を提供します。

JavaScript対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完エラーと構文の強調表示、フォーマット、多数のコードインスペクションクイックフィックス、および一般的なJavaScript固有のリファクタリングが含まれます。WebStormは、JavaScript linterおよびFlow 型チェッカーとも統合されます。

WebStorm組み込みデバッガーを使用すると、クライアント側とサーバー側の両方のコードをデバッグでき、インタラクティブデバッガーコンソールでJavaScriptコードスニペットを実行することもできます。ChromeでのJavaScriptのデバッグの詳細を参照してください。

WebStormは、JestKarmaProtractorCucumber、およびMochaテストフレームワークと統合します。WebStormは、テストの実行とデバッグ、およびテストとサブジェクトの間、または失敗したテストと問題の原因となったコードのフラグメント間のナビゲーションをサポートします。

このページには、Webアプリケーションを作成してデバッグしてテストする方法を順を追って説明する短いスタートガイドが用意されています。

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

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

  2. 左側のペインで、空のプロジェクトを選択します。

  3. 右側のウィンドウで、プロジェクト関連のファイルが保存されるフォルダーのパスを指定します。作成をクリックします。

既存のJavaScriptアプリケーションから開始する

既存のJavaScriptアプリケーションの開発を続ける場合は、WebStormで開き、使用するJavaScriptバージョンを選択して、その中にライブラリを構成します。オプションで、必要なnpm依存関係をダウンロードします

既にマシン上にあるアプリケーションソースを開きます

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

バージョン管理からアプリケーションのソースを確認してください

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

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

JavaScript言語バージョンの選択

信頼性が高く効率的なコーディング支援を得るには、プロジェクトのすべてのJavaScriptファイルでデフォルトで使用される言語バージョンを指定する必要があります。

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScriptに移動します。JavaScriptページが開きます。

  2. リストから、サポートされているJavaScript言語バージョンのいずれかを選択します。

    • ECMAScript 5.1(英語)

    • ECMAScript 6以降(英語) : このバージョンでは、ECMAScript 2015-2017で導入された機能、および現在の標準への提案が追加されています。

    • React JSX(英語) : このバージョンでは、ECMAScript 6の上にJSX構文のサポートが追加されています

    • Flow(英語) : このバージョンでは、Flow構文がサポートされています。

複数のJavaScriptバージョンを使用する

ECMAScript 5.1と新しいバージョンのECMAScript、JSX、またはFlowの両方を使用するアプリケーションで作業している場合、最も簡単な方法はJavaScriptページのリストからプロジェクト全体の最も高い言語バージョンを選択することです。例:ES5.1とJSXを使用している場合は、JSXを有効にします(これはES5.1とES6のスーパーセットなので)。

フォルダーごとに異なるJavaScript言語バージョンを構成する

  1. JavaScriptページで、JavaScript 言語バージョンリストの横にある the Browse button をクリックします。JavaScript 言語バージョンダイアログが開きます。

  2. Add をクリックして表示されるダイアログで、カスタム言語バージョンが必要なフォルダーを選択します。WebStormは、選択したフォルダーがパスフィールドに表示されるJavaScript 言語バージョンダイアログに戻ります。

  3. 言語リストから、選択したフォルダー内のファイルの言語バージョンを選択します。プロジェクト内の他のすべてのJavaScriptファイルでは、WebStormはJavaScriptページで選択されたバージョンを使用します。

    ws_js_choose_language_version.png

プロジェクトの依存関係のダウンロード

アプリケーションでいくつかのツール、ライブラリ、またはフレームワークを使用している場合は、必要なパッケージをダウンロードします。プロジェクトの依存関係を管理するには、npm(英語)Yarn 1(英語)、またはYarn 2(英語)を使用できます。詳細については、npmおよびYarnを参照してください。

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

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

    npm install <package name> .

既にプロジェクトにpackage.jsonファイルがある場合

  • エディターまたはpackage.jsonツールウィンドウでプロジェクトファイルを右クリックして、コンテキストメニューから実行 'npm install'を選択します。

  • または、ターミナル Alt+F12npm install を実行します。

プロジェクトの依存関係のためのコード補完の構成

To provide code completion for project dependencies, WebStorm automatically creates a node_modules library. In WebStorm, a library is a file or a set of files whose functions and methods are added to WebStorm's internal knowledge in addition to the functions and methods that WebStorm retrieves from the project code that you edit. See JavaScriptライブラリを構成する , コード補完 , and Configuring code completion in JavaScript for details and examples.

パラメータヒントの表示

パラメーターのヒントは、コードを読みやすくするためのメソッドや関数のパラメータ名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。

Parameter hints in JavaScript

パラメータのヒントを設定する

  1. 設定/環境設定ダイアログ Ctrl+Alt+S を開き、エディター | インレイ・ヒント | JavaScriptに進みます。

  2. リストからパラメーターのヒントを選択し、パラメーターのヒントの表示チェックボックスが選択されていることを確認してから、パラメーターヒントを表示するコンテキストを指定します。

  3. 一部のメソッドおよび関数では、WebStormはどのコンテキストでもパラメーターヒントを表示しません。ブラックリスト...をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

JavaScriptで自動インポート

WebStormは、モジュール、クラス、コンポーネント、およびエクスポートされたその他のシンボルのインポート文を生成できます。プロジェクトでES6を使用している場合、ES6シンボルを完了すると、WebStormは実行中に欠落しているインポートステートメントを追加できます。

Add ES6 imports on code completion

以前のJavaScriptバージョンの場合、または完了時の自動インポートが無効になっている場合、WebStormはシンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。

ws_es6_autoimport_off_tooltip.png

または、Alt+Enterを押します。

Autoimport with quick-fix: suggestion list

インポート可能なソースが複数ある場合は、WebStormに候補のリストが表示されます。

Autoimport with quick-fix: multiple choices

JavaScript言語バージョンの選択の詳細を参照してください。

WebStormは、プロジェクトの依存関係で定義されたシンボルのインポートステートメントを生成することもできます。自動インポートは、TypeScript定義ファイル(英語)を含むパッケージ( 瞬間的(英語)またはreduxなど(英語))またはESモジュールとして記述されたソースからのシンボルに対して機能します。

Autoimport from project dependencies

自動インポートを構成する

  1. ES6インポートステートメントをコード補完に自動的に追加するには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | 一般 | 自動インポートに移動して、TypeScript / JavaScript領域のコード補完時に ES6 のインポートを追加するチェックボックスを選択します。

  2. import ステートメントの外観を構成するには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | コード・スタイル | JavaScriptに移動して、インポートタブのコントロールを使用します。詳細については、インポートタブを参照してください。

構文強調表示の構成

好みや習慣に応じてJavaScript対応の構文強調表示を設定することができます。

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | カラー・スキームの切り替え | JavaScriptに移動します。

  2. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの構成の説明に従ってカスタマイズします。

ブラウザでJavaScriptを実行する

  1. エディターで、JavaScriptリファレンスを使用してHTMLファイルを開きます。このHTMLファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。

  2. 以下のいずれか 1 つを実行します:
    • メインメニューから表示 | ブラウザーで開くを選択するか、Alt+F2を押します。次にリストから目的のブラウザを選択します。

    • コードの上にマウスポインターを移動して、ブラウザーアイコンバーを表示します。Firefox Chrome Safari Internet Explorer Opera 目的のブラウザーを示すアイコンをクリックします。

JavaScript のデバッグ

WebStormは、Chromeで動作するクライアント側JavaScriptコード用の組み込みデバッガーを提供します。

Firefoxバージョン36以降では、クライアント側のJavaScriptをデバッグすることもできます。ただし、ChromeまたはChromeファミリの他のブラウザを使用することを強くお勧めします。WebStormを使用すると、組み込みサーバー、外部サーバー、またはリモートサーバーで実行されているJavaScriptアプリケーションをデバッグできます。詳細については、ChromeでのJavaScriptのデバッグおよびFirefoxでJavaScriptをデバッグするを参照してください。

最終更新日: 2020年7月14日

関連ページ:

コード補完

コード補完はWebStormエディターの重要な機能の1つです。補完候補を表示するために、WebStormはプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、および変数を特別な内部インデックスに追加します。JSDocのコメント、TypeScript型定義などからの...

コード・インスペクション

WebStormには、プロジェクト内の異常コードを検出して修正する一連のコードインスペクションがあります。IDEはさまざまな問題を見つけて強調表示し、デッドコードを見つけ、可能性のあるバグを見つけ、スペルの問題、コード構造全体を改善することができます。インスペクションは、すべてのプロジェクトファイル...

インテンション・アクション

エディターで作業するときに、WebStormはコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。As soon as the IDE finds a way to improve your code, it displays a yellow bulb iconi...

JavaScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。シンボルの移動リファクタリング:WebStormを使用すると、ファイルやフォルダーを移動できるだけでなく、JavaScriptトップレベルシン...

JavaScript linter

WebStormは、実行せずにコード内の問題を検出する最も一般的なJavaScriptコードlinterと統合します。インストールして有効にすると、JavaScriptファイルを開くたびにlinterが自動的にアクティブになり、検出されたエラーと警告をエディターに報告します。問題の説明を表示するエデ...

Flow

Flowは、タイプ注釈をJavaScriptにもたらす静的型チェッカーです。WebStormはFlow構造体を認識し、すべてのオペレーティングシステムで構文の強調表示を行います。始める前に、コンピューターにNode.jsがあることを確認してください。Flowのインストールと構成:埋め込まれたターミナ...