RubyMine 2024.1 ヘルプ

JavaScript

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

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

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

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

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

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

始める前に

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

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

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

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

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

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

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

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

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

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

  1. ウェルカム画面で VCS から取得をクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクト、Git | クローン、VCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

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

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

Untrusted project warning

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

  • セーフモードでプレビュー : この場合、RubyMine はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    RubyMine はエディター領域の上部に通知を表示し、プロジェクトを信頼リンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、RubyMine はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての RubyMine 機能が使用可能になることを意味します。

  • 開かない : この場合、RubyMine はプロジェクトを開きません。

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

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 ページ ( 設定 | 言語 & フレームワーク | JavaScript) のリストからプロジェクト全体の最も高い言語バージョンを選択することです。

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

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

  3. 言語リストから、選択したフォルダー内のファイルの言語バージョンを選択します。プロジェクト内の他のすべての JavaScript ファイルでは、RubyMine は 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 | 一般ノードで React JSX 構文インスペクションを有効にします。検索フィールドを使用してインスペクションを見つけます。

    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 を実行します。

プロジェクトの依存関係に合わせてコード補完を構成する

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

インレイのヒントを見る

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

パラメーターヒント

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

Parameter hints in JavaScript

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

  1. 設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。

  2. パラメーター名の JavaScript を展開します。

  3. 対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。

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

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

  5. 任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名の JavaScript チェックボックスをオフにします。

戻り型のヒント

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

  • 関数の戻り値のヒントは、JSDoc コメントから、またはコードの静的分析に基づいて推論されます。

  • メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。

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

  1. 設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。

  2. タイプで JavaScript ノードを展開し、関数の戻り値の型チェックボックスをオンにします。

  3. メソッドチェーンで戻り値の型のヒントを表示するには、メソッドチェーンノードを展開し、JavaScript チェックボックスを選択します。

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

型ヒント

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

Type annotations in JavaScript

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

  1. 設定ダイアログ（Ctrl+Alt+S）を開き、エディター | インレイヒントに移動します。

  2. カテゴリのツリーで、タイプ | JavaScript を展開します。

  3. 型アノテーションノードを展開し、型ヒントを表示するコンテキストを指定します。

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

    JavaScript type annotation

  4. 任意のコンテキストで任意の値の型のパラメーターパラメーターの型と戻り型のヒントを非表示にするには、タイプの JavaScript チェックボックスをオフにします。

JavaScript で自動インポート

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

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

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

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

Auto import with quick-fix: information tooltip

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

Auto import with quick-fix: suggestion list

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

Auto import with quick-fix: multiple choices

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

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

Auto import from project dependencies

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

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

Auto import with CommonJS import statement

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

Quick fix: select import style

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

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

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

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

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

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

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

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

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

  2. 以下のいずれか 1 つを実行します:

    • メインメニューから表示 | ブラウザーで開くを選択するか、Alt+F2 を押します。次にリストから目的のブラウザーを選択します。

    • コードの上にカーソルを置くと、ブラウザーのアイコンバー the RubyMine icon Chrome Firefox Safari Opera Internet Explorer Edge が表示されます。目的のブラウザーを示すアイコンをクリックします。

JavaScript のデバッグ

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

サポートされる言語 JavaScript ライブラリを構成する

関連ページ：

コード補完

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完：基本コード補完は、可視性スコープ内のクラス、メソッド、キーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、RubyMine はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します (提案にはライブテンプレートも含まれます)。基本補完を呼び出す名前の入力を開始します。を押すか、メインメニューからを選択してください。...

コードインスペクション

RubyMine には、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ（たとえば、本番コードまたは変更されたファイルでのみ）コードをスキャンできます。すべてのインスペクションには、問題がコードに影響を与える可能性がある程度の重大度レ...

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

エディターで作業するときに、RubyMine はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE はコードを変更する方法を見つけるとすぐに、エディターの現在の行の隣に黄色のバルブアイコンを表示します。このアイコンをクリックすると、現在のコンテキストで使用できるインテンションアクションを表示できます。インテンションアクションは、警告から最適化の提案まで、幅広い状況をカバーします。インテンションの完全なリストを表示し、設定ダイアログでカスタマイズできます...

JavaScript のリファクタリング

リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。シンボルの移動リファクタリング：RubyMine を使用すると、ファイルやフォルダーを移動できるだけでなく、JavaScript トップレベルシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押すか、コン...

JavaScript リンター

RubyMine は、ESLint およびその他の最も一般的な JavaScript コードリンターと統合され、コードを実行せずにコードの問題を検出します。インストールして有効にすると、JavaScript ファイルを開くたびにリンターが自動的にアクティブになり、検出されたエラーと警告が報告され、可能な場合はクイックフィックスが提案されます。現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターおよび問題ツールウィンドウのファイルタブから入手できます。以前に開いたすべての...

Flow

Flow は、JavaScript に型アノテーションをもたらす静的型チェッカーです。RubyMine は Flow 構造を認識し、すべてのオペレーティングシステムでそれらの構文をハイライトします。始める前に：Node.js をダウンロードしてインストールします。Flow のインストールと構成：埋め込まれたターミナルで、次のいずれかのコマンドを入力します。を使用して Flow をグローバルにインストールします。開発依存として Flow をインストールするための、Flow オフィシャル Web サイトの...