BT

InfoQ ホームページ ニュース Microsoft Web Template Studio - Webアプリ開発を簡単にするVisual Studio Code拡張機能

Microsoft Web Template Studio - Webアプリ開発を簡単にするVisual Studio Code拡張機能

ブックマーク

原文(投稿日:2019/09/13)へのリンク

Microsoftは先月、Webアプリケーションの新規開発の簡略化を目的とした、Visual Studio Codeのクロスプラットフォーム拡張機能であるWeb Template Studio(WebTS)の新バージョンを発表した。この拡張機能は"ウィザード"を使用して、開発者によるフルスタックWebアプリケーションの定型コードの作成を支援し、既存のフロントエンドとバックエンドフレームワークをサポートする。

Microsoftは今年初めに、GitHubでWebTSをオープンソースとして公開したが、フロントエンドとバックエンドとしてはReact.jsNode.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.jsyarnが必要である。拡張機能の詳細については、こちらで確認できる。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。