JavaScript
PyCharmを使用すると、JavaScriptおよびNode.jsを使用して最新のWeb、モバイル、およびデスクトップアプリケーションを開発できます。
PyCharmは、JavaScriptおよびTypeScriptプログラミング言語、ReactおよびAngularフレームワークをサポートし、Web開発用のさまざまなツールとの緊密な統合を提供します。
このページには、Webアプリケーションを作成してデバッグしてテストする方法を順を追って説明する短いスタートガイドが用意されています。
始める前に
JavaScriptおよびTypeScriptバンドルプラグインがプラグインのページで有効になっていることを確認してください。詳細については、プラグインを管理するを参照してください。
新しいアプリケーションの作成
既存のJavaScriptアプリケーションから始める
既存のJavaScriptアプリケーションを引き続き開発する場合は、PyCharmでそれを開き、使用するJavaScriptのバージョンを選択して、その中のライブラリーを構成します。必要に応じて、必要なnpm依存関係をダウンロードしてください。
既にあなたのマシンにあるアプリケーションソースを開くには
バージョン管理からアプリケーションソースをチェックアウトするには
ようこそ画面でバージョン管理から取得をクリックするか、メインメニューからを選択します。
呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。
JavaScript言語バージョンの選択
信頼性の高い効率的なコーディング支援を行うには、アプリケーションのすべてのJavaScriptファイルで使用される言語バージョンをデフォルトで指定する必要があります。
設定/環境設定ダイアログ Ctrl+Alt+Sで、に移動します。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(英語)があることを確認してください。アプリケーションがいくつかのツール、ライブラリー、またはフレームワークを使用している場合、必要なパッケージをダウンロードします。
空のプロジェクトにパッケージをインストールするには
既にプロジェクトにpackage.jsonファイルがある場合
エディターまたはプロジェクトツールウィンドウで package.json ファイルを右クリックして、コンテキストメニューから実行 'npm install'を選択します。
または、ターミナル Alt+F12で
npm installを実行します。
プロジェクト依存関係のためのコード補完の設定
プロジェクトの依存関係にコード補完を提供するために、PyCharmは自動的にnode_modulesライブラリーを作成します。PyCharmでは、ライブラリーとは、PyCharmが編集したプロジェクトコードから取得した関数やメソッドに加えて、その関数やメソッドがPyCharmの内部知識に追加されたファイルまたはファイルのセットです。詳細と例については、JavaScript ライブラリーを設定するとコード補完を参照してください。
パラメータヒントの表示
パラメーターのヒントは、コードを読みやすくするためのメソッドや関数のパラメータ名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。
パラメータのヒントを設定するには
JavaScriptでの自動インポート
PyCharmは、モジュール、クラス、コンポーネント、およびエクスポートされたその他のシンボルのインポート文を生成できます。プロジェクトでES6を使用している場合、ES6シンボルを完了すると、PyCharmは実行中に欠落しているインポートステートメントを追加できます。
JavaScript言語バージョンの選択の詳細を参照してください。
コード補完にES6インポートステートメントを追加するには
設定/環境設定ダイアログ Ctrl+Alt+Sで、に移動します。自動インポートページが開きます。
TypeScript / JavaScript領域で、コード補完時に ES6 のインポートを追加するチェックボックスを選択します。
PyCharmは、プロジェクトの依存関係で定義されたシンボルのインポートステートメントも生成できます。自動インポートは、TypeScript定義ファイル(英語)を含むパッケージ（ 瞬間(英語)やreduxなど(英語) ）またはESモジュールとして記述されたソースからのシンボルに対して機能します。
構文の強調表示の設定
好みや習慣に応じてJavaScript対応の構文強調表示を設定することができます。
配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。
ブラウザでのJavaScriptの実行
目的のブラウザーを示すアイコンをクリックします。JavaScript のデバッグ
PyCharmは、Chromeで動作するクライアントサイドJavaScriptコード用の組み込みデバッガを提供します。
Firefox、バージョン36以降でクライアントサイドのJavaScriptをデバッグすることもできます。ただし、ChromeまたはChromeファミリーの他のブラウザを使用することを強くお勧めします。PyCharmを使用すると、組み込みサーバー、外部サーバー、またはリモートサーバー上で実行されているJavaScriptアプリケーションをデバッグできます。詳細については、ChromeのJavaScriptのデバッグとFirefoxでのJavaScriptのデバッグを参照してください。
関連ページ：
プラグイン
WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール：マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...
プラグインを管理する
プラグインはPyCharmのコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、その他のツールとの統合を提供、さまざまな言語およびフレームワークに対するコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどを使用して、生産性をBoos...
JavaScript ライブラリーを設定する
PyCharmでは、ライブラリーとは、PyCharmが編集したプロジェクトコードから取得する関数やメソッドに加えて、PyCharmの内部知識に関数やメソッドを追加したファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリーはデフォルトで書き込み禁止になっています。PyCharmは...
コード補完
このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完：基本コード補完を使用すると、可視性の範囲内でクラス、メソッド、およびキーワードの名前を完成させることができます。コード補完を起動すると、PyCharmはコ...
自動インポート
XML：インポート・ポップアップを表示するバインドされていないネームスペースの名前を入力するときにインポートポップアップを自動的に表示します。Python：インポート・ポップアップを表示するインポート文がないクラスの名前を入力すると、インポートポップアップダイアログが自動的に表示されます。優先インポ...
色とフォントの設定
開発者として、エディターのソースコード、検索結果、デバッガ情報、コンソールの入出力など、多くのテキストリソースを使用します。色とフォントスタイルは、このテキストの書式設定に使用され、一目で理解しやすくなります。PyCharmは推奨する色とフォントを定義するカラースキームを使います。事前定義された配色...