PyCharm 2019.1ヘルプ

CoffeeScript

PyCharmでは、JavaScriptにコンパイルされたCoffeeScript(英語)を使用できます。PyCharmは *.coffee ファイルを認識し、the CoffeeScript iconでマークします。CoffeeScriptコードでブレークポイントを直接設定でき、PyCharmはコンパイル時に生成されたソースマップを使用してブレークポイントを認識します。

PyCharmは、キーワード、ラベル、変数、パラメータ、関数の補完を提案することにより、CoffeeScriptコードを書くのに役立ちます。シンボルからその宣言(Ctrl+B)または実装(Ctrl+Alt+B)にジャンプしたり、シンボルをその名前(Ctrl+Shift+Alt+N)で見つけることができます。

始める前

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

CoffeeScriptをJavaScriptにコンパイルする

PyCharmは、CoffeeScriptコードをJavaScriptに変換するcoffee-script(英語)コンパイラと統合します。また、PyCharmデバッガがCoffeeScriptコードのブレークポイントを認識して正しく処理できるように、CoffeeScriptコードと生成されたJavaScriptコードの行間の対応関係を設定するソースマップ(英語)も作成されます。コードをその場でコンパイルするには、コンパイラをPyCharm ファイル監視として設定する必要があります。

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

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

    • グローバルインストール用のnpm install --global coffeescript

    • 開発依存関係(英語)としてCoffeeScriptをインストールするためのnpm install --save-dev coffeescript

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

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、ツール | ファイル監視に進みます。

  2. the Add button をクリックするか Alt+Insert を押して、リストからCoffeeScript事前定義テンプレートを選択します。あなたのコードはJavaScriptに翻訳され、生成されたソースマップ(英語)と共に供給されます。

  3. プログラムフィールドに、coffee.cmd ファイルへのパスを指定します。手動でパスを入力するか、browseButton.png をクリックして表示されるダイアログでファイルの場所を選択します。

  4. ファイル監視機能の使用に記載されている手順に従います。

コードのコンパイル

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

該当するファイルウォッチャーが現在のプロジェクトで設定されて有効になっている場合、PyCharmは新しいウォッチャーダイアログで指定されたイベントで自動的にファイルウォッチャーを開始します。

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

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

コンパイラは生成された出力を別のファイルに格納します。このファイルの名前は、ソースCoffeeScriptファイルの名前と、コンパイラの種類に応じて拡張子 .js または .js.map です。生成されたファイルの場所は、新しいウォッチャーダイアログリフレッシュする出力パスフィールドで定義されています。この設定に基づいて、PyCharmはコンパイラの出力を検出します。ただし、プロジェクトツールウィンドウでは、それらは現在ノードとして表示されているソース coffee ファイルに表示されます。

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

PyCharmでは、コマンドラインモードで作業しているかのように、引数を渡してコンパイラを調整することができます。以下に、CoffeeScriptコンパイラのデフォルトの出力場所をカスタマイズする2つの例を示します。

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

File watchers example of folder structure
デフォルトでは、生成されたファイルは元のファイルが保存されているフォルダーに保存されます。このデフォルトの場所を変更し、生成されたファイルを .js フォルダーに保存することができます。さらに、app ノードのもとで元の構造を繰り返すフォルダー構造に並べて保存することもできます。

生成されたすべてのファイルを出力jsフォルダーに格納するには

  1. 引数フィールドに次のように入力します。

    --output $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\ --compile --map $FileName$

  2. リフレッシュする出力パスフィールドに次のように入力します。

    $ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.js:$ProjectFileDir$\js\$FileDirRelativeToProjectRoot$\$FileNameWithoutExtension$.map
    その結果、プロジェクトツリーは次のようになります。
    Example

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

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

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

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

CoffeeScriptの実行

