PhpStorm 2024.3 ヘルプ

Meteor

Meteor(英語) は、クライアント側とサーバー側の両方で JavaScript を使用できるようにするフルスタックフレームワークです。PhpStorm は Meteor と統合されているため、IDE 内から使用できます。PhpStorm での Meteor のサポートには次のものが含まれます。

  • .meteor フォルダーを検出し、プロジェクトから .meteor/local フォルダーを除外することで、Meteor プロジェクトを自動認識します。詳細については、除外されたファイルを隠すを参照してください。

  • 定義済みの Meteor ライブラリをプロジェクトに自動的にアタッチします。これにより、構文のハイライト、参照の解決、コード補完が有効になります。

  • if およびディレクティブの補完を伴う Handlebars を介したスペースバーのサポート。PhpStorm はスペースバーテンプレートを認識しますが、副作用として、the Handlebars/Mustache icon を使用して Meteor プロジェクトの HTML ファイルをマークします。PhpStorm は、宣言 Ctrl+B に移動して、JavaScript ソースコードとテンプレート間のナビゲーションを提供します。

  • 1 つのデバッグセッション内でクライアント側とサーバー側のコードの両方をデバッグするための専用の複雑な Meteor 実行 / デバッグ構成については、Meteor アプリケーションのデバッグを参照してください。

始める前に

  1. Node.js をダウンロードしてインストールします。

  2. 設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。Ctrl+Alt+S を押して設定を開き、プラグインを選択します。インストール済みタブをクリックします。検索フィールドに JavaScript and TypeScript と入力します。プラグインの詳細については、プラグインのマッピングを参照してください。

  3. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、Meteor および Handlebars/Mustache プラグインを設定 | プラグインページのマーケットプレースタブにインストールします。

Meteor をインストールする

インストール手順は、使用しているオペレーティングシステムによって異なります。Meteor オフィシャル Web サイト(英語)の詳細を参照してください。

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

    $ curl https://install.meteor.com | /bin/sh

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

    $ curl https://install.meteor.com | /bin/sh

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

まだアプリケーションがない場合は、Meteor 定型テンプレートから Meteor 固有の構造を持つ PhpStorm プロジェクトを生成することができます。あるいは、空の PhpStorm プロジェクトを作成し、下の既存の Meteor アプリケーションから開始する説明に従って Meteor サポートを設定します。

定型テンプレートから Meteor プロジェクトを作成する

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

  2. 左側のペインで、Meteor を選択します。

  3. 右側のペインで:

    1. プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

    2. Meteor 実行可能ファイルの場所を指定します (Meteor のインストールを参照)。

    3. テンプレートリストから、生成するサンプルを選択します。基本的なプロジェクト構造を生成するには、デフォルトオプションを選択します。

    4. ファイル名フィールドに、生成される相互に関連する .js.html.css ファイルの名前を入力します。このフィールドは、デフォルトサンプルタイプがテンプレートドロップダウリストから選択されている場合にのみ使用できます。

空の PhpStorm プロジェクトを作成する

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

  2. 左側のペインで、PHP 空プロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

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

既存の Meteor アプリケーションの開発を継続する場合は、PhpStorm で開き、Meteor を設定し、下記の Meteor 依存関係のダウンロードに従って必要な依存関係をダウンロードしてください。

すでにマシン上にあるアプリケーションソースを開く

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

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

  1. ウェルカム画面でリポジトリのクローンをクリックします。

    あるいは、メインメニューからファイル | 新規 | バージョン管理からプロジェクトGit | クローンVCS | バージョン管理から取得を選択します。

    メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。例: Mercurial または Perforce

  2. 表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。詳細については、プロジェクトをチェックアウトする (クローン) を参照してください。

既存のプロジェクトで Meteor サポートを構成する

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

  2. Meteor 実行ファイルへのパスを指定します。標準インストール手順に従った場合、PhpStorm はファイルを自動的に検出します。

  3. .meteor/local フォルダーとその内容をインデックス作成に含めるには、オープンプロジェクトの ".meteor/local" ディレクトリを自動的に除外チェックボックスをオフにします。詳細については、以下の除外されたファイルを隠すを参照してください。

  4. Meteor パッケージを外部ライブラリとして自動的にインポートするチェックボックスが選択されていることを確認します。

    • チェックボックスを選択すると、PhpStorm は meteor/packages ファイルから外部パッケージを自動的にインポートします。その結果、PhpStorm はあらゆる範囲のコーディング支援を提供します。たとえば、check(true) などの Meteor 組み込み関数やサードパーティパッケージの関数への参照を解決し、適切な構文とエラーのハイライトを提供し、ソースマップを使用したデバッグをサポートします。

    • このチェックボックスをオフにすると、PhpStorm は meteor/packages ファイルから外部パッケージを自動的にインポートしません。その結果、コーディング支援は提供されません。状況を改善するには、エディターで meteor/packages ファイルを開き、パッケージをライブラリとしてインポートするリンクをクリックするか、meteor --update コマンドを実行します。

  5. PhpStorm が Meteor ライブラリをプロジェクトにアタッチしたことを確認してください。

    1. 設定ダイアログ(Ctrl+Alt+S)で、言語 & フレームワーク | JavaScript | ライブラリに移動します。

    2. 表示される設定: JavaScript ライブラリページで、ライブラリリストの Meteor プロジェクトライブラリの横にあるチェックボックスが選択されていることを確認します。

