RubyMine 2026.1 Help

CoffeeScript

RubyMine では、JavaScript にコンパイルされる CoffeeScript を使用できます。 RubyMine は *.coffee ファイルを認識し、それらに CoffeeScript アイコン のマークを付けます。 CoffeeScript コードにブレークポイントを直接設定でき、RubyMine はコンパイル時に生成するソースマップを利用してそれらを認識します。

RubyMine は、キーワード、ラベル、変数、パラメーター、関数の補完を提案することにより、CoffeeScript コードの作成を支援します。 シンボルから宣言 Ctrl+B または実装 Ctrl+Alt+B に移動したり、名前 Ctrl+Alt+Shift+N のシンボルを検索したりできます。

RubyMine は、CoffeeScript コードを JavaScript に変換する coffeescript コンパイラーと連携します。 このツールは、CoffeeScript コードと生成された JavaScript コードの行間の対応関係を設定する ソースマップ も作成するため、RubyMine のデバッガーは CoffeeScript コードのブレークポイントを認識して正しく処理します。

始める前に

  1. Node.js をダウンロードしてインストールします。

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

  3. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの Marketplace タブに File Watchers プラグインをインストールして有効にします。

CoffeeScript を JavaScript にコンパイルする

コードを自動的にコンパイルするには、ファイルへの変更を追跡してコンパイラーを実行する CoffeeScript ファイルウォッチャーを構成する必要があります。

ファイルを開くと、RubyMine は現在のプロジェクトで適用可能なファイルウォッチャーが利用可能かどうかを確認します。 そのようなファイルウォッチャーが構成されているが無効になっている場合、RubyMine は構成されているファイルウォッチャーについて通知し、有効化を提案するポップアップを表示します。

現在のプロジェクトで該当するファイルウォッチャーが構成され有効化されている場合、RubyMine は 新規ウォッチャーダイアログで指定されたイベントが発生すると自動的にコンパイラーを起動します。

  • 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスが選択されている場合、ソースウォッチに変更が加えられるとすぐに File Watcher が呼び出されます。

  • 編集したファイルを自動保存してウォッチャーをトリガーする チェックボックスをオフにすると、保存時(ファイル | すべて保存Ctrl+S )または RubyMine からフォーカスを移動したとき(フレーム非アクティブ化時)にファイルウォッチャーが開始されます。

詳細は File Watchers をご覧ください。

コンパイラーは生成された出力を別のファイルに保存します。 ファイル名はソースファイル CoffeeScript と同じで、コンパイラーの種類に応じて拡張子は .js または .js.map となります。 生成されたファイルの場所は、 リフレッシュする出力パス フィールドが New Watcher ダイアログ に定義されています。 この設定に基づいて、RubyMine はコンパイラーの出力を検出します。 ただし、 プロジェクト ツールウィンドウ (Alt+1) では、ソースファイル coffee に表示され、ソースファイルはノードとして表示されます。

CoffeeScript コンパイラーをインストールする

  1. 埋め込まれた ターミナルAlt+F12 )で、次のいずれかのコマンドを入力します。

CoffeeScript ファイルウォッチャーを作成する

  1. Ctrl+Alt+S を押して設定を開き、 ツール | File Watchers を選択します。

  2. 追加ボタン をクリックするか、 Alt+Insert を押して、リストから CoffeeScript 定義済みテンプレートを選択します。 コードは JavaScript に翻訳され、生成された ソースマップ(英語)とともに提供されます。

  3. File Watchers に記載されている手順に従います。

コンパイラーの動作をカスタマイズする

RubyMine では、コマンドラインモードで作業している場合と同様にコンパイラーに引数を渡して調整できます。 以下は、 CoffeeScript コンパイラーのデフォルトの出力場所をカスタマイズする例です。

次のフォルダー構造のプロジェクトがあるとします:

ファイルウォッチャーのフォルダー構造の例

デフォルトのファイルウォッチャーでは、生成されたファイルは元のファイルの子として表示されます。

デフォルトのファイル監視出力

このデフォルトの場所を変更して、生成されたファイルを別の JavaScript フォルダーに保存することができます。

生成されたすべてのファイルを出力 JavaScript フォルダーに保存する

  1. CoffeeScript ファイルウォッチャーを作成します

    CoffeeScript ファイルウォッチャーを作成する
  2. 引数 フィールドに入力してください:

    --map --compile -o $ProjectFileDir$/JavaScript $FileName$
  3. リフレッシュする出力パス フィールドに入力してください:

    $ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map

その結果、プロジェクトツリーは次のようになります:

カスタム出力、フラット構造

生成されたファイルを、 app ノードの元の構造を繰り返すフォルダー構造に格納することもできます。

出力フォルダーに元のフォルダー構造を保持する

  1. CoffeeScript ファイルウォッチャーを作成します。

  2. 引数 フィールドに入力してください:

    --map --compile -o $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$ $FileName$
  3. リフレッシュする出力パス フィールドに入力してください:

    $ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.js:$ProjectFileDir$/JavaScript/$FileDirRelativeToProjectRoot$/$FileNameWithoutExtension$.map:$FileNameWithoutExtension$.js.map

その結果、プロジェクトツリーは次のようになります:

カスタム出力、フォルダー構造は保持

コンパイラーを実行せずにコンパイル結果をプレビューする

RubyMine は、コンパイラーを実際に実行することなく CoffeeScript コードの静的解析を行い、専用の読み取り専用ビューアーで予測されるコンパイル出力を表示できます。

  1. エディターで目的の CoffeeScript ファイルを開き、エディターの背景を右クリックします。

  2. コンテキストメニューから コンパイル済み CoffeeScript ファイルのプレビュー を選択します。 プレビューは専用の読み取り専用ビューアーで開かれます。左側のペインには元の CoffeeScript ソースコードが、右側のペインにはコンパイラーの実行時に生成する JavaScript コードが表示されます。

