言語およびフレームワーク: JavaScript
JetBrains Rider を使用すると、JavaScript および Node.js を使用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。
JetBrains Rider は、React、Angular、Vue.js、その他のフレームワークもサポートし、Web 開発用のさまざまなツールとの緊密な統合を提供します。
JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、コードインスペクションとクイックフィックス、および一般的で JavaScript 固有リファクタリングが含まれます。JetBrains Rider は、JavaScript リンターおよび Flow 型チェッカーとも統合されます。
組み込みのデバッガーを使用すると、クライアント側とサーバー側の両方のコードをデバッグでき、対話的なデバッガーコンソールで JavaScript コードスニペットを実行することもできます。JetBrains Rider は、Chrome または Chrome ファミリーの他のブラウザーでのみ JavaScript のデバッグをサポートすることに注意してください。Chrome での JavaScript のデバッグから詳細を参照してください。
JetBrains Rider は、Jest、Karma、Protractor、Cucumber、Mocha テストフレームワークと統合します。JetBrains Rider は、テストの実行とデバッグ、およびテストとサブジェクト間、失敗したテストと問題の原因となったコードのフラグメント間のナビゲーションをサポートします。
ディレクトリ構造で編成され、ソリューションファイルを持たないアプリケーションを開くには、Ctrl+Shift+O を押すか、メインメニューからを選択し、アプリケーションのルートフォルダーを選択して、フォルダーの選択をクリックします。
始める前に
設定で JavaScript と TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
JavaScript 言語バージョンを選択してください
信頼性が高く効率的なコーディング支援を得るには、プロジェクトのすべての JavaScript ファイルでデフォルトで使用される言語バージョンを指定する必要があります。
設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、 に移動します。JavaScript ページが開きます。
リストから、サポートされている JavaScript 言語バージョンのいずれかを選択します。
ECMAScript 6 以降 (英語) : このバージョンでは、ECMAScript 2015-2020 で導入された機能と JSX 構文のサポート、および標準に対するいくつかの現在の提案が追加されています。
Flow(英語): このバージョンでは、Flow 構文がサポートされています。
複数の JavaScript バージョンを使用する
ECMAScript 5.1 と新しいバージョンの ECMAScript の両方を使用するアプリケーションに取り組んでいる場合、最も簡単な方法は、JavaScript ページ () のリストからプロジェクト全体の最も高い言語バージョンを選択することです。
JavaScript ページで、JavaScript 言語バージョンリストの横にある
をクリックします。JavaScript 言語バージョンダイアログが開きます。
をクリックして表示されるダイアログで、カスタム言語バージョンが必要なフォルダーを選択します。JetBrains Rider は、選択したフォルダーがパスフィールドに表示される JavaScript 言語バージョンダイアログに戻ります。言語リストから、選択したフォルダー内のファイルの言語バージョンを選択します。プロジェクト内の他のすべての JavaScript ファイルでは、JetBrains Rider は JavaScript ページで選択されたバージョンを使用します。
JavaScript コードの JSX 構文
JavaScript コードで JSX 構文を使用している場合は、ECMAScript 6 以降を有効にします。
設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、 に移動し、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を実行します。
プロジェクトの依存関係に合わせてコード補完を構成する
プロジェクトの依存関係にコード補完を提供するために、JetBrains Rider は node_modules ライブラリを自動的に作成します。言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集したプロジェクトコードから JetBrains Rider が取得する関数とメソッドに加えて、JetBrains Rider の内部知識に追加されます。
インレイのヒントを見る
インレイヒントはエディターに表示され、コードに関する追加情報を提供して、読みやすく移動しやすくします。
パラメーターヒント
パラメーターヒントは、コードを読みやすくするためのメソッドや関数のパラメーター名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。
パラメーターのヒントを設定する
設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、に移動します。
パラメーター名の JavaScript を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
一部のメソッドおよび関数では、JetBrains Rider はどのコンテキストでもパラメーターヒントを表示しません。除外リスト ... をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名の JavaScript チェックボックスをオフにします。
戻り型のヒント
JetBrains Rider は、関数呼び出しで関数の戻り値の型を表示し、チェーンを呼び出すことができます。
関数の戻り値のヒントは、JSDoc コメントから、またはコードの静的分析に基づいて推論されます。
メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。
メソッドの戻り型のヒントを構成する
設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、に移動します。
タイプで JavaScript ノードを展開し、関数の戻り値の型チェックボックスをオンにします。
メソッドチェーンで戻り値の型のヒントを表示するには、メソッドチェーンノードを展開し、JavaScript チェックボックスを選択します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
型ヒント
型ヒントは、変数、フィールド、パラメーターの型を示します。変数とフィールドの型は、その定義の横に表示されます。パラメーターの型ヒントは関数呼び出しに表示されます。型ヒントは、Jsdoc コメントまたはコードの静的分析から推論されます。
型アノテーションを構成する
設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、に移動します。
カテゴリのツリーで、 を展開します。
型アノテーションノードを展開し、型ヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
任意のコンテキストで任意の値の型のパラメーターパラメーターの型と戻り型のヒントを非表示にするには、タイプの JavaScript チェックボックスをオフにします。
JavaScript で自動インポート
JetBrains Rider は、エクスポートされるモジュール、クラス、コンポーネント、その他のシンボルのインポートステートメントを生成できます。JetBrains Rider は、ES6 シンボルまたは CommonJS モジュールを完成させるときに、不足しているインポートステートメントをその場で追加できます。JetBrains Rider は、インポートステートメント自体のスタイルを決定するか、必要なスタイルを選択できるポップアップを表示します。
ES6 インポートステートメントを追加する
プロジェクトから ES6 モジュールであるファイル、または ES インポートステートメントがすでに含まれているファイルにシンボルをインポートする場合、JetBrains Rider はシンボルの補完時に ES6 インポートを自動的に挿入します。
以前の JavaScript バージョンの場合、または完了時の自動インポートが無効になっている場合、JetBrains Rider はシンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。
または、Alt+Enter を押します。
インポート可能なソースが複数ある場合は、JetBrains Rider に候補のリストが表示されます。
JetBrains Rider は、プロジェクトの依存関係で定義されたシンボルのインポートステートメントを生成することもできます。自動インポートは、TypeScript 定義ファイル(英語)（モーメント(英語)や redux など(英語)）を含むパッケージまたは ES モジュールとして記述されたソースからのシンボルに対して機能します。
現在のファイルにすでに ES6import ステートメントが含まれている場合、JetBrains Rider は ES6 スタイルでも新しいステートメントを挿入します。
CommonJS（必須）インポートステートメントを追加する
プロジェクトからすでに CommonJS モジュールであるファイル（require ステートメントまたは module.export を使用）にシンボルをインポートする場合、JetBrains Rider はシンボルの補完時に CommonJS インポートを自動的に挿入します。
あるいは、インポートするシンボルにキャレットを置き、Alt+Enter を押して、CommonJS (require) インポートスタイルのクイックフィックスを選択します。
自動インポートを構成する
コード補完に ES6 インポートステートメントを自動的に追加するには、設定 / 環境設定ダイアログ（Ctrl+Alt+S）を開き、に移動して、TypeScript/JavaScript 領域の JavaScript のインポートを自動的に追加するチェックボックスを選択します。
importステートメントの外観を構成するには、設定 / 環境設定ダイアログ (Ctrl+Alt+S) を開き、 に移動し、インポートタブのコントロールを使用します。詳細については、「インポートタブ」を参照してください。
構文ハイライトを構成する
好みや習慣に応じて JavaScript 対応の構文ハイライトを設定することができます。
設定 / 環境設定ダイアログ（Ctrl+Alt+S）で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、配色: IDE テキストのフォントと色の説明に従ってカスタマイズします。
ブラウザーで JavaScript を実行する
エディターで、JavaScript リファレンスを使用して HTML ファイルを開きます。この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
以下のいずれか 1 つを実行します:
メインメニューからを選択するか、Alt+F2 を押します。次にリストから目的のブラウザーを選択します。
コードの上にカーソルを置くと、ブラウザーのアイコンバー
が表示されます。目的のブラウザーを示すアイコンをクリックします。
JavaScript のデバッグ
JetBrains Rider は、Chrome または Chrome ファミリの他のブラウザーで動作するクライアント側 JavaScript コード用の組み込みデバッガーを提供します。JetBrains Rider を使用すると、組み込みサーバー、外部サーバー、リモートサーバーで実行されている JavaScript アプリケーションをデバッグできます。詳細については、Chrome での JavaScript のデバッグを参照してください。
関連ページ：
コード補完 (IntelliSense)
JetBrains Rider のコード補完機能に慣れ親しむために、実装の基礎をいくつか紹介します。新しい識別子の入力を開始するとすぐに、自動補完の候補リストが表示されます。を押すと、基本補完の候補リストが表示されます。他の 2 つの補完コマンド、型一致補完および第 2 基本補完は、高度なアルゴリズムを適用して、候補リストにさらに項目を追加します。AI Assistant を有効にしている場合は、周囲のコンテキストに基づいてコードブロック全体を作成できる AI を搭載したコード補完を利用できます。...
JavaScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。シンボルの移動リファクタリング：ファイルやフォルダーを移動するだけでなく、JetBrains Rider では JavaScript のトップレベルのシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュール内のクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押...
JavaScript リンター
JetBrains Rider は、ESLint およびその他の最も一般的な JavaScript コードリンターと統合され、コードを実行せずにコードの問題を検出します。インストールして有効にすると、JavaScript ファイルを開くたびにリンターが自動的にアクティブになり、検出されたエラーと警告が報告され、可能な場合はクイックフィックスが提案されます。現在のファイルで検出されたエラーの説明とそれらのクイックフィックスは、エディターから入手できます。エディターで問題を表示してクイックフィックスを...
Flow
Flow は、JavaScript に型アノテーションをもたらす静的型チェッカーです。JetBrains Rider は Flow 構造を認識し、すべてのオペレーティングシステムでそれらの構文をハイライトします。始める前に：Node.js をダウンロードしてインストールします。Flow のインストールと構成：埋め込まれたターミナルで、次のいずれかのコマンドを入力します。を使用して Flow をグローバルにインストールします。開発依存として Flow をインストールするための、Flow オフィシャル W...
対話型デバッガーコンソール
対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます（たとえば、を使用）。コンソールペインも read-eval-print ループ（REPL）なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、JetBrains Rider は完成のための異形を提案します。該当する明細を選択してを...
Chrome での JavaScript のデバッグ
JetBrains Rider は、client-sideJavaScript コード用の組み込みデバッガーを提供します。以下のビデオと手順では、このデバッガーの使用を開始するための基本的な手順を説明しています。始める前に：設定で JavaScript と TypeScript バンドルプラグインが有効になっていることを確認します。を押して設定を開き、を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript と TypeScript と入力します。プラグインの詳細に...