Angular/React/Vue.jsといったフロントエンドWebのフレームワークは、独自の記法に沿ってテンプレートを実装します。ReactのJSXなどは顕著な例で、これまでのHTMLとは別物と言っても過言ではありません。
こういったフレームワークで記述されたプログラムを実行するためには、独自形式で記述されたファイルをトランスパイル（変換）して、Webブラウザが解釈できるピュアなHTML/CSS/JavaScriptに変換する必要があります。
これまでMonacaでは、Angular/React/Vue.jsのプロジェクトはMonaca LocalkitやMonaca CLIを使わなければ開発できませんでした。
しかしついに今回、満を持してクラウドIDEにトランスパイル機能が搭載されました！これにより、Angular/React/Vue.jsなどのプロジェクトがWebブラウザ上で開発できるようになります。
Monacaのトランスパイル機能とは
クラウドIDEのトランスパイル機能の裏側では、Monaca CLIで提供されているmonaca previewコマンドが実行されています。
monaca previewコマンドは、ファイルの状態を監視し、ファイルが変更されたらその都度トランスパイルを実行します。内部的にはwebpackが動いています。
クラウドIDEでの確認
プロジェクト新規作成時のテンプレート一覧から、Angular/React/Vue.jsのいずれかを選択できます（今回は「Onsen UI V2 Vue Navigation」を選択しました）。
画面中央下にデバッガー、プレビューログというタブがあります（ターミナルタブがある人もいるかも知れません）。プレビューログのタブでは、テキストボックスに monaca preview -p 8080 と書かれています。これが Monaca CLIのコマンドです。
このコマンドにより、8080番ポートでアクセスできるWebサーバをコンテナ上に立ち上げています。その結果が右側のプレビュータブに表示されています。
ファイルを編集すると自動的に変更を検知してトランスパイルが実行され、右側のプレビューもそれに合わせて更新されます。
旧IDEでは、2ページ目以降の画面をプレビュー表示していた場合に、リロードがかかるとプレビュー画面がTOPページに戻ってしまっていました。
新しいIDEのプレビューはホットリロードになっており、ファイルを変更してもプレビュー画面はTOPページに戻りません。検証作業が進めやすくなるはずです。
まとめ
クラウドIDEで利用できなかったためにJSフレームワークの採用を見送っていた方にとっては朗報となるのではないでしょうか。通常、トランスパイル環境の構築には手間がかかりますが、Monacaではテンプレートから1クリックでプロジェクトを作成できるため導入がたいへん楽になります。
ぜひ新しくなったクラウドIDEを活用して、Angular/React/Vue.js開発をスタートしてください！
注意点
本機能は現在ベータ版として提供しています。
Monacaデバッガーではトランスパイルが必要なプロジェクトが動作しません。
デバッガーで動かすには、ターミナルを起動して monaca transpile コマンドを実行してください。
Monacaデバッガーで既にプロジェクトを同期済みの場合は、デバッガーの設定画面で「一時ファイルをクリア」ボタンを押す必要があります。