Monaca新機能第二弾。ーモナカプレス技術情報Monaca新機能第二弾。クラウドIDEでAngular2+/React/Vue.jsが使えるようになりました!Monaca新機能第二弾。中津川篤司Twitter5Facebook50はてブPocket2LINEAngular/React/Vue.jsといったフロントエンドWebのフレームワークは、独自の記法に沿ってテンプレートを実装します。ReactのJSXなどは顕著な例で、これまでのHTMLとは別物と言っても過言ではありません。いったフレームワークで記述されたプログラムを実行するためには、独自形式で記述されたファイルをトランスパイル(変換)して、Webブラウザが解釈できるピュアなHTML/CSS/JavaScriptに変換する必要があります。CLIを使わなければ開発できませんでした。今回、満を持してクラウドIDEにトランスパイル機能が搭載されました!これにより、Angular/React/Vue.jsなどのプロジェクトがWebブラウザ上で開発できるようになります。previewコマンドが実行されています。previewコマンドは、ファイルの状態を監視し、ファイルが変更されたらその都度トランスパイルを実行します。内部的にはwebpackが動いています。Navigation」を選択しました)。画面中央下にデバッガー、プレビューログというタブがあります(ターミナルタブがある人もいるかも知れません)。CLIのコマンドです。このコマンドにより、8080番ポートでアクセスできるWebサーバをコンテナ上に立ち上げています。その結果が右側のプレビュータブに表示されています。ファイルを編集すると自動的に変更を検知してトランスパイルが実行され、右側のプレビューもそれに合わせて更新されます。旧IDEでは、2ページ目以降の画面をプレビュー表示していた場合に、リロードがかかるとプレビュー画面がTOPページに戻ってしまっていました。新しいIDEのプレビューはホットリロードになっており、ファイルを変更してもプレビュー画面はTOPページに戻りません。検証作業が進めやすくなるはずです。まとめクラウドIDEで利用できなかったためにJSフレームワークの採用を見送っていた方にとっては朗報となるのではないでしょうか。通常、トランスパイル環境の構築には手間がかかりますが、Monacaではテンプレートから1クリックでプロジェクトを作成できるため導入がたいへん楽になります。本機能は現在ベータ版として提供しています。Monacaデバッガーではトランスパイルが必要なプロジェクトが動作しません。コマンドを実行してください。Monacaデバッガーで既にプロジェクトを同期済みの場合は、デバッガーの設定画面で「一時ファイルをクリア」ボタンを押す必要があります。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。アプリを広めるための大事な施策。Monaca新機能第三弾。...2017年5月31日Monacaでマッシュアップ。