PyCharmでCoffeeScriptを実行する方法は2つあります。

  • CoffeeScriptコードを手動でコンパイルし、出力JavaScriptコードをあたかもNode.jsアプリケーションのように実行します。

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

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

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

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

    1. 使用するNode.jsエンジン。デフォルトでは、このフィールドにはNode.jsの設定中にNode.jsページで指定されたインタープリターへのパスが表示されます。

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

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

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

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

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

  1. このモードでは、3パッケージの一部である register.js ファイルをプロジェクト内に配置する必要があります。npmとYarnで説明されているように、Node.jsページにcoffee-scriptパッケージをローカルにインストールする必要があります。

  2. 最初のCoffeeScriptファイルをエディターで開くか、プロジェクトツールウィンドウで選択して、コンテキストメニューから<CoffecScript_file_name>を作成します。を選択します。あるいは、Node.jsの実行/デバッグ設定を作成するにはの説明に従ってNode.js実行構成の作成を開始します。表示される実行/デバッグ設定:Node.jsダイアログで、以下の必須設定を指定します。

    1. 使用するNodeインタープリター。関連するインタープリター設定を選択するか、新しいインタープリター設定を作成します。デフォルトでは、このフィールドにはNode.js設定時にNode.jsページで指定されたインタープリターへのパスが表示されます。

      LinuxおよびmacOSの場合、この設定は、CoffeeScriptコンパイラ実行ファイルへのパスからNode.jsによって上書きされます。

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

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

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

    必要なCoffeeScriptファイルから直接実行構成を作成すると、すべての必須フィールドが自動的に入力されます。

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

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

CoffeeScriptのデバッグ

PyCharmでCoffeeScriptをデバッグするには、JavaScriptコードに加えて生成されたソースマップが必要です。ソースマップ(英語)は、CoffeeScriptコードの行と生成されたJavaScriptコードの対応を設定します。そうしないと、ブレークポイントは認識されず、正しく処理されません。JavaScriptおよびソースマップは、タイプCoffeeScriptのファイル監視を使用してCoffeeScriptコードを手動でコンパイルすることによって生成されます。その後、出力JavaScriptコードをあたかもNode.jsアプリケーションのようにデバッグできます。

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

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

CoffeeScriptコードをデバッグするには

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

  2. タイプCoffeeScriptのファイル監視を使用するCoffeeScriptコードをJavascriptにコンパイルします

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

    1. 使用するNode.jsエンジン。デフォルトでは、このフィールドにはNode.jsの設定中にNode.jsページで指定されたインタープリターへのパスが表示されます。

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

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

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

  5. ローカルにNode.jsアプリケーションをデバッグする間に進みます。

構文の強調表示の設定

好みや習慣に応じて、CoffeeScript対応の構文の強調表示を設定できます。

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | カラー・スキームの切り替え | CoffeeScriptに進みます。

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

最終更新日: 2019年5月17日

関連事項

言語とフレームワーク固有のガイドライン:

関連ページ:

サードパーティツールの設定

PyCharmでは、サードパーティ製のスタンドアロンアプリケーションを指定し、外部ツールとして実行できます。これらのツール(現在選択されているファイルやプロジェクトソースパスなど)にコンテキスト情報を渡したり、IDE内の出力を表示したり、実行/デバッグ設定のステップとしてツールの起動を設定したりでき...

npmおよびYarn

この機能はProfessionalエディションでのみサポートされています。このエディションは有償で、優れた機能を提供します。詳細は比較表を参照してください。PyCharmはnpmおよびYarnパッケージマネージャーと統合されているため、IDE内から再利用可能なコードのパッケージをインストール、検索、...

Node.jsとNPM

このページは、Node.jsプラグインが有効になっているときに設定ダイアログボックスに表示されます。このプラグインはPyCharmにバンドルされていませんが、プラグインを管理するに従ってJetBrainsプラグインリポジトリからインストールできます。Node インタープリターこのフィールドには、現在...

ファイル監視機能の使用

この機能はProfessionalエディションでのみサポートされています。このエディションは有償で、優れた機能を提供します。詳細は比較表を参照してください。ファイル監視は組み込みのPyCharmツールで、IDEでファイルを変更または保存するときにコンパイラ、フォーマッタ、linterなどのコマンドラ...

Node.jsの実行とデバッグ

この機能はProfessionalエディションでのみサポートされています。このエディションは有償で、優れた機能を提供します。詳細は比較表を参照してください。PyCharmは、Node.jsアプリケーションの実行とデバッグを支援します。PyCharmから起動し、既に実行中のアプリケーションにアタッチす...

Node.js

この機能はProfessionalエディションでのみサポートされています。このエディションは有償で、優れた機能を提供します。詳細は比較表を参照してください。Node.jsはサーバーサイドでJavaScriptを実行するための軽量のランタイム環境です。PyCharmはNode.jsと統合して、アプリケ...