RubyMine 2018.2 Help

JavaScript

RubyMineを使用すると、JavaScriptおよびNode.jsを使用して最新のWeb、モバイル、およびデスクトップアプリケーションを開発できます。 RubyMineは、JavaScriptおよびTypeScriptプログラミング言語、ReactおよびAngularフレームワークをサポートし、Web開発用のさまざまなツールとの緊密な統合を提供します。

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

新しいアプリケーションの作成

  1. メインメニューでファイル | 新規 | プロジェクトを選択するか、ようこそ画面で新規プロジェクトの作成をクリックしてください。 [新規プロジェクト]ダイアログボックスが開きます。
  2. 左側のペインで、空のプロジェクトを選択します。
  3. 右側のウィンドウで、プロジェクト関連のファイルが保存されるフォルダのパスを指定します。 作成をクリックします。

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

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

既にあなたのマシンにあるアプリケーションソースを開くには

  • ようこそ画面で開くをクリックするか、メインメニューでファイル | 開くを選択します。表示されるダイアログで、ソースが保存されているフォルダを選択します。

バージョンコントロールからアプリケーションソースをチェックアウトするには

  1. ようこそ画面でバージョン管理からチェック・アウトをクリックするか、メインメニューでVCS | バージョン管理からチェック・アウトを選択します。
  2. リストからバージョン管理システムを選択します。
  3. 表示されるVCS固有のダイアログで、アプリケーションのソースをチェックアウトするための資格情報とリポジトリを入力します。

JavaScript言語バージョンの選択

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

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、言語とフレームワークの下にあるJavaScriptを選択します。 JavaScriptページが開きます。
  2. ドロップダウンリストから、サポートされているJavaScript言語のバージョンを選択します。

複数のJavaScriptバージョンの使用

ECMAScript 5.1と新しいバージョンのECMAScript、JSX、またはFlowを使用するアプリケーションで作業している場合は、JavaScriptページのドロップダウンリストからプロジェクト全体の最高言語バージョンを選択するのが最も簡単な方法です。例:ES5.1とJSXを使用する場合は、JSXを有効にします(ES5.1とES6のスーパーセットであるため)。

異なるフォルダに異なるJavaScript言語バージョンを設定するには

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

npm依存関係のダウンロード

始める前に、Node.js(英語)をインストールしてください。アプリケーションでツール、ライブラリ、またはフレームワークを使用している場合は、必要なパッケージをダウンロードしてください。

空のプロジェクトにパッケージをインストールするには

  • 組み込みのターミナル表示 | ツール・ウィンドウ | ターミナルまたは Alt+F12)を開き、コマンドプロンプトで npm install <package name> と入力します。

既にプロジェクトにpackage.jsonファイルがある場合

  • エディタまたはプロジェクトツールウィンドウで package.json ファイルを右クリックし、コンテキストメニューで'npm install'を実行するを選択します。

プロジェクト依存関係のためのコード補完の設定

プロジェクトの依存関係にコード補完を提供するために、RubyMineは自動的に node_modules ライブラリを作成します。 RubyMineでは、ライブラリーは、RubyMineが編集したプロジェクトコードから取得する機能やメソッドに加えて、RubyMineの内部知識に機能とメソッドが追加されたファイルまたはファイルセットです。詳細と例については、JavaScript ライブラリーの設定を参照してください。

JavaScriptでの自動インポート

RubyMineは、モジュール、クラス、コンポーネント、およびタイプとしてエクスポートおよび呼び出すことができるその他のシンボルのインポート文を生成できます。プロジェクトでES6を使用している場合、ES6シンボルを完了すると、RubyMineは実行中に欠落しているインポートステートメントを追加できます。

以前のJavaScriptバージョンまたは補完時の自動インポートが無効になっている場合、RubyMineはシンボルを未解決としてマークし、ツールチップを表示します。
ws_es6_autoimport_off_tooltip.png
Alt+Enterを押すと、RubyMineは提案されたクイックフィックスを表示します:
ws_es6_autoimport_off.png
インポート可能なソースが複数ある場合は、RubyMineに候補のリストが表示されます。
ws_js_import_quick_fix_multiple_choices.png

コード補完にES6インポートステートメントを追加するには

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディターの下にある一般をクリックし、自動インポートをクリックします。 自動インポートページが開きます。
  2. TypeScript / JavaScript領域で、コード補完時に ES6 のインポートを追加するチェックボックスを選択します。

ブラウザでのJavaScriptの実行

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

JavaScript のデバッグ

RubyMineは、Chromeで動作するクライアントサイドのJavaScriptコード用のビルトインデバッガを提供します。
また、クライアント側のJavaScriptをFirefox 36以上でデバッグすることもできます。ただし、ChromeまたはChromeファミリの他のブラウザを使用することを強くお勧めします。 RubyMineを使用すると、ビルトイン・サーバー、外部サーバー、またはリモートサーバー上で実行されているJavaScriptアプリケーションをデバッグできます。詳細は、ChromeのJavaScriptのデバッグおよびFirefoxでのJavaScriptのデバッグを参照してください。

最終更新日: 2018年8月31日