Microsoftは先月、Webアプリケーションの新規開発の簡略化を目的とした、Visual Studio Codeのクロスプラットフォーム拡張機能であるWeb Template Studio(WebTS)の新バージョンを発表した。この拡張機能は"ウィザード"を使用して、開発者によるフルスタックWebアプリケーションの定型コードの作成を支援し、既存のフロントエンドとバックエンドフレームワークをサポートする。
Microsoftは今年初めに、GitHubでWebTSをオープンソースとして公開したが、フロントエンドとバックエンドとしてはReact.jsとNode.jsのみを(それぞれ)サポートしていた。新リリースには、Angular(フロントエンド)、Vue.js(フロントエンド)、Flask(バックエンド)など、その他のフレームワークのサポートが含まれる。これらフレームワークに加えて、ストレージ(Azure Cosmos DB)とホスティング(Azure App Service)のクラウドサービスもサポートする。両サービスの使用には、有効なAzureアカウントが必要だ。
イメージ引用: https://blogs.windows.com/windowsdeveloper/2019/08/21/growing-web-template-studio/
WebTSはTypeScriptとReactで記述されていて、Visual StudioのMarketplaceから直接、または最新のGitHubリリースから手動でインストールすることができる。インストール完了後、新たにWebアプリケーションを作成するには、次の手順を実行する。
- VS CodeでWebTSプロジェクト作成コマンドを実行する(Web Template Studio：Launch)
- プロジェクトのセットアップ(アプリケーション名とフォルダ)
- フロントエンドとバックエンドフレームワークの選択
- アプリケーションのページの選択(さまざまなページテンプレートから最大20まで選択が可能)
- ストレージとホスティングサービスの選択(オプション)
提供されるページテンプレートには、グリッドやリストなど、一般的なレイアウトとパターンが含まれている。サポートされているフレームワークは、いずれも最新リリースは使用できないため、テンプレートで指定されたもの以外のフレームワークバージョンを選択できない点には注意が必要だ。公開時点でサポートされているフレームワークのバージョンは、以下のものである。
- React.js: v16.8.4
- Angular: v8.0.2
- Vue.js: v2.6.6
- Node.js: v10.15.0
- Flask: v1.0.3
初期セットアップが完了すれば、"Web Template Studio：Deploy App"コマンドを使って、プロジェクトをWebにデプロイすることができる(サポート対象のいずれかのクラウドサービスを使用する場合)。VS Codeのセットアップ、拡張機能のインストール、Webアプリケーションの新規作成に関しては、こちらに詳細な説明がある。
この拡張機能の興味深い点は、MicrosoftのスタートアップスタイルのインターンシッププログラムであるGarageのインターンがオリジナル版を開発したことだ。Tmm84がHackerNewsで指摘しているように、この点はコミュニティにも注目されている。
[WebTSは、]開発の一部としての、Webサービスの立ち上げ作業を簡略化します。このページで十分に説明されていないことのひとつは、開発においてインターンが果たした役割の大きさです。この機能性と使いやすさによって、開発したインターンたちが相応の評価を受けることを願っています。
Web Template Studioは、すべてのプラットフォーム(バージョン1.33以降)のVisual Studio Codeで利用可能で、依存関係としてNode.jsとyarnが必要である。拡張機能の詳細については、こちらで確認できる。