WebStorm 2026.1 Help

Meteor​​

Meteor(英語) は、クライアント側とサーバー側の両方で JavaScript を使用できるようにするフルスタックフレームワークです。 WebStorm は Meteor と連携しており、IDE 内から利用できます。 WebStorm での Meteor サポートには次が含まれます：

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

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

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

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

始める前に

  1. コンピューターに Node.js(英語) があることを確認してください。

  2. JetBrains マーケットプレイスからプラグインをインストールする説明に従って、 設定 | プラグイン ページの マーケットプレース タブに Meteor プラグインをインストールして有効にします。

  3. 設定で Handlebars/Mustache プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 プラグイン を選択します。 インストール済み タブをクリックします。 検索フィールドに 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 固有の構造を持つ WebStorm プロジェクトを、Meteor ボイラープレート テンプレートから生成できます。 もしくは、空の WebStorm プロジェクトを作成し、下記の 既存の Meteor アプリケーションから開始する説明に従って Meteor サポートを設定します。

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

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

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

  3. 右側のペインで：

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

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

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

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

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

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

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

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

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

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

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

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

  1. ようこそ 画面で リポジトリのクローン をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

WebStorm の外部で作成されインポートしたプロジェクトを開くと、WebStorm は未知のソースコードをどう扱うか選択できるダイアログを表示します。

信頼できないプロジェクトの警告

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

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

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

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

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

詳細は プロジェクトのセキュリティ をご覧ください。

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

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

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

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

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

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

    • クライアント

    • サーバー

    • Cordova ：このオプションを選択すると、iOS・Android向け Meteor アプリケーション開発をサポートするパッケージをインポートできます。詳細は Meteor Cordova Phonegap Integration をご参照ください。

WebStorm は、ビルド済みアプリケーションを保存するための .meteor/local フォルダーを 除外として自動的にマークしますが、プロジェクトツリーには引き続き表示されます。

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

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

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

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

Meteor 実行構成を作成する

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

    Start creating a run/debug configuration

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

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

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

オプション

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

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

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

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

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

  2. 実行 ツールウィンドウまたは、アプリケーション起動時にブラウザーを開くよう設定されている場合はブラウザーで、アプリケーション出力を表示します。 上記参照。

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

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

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

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

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

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

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

  4. 中断中のプログラムを調査し、 プログラムをステップ実行します。

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

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

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

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

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

  • Meteor​​ ページの Meteor ホットコードプッシュを有効にする チェックボックスを選択して、アップデートの自動アップロードを設定します。 詳細は Meteor オフィシャル Web サイトで確認できます。

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

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

  • 自動アップロードは、 Live Edit の機能で HTML、CSS、JavaScript でのライブ編集 に記載の通り設定してください。 ページ で ホットスワップが失敗した場合に再起動する チェックボックスを選ぶことを推奨します。変更が適用できなかった場合、WebStorm がページの再読み込みを試みます。

2026 年 6 月 8 日
Markdown コードスタイル設定実行 / デバッグ構成: Meteor