JavaScript
PhpStorm を使用すると、JavaScript および Node.js を使用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。
PhpStorm は、React、Angular、Vue.js、その他のフレームワークもサポートし、Web 開発用のさまざまなツールとの緊密な統合を提供します。
JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、コードインスペクションおよびクイックフィックス、および一般的で JavaScript 固有リファクタリングが含まれます。PhpStorm は、JavaScript リンターおよび Flow 型チェッカーとも統合されます。
組み込みのデバッガーを使用すると、クライアント側とサーバー側の両方のコードをデバッグでき、対話的なデバッガーコンソールで JavaScript コードスニペットを実行することもできます。PhpStorm は、Chrome または Chrome ファミリの他のブラウザーでのみ JavaScript のデバッグをサポートすることに注意してください。Chrome での JavaScript のデバッグから詳細を参照してください。
PhpStorm は、Jest、Karma、Protractor、Cucumber、Mocha テストフレームワークと統合します。PhpStorm は、テストの実行とデバッグ、およびテストとサブジェクト間、失敗したテストと問題の原因となったコードのフラグメント間のナビゲーションをサポートします。
このページには、Web アプリケーションを作成してデバッグしてテストする方法を順を追って説明する短いスタートガイドが用意されています。
始める前に
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、 を選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。
新しいアプリケーションを作成する
PhpStorm は基本的な JavaScript プロジェクトを作成できるため、最小限の構成でプロジェクトをセットアップできます。生成されたプロジェクトには、console.log()
ウェルカムメッセージを含む package.json ファイルと index.js ファイルが含まれており、さらにサンプル Web アプリケーションを生成することもできます。
デフォルトでは、PhpStorm は自動的に Git リポジトリを作成し、生成されたソースを Git の制御下に置きます。
ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューから を選択します。新規プロジェクトダイアログが開きます。
左側のペインで、新規プロジェクトを選択します。
右側のペインで、JavaScript を選択し、プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
サンプル Web アプリケーションを生成するには、オンボーディングのヒントを使用して playground プロジェクトを生成するチェックボックスを選択します。PhpStorm は、Vite(英語) テンプレートに基づいてプロジェクトを作成し、スムーズなオンボーディングを保証するヒントを提供します。
作成をクリックします。
既存の JavaScript アプリケーションから始める
既存の JavaScript アプリケーションの開発を続ける場合は、PhpStorm で開き、使用する JavaScript バージョンを選択して、その中にライブラリを構成します。オプションで、必要な npm 依存関係をダウンロードします。
すでにマシン上にあるアプリケーションソースを開く
ウェルカム画面でオープンをクリックするか、メインメニューから を選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ウェルカム画面で VCS から取得をクリックします。
あるいは、メインメニューから
、 、 を選択します。メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。
プロジェクトのセキュリティ
PhpStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、PhpStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー : この場合、PhpStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PhpStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼 : この場合、PhpStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が使用可能になることを意味します。
開かない : この場合、PhpStorm はプロジェクトを開きません。
プロジェクトのセキュリティの詳細を参照してください。
JavaScript 言語バージョンを選択する
信頼性が高く効率的なコーディング支援を得るには、プロジェクトのすべての JavaScript ファイルでデフォルトで使用される言語バージョンを指定する必要があります。
設定ダイアログ(Ctrl+Alt+S)で、 に移動します。JavaScript ページが開きます。
リストから、サポートされている JavaScript 言語バージョンのいずれかを選択します。
ECMAScript 6 以降 (英語) : このバージョンでは、ECMAScript 2015-2020 で導入された機能と JSX 構文のサポート、および標準に対するいくつかの現在の提案が追加されています。
Flow(英語): このバージョンでは、Flow 構文がサポートされています。
複数の JavaScript バージョンを使用する
ECMAScript 5.1 と新しいバージョンの ECMAScript の両方を使用するアプリケーションに取り組んでいる場合、最も簡単な方法は、JavaScript ページ ( ) のリストからプロジェクト全体の最も高い言語バージョンを選択することです。
JavaScript ページで、JavaScript 言語バージョンリストの横にある をクリックします。JavaScript 言語バージョンダイアログが開きます。
をクリックして表示されるダイアログで、カスタム言語バージョンが必要なフォルダーを選択します。PhpStorm は、選択したフォルダーがパスフィールドに表示される JavaScript 言語バージョンダイアログに戻ります。
言語リストから、選択したフォルダー内のファイルの言語バージョンを選択します。プロジェクト内の他のすべての JavaScript ファイルでは、PhpStorm は JavaScript ページで選択されたバージョンを使用します。
JavaScript コードの JSX 構文
JavaScript コードで JSX 構文を使用している場合は、ECMAScript 6 を有効にします。
設定ダイアログ(Ctrl+Alt+S)で、 に移動し、JavaScript 言語バージョンリストから ECMAScript 6 を選択します。
JSX 構文が誤って使用された場合に警告されるようにするには、設定ダイアログ(Ctrl+Alt+S)を開き、 に移動して、JavaScript and TypeScript | 一般ノードで React JSX 構文インスペクションを有効にします。検索フィールドを使用してインスペクションを見つけます。
オプションで、インスペクションの重大度とスコープを構成します。コードインスペクションから詳細を参照してください。
プロジェクトの依存関係をダウンロードする
アプリケーションがいくつかのツール、ライブラリ、フレームワークを使用している場合は、必要なパッケージをダウンロードします。プロジェクトの依存関係を管理するには、npm(英語)、Yarn 1(英語)、または Yarn 2(英語) を使用できます。詳細については、npm および Yarn を参照してください。
空のプロジェクトにパッケージをインストールする
埋め込まれたターミナル(Alt+F12)で、次のように入力します。
npm install <package name>
.
すでにプロジェクトに package.json ファイルがある場合
エディターまたはプロジェクトツールウィンドウで package.json ファイルを右クリックし、コンテキストメニューから 'npm install' の実行を選択します。
または、ターミナル Alt+F12 で
npm install
を実行します。
プロジェクトの依存関係に合わせてコード補完を構成する
プロジェクトの依存関係にコード補完を提供するために、PhpStorm は自動的に node_modules ライブラリを作成します。言語と IDE のコンテキストでは、ライブラリはファイルまたはファイルのセットです。これらのファイルの関数とメソッドは、編集するプロジェクトコードから PhpStorm が取得する関数とメソッドに加えて、PhpStorm の内部知識に追加されます。詳細については、JavaScript ライブラリを構成するおよびコード補完を参照してください。
インレイヒントを見る
インレイヒントはエディターに表示され、コードに関する追加情報を提供して、読みやすく移動しやすくします。
パラメーターヒント
パラメーターヒントは、コードを読みやすくするためのメソッドや関数のパラメーター名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。
パラメーターのヒントを設定する
設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
パラメーター名の JavaScript を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
一部のメソッドおよび関数では、PhpStorm はどのコンテキストでもパラメーターヒントを表示しません。除外リスト ... をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。
任意のコンテキストで任意の値型のパラメーターヒントを非表示にするには、パラメーター名の JavaScript チェックボックスをオフにします。
戻り型のヒント
PhpStorm は、関数呼び出しで関数の戻り値の型を表示し、チェーンを呼び出すことができます。
関数の戻り値のヒントは、JSDoc コメントから、またはコードの静的分析に基づいて推論されます。
メソッドチェーンで型ヒントを返すは、メソッド呼び出しが複数行に分かれており、少なくとも 2 つの異なる型を返す場合に表示されます。
メソッドチェーンの戻り値の型のヒントは、内部 PhpStorm エバリュエーターによって提供されます。
メソッドの戻り型のヒントを構成する
設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
タイプで JavaScript ノードを展開し、関数の戻り値の型チェックボックスをオンにします。
メソッドチェーンで戻り値の型のヒントを表示するには、メソッドチェーンノードを展開し、JavaScript チェックボックスを選択します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
型ヒント
型ヒントは、変数、フィールド、パラメーターの型を示します。変数とフィールドの型は、その定義の横に表示されます。パラメーターの型ヒントは関数呼び出しに表示されます。型ヒントは、Jsdoc コメントまたはコードの静的分析から推論されます。
型アノテーションを構成する
設定ダイアログ(Ctrl+Alt+S)を開き、 に移動します。
カテゴリのツリーで、
を展開します。型アノテーションノードを展開し、型ヒントを表示するコンテキストを指定します。
プレビューには、設定で行った変更がコードの外観にどのように影響するかが表示されます。
任意のコンテキストで任意の値の型のパラメーターパラメーターの型と戻り型のヒントを非表示にするには、タイプの JavaScript チェックボックスをオフにします。
JavaScript で自動インポート
PhpStorm は、エクスポートされるモジュール、クラス、コンポーネント、その他のシンボルのインポートステートメントを生成できます。PhpStorm は、ES6 シンボルまたは CommonJS モジュールを完成させるときに、不足しているインポートステートメントをその場で追加できます。PhpStorm は、インポートステートメント自体のスタイルを決定するか、必要なスタイルを選択できるポップアップを表示します。
ES6 インポートステートメントを追加する
プロジェクトから ES6 モジュールであるファイル、または ES インポートステートメントがすでに含まれているファイルにシンボルをインポートする場合、PhpStorm はシンボルの補完時に ES6 インポートを自動的に挿入します。
以前の JavaScript バージョンの場合、または完了時の自動インポートが無効になっている場合、PhpStorm はシンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。
または、Alt+Enter を押します。
インポート可能なソースが複数ある場合は、PhpStorm に候補のリストが表示されます。
PhpStorm は、プロジェクトの依存関係で定義されたシンボルのインポートステートメントを生成することもできます。自動インポートは、TypeScript 定義ファイル(英語)(モーメント(英語)や redux など(英語))を含むパッケージまたは ES モジュールとして記述されたソースからのシンボルに対して機能します。
現在のファイルにすでに ES6import ステートメントが含まれている場合、PhpStorm は ES6 スタイルでも新しいステートメントを挿入します。
CommonJS(必須)インポートステートメントを追加する
プロジェクトからすでに CommonJS モジュールであるファイル(require
ステートメントまたは module.export
を使用)にシンボルをインポートする場合、PhpStorm はシンボルの補完時に CommonJS インポートを自動的に挿入します。
あるいは、インポートするシンボルにキャレットを置き、Alt+Enter を押して、CommonJS (require
) インポートスタイルのクイックフィックスを選択します。
自動インポートを構成する
コード補完に ES6 インポートステートメントを自動的に追加するには、設定ダイアログ(Ctrl+Alt+S)を開き、 に移動して、TypeScript/JavaScript 領域の JavaScript のインポートを自動的に追加するチェックボックスを選択します。
import
ステートメントの外観を構成するには、設定ダイアログ (Ctrl+Alt+S) を開き、 に移動し、インポートタブのコントロールを使用します。詳細については、「インポートタブ」を参照してください。
構文ハイライトを構成する
好みや習慣に応じて JavaScript 対応の構文ハイライトを設定することができます。
設定ダイアログ(Ctrl+Alt+S)で、 に移動します。
配色を選択するか、デフォルトから継承されたハイライト設定を受け入れるか、色とフォントの説明に従ってカスタマイズします。
ブラウザーで JavaScript を実行する
エディターで、JavaScript リファレンスを使用して HTML ファイルを開きます。この HTML ファイルは、必ずしもアプリケーションの開始ページを実装するものである必要はありません。
以下のいずれか 1 つを実行します:
メインメニューから
を選択するか、Alt+F2 を押します。次にリストから目的のブラウザーを選択します。コードの上にカーソルを置くと、ブラウザーのアイコンバー が表示されます。目的のブラウザーを示すアイコンをクリックします。
JavaScript のデバッグ
PhpStorm は、Chrome または Chrome ファミリの他のブラウザーで動作するクライアント側 JavaScript コード用の組み込みデバッガーを提供します。PhpStorm を使用すると、組み込みサーバー、外部サーバー、リモートサーバーで実行されている JavaScript アプリケーションをデバッグできます。詳細については、Chrome での JavaScript のデバッグを参照してください。
関連ページ:
コード補完
このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完は、可視性スコープ内のクラス、メソッド、キーワードの名前を補完するのに役立ちます。コード補完を呼び出すと、PhpStorm はコンテキストを分析し、現在のキャレット位置から到達可能な選択肢を提案します (提案にはライブテンプレートも含まれます)。基本コード補完がフィールド、パラメーター、変数宣言の一部に適用されている場合、PhpStor...
コードインスペクション
PhpStorm には、プロジェクト内の異常なコードを検出して修正する一連のコードインスペクションがあります。IDE は、さまざまな問題を見つけてハイライトし、デッドコードを見つけ、考えられるバグやスペルの問題を見つけ、全体的なコード構造を改善することができます。インスペクションは、すべてのプロジェクトファイルまたは特定のスコープでのみ(たとえば、本番コードまたは変更されたファイルでのみ)コードをスキャンできます。すべてのインスペクションには、問題がコードに影響を与える可能性がある程度の重大度レ...
インテンションアクション
エディターで作業するときに、PhpStorm はコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDE がコードを変更する方法を見つけるとすぐに、現在の行の横のエディターに黄色のバルブアイコンが表示されます。このアイコンをクリックすると、現在のコンテキストで使用できるインテンションアクションを表示できます。インテンションアクションは、警告から最適化の提案まで、さまざまな状況をカバーします。インテンションの完全なリストを表示し、設定ダイアログでカスタマイズで...
JavaScript のリファクタリング
リファクタリングとは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングは、コードを安定した dry に保ち、保守を容易にできます。シンボルの移動リファクタリング:PhpStorm を使用すると、ファイルやフォルダーを移動できるだけでなく、JavaScript トップレベルシンボルを移動できます。シンボルの移動リファクタリングは、ES6 モジュールのクラス、関数、変数に対して機能します。クラス、関数、変数を移動する移動するシンボルを選択します。を押すか、コン...
Flow
Flow は、JavaScript に型アノテーションをもたらす静的型チェッカーです。PhpStorm は Flow 構造を認識し、すべてのオペレーティングシステムでそれらの構文をハイライトします。始める前に:Node.js をダウンロードしてインストールします。Flow のインストールと構成:埋め込まれたターミナルで、次のいずれかのコマンドを入力します。を使用して Flow をグローバルにインストールします。開発依存として Flow をインストールするための、Flow オフィシャル Web サイトの...
対話型デバッガーコンソール
対話式のコンソールペインには、スタックトレースと、コードにログインしたすべてのものが表示されます(たとえば、を使用)。コンソールペインも read-eval-print ループ(REPL)なので、そこに JavaScript コードスニペットを実行して、現在デバッグしているページと対話できます。コンソールで JavaScript を実行する入力フィールドにでステートメントの入力を始めます。タイプするにつれて、PhpStorm は完成のための異形を提案します。該当する明細を選択してを押します。Ph...