IntelliJ IDEA 2020.2 ヘルプ

JavaScript

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

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

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

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

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

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

始める前に

設定 / 環境設定 | プラグインページで JavaScript と TypeScript バンドルプラグインが有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

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

  1. メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面の新規プロジェクトボタンをクリックします。

  2. 新規プロジェクトダイアログで、左側のペインで JavaScript を選択します。

  3. 右側のウィンドウで、JavaScript をもう一度選択し、次へをクリックします。

  4. ウィザードの 2 ページ目で、プロジェクト名とプロジェクト関連ファイルが保存されるフォルダーのパスを指定します。完了をクリックします。

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

既存の JavaScript アプリケーションの開発を続ける場合は、IntelliJ IDEA で開き、使用する 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 をクリックして表示されるダイアログで、カスタム言語バージョンが必要なフォルダーを選択します。IntelliJ IDEA は、選択したフォルダーがパスフィールドに表示される JavaScript 言語バージョンダイアログに戻ります。

  3. 言語リストから、選択したフォルダー内のファイルの言語バージョンを選択します。プロジェクト内の他のすべての JavaScript ファイルでは、IntelliJ IDEA は 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 を実行します。

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

プロジェクトの依存関係にコード補完を提供するために、IntelliJ IDEA は自動的に node_modules ライブラリを作成します。IntelliJ IDEA では、ライブラリは、IntelliJ IDEA が編集するプロジェクトコードから取得する関数とメソッドに加えて、IntelliJ IDEA の内部知識に関数とメソッドが追加されたファイルまたはファイルのセットです。詳細と例については、JavaScript ライブラリを構成するおよびコード補完を参照してください。

パラメーターヒントの表示

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

Parameter hints in JavaScript

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

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

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

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

JavaScript で自動インポート

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

Add ES6 imports on code completion

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

Autoimport with quick-fix: information tooltip

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

Autoimport with quick-fix: suggestion list

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

Autoimport with quick-fix: multiple choices

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

IntelliJ IDEA は、プロジェクトの依存関係で定義されたシンボルのインポートステートメントも生成できます。自動インポートは、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 Edge Opera 目的のブラウザーを示すアイコンをクリックします。

JavaScript のデバッグ

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

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

最終更新日 :

関連ページ:

コード補完

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完 :基本コード補完は、可視性スコープ内のクラス、メソッド、フィールド、およびキーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、Intell...

コードインスペクション

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

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

エディターで作業するときに、IntelliJ IDEA はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE がコードを変更する方法を見つけるとすぐに、エディターの現在の行の横に黄色い電球アイコンが表示されます。このアイコンをクリックすると、このコード単位で...

JavaScript のリファクタリング

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

JavaScript linter

IntelliJ IDEA は、ESLintおよび他の最も人気のある JavaScript コード linter と統合され、コードを実行せずにコードの問題を検出します。linter をインストールして有効にすると、JavaScript ファイルを開くたびに自動的にアクティブになり、検出されたエラー...

Flow

Flowは、タイプ注釈をJavaScriptにもたらす静的型チェッカーです。IntelliJ IDEA はFlow構造体を認識し、すべてのオペレーティングシステムで構文の強調表示を行います。始める前に :Node.jsをダウンロードしてインストールします。Flow のインストールと構成 :埋め込まれ...