JavaScript

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

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

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

組み込みのデバッガーを使用すると、クライアント側とサーバー側の両方のコードをデバッグでき、対話的なデバッガーコンソールで JavaScript コードスニペットを実行することもできます。IntelliJ IDEA は、Chrome または Chrome ファミリーの他のブラウザーでのみ JavaScript のデバッグをサポートすることに注意してください。Chrome での JavaScript のデバッグから詳細を参照してください。

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

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

始める前に

設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

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

メインメニューからファイル | 新規 | プロジェクトを選択するか、ウェルカム画面の新しいプロジェクトボタンをクリックします。
新しいプロジェクトダイアログで、左側のペインで新しいプロジェクトを選択します。
右側のペインで、言語領域の JavaScript を選択します。
新しいプロジェクトに名前を付け、必要に応じてその場所を変更してから、作成をクリックします。

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

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

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

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

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

ウェルカム画面で VCS から取得をクリックします。
あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクト、Git | クローン、VCS | バージョン管理から取得を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

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

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

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

セーフモードでプレビュー : この場合、IntelliJ IDEA はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
IntelliJ IDEA はエディター領域の上部に通知を表示し、プロジェクトを信頼リンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、IntelliJ IDEA はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての IntelliJ IDEA 機能が使用可能になることを意味します。
開かない : この場合、IntelliJ IDEA はプロジェクトを開きません。

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

JavaScript 言語バージョンを選択してください

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

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript に移動します。JavaScript ページが開きます。
リストから、サポートされている JavaScript 言語バージョンのいずれかを選択します。
- ECMAScript 5.1(英語)
- ECMAScript 6 以降 (英語) : このバージョンでは、ECMAScript 2015-2020 で導入された機能と JSX 構文のサポート、および標準に対するいくつかの現在の提案が追加されています。
- Flow(英語): このバージョンでは、Flow 構文がサポートされています。

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

ECMAScript 5.1 と新しいバージョンの ECMAScript の両方を使用するアプリケーションに取り組んでいる場合、最も簡単な方法は、JavaScript ページ ( 設定 | 言語 & フレームワーク | JavaScript) のリストからプロジェクト全体の最も高い言語バージョンを選択することです。

JavaScript ページで、JavaScript 言語バージョンリストの横にあるをクリックします。JavaScript 言語バージョンダイアログが開きます。
をクリックして表示されるダイアログで、カスタム言語バージョンが必要なフォルダーを選択します。IntelliJ IDEA は、選択したフォルダーがパスフィールドに表示される JavaScript 言語バージョンダイアログに戻ります。
言語リストから、選択したフォルダー内のファイルの言語バージョンを選択します。プロジェクト内の他のすべての JavaScript ファイルでは、IntelliJ IDEA は JavaScript ページで選択されたバージョンを使用します。

JavaScript コードの JSX 構文

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

設定ダイアログ（Ctrl+Alt+S）で、言語 & フレームワーク | JavaScript に移動し、JavaScript 言語バージョンリストから ECMAScript 6 を選択します。
JSX 構文が誤って使用された場合に警告されるようにするには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インスペクションに移動して、JavaScript と TypeScript | 一般ノードで React JSX 構文インスペクションを有効にします。検索フィールドを使用してインスペクションを見つけます。
オプションで、インスペクションの重大度とスコープを構成します。コードインスペクションから詳細を参照してください。

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

アプリケーションがいくつかのツール、ライブラリ、フレームワークを使用している場合は、必要なパッケージをダウンロードします。プロジェクトの依存関係を管理するには、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 ライブラリを作成します。言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集するプロジェクトコードから IntelliJ IDEA が取得する関数とメソッドに加えて、IntelliJ IDEA の内部知識に追加されます。詳細については、JavaScript ライブラリを構成するおよびコード補完を参照してください。

インレイのヒントを見る

インレイヒントはエディターに表示され、コードに関する追加情報を提供して、読みやすく移動しやすくします。

パラメーターヒント

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

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

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。
パラメーター名の JavaScript を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
一部のメソッドおよび関数では、IntelliJ IDEA はどのコンテキストでもパラメーターヒントを表示しません。除外リスト ... をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名の JavaScript チェックボックスをオフにします。

戻り型のヒント

IntelliJ IDEA は、関数呼び出しで関数の戻り値の型を表示し、チェーンを呼び出すことができます。

