こんにちは。
キャスレーコンサルティングSI(システム・インテグレーション)部の内田です。

今回は、Node.jsベースのWebアプリケーションフレームワーク「Meteor」を、
MicroSoft製のソースエディタ「Visual Studio Code」上で、開発環境を作って動かしてみたいと思います。

1.Meteorとは

Node.jsをベースとした、Webアプリケーションフレームワークです。

スクリーンショット 2017-11-06 19.33.32

ここ数年の、フロントエンド技術の発展のスピードは、凄いものがありますが、
Node.jsや周辺技術が 、その基盤技術として重要性を増しており、Meteorはその一つという事になります。

Meteorの特徴は、何と言っても「フルスタック」のフレームワークであるという点です。
そして、動くアプリが早く作れる点が魅力的です。

DBが内蔵されていて、インストール不要だったり、(MongoDBのサブセットが入っています)
iOS、android向けアプリケーションのビルドもできます。
また、SlackクローンのRocketChatなどのサイトで、採用されています。

ちなみに、私自身、RocketChatを利用していた事から、Meteorの存在を知りました。
最近では、個別の技術ごとにモジュールを組み合わせて、システムを構築する事例が増えてきており、
フルスタックフレームワークは、あまり流行らない傾向にあるようです。

しかし、プロトタイプ制作のように、用途が限定されていたりするケースでは、威力を発揮することと思います。

2.Meteorをインストールしてみる

インストールガイドに沿って、Meteorのインストールを行ないます。

meteorチュートリアルトップ
以下、動作確認は、下記の環境で実施しています。
(MacOS 10.12.3 諸事情により、Windows系の環境でない点は申し訳ございません)

2017.11.4現在、Windows系環境でもChocolateyベースのインストール環境が、整備されているようですので、
サポートされている環境であれば、恐らく簡単にインストールできます。

Macでは、ターミナルのインストールページで、案内されたコマンドを打つだけです。

$curl https://install.meteor.com/ | sh
######################################################################## 100.0%

Meteor 1.5.2.2 has been installed in your home directory (~/.meteor).
Writing a launcher script to /usr/local/bin/meteor for your convenience.

To get started fast:

$ meteor create ~/my_cool_app
$ cd ~/my_cool_app
$ meteor

Or see the docs at:

docs.meteor.com

1コマンドで、インストールが完了します。

3.Visual Studio Codeのインストール

実際にMeteorを触る前に、Visual Studio Codeをインストールしておきましょう。
Visual Studio Codeのダウンロードページに行き、対象環境向けのインストーラーをダウンロードします。

VSCダウンロードページ

今回は、Mac向けのイメージをダウンロードします。
zipファイルを展開し、解凍されたAppを起動します。

VSCトップ
空の状態で、アプリが起動します。

編集するソースコードを生成するため、Meteorに戻ります。

4.空のMeteorアプリを生成してみる

空のMeteorアプリを、作成します。

最近のフレームワークらしく、1コマンドで作成できます。

meteorチュートリアルトップ

チュートリアルページ左端の「TO DO APP」で、
フロントエンド側の構成が、「Blaze」「Angular」「React」の3タイプから選択できます。

今回は、Meteorのデフォルト構成である「Blaze」を選択してみます。
(余談ですが、Angularのバージョンが(AngularJS)1.6を対象としており、
Angular2以降でないとあまり..みたいな所があるため、Blazeを選択しました。)

ターミナルで、任意のディレクトリ下でアプリ作成コマンドを入力します。

$ meteor create simple-todos
Created a new Meteor app in 'simple-todos'.

To run your new app:
cd simple-todos
meteor

If you are new to Meteor, try some of the learning resources here:
https://www.meteor.com/tutorials

meteor create --bare to create an empty app.
meteor create --full to create a scaffolded app.

空のMeteorアプリが、できました。

5.Visual Studio Codeの開発環境を整える

Visual Studio Codeで、生成されたアプリのフォルダーを、開きます。

VSCフォルダ開く

Visual Studio Codeアプリメニュー「表示」ー「統合ターミナル」を、開きます。

以後、アプリの起動・停止に関するコマンドは、Visual Studio Code上より実行します。
Meteorの補完プラグインを、導入しておきます。
左端メニュー最下段の「拡張機能」で、「Meteor」をインストールします。

