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 Internet Explorer Opera 目的のブラウザーを示すアイコンをクリックします。

JavaScript のデバッグ

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

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

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

関連ページ:

コード補完

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

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

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

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

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

JavaScript のリファクタリング

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

JavaScript linter

IntelliJ IDEA integrates withESLintand other most popular JavaScript code linters that detect problems in your code without executing it.When installe...

Flow

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