言語とフレームワーク：JavaScript
JetBrains Rider を使うことで、 JavaScriptで最新の 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 and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 インストール済み タブをクリックします。 検索フィールドに JavaScript and 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 | 一般的な内容 ノードで JSX 構文の使用 インスペクションを有効にします。 検索フィールドを使用してインスペクションを見つけます。
オプションで、インスペクションの重大度とスコープを構成します。 詳しくは コードインスペクションをご覧ください。
プロジェクトの依存関係をダウンロードする
アプリケーションでツールやライブラリ、フレームワークを使用している場合は、必要なパッケージをダウンロードしてください。 プロジェクトの依存関係管理には npm、 Yarn 1、 Yarn 2 を利用でき、詳細は npm と Yarn を参照してください。
空のプロジェクトにパッケージをインストールする
組み込み ターミナル (Alt+F12) で次のように入力します。
npm install <package name>。
すでにプロジェクトに package.json ファイルがある場合
エディターまたは エクスプローラー ツールウィンドウ（Alt+1 ）で package.json ファイルを右クリックし、コンテキストメニューから 'npm install' の実行 を選択します。
または、 ターミナル Alt+F12 で
npm installを実行します。
プロジェクトの依存関係に合わせてコード補完を構成する
プロジェクト依存関係のコード補完を提供するために、JetBrains Rider は自動的に ノードモジュール ライブラリを作成します。 言語と IDE のコンテキストでは、 ライブラリ はファイルまたはファイルのセットです。 これらのファイルの関数およびメソッドは、編集するプロジェクトコードから JetBrains Rider が取得する関数やメソッドに加えて、JetBrains Rider の内部知識に追加されます。
インレイヒントを見る
インレイヒントはエディターに表示され、コードの可読性とナビゲーションを高めるための追加情報を提供します。
パラメーターヒント
パラメーターヒントは、コードを読みやすくするためのメソッドや関数のパラメーター名を示します。 デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。
パラメーターのヒントを設定する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
パラメーター名 の JavaScript を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューでは、設定を変更することでコードの見た目にどのような影響があるかを確認できます。
一部のメソッドや関数では、JetBrains Rider はどのコンテキストでもパラメーターヒントを表示しません。 除外リスト… をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、 パラメーター名 の JavaScript チェックボックスをオフにします。
戻り型のヒント
JetBrains Rider は関数呼び出しや呼び出しチェーンで関数の戻り値の型を表示できます。
関数の戻り値の型ヒントは、 JSDoc コメントやコードの静的解析に基づいて推論されます。
メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。
メソッドチェーンの戻り値の型ヒントは、内部の JetBrains Rider の評価機能によって提供されます。
メソッドの戻り型のヒントを構成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
タイプ で JavaScript ノードを展開し、 関数の戻り値の型 チェックボックスをオンにします。
メソッドチェーンで戻り値の型のヒントを表示するには、 メソッドチェーン ノードを展開し、 JavaScript チェックボックスを選択します。
プレビューでは、設定を変更することでコードの見た目にどのような影響があるかを確認できます。
型ヒント
型ヒントは、変数、フィールド、パラメーターの型を示します。 変数とフィールドの型は、その定義の横に表示されます。 パラメーターの型ヒントは関数呼び出しに表示されます。 型ヒントは JSDoc コメントまたはコードの静的解析から推論されます。
型ヒントを構成する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
カテゴリのツリーで、 を展開します。
型ヒントを表示するコンテキストを指定してください。
プレビューでは、設定を変更することでコードの見た目にどのような影響があるかを確認できます。
任意のコンテキストで任意の値の型のパラメーターパラメーターの型と戻り型のヒントを非表示にするには、 タイプ の JavaScript チェックボックスをオフにします。
Import ステートメントの追加
JetBrains Rider は、モジュール、クラス、コンポーネント、エクスポートされるその他のシンボルに対してインポートステートメントを生成することができます。 インポートステートメントは、シンボルの作成時にその場で追加することも、後からインポートツールチップ、クイックフィックス、インテンションアクションを使用して追加することもできます。
JetBrains Rider は、 ES6スタイルと CommonJSスタイルの両方のインポートステートメントを生成できます。 JetBrains Rider は、インポートステートメントのスタイルを自動的に決定するか、必要なスタイルを選択できるポップアップを表示します。
JetBrains Rider がファイルで使用すべき構文を自動で判別できない場合、ES6 構文と CommonJS 構文のどちらかを選択できるポップアップが表示されます。
コード補完に ES6 インポート文を常に自動的に追加するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 TypeScript / JavaScript 領域の JavaScript のインポートを自動的に追加する チェックボックスを選択します。
ES6 インポートステートメントを追加する
インポートステートメントは、シンボルの作成時にその場で追加することも、後からインポートツールチップ、クイックフィックス、インテンションアクションを使用して追加することもできます。
プロジェクトから ES6 モジュールであるファイルまたは既に ES インポートステートメントを含むファイルにシンボルをインポートする場合、JetBrains Rider はシンボル補完時に ES6 インポートを自動で挿入します。
未解決のシンボルにカーソルを合わせると、自動インポートのツールチップが表示され、インポート文を追加するように提案されます。
提案を受け入れるには、 Alt+Enter を押してください。
ツールチップを無効にするには、エディターの右上隅にあるインスペクションウィジェットにカーソルを合わせ、
をクリックして、 自動インポートツールチップを表示 オプションのチェックを外します。
以前の JavaScript バージョン、または 補完時の自動インポートが無効化されている場合、JetBrains Rider はシンボルを未解決としてマークし、エラーの説明と推奨されるクイックフィックスを表示するポップアップを表示します：
提案を受け入れるには、 Alt+Shift+Enter を押してください。
または、 Alt+Enter を押します。
インポート可能なソースが複数ある場合、JetBrains Rider は候補リストを表示します：
JetBrains Rider は、プロジェクトの依存関係で定義されたシンボルに対してもインポートステートメントを生成することができます。 自動インポートは、 TypeScript 定義ファイル(英語)を含むパッケージ（moment(英語) や redux(英語) など）や ES モジュールとして記述されたソースのシンボルに対して機能します。
現在のファイルにすでに ES6 インポートステートメントが含まれている場合、JetBrains Rider も ES6 スタイルで新しいステートメントを挿入します。
CommonJS（必須）インポートステートメントを追加する
すでに CommonJS モジュールであるファイル（require ステートメントまたは module.export を含む）にプロジェクトからシンボルをインポートする場合、JetBrains Rider はシンボル補完時に CommonJS インポートを自動挿入します。
あるいは、インポートするシンボルにキャレットを置き、 Alt+Enter を押して、CommonJS (require) インポートスタイルのクイックフィックスを選択します。
import defer ステートメントを追加する
JetBrains Rider は、JavaScript コンテキストでの import defer 構文をサポートし、コード補完、エラーハイライト、 import ステートメントのライブテンプレート、使用箇所検索を提供します。
import.defer 構文もサポートされています。
インポートソースステートメントを追加する
JetBrains Rider は、JavaScript コンテキストでの import source 構文をサポートし、コード補完、エラーハイライト、 import ステートメントのライブテンプレート、使用箇所検索を提供します。
import.source 構文もサポートされています。
自動インポートを構成する
コード補完に ES6 インポート文を常に自動的に追加するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動して、 TypeScript / JavaScript 領域の JavaScript のインポートを自動的に追加する チェックボックスを選択します。
importステートメントの外観を構成するには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 に移動し、 インポート タブのコントロールを使用します。 詳細については、「インポートタブ 」を参照してください。
構文ハイライトを構成する
JavaScript 対応の構文ハイライトは、環境設定や習慣に応じて設定できます。
設定 ダイアログ (Ctrl+Alt+S) で、 に進みます。
カラースキームを選択するか、デフォルトから継承されたハイライト設定を受け入れるか、 カラースキーム：IDE テキストのフォントと色 の説明に従ってカスタマイズします。
コードの整形
JetBrains Rider では、現在の コードスタイルスキームに従って JavaScript コードの整形が可能です。
.editorconfig でフォーマット設定を指定したり、 Prettier を利用したりすることもできます。
デコレーター
デコレーターの場合、再フォーマット時に各デコレーターの直後に改行を入れないよう抑制することが重要となる場合があります。
デコレータには次のフォーマットオプションを利用できます：
折り返さない
このオプションを選択すると、装飾文字を使用して行を再フォーマットする際に、折り返しは適用されません。
長い場合は折り返す
このオプションを選択すると、行が右端を超えた場合は折り返されます。
右余白は、 次でハードラップを適用 フィールドがある 設定 | エディター | コードスタイル | JavaScript | 折り返しと波括弧で定義されています。 行が指定された数値を超えると、折り返されます。
長い場合は切り捨てる
このオプションを選択すると、デコレータは右余白を超えた場合、各行に 1 つずつフォーマットされます。
常に折り返す
このオプションを選択すると、すべてのデコレータが各行に 1 つずつフォーマットされます。
ブラウザーで JavaScript を実行する
エディターで、JavaScript リファレンスを使用して HTML ファイルを開きます。 この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
次のいずれかを実行します：
メインメニューから を選択するか、 Alt+F2 を押します。 次にリストから目的のブラウザーを選択します。
コードの上にカーソルを置くと、ブラウザーのアイコンバー
が表示されます。 目的のブラウザーを示すアイコンをクリックします。
JavaScript のデバッグ
JetBrains Rider は、 Chrome または Chrome ファミリーの他のブラウザーで動作するクライアント側 JavaScript コード用の組み込みデバッガーを提供します。 JetBrains Rider を使用すると、組み込みサーバー、外部サーバー、リモートサーバーで実行中の JavaScript アプリケーションをデバッグできます。 詳細については、 Chrome での JavaScript のデバッグ を参照してください。