プロジェクトのセキュリティ

PhpStorm の外部で作成され、そこにインポートされたプロジェクトを開くと、PhpStorm は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。

次のいずれかのオプションを選択します。

  • セーフモードでプレビュー : この場合、PhpStorm はプロジェクトをプレビューモードで開きます。これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。

    PhpStorm はエディター領域の上部に通知を表示し、プロジェクトを信頼するリンクをクリックして、いつでもプロジェクトをロードできます。

  • プロジェクトを信頼 : この場合、PhpStorm はプロジェクトを開いてロードします。これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が使用可能になることを意味します。

  • 開かない : この場合、PhpStorm はプロジェクトを開きません。

プロジェクトのセキュリティの詳細を参照してください。

Meteor パッケージをインポートする

基本的な Meteor 固有のコーディング支援を保証する定義済みの Meteor ライブラリに加えて、.meteor/local/packages ファイルで定義されている追加のパッケージ(英語)をダウンロードできます。

追加の Meteor パッケージをダウンロードする

  1. エディターで .meteor/local/packages ファイルを開きます。

  2. 画面の右上隅にある Meteor パッケージのインポートリンクをクリックします。

  3. 開いたダイアログで、プロジェクトで開発しようとしているアプリケーションの種類に応じてダウンロードするパッケージを指定します。

    • クライアント

    • サーバー

    • Cordova: iOS および Android 用の Meteor アプリケーションの開発をサポートするパッケージをインポートするには、このオプションを選択します。詳細については、「Meteor Cordova Phonegap 統合(英語)」を参照してください。

PhpStorm は自動的に .meteor/local フォルダーにマークを付けます。このフォルダーはビルドされたアプリケーションを除外するものとして保存するためのものですが、それでもプロジェクトツリーに表示されます。

.meteor/local フォルダーを非表示にする

  • プロジェクトツールウィンドウ Alt+1 のツールバーにある Show Options Menu ボタンをクリックし、除外ファイルの表示オプションの横にあるチェックを外します。

Meteor アプリケーションを実行する

PhpStorm は、タイプ Meteor の実行構成に従って Meteor アプリケーションを実行します。ボイラープレートテンプレートからアプリケーションを作成した場合、PhpStorm はこの実行構成を生成します。

Meteor 実行構成を作成する

  1. ツールバーの実行 / デバッグ構成ウィジェットから実行構成の編集を選択し、新規構成の追加ボタン (the Add New Configuration button) をクリックして、リストから Meteor を選択して構成設定を開きます。

    Start creating a run/debug configuration
  2. 構成」タブで、インストールに従って Meteor 実行可能ファイルへのパスを指定します (「Meteor のインストール」を参照)。

  3. 実行するアプリケーションファイルが保存されているフォルダーを指定します。PhpStorm がアプリケーションを Meteor プロジェクトとして認識するように、このフォルダーはルートに .meteor サブフォルダーを持っている必要があります。

    デフォルトでは、作業ディレクトリはプロジェクトのルートフォルダーです。

オプション

  1. 必要に応じて、プログラムの引数フィールドで、起動時に実行可能ファイルに渡されるコマンドラインの追加パラメーターを指定します。これらは、たとえば、--dev--test--prod であり、アプリケーションが実行されている環境(開発テスト、または実稼働環境)を示し、起動時にさまざまなリソースがロードされます。

  2. デフォルトでは、PhpStorm は実行ツールウィンドウにアプリケーションの出力を表示します。クライアント側のコード実行の結果を表示するには、ブラウザー / Live Edit タブで起動後チェックボックスを選択し、リストから開くブラウザーを選択します。下のフィールドに、アプリケーションを開くための URL アドレスを指定します。デフォルト値は http://localhost:3000 です。

Meteor アプリケーションを実行する

  1. 上で説明したように実行 / デバッグ構成を作成するを選択するか、既存のものを変更してダイアログで実行をクリックします。

    あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、the Run button をクリックします。

  2. 上記のようにアプリケーションの起動時にブラウザーを開くように構成した場合は、実行ツールウィンドウまたはブラウザーでアプリケーション出力を表示します。

Meteor アプリケーションをデバッグする

PhpStorm を使用すると、1 回のデバッグセッションで Meteor JavaScript コードの client-sideserver-side の両方をデバッグできます。デバッグセッションは、専用の Meteor 実行構成を通じてのみ開始されます。

