JavaScript

PyCharmを使用すると、JavaScriptおよびNode.jsを使用して最新のWeb、モバイル、およびデスクトップアプリケーションを開発できます。

PyCharmは、JavaScriptおよびTypeScriptプログラミング言語、ReactおよびAngularフレームワークをサポートし、Web開発用のさまざまなツールとの緊密な統合を提供します。

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

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

メインメニューからファイル | 新規 | プロジェクトを選択するか、ようこそ画面で新規プロジェクトの作成をクリックします。新規プロジェクトダイアログが開きます。
左側のペインで、JavaScriptアプリケーションの開発を目的とするプロジェクトタイプ（Angular CLI、AngularJS、React アプリ、React Nativeなど）を選択します。
右側のウィンドウで、プロジェクト関連のファイルが保存されるフォルダーのパスを指定します。
詳細設定を展開し、その他の必要なプロジェクトオプションを指定します。

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

既存のJavaScriptアプリケーションを引き続き開発する場合は、PyCharmでそれを開き、使用するJavaScriptのバージョンを選択して、その中のライブラリーを構成します。必要に応じて、必要なnpm依存関係をダウンロードしてください。

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

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

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

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

JavaScript言語バージョンの選択

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

設定/環境設定ダイアログ（Ctrl+Alt+S）で、言語とフレームワーク | JavaScriptに移動します。JavaScriptページが開きます。
リストから、サポートされているJavaScript言語バージョンのいずれかを選択します。
- ECMAScript 3(英語)
- ECMAScript 5.1(英語)
- JavaScript 1.8.5(英語)
- ECMAScript 6(英語) : このバージョンでは、ECMAScript 2015-2017で導入された機能、および現在の標準への提案が追加されています。
- React JSX(英語) : このバージョンでは、ECMAScript 6の上にJSX構文のサポートが追加されています
- Flow(英語) : このバージョンでは、Flow構文がサポートされています。

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

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

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

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

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

コンピューターにNode.js(英語)があることを確認してください。アプリケーションがいくつかのツール、ライブラリー、またはフレームワークを使用している場合は、必要なパッケージをダウンロードしてください。

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

埋め込みターミナル（Alt+F12）に次のように入力します。
npm install <package name> .

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

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

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

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

パラメータヒントの表示

パラメーターのヒントは、コードを読みやすくするためのメソッドや関数のパラメータ名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。

パラメータのヒントを設定するには

設定/環境設定ダイアログ（Ctrl+Alt+S）で、エディター | 一般 | 外観に移動します。外観ページが開きます。
パラメータ名のヒントを表示するチェックボックスの横にある構成をクリックします（チェックボックスはデフォルトで選択されています）。
表示されたパラメーター名ヒントの構成ダイアログで、オプション領域の引数の名前をすべて表示するチェックボックスを選択します。

JavaScriptでの自動インポート

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

それ以前のバージョンのJavaScript、または完了時の自動インポートが無効になっている場合、PyCharmはシンボルに未解決のマークを付けてツールチップを表示します。

Alt+Enterを押すと、PyCharmは提案されたクイックフィックスを表示します：

インポート可能なソースが複数ある場合は、PyCharmに候補のリストが表示されます。

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

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

PyCharmは、プロジェクトの依存関係で定義されているシンボルのインポートステートメントも生成できます。自動インポートは、TypeScript定義ファイル(英語)を含むパッケージ（現時点でのも(英語)のやreduxなど(英語) ）からのシンボル、またはESモジュールとして記述されたソースに対して機能します。

構文の強調表示の設定

好みや習慣に応じてJavaScript対応の構文強調表示を設定することができます。

設定/環境設定ダイアログ（Ctrl+Alt+S）で、エディター | カラー・スキームの切り替え | JavaScriptに進みます。
配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。

ブラウザでのJavaScriptの実行

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

JavaScript のデバッグ

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

最終更新日: 2019年4月24日