Visual Studio Codeの拡張機能のWeb Template StudioでローカルでWebページ表示まで確認(Mac)

# Microsoft Web Template Studio
オープンソースの「Visual Studio Code」拡張機能の「Microsoft Web Template Studio」を試してみました。

## Github
- WebTemplateStudio<br>https://github.com/microsoft/WebTemplateStudio
- VisualStudioCode<br>https://github.com/microsoft/vscode

## Visual Studio Codeのインストール
Visual Studio Codeは以下からダウンロード＋インストールしてください。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

## Microsoft Web Template Studioのインストール
以下のショートカットで拡張機能を表示します。

|OS  |ショートカット  |
|---|---|
|Mac  |⇧⌘X  |
|Windows  |Ctrl+Shift+X  |

テキストボックスに「Web Template Studio」を入力します。
「Web Template Studio」が出てきたら「Install」ボタンクリックでインストールされます。

![スクリーンショット 2019-11-26 20.16.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/1b755e19-c85d-4550-f3bb-16f226c2223d.png)

※既にインストール済みのスクショで申し訳ない

## Web Template Studioでプロジェクト作成

### コマンドパレットから開始
以下のショートカットでコマンドパレットを表示します。

|OS  |ショートカット  |
|---|---|
|Mac  |⇧⌘P  |
|Windows  |Ctrl+Shift+P  |

コマンドパレットが表示されたら「Web Template Studio」を入力して開始です。
![スクリーンショット 2019-11-26 19.57.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/92bdf842-b27e-79ab-48f3-ac20b79d978e.png)

### プロジェクト名＋保存先設定

「Project Name」と「Save To」を設定したら「Next」をクリックします。
![スクリーンショット 2019-11-26 19.57.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/510b6405-94fb-3f9d-9713-5768317444b2.png)

### JavaScriptフレームワークの設定
React、Angular、Vue.jsから選択が可能です。
今回はAngularを選択しました。
![スクリーンショット 2019-11-26 20.00.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/1e068e32-d8b9-98f5-7b6a-15614263b007.png)

### バックエンドフレームワークの選択
Node/Express、Flask、Moleculerから選択が可能です。
今回はNode/Expressを選択しました。
![スクリーンショット 2019-11-26 20.00.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/20115240-6526-6c23-77e9-e938b47d1b5c.png)

JavaScriptフレームワークとバックエンドフレームワークを選択したら「Next」をクリックします。

### ページテンプレートの選択
とりあえずなんでもいいかなと思ったので、選ばれているやつをそのままにして「Next」をクリックします。
※好みのを選択・追加して下さい
![スクリーンショット 2019-11-26 20.01.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/ed1befe7-ea85-56d3-505e-294fbe85d666.png)

### Azure Cloudの設定
とりあえず今の所スルーでいいかなと思ったので、「Next」をクリックして次へ。
![スクリーンショット 2019-11-26 20.01.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/14391bbb-e921-567a-0708-2b54b9b57b6d.png)

### プロジェクト作成！
設定したものに問題がなけれ、「Create Project」をクリックしてプロジェクト作成を完了します。
![スクリーンショット 2019-11-26 20.02.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/8ca28d07-aa77-fc41-f13a-081b5e3566cb.png)

プロジェクト作成が完了すると以下のウィンドウが表示されるので、「Open Project」をクリックします。
![スクリーンショット 2019-11-26 20.02.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/3978f1e7-f7b0-c8e4-88ee-37286fddb98f.png)

プロジェクトを開くと以下のようか画面になるかと思います。
![スクリーンショット 2019-11-26 20.03.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/cde27126-56db-eee6-9996-360713ad47ea.png)

## サーバーを起動する

### ターミナルを起動
以下のショートカットでターミナルを表示します。

|OS  |ショートカット  |
|---|---|
|Mac  |⇧⌃`  |
|Windows  |Ctrl+Shift+`  |

![スクリーンショット 2019-11-26 20.03.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/59857fd2-fe51-3a7a-b86b-d82416446259.png)

### npmを初期化
表示されたターミナルで以下のコマンドを入力し実行します。

```
npm install
```

![スクリーンショット 2019-11-26 20.04.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/2e4ac15c-f949-b697-ed97-576407508982.png)

### npmでサーバー起動
npmでサーバーを起動するコマンドを入力し実行します。

```
npm run start
```
![スクリーンショット 2019-11-26 20.06.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226907/6922306c-73a5-4b86-5c64-7baa5e9f7dfb.png)

サーバー起動完了！！
あとは、以下のURLにアクセスすれば良いです。

```
http://localhost:3000/
```

## 感想
楽だなと思うのですよ。
最初から全て入れようとしたら
nodeインストールして
フレームワークインストールして
フォルダ構成考えて
etc・・・
となんやかんややらなきゃいけないのを手軽にWebページ表示（ローカル）できるので便利です。
いいオモチャを手に入れた気分です。
※nodeインストールとか最初だけだけど

とりあえず今回はここまで。:bow: