Meteor
Meteor(英語) は、クライアント側とサーバー側の両方で JavaScript を使用できるようにするフルスタックフレームワークです。 PhpStorm は Meteor と統合されているため、IDE 内から使用できます。 PhpStorm での Meteor のサポートには次のものが含まれます。
.meteor フォルダーを検出し、プロジェクトから .meteor/local フォルダーを除外することで、Meteor プロジェクトを自動認識します。 詳細については、 除外されたファイルを隠すを参照してください。
定義済みの Meteor ライブラリをプロジェクトに自動的にアタッチします。 これにより、構文のハイライト、参照の解決、コード補完が有効になります。
if および 各ディレクティブの補完を伴う Handlebars を介したスペースバーのサポート。 PhpStorm はスペースバーテンプレートを認識しますが、副作用として、
を使用して Meteor プロジェクトの HTML ファイルをマークします。 PhpStorm は、宣言 Ctrl+B に移動して、JavaScript ソースコードとテンプレート間のナビゲーションを提供します。1 つのデバッグセッション内でクライアント側とサーバー側のコードの両方をデバッグするための専用の複雑な Meteor 実行 / デバッグ構成については、 Meteor アプリケーションのデバッグを参照してください。
始める前に
Node.js をダウンロードしてインストールします。
設定で JavaScript and TypeScript プラグインが有効になっていることを確認します。 Ctrl+Alt+S を押して設定を開き、 を選択します。 検索フィールドに JavaScript と TypeScript と入力します。 プラグインに関する詳細は、 プラグインの管理を参照してください。
Meteor および Handlebars/Mustache プラグインを 設定 | プラグイン ページにインストールします。手順は JetBrains Marketplace からプラグインをインストールするで説明されています。
Meteor をインストールする
インストール手順は、使用しているオペレーティングシステムによって異なります。 Meteor オフィシャル Web サイト(英語)の詳細を参照してください。
Meteor オフィシャル Web サイト(英語)で LaunchMeteor.exe インストーラをダウンロードしてください。
コマンドライン シェルまたは組み込みの ターミナル （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 プロジェクトを作成する
ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから を選択します。 新規プロジェクトダイアログが開きます。
左側のペインで、 Meteor を選択します。
右側のペインで:
プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。
Meteor 実行可能ファイルの場所を指定します (Meteor のインストールを参照)。
テンプレート リストから、生成するサンプルを選択します。 基本的なプロジェクト構造を生成するには、 Default オプションを選択します。
ファイル名 フィールドに、生成される相互に関連する .js 、 .html 、 .css ファイルの名前を入力します。 このフィールドは、 デフォルトサンプルタイプが テンプレート ドロップダウリストから選択されている場合にのみ使用できます。
空の PhpStorm プロジェクトを作成する
ようこそ 画面で 新規プロジェクト をクリックするか、メインメニューから を選択します。 新規プロジェクトダイアログが開きます。
左側のペインで、 PHP 空プロジェクト を選択します。 右側のウィンドウで、アプリケーションフォルダーを指定し、 作成 をクリックします。
既存の Meteor アプリケーションから始める
既存の Meteor アプリケーションの開発を継続する場合は、PhpStorm で開き、Meteor を設定し、下記の Meteor 依存関係のダウンロードに従って必要な依存関係をダウンロードしてください。
すでにマシン上にあるアプリケーションソースを開く
ようこそ 画面で 開く をクリックするか、メインメニューから を選択します。 開いたダイアログで、ソースが保存されているフォルダーを選択します。
バージョン管理からアプリケーションのソースをチェックアウト
ようこそ 画面で リポジトリのクローン をクリックします。
あるいは、メインメニューから 、 、 を選択します。
メインメニューの Git の代わりに、プロジェクトに関連付けられている他のバージョン管理システムが表示される場合があります。 例： Mercurial または Perforce。
表示されるダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。 詳細については、 プロジェクトをチェックアウトする (クローン) を参照してください。
既存のプロジェクトで Meteor サポートを構成する
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。 Meteor ページが開きます。
Meteor 実行ファイルへのパスを指定します。 標準インストール手順に従った場合、PhpStorm はファイルを自動的に検出します。
.meteor/local フォルダーとその内容をプロジェクト分析に含めるには、 オープンプロジェクトの ".meteor/local" ディレクトリを自動的に除外 チェックボックスをオフにしてください。 詳細については、下記の 除外されたファイルを隠すを参照してください。
「有効」チェックボックスが選択されていることを確認します。
このチェックボックスをオンにすると、PhpStorm は meteor/packages ファイルから外部パッケージを自動的にインポートします。 その結果、PhpStorm は包括的なコーディング支援を提供します: Meteor 組み込み関数、たとえば
check(true)やサードパーティパッケージの関数への参照を解決し、適切な構文ハイライトとエラーハイライトを提供し、ソースマップを使用したデバッグなどをサポートします。このチェックボックスをオフにすると、PhpStorm は meteor/packages ファイルから外部パッケージを自動的にインポートしません。 その結果、コーディング支援は提供されません。 状況を改善するには、エディターで meteor/packages ファイルを開き、 パッケージをライブラリとしてインポートする リンクをクリックするか、
meteor --updateコマンドを実行します。
PhpStorm が Meteor ライブラリをプロジェクトにアタッチしたことを確認してください。
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
表示される 設定: JavaScript ライブラリ ページで、 ライブラリ リストの Meteor プロジェクトライブラリの横にあるチェックボックスが選択されていることを確認します。
プロジェクトのセキュリティ
IntelliJ IDEA の外部で作成され、そこにインポートされたプロジェクトを開くと、IntelliJ IDEA は、未知ソースコードを使用してこのプロジェクトを処理する方法を決定できるダイアログを表示します。
次のいずれかのオプションを選択します。
セーフモードでプレビュー: この場合、PhpStorm はプロジェクトをプレビューモードで開きます。 これは、プロジェクトのソースを参照することはできますが、タスクやスクリプトを実行したり、プロジェクトを実行 / デバッグしたりすることはできないことを意味します。
PhpStorm はエディター領域の上部に通知を表示し、 プロジェクトを信頼する… リンクをクリックして、いつでもプロジェクトをロードできます。
プロジェクトを信頼: この場合、PhpStorm はプロジェクトを開いてロードします。 これは、プロジェクトが初期化され、プロジェクトのプラグインが解決され、依存関係が追加され、すべての PhpStorm 機能が使用可能になることを意味します。
開かない: この場合、PhpStorm はプロジェクトを開きません。
プロジェクトのセキュリティ の詳細を参照してください。
Meteor パッケージをインポートする
基本的な Meteor 固有のコーディング支援を保証する定義済みの Meteor ライブラリに加えて、 .meteor/local/packages ファイルで定義されている追加の パッケージ(英語)をダウンロードできます。
追加の Meteor パッケージをダウンロードする
エディターで .meteor/local/packages ファイルを開きます。
画面の右上隅にある Meteor パッケージのインポート リンクをクリックします。
開いたダイアログで、プロジェクトで開発しようとしているアプリケーションの種類に応じてダウンロードするパッケージを指定します。
クライアント
Server
Cordova: iOS および Android 向け Meteor アプリケーションの開発をサポートするパッケージをインポートするには、このオプションを選択します。詳細は、 Meteor Cordova Phonegap Integrationを参照してください。
PhpStorm は、ビルド済みアプリケーションを保存するための .meteor/local フォルダーを 除外対象として自動的にマークしますが、プロジェクトツリーには引き続き表示します。
.meteor/local フォルダーを非表示にする
Project ツールウィンドウ（Alt+1 ）のツールバーにある
ボタンをクリックし、 除外ファイルの表示 オプションの横にあるチェックマークを外します。
Meteor アプリケーションを実行する
PhpStorm は、タイプ Meteor の実行構成に従って Meteor アプリケーションを実行します。 ボイラープレートテンプレートからアプリケーションを作成した場合、PhpStorm はこの実行構成を生成します。
Meteor 実行構成を作成する
ツールバーの 実行 / デバッグ構成 ウィジェットから 実行構成の編集 を選択し、 新規構成の追加 ボタン (
) をクリックして、リストから Meteor を選択して 構成設定を開きます。
「構成 」タブで、インストールに従って Meteor 実行可能ファイルへのパスを指定します (「Meteor のインストール 」を参照)。
実行するアプリケーションファイルが保存されているフォルダーを指定します。 PhpStorm がアプリケーションを Meteor プロジェクトとして認識するように、このフォルダーはルートに .meteor サブフォルダーを持っている必要があります。
デフォルトでは、作業ディレクトリはプロジェクトのルートフォルダーです。
オプション
必要に応じて、 プログラムの引数 フィールドで、起動時に実行可能ファイルに渡されるコマンドラインの追加パラメーターを指定します。 これらは、たとえば、
--dev、--test、--prodであり、アプリケーションが実行されている環境（開発、 テスト 、または 実稼働環境）を示し、起動時にさまざまなリソースがロードされます。デフォルトでは、PhpStorm は 実行 ツールウィンドウにアプリケーションの出力を表示します。 クライアント側のコード実行の結果を表示するには、 ブラウザー / Live Edit タブで 起動後 チェックボックスを選択し、リストから開くブラウザーを選択します。 下のフィールドに、アプリケーションを開くための URL アドレスを指定します。 デフォルト値は http://localhost:3000 です。
Meteor アプリケーションを実行する
上で説明したように実行 / デバッグ構成を作成するを選択するか、既存のものを変更してダイアログで 実行 をクリックします。
あるいは、メインツールバーのリストから新しく作成した実行構成を選択し、
をクリックします。実行 にアプリケーションの起動時にブラウザーを開くように構成した場合は、 実行 ツールウィンドウまたはブラウザーでアプリケーション出力を表示します。
Meteor アプリケーションをデバッグする
PhpStorm を使用すると、1 回のデバッグセッションで Meteor JavaScript コードの client-side と server-side の両方をデバッグできます。 デバッグセッションは、専用の Meteor 実行構成を通じてのみ開始されます。
技術的には、異なるアプリケーションを実装するいくつかの Meteor プロジェクトを、単一の PhpStorm プロジェクト内で組み合わせることができます。 これらのアプリケーションを独立して実行してデバッグするには、それぞれに関連する作業ディレクトリを使用して個別の実行構成を作成します。 ポートの競合を避けるために、これらの実行構成では異なるポートを使用する必要があります。 プログラムの引数 フィールドで、 --port=<port_number> の形式で各実行構成に別のポートを指定します。
必要に応じて、コードに ブレークポイントを設定します。
上記のようにMeteor 実行/デバッグ構成を作成します。 「ブラウズ / ライブ編集 」タブで、「起動後 」チェックボックスを選択し、リストから「Chrome 」を選択して、 JavaScript デバッガーを使用 チェックボックスを選択します。
デバッグセッションを開始するには、メインツールバーのリストから必要なデバッグ構成を選択して、リストの横にある
をクリックするか、メインメニューから を選択します。デバッグ ツールウィンドウが開き、タブが 2 つ表示されます。
で示されるサーバー側コードのデバッグ用と、 
で示されるクライアント側コードのデバッグ用です。必要に応じて、 以下で説明するように、その場でアプリケーションへの変更をプレビューします。
ブラウザーで変更をプレビューする
デバッグセッション中は、HTML、CSS、JavaScript コードの変更をその場でプレビューできます。 編集したページのライブ内容は、 デバッグツールウィンドウの Elements タブに表示されます。 更新ポリシーは、アプリケーションのどの部分を編集しているかによって異なります。
クライアント側のコードへの変更をプレビューする
<構成名> JavaScript
タブに切り替え、ツールバーの 
をクリックします。Meteor ページの Meteor ホットコードプッシュを有効にする チェックボックスを選択して、アップデートの自動アップロードを設定します。 Meteor オフィシャル Web サイト(英語)の詳細を参照してください。
サーバー側のコードへの変更をプレビューする
<Configuration name>
タブに切り替え、ツールバーの をクリックします。Live Edit 機能による自動アップロードを、 HTML、CSS、JavaScript でのライブ編集 の説明に従って構成します。 ページ で ホットスワップが失敗した場合に再起動する チェックボックスを選択することをお勧めします。ページを再読み込みしないと変更を適用できない場合、PhpStorm はページの再読み込みを試みます。