IntelliJ IDEA 2020.3 ヘルプ

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

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

始める前に

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript 言語バージョンの選択

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

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

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

    • ECMAScript 5.1(英語)

    • ECMAScript 6 以降 (英語) : このバージョンでは、ECMAScript 2015-2020 で導入された機能と JSX 構文のサポート、および標準に対するいくつかの現在の提案が追加されています。

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

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

ECMAScript 5.1 と新しいバージョンの ECMAScript の両方を使用するアプリケーションで作業している場合、最も簡単な方法は、JavaScript ページのリストからプロジェクト全体の最高の言語バージョンを選択することです。

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

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

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

    Choose language versions for separate folders

JavaScript コードの JSX 構文

JavaScript コードで JSX 構文を使用している場合は、ECMAScript 6 以降を有効にします。

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | JavaScript に移動し、JavaScript 言語バージョンリストから ECMAScript 6 以降を選択します。

  • JSX 構文が誤って使用された場合に警告を表示するには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | インスペクションに移動して、JavaScript と TypeScript | 一般ノードで ReactJSX 構文インスペクションを有効にします。検索フィールドを使用して、インスペクションを見つけます。

    Enable the React JSX syntax inspection

    オプションで、インスペクションの重大度とスコープを構成します。コードインスペクションから詳細を参照してください。

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

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

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

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

    npm install <package name> .

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

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

  • または、ターミナル Alt+F12 npm 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 をデバッグするを参照してください。

関連ページ:

コード補完

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

コードインスペクション

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

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

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

JavaScript のリファクタリング

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

JavaScript linter

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

Flow

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