VSC_meteor補完プラグイン

Meteorのソースコードに、補完が効くようになります。

VSC_meteor補完
VSC上で、サーバー側デバッグの実行設定を行ないます。
(今回の手順で分かりづらかった箇所になります。)

ちなみに、Node.jsのデバッグ方法として、
サーバーサイドの処理も、Chrome上でデバッグする方法も、ポピュラーな手法のようですが、
今回はVSC上で、コードをステップ実行できるようにします。

ターミナルで「Meteor debug」コマンドを実行すると、サーバーがデバッグモードで起動します。

$ meteor debug
[[[[[ ~/dev/meteor/simple-todos ]]]]]

=> Started proxy.
=> Started MongoDB.
W20171112-13:25:16.571(9)? (STDERR) Debugger listening on ws://127.0.0.1:9229/8c8a1259-e6fe-42b4-b19a-593d83e2a590
W20171112-13:25:16.593(9)? (STDERR) For help see https://nodejs.org/en/docs/inspector

起動プロセスが途中で止まり、デバッガーのアタッチを待機した状態になります。

※Meteorコマンドの内部でNode.js用デバッガー「node-inspector」が起動しており、
上記の起動ログが出力されています。Node.jsその他のバージョンが古いと、起動時のログに

visit http://0.0.0.0:8080/debug?port=5858 to start debugging

..等々と出力され、接続先が異なる形になるようです。

左端のメニューより、「デバッグ」を選択します。
再生アイコンの右に、プルダウンメニューがあり、デバッグ構成を選択できるようになっていますが、
最初は、「構成がありません」となっています。

VSC_デバッグメニュー
構成のリストをクリックすると、最下段に「構成の追加…」と出てくるので選択すると、
構成の候補が表示されるので、 「Node.js: リモート プログラムにアタッチする」を選択します。

同時に、"[プロジェクトルート]/.vscode/launch.json"(Visual Studio Codeのデバッグ構成ファイル)の
編集が開くので、内容を修正します。 [.vscode/launch.json]

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Remote",
            "address": "localhost",
            "port": 9229,
            "localRoot": "${workspaceFolder}",
            "remoteRoot": "Absolute path to the remote directory containing the program"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/server/main.js"
        }
    ]
}

接続先のアドレスを”localhost”とし、launch.jsonを保存します。
Meteor debugを、再度起動します。
デバッグ構成のプルダウンより、「Attach to Remote」を選択し、「デバッグの開始」を実行します。

デバッグ起動

$meteor debug
[[[[[ ~/dev/meteor/simple-todos ]]]]]

=> Started proxy.
=> Started MongoDB.
W20171112-14:05:57.671(9)? (STDERR) Debugger listening on ws://127.0.0.1:9229/10592b33-5d48-4240-8eae-2b1efea50c1c
W20171112-14:05:57.690(9)? (STDERR) For help see https://nodejs.org/en/docs/inspector
W20171112-14:06:04.967(9)? (STDERR) Debugger attached.

デバッガーの設定が、できました!

5.Meteorのチュートリアルを進めてみる

Meteorの空アプリを作成した状態で、http://localhost:3000にアクセスすると、下のようなページが表示されます。

meteor空トップページ

…ここから、Meteorのチュートリアルを進めていきたかったのですが、
今回は開発環境、特にサーバー側デバッグ環境の整備に、紙面を割いてしまったため、
この先は、またの機会にご紹介させていただきたいと思います。

チュートリアル2 VSCコーディング meteorチュートリアル途中

(こんな感じで、チュートリアルが進むはずでした)

7.まとめ

今回は、WebアプリフレームワークMeteorをVisual Studio Code上で開発環境を作り、動かしてみました。

特に、サーバー側のデバッグ環境構築について、
自分で触っていて、取っ付きにくく感じる箇所が多々ありましたので、ある程度細かな説明をしてみました。

そのため、Meteorの機能や利点について、踏み込んだ説明がほとんどできなかった感がありますので、
今後は、その辺りに踏み込んでいく機会があるといいなと思います

最後までお読みくださり、ありがとうございました。