技術的には、異なるアプリケーションを実装するいくつかの Meteor プロジェクトを、単一の PhpStorm プロジェクト内で組み合わせることができます。これらのアプリケーションを独立して実行してデバッグするには、それぞれに関連する作業ディレクトリを使用して個別の実行構成を作成します。ポートの競合を避けるために、これらの実行構成では異なるポートを使用する必要があります。プログラムの引数フィールドで、--port=<port_number> の形式で各実行構成に別のポートを指定します。

  1. 必要に応じて、コードにブレークポイントを設定します。

  2. 上記の説明に従って、Meteor 実行 / デバッグ構成を作成します。「ブラウズ / ライブ編集」タブで、「起動後」チェックボックスを選択し、リストから「Chrome」を選択して、「JavaScript デバッガー付き」チェックボックスを選択します。

  3. デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある the Debug button をクリックするか、メインメニューから実行 | デバッグ <構成名> を選択します。

    デバッグツールウィンドウが開き、2 つのタブが表示されます。1 つは the Meteor icon とマークされたサーバーサイドコードのデバッグ用で、もう 1 つは the JavaScript icon とマークされたクライアントサイドコードのデバッグ用です。

  4. 中断されたプログラムを調べるプログラムをステップ実行します。

  5. 必要に応じて、以下で説明するように、その場でアプリケーションへの変更をプレビューします。

ブラウザーで変更をプレビューする

デバッグセッション中は、HTML、CSS、JavaScript コードの変更をその場でプレビューできます。編集したページのライブ内容は、デバッグツールウィンドウElements タブに表示されます。更新ポリシーは、アプリケーションのどの部分を編集しているかによって異なります。

クライアント側のコードへの変更をプレビューする

  • <構成名> JavaScript JavaScript icon タブに切り替え、ツールバーの Update をクリックします。

  • Meteor ページの Meteor ホットコードプッシュを有効にするチェックボックスを選択して、アップデートの自動アップロードを設定します。Meteor オフィシャル Web サイト(英語)の詳細を参照してください。

サーバー側のコードへの変更をプレビューする

  • <構成名> Meteor icon タブに切り替え、ツールバーの Update をクリックします。

  • HTML、CSS、JavaScript でのライブ編集の説明に従って、ライブ編集機能で自動アップロードを構成します。ページホットスワップが失敗した場合に再起動するチェックボックスをオンにすることをお勧めします。PhpStorm は、それなしで変更を適用できなかった場合にページの再読み込みを試みます。

関連ページ:

ソースコードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードをすばやく移動することができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。PhpStorm で利用可能なナビゲーションオプションをチェックするためにビデオチュートリアルを見ることから始めることができます。キャレットで移動する後方に移動するには、を押します。前方に移動するには、を押します。エディターの上部にすばやく移動するには、を押します。または、を押して

プラグインのインストール

プラグインは PhpStorm のコア機能を拡張します。例: プラグインをインストールして、次の機能を取得します。バージョン管理システム、課題追跡システム、ビルド管理サーバー、その他のツールとの統合。さまざまな言語とフレームワークのコーディング支援サポート。ショートカットのヒント、ライブプレビュー、ファイルウォッチャーなど。新しいプログラミング言語を学ぶのに役立つコーディング演習。プラグイン設定を開くを押して設定を開き、を選択します。マーケットプレースタブを使用して、JetBrains マーケッ...

GitHub でホストされているプロジェクトを管理する

プロジェクトをチェックアウトする (クローン):PhpStorm から直接貢献したいリポジトリのクローンを作成し、それに基づいて新しいプロジェクトを作成できます。メインメニューで、に移動します。Git メニューが使用できない場合は、を選択します。バージョン管理から取得ダイアログで、左側の GitHub を選択します。次のいずれかを実行して、GitHub にログインします。トークンがある場合は、トークンを使用するをクリックし、トークンをトークンフィールドに貼り付けて、ログインをクリックします。それ以外の...

Meteor

実行可能な Meteor このフィールドでは、Meteor 実行可能ファイルの場所を指定します (Meteor のインストールを参照)。オープンプロジェクトの

プロジェクトのセキュリティ

潜在的なセキュリティリスクを防ぐために、PhpStorm では、プロジェクトのソースがわからない場合に、プロジェクトの操作方法を決定できます。PhpStorm は、実行されるタスクまたは構成について警告し、信頼できるソースを構成できるようにします。不明なソースからプロジェクトを開く:プロジェクトを開くと、PhpStorm を使用すると、未知ソースコードを含むプロジェクトの処理方法をすぐに決定できます。プロジェクトを初めて開くたびに、IDE にプロジェクトを信頼ダイアログが表示されます。これは、...

実行 / デバッグ構成: Meteor

作成: このダイアログを使用して、Meteor アプリケーションを実行およびデバッグするための構成を作成します。構成タブ:Meteor 実行ファイルこのフィールドでは、Meteor 実行可能ファイルの場所を指定します (Meteor のインストールを参照)。プログラムの引数このフィールドでは、必要に応じて、起動時に実行可能ファイルに渡されるコマンドラインの追加パラメーターを指定します。これらは、たとえば、、であり、アプリケーションが実行されている環境(開発、テスト、または実稼働環境)を示し、起動時に...