関数の戻り値のヒントは、JSDoc コメントから、またはコードの静的分析に基づいて推論されます。
メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。

メソッドの戻り型のヒントを構成する

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。
タイプで JavaScript ノードを展開し、関数の戻り値の型チェックボックスをオンにします。
メソッドチェーンで戻り値の型のヒントを表示するには、メソッドチェーンノードを展開し、JavaScript チェックボックスを選択します。

プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。

型ヒント

型ヒントは、変数、フィールド、パラメーターの型を示します。変数とフィールドの型は、その定義の横に表示されます。パラメーターの型ヒントは関数呼び出しに表示されます。型ヒントは、Jsdoc コメントまたはコードの静的分析から推論されます。

型アノテーションを構成する

設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。
カテゴリのツリーで、タイプ | JavaScript を展開します。
型アノテーションノードを展開し、型ヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
任意のコンテキストで任意の値の型のパラメーターパラメーターの型と戻り型のヒントを非表示にするには、タイプの JavaScript チェックボックスをオフにします。

JavaScript で自動インポート

IntelliJ IDEA は、エクスポートされるモジュール、クラス、コンポーネント、その他のシンボルのインポートステートメントを生成できます。IntelliJ IDEA は、ES6 シンボルまたは CommonJS モジュールを完成させるときに、不足しているインポートステートメントをその場で追加できます。IntelliJ IDEA は、インポートステートメント自体のスタイルを決定するか、必要なスタイルを選択できるポップアップを表示します。

ES6 インポートステートメントを追加する

プロジェクトから ES6 モジュールであるファイル、または ES インポートステートメントがすでに含まれているファイルにシンボルをインポートする場合、IntelliJ IDEA はシンボルの補完時に ES6 インポートを自動的に挿入します。

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

Auto import with quick-fix: information tooltip

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

Auto import with quick-fix: suggestion list

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

Auto import with quick-fix: multiple choices

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

現在のファイルにすでに ES6import ステートメントが含まれている場合、IntelliJ IDEA は ES6 スタイルでも新しいステートメントを挿入します。

CommonJS（必須）インポートステートメントを追加する

プロジェクトからすでに CommonJS モジュールであるファイル（require ステートメントまたは module.export を使用）にシンボルをインポートする場合、IntelliJ IDEA はシンボルの補完時に CommonJS インポートを自動的に挿入します。

Auto import with CommonJS import statement

あるいは、インポートするシンボルにキャレットを置き、Alt+Enter を押して、CommonJS (require) インポートスタイルのクイックフィックスを選択します。

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

コード補完に ES6 インポートステートメントを自動的に追加するには、設定ダイアログ（Ctrl+Alt+S）を開き、エディター | 一般 | 自動インポートに移動して、TypeScript/JavaScript 領域の JavaScript のインポートを自動的に追加するチェックボックスを選択します。
import ステートメントの外観を構成するには、設定ダイアログ (Ctrl+Alt+S) を開き、エディター | コードスタイル | JavaScript に移動し、インポートタブのコントロールを使用します。詳細については、「インポートタブ」を参照してください。

構文ハイライトを構成する

好みや習慣に応じて JavaScript 対応の構文ハイライトを設定することができます。

設定ダイアログ（Ctrl+Alt+S）で、エディター | カラースキームの切り替え | JavaScript に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。

ブラウザーで JavaScript を実行する

エディターで、JavaScript リファレンスを使用して HTML ファイルを開きます。この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
以下のいずれか 1 つを実行します:
- メインメニューから表示 | ブラウザーで開くを選択するか、Alt+F2 を押します。次にリストから目的のブラウザーを選択します。
- コードの上にカーソルを置くと、ブラウザーのアイコンバーが表示されます。目的のブラウザーを示すアイコンをクリックします。

JavaScript のデバッグ

IntelliJ IDEA は、Chrome または Chrome ファミリの他のブラウザーで動作するクライアント側 JavaScript コード用の組み込みデバッガーを提供します。IntelliJ IDEA を使用すると、組み込みサーバー、外部サーバー、リモートサーバーで実行されている JavaScript アプリケーションをデバッグできます。詳細については、Chrome での JavaScript のデバッグを参照してください。

最終更新日: 2024 年 6 月 25 日

IntelliJ IDEA 2024.1 ヘルプ