PhpStorm 2019.3ヘルプ

JavaScript

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

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

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

始める前に

JavaScriptおよびTypeScriptバンドルプラグインがプラグインのページで有効になっていることを確認してください。詳細については、プラグインの管理を参照してください。

新しいアプリケーションを作成する

  1. ようこそ画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、空のプロジェクトを選択します。

  3. 右側のウィンドウで、プロジェクト関連のファイルが保存されるフォルダーのパスを指定します。作成をクリックします。

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

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

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

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

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

  1. ようこそ画面でバージョン管理から取得をクリックするか、メインメニューからVCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

JavaScript言語バージョンの選択

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

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScriptに移動します。JavaScriptページが開きます。

  2. リストから、サポートされているJavaScript言語バージョンのいずれかを選択します。

複数のJavaScriptバージョンを使用する

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

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

  1. JavaScriptページで、JavaScript 言語バージョンリストの横にある the Browse button をクリックします。JavaScript 言語バージョンダイアログが開きます。

  2. Add をクリックして表示されるダイアログで、カスタム言語バージョンが必要なフォルダーを選択します。PhpStormは、選択したフォルダーがパスフィールドに表示されるJavaScript 言語バージョンダイアログに戻ります。

  3. 言語リストから、選択したフォルダー内のファイルの言語バージョンを選択します。プロジェクト内の他のすべてのJavaScriptファイルでは、PhpStormはJavaScriptページで選択されたバージョンを使用します。

    ws_js_choose_language_version.png

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

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

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

  • 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install <package name> .

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

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

  • または、ターミナル Alt+F12npm install を実行します。

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

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

パラメータヒントの表示

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

Parameter hints in JavaScript

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

  1. 設定/環境設定ダイアログ Ctrl+Alt+S を開き、エディター | インレイ・ヒント | JavaScriptに進みます。

  2. リストからパラメーターのヒントを選択し、パラメーターのヒントの表示チェックボックスが選択されていることを確認してから、パラメーターヒントを表示するコンテキストを指定します。

  3. 一部のメソッドおよび関数では、PhpStormはどのコンテキストでもパラメーターヒントを表示しません。ブラックリスト...をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

JavaScriptでの自動インポート

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

以前のJavaScriptバージョンの場合、または完了時の自動インポートが無効になっている場合、PhpStormはシンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。

Autoimport with quick-fix: information tooltip

または、Alt+Enterを押します。

Autoimport with quick-fix: suggestion list

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

Autoimport with quick-fix: multiple choices

JavaScript言語バージョンの選択の詳細を参照してください。

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

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | 一般 | 自動インポートに移動します。自動インポートページが開きます。

  2. TypeScript / JavaScript領域で、コード補完時に ES6 のインポートを追加するチェックボックスを選択します。

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

構文強調表示の構成

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

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

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

ブラウザでJavaScriptを実行する

  1. エディターで、JavaScriptリファレンスを使用してHTMLファイルを開きます。このHTMLファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。

  2. 以下のいずれか 1 つを実行します:
    • メインメニューから表示 | ブラウザーで開くを選択するか、Alt+F2を押します。次にリストから目的のブラウザを選択します。

    • コードの上にマウスポインターを移動して、ブラウザーアイコンバーを表示します。Firefox Chrome Safari Internet Explorer Opera 目的のブラウザーを示すアイコンをクリックします。

JavaScript のデバッグ

PhpStormは、Chromeで動作するクライアント側JavaScriptコード用の組み込みデバッガーを提供します。

Firefoxバージョン36以降では、クライアント側のJavaScriptをデバッグすることもできます。ただし、ChromeまたはChromeファミリの他のブラウザを使用することを強くお勧めします。PhpStormを使用すると、組み込みサーバー、外部サーバー、またはリモートサーバーで実行されているJavaScriptアプリケーションをデバッグできます。詳細については、ChromeでのJavaScriptのデバッグおよびFirefoxでJavaScriptをデバッグするを参照してください。

最終更新日: 2020年2月20日

関連ページ:

プラグイン

WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...

プラグインの管理

プラグインはPhpStormのコア機能を拡張します。バージョン管理システム、アプリケーションサーバー、その他のツールとの統合を提供、さまざまな言語およびフレームワークに対するコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどを使用して、生産性をBoo...

JavaScript ライブラリの構成

PhpStormでは、ライブラリとは、PhpStormが編集したプロジェクトコードから取得する関数やメソッドに加えて、PhpStormの内部知識に関数やメソッドを追加したファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み禁止になっています。PhpStor...

コードとパスの自動補完

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完を使用すると、可視性の範囲内でクラス、メソッド、およびキーワードの名前を完成させることができます。コード補完を起動すると、PhpStormは...

コード参照情報

定義:PhpStormでは、タグ、クラス、フィールド、メソッド、関数などのシンボルがプロジェクトでどのように定義されているかを確認することができます。この目的のために、IDEにはクイック定義ポップアップがあります。シンボルの定義を表示するには、エディターでシンボルを選択し、 を押します(またはをクリ...

自動インポート

XML:インポート・ポップアップを表示するバインドされていないネームスペースの名前を入力するときにインポートポップアップを自動的に表示します。TypeScript / JavaScript:自動インポートはECMAScript 6言語レベルでのみ機能します。詳細についてはJavaScript言語バー...