JavaScript
PyCharmを使用すると、JavaScriptおよびNode.jsを使用して最新のWeb、モバイル、およびデスクトップアプリケーションを開発できます。
PyCharmは、JavaScriptおよびTypeScriptプログラミング言語、ReactおよびAngularフレームワークをサポートし、Web開発用のさまざまなツールとの緊密な統合を提供します。
このページには、Webアプリケーションを作成してデバッグしてテストする方法を順を追って説明する短いスタートガイドが用意されています。
新しいアプリケーションの作成
メインメニューでを選択するか、ようこそ画面で新規プロジェクトの作成をクリックしてください。[新規プロジェクト]ダイアログボックスが開きます。
左側のペインで、JavaScriptアプリケーションの開発を目的とするプロジェクトタイプ（Angular CLI、AngularJS、React App、React Nativeなど）を選択します。
右側のウィンドウで、プロジェクト関連のファイルが保存されるフォルダーのパスを指定します。
詳細設定を展開し、その他の必要なプロジェクトオプションを指定します。
既存のJavaScriptアプリケーションから始める
既存のJavaScriptアプリケーションの開発を継続する場合は、PyCharmで開き、使用するJavaScriptのバージョンを選択し、その中にライブラリを設定します。オプションで、必要なnpm依存関係をダウンロードします。
既にあなたのマシンにあるアプリケーションソースを開くには
ようこそ画面で開くをクリックするか、メインメニューでを選択します。表示されるダイアログで、ソースが保存されているフォルダーを選択します。
バージョンコントロールからアプリケーションソースをチェックアウトするには
ようこそ画面でバージョン管理からチェック・アウトをクリックするか、メインメニューでを選択します。
リストからバージョン管理システムを選択します。
表示されるVCS固有のダイアログで、アプリケーションのソースをチェックアウトするための資格情報とリポジトリを入力します。
JavaScript言語バージョンの選択
信頼性の高い効率的なコーディング支援を行うには、アプリケーションのすべてのJavaScriptファイルで使用される言語バージョンをデフォルトで指定する必要があります。
設定/環境設定ダイアログ（Ctrl+Alt+S）で、言語とフレームワークにあるJavaScriptを選択します。JavaScriptページが開きます。
- ドロップダウンリストから、サポートされているJavaScript言語のバージョンを選択します。
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）ボックス（Ctrl+Alt+S）で、エディターの一般をクリックし、次に外観をクリックします。外観ページが開きます。
パラメータ名のヒントを表示するチェックボックスの横にある構成をクリックします（チェックボックスはデフォルトで選択されています）。
表示されたパラメーター名ヒントの構成ダイアログで、オプション領域のすべての引数の名前を表示するチェックボックスを選択します。
JavaScriptでの自動インポート
PyCharmは、モジュール、クラス、コンポーネント、およびエクスポートされたその他のシンボルのインポート文を生成できます。プロジェクトでES6を使用している場合、PyCharmはES6シンボルを完了すると、その場で不足しているインポートステートメントを追加できます。
コード補完にES6インポートステートメントを追加するには
設定/環境設定ダイアログ（Ctrl+Alt+S）で、エディターにある一般をクリックし、自動インポートをクリックします。自動インポートページが開きます。
TypeScript / JavaScript領域で、コード補完時に ES6 のインポートを追加するチェックボックスを選択します。
PyCharmは、プロジェクトの依存関係で定義されたシンボルのインポート文を生成することもできます。Autoimportは、TypeScript定義ファイル(英語)（ 瞬間(英語)や還元の(英語)ような）やESモジュールとして書かれたソースを含むパッケージからのシンボルに対して機能します。
ブラウザでのJavaScriptの実行
エディターで、JavaScriptリファレンスを使用してHTMLファイルを開きます。このHTMLファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
- 以下のいずれか 1 つを実行します:
メインメニューでを選択するか、 Alt+F2を押します。次に、ポップアップメニューから目的のブラウザを選択します。
コードの上にマウスポインタを置くと、ブラウザのアイコンバーが表示されます。
目的のブラウザを示すアイコンをクリックします。
JavaScript のデバッグ
PyCharmには、Chromeで動作するクライアント側のJavaScriptコード用の組み込みデバッガが用意されています。
また、クライアント側のJavaScriptをFirefox 36以上でデバッグすることもできます。ただし、ChromeまたはChromeファミリの他のブラウザを使用することを強くお勧めします。PyCharmを使用すると、組み込みサーバー、外部サーバー、またはリモートサーバー上で動作するJavaScriptアプリケーションをデバッグすることができます。詳細は、ChromeのJavaScriptのデバッグおよびFirefoxでのJavaScriptのデバッグを参照してください。