CoffeeScript の実行

RubyMine で CoffeeScript を実行する方法は 2 つあります:

  • CoffeeScript コードを手動でコンパイルし、出力された JavaScript コードを Node.js アプリケーションとして実行します。

  • 元の CoffeeScript コードを Node.js 実行構成で実行し、RubyMine がその場でコンパイルします。

CoffeeScript を手動でコンパイルし、生成された JavaScript コードを実行する

  1. CoffeeScript コードを Javascript にコンパイルします

  2. Node.js の実行構成の作成を開始するを次の必須設定で使用します。

    1. 使用する Node.js エンジン。 デフォルトでは、このフィールドには Node.js 構成時に JavaScript ランタイムページで指定したランタイムへのパスが表示されます。

    2. 作業ディレクトリ フィールドには、起動する CoffeeScript ファイルから参照するファイルの場所を指定します(例: includes)。 このファイルが他のファイルを参照していない場合は、フィールドを空のままにしてください。

    3. ノードアプリケーション JS ファイルへのパス フィールドに、コンパイル中に元の CoffeeScript ファイルから生成された JavaScript ファイルへの絶対パスを指定します。

  3. 設定を保存し、ダイアログで 実行 をクリックします。

    あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、 the Run button をクリックします。

  4. Node.js アプリケーションの実行の間に進みます。

実行中にオンザフライで CoffeeScript をコンパイルする

  1. このモードでは、 coffeescript パッケージの一部である register.js ファイルがプロジェクト内に配置されている必要があります。 そのため、 CoffeeScript コンパイラーのインストールで説明されている通り、 coffeescript パッケージがローカルにインストールされていることを確認してください。

  2. エディターで開始用の CoffeeScript ファイルを開くか、 プロジェクト ツールウィンドウ (Alt+1) でファイルを選択し、コンテキストメニューから <CoffeeScript_file_name> を実行します を選択します。 RubyMine は、自動生成する実行 / デバッグ構成でファイルを実行します。

    または、コンテキストメニューから <CoffeeScript_file_name> ファイルを作成します。 を選択し、開いた Run/Debug Configuration: Node.js ダイアログで次の必須設定を確認してください:

    1. 使用する Node.js ランタイム。 適切なランタイム構成を選択するか、新しい構成を作成してください。 デフォルトでは、このフィールドには Node.js 構成時に JavaScript ランタイムページで指定したランタイムへのパスが表示されます。

      Linux および macOS の場合、この設定は CoffeeScript コンパイラー実行可能ファイルのパスのノードによってオーバーライドされます。

    2. ノードパラメーター フィールドに --require coffeescript/register と入力します。

    3. 作業ディレクトリ フィールドで、アプリケーションの 作業ディレクトリ(英語)を指定します。 デフォルトでは、フィールドには プロジェクトのルートフォルダーが表示されます

    4. ファイル フィールドで、実行する CoffeeScript ファイルへのフルパスを指定します。

  3. 設定を保存し、ツールバーの the Run button をクリックします。

    あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、 the Run button をクリックします。

  4. Node.js アプリケーションの実行の間に進みます。

CoffeeScript のデバッグ

RubyMine で CoffeeScript をデバッグするには、JavaScript コードに加えて生成する ソースマップが必要です。 ソースマップは、CoffeeScript コードの各行と生成された JavaScript コードの各行を対応付ける設定を行います。そうしないと、ブレークポイントが正しく認識されず、処理されません。 JavaScript とソースマップは、 CoffeeScript タイプのファイルウォッチャーを使って CoffeeScript コードを手動でコンパイルして生成します。 その後、出力された JavaScript コードを Node.js アプリケーションとしてデバッグできます。

CoffeeScript のデバッグは、 ローカルモードでのみサポートされています。 つまり、RubyMine 自体が実行構成に従って Node.js エンジンとターゲットアプリケーションを起動し、セッション全体を完全に制御します。

Node.js アプリケーションのデバッグの詳細については、「Node.js の実行とデバッグ 」を参照してください。

CoffeeScript コードをデバッグする

  1. 必要に応じて、CoffeeScript コードに ブレークポイント を設定します。

  2. タイプ CoffeeScript の File Watcher を使用する CoffeeScript コードを Javascript にコンパイルします

  3. Node.js の実行構成の作成を開始するを次の必須設定で使用します。

    1. 使用する Node.js エンジン。 デフォルトでは、このフィールドには Node.js 構成時に JavaScript ランタイムページで指定したランタイムへのパスが表示されます。

    2. 作業ディレクトリ フィールドには、起動する CoffeeScript ファイルから参照するファイルの場所を指定します(例: includes)。 このファイルが他のファイルを参照していない場合は、フィールドを空のままにしてください。

    3. ノードアプリケーション JS ファイルへのパス フィールドに、コンパイル中に元の CoffeeScript ファイルから生成された JavaScript ファイルへの絶対パスを指定します。

  4. 設定を保存し、ツールバーの デバッグボタン をクリックします。

  5. Node.js アプリケーションと一緒にローカルでデバッガーを起動する場合に進みます。

構文ハイライトの構成

好みや慣習に応じて、CoffeeScript 対応の構文ハイライトを設定できます。

  1. 設定 ダイアログ(Ctrl+Alt+S )で エディター | カラースキーム | CoffeeScript に移動します。

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

2026 年 6 月 2 日