Visual Studio Code拡張機能「VSCode Twilio」の紹介

SendGridサポートエンジニアの[キクタロー](https://twitter.com/kikutaro_)です。今日はTwilioが出している[Visual Studio Codeの拡張機能「VSCode Twilio」](https://marketplace.visualstudio.com/items?itemName=Twilio.vscode-twilio)について書きたいと思います。

# VSCode Twilioとは？

Marketplaceの説明に「Deploy Twilio functions from VSCode.」とあるとおり、Twilioのサーバレス環境である[Twilio Functions](https://jp.twilio.com/docs/runtime/functions)をVSCodeで開発＆デプロイするための拡張機能です。

![2019-12-03_21h51_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/1edefb57-ec79-4aa2-d11d-242deba768f2.png)

実体としては、[Twilio Advent Calendar 2019初日の記事にある「Twilio CLI」](https://qiita.com/mobilebiz/items/456ce8b455f6aa84cc1e)をVSCodeのコマンドパレットから呼び出す拡張機能なので、自分はTwilioコマンドをバリバリに覚えているぜ～という方にはあまり必要ないかもしれません。（そんな人はまだいなさそうですが…

# インストール手順

Windows 10 Pro (1903)の環境で確認しました。

以下の手順えインストールします。

1. Twilio CLIのインストール
2. Twilio Serverless Pluginのインストール
3. VSCode Twilioをインストール

## Twilio CLIのインストール

各OSごとのインストール方法は[こちらをご確認ください](https://qiita.com/mobilebiz/items/456ce8b455f6aa84cc1e#%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)。Windowsのところに「Node.jsのバージョン8以降」とありますが、細かくは「8.10.0」以降です。私の環境には「8.9.4」が入っていて、この次の「2. Twilio Serverless Pluginのインストール」でエラーが出ました。

Twilio CLIは以下のコマンドでインストールできます。

```shell
npm install twilio-cli -g
```

実行結果はこんな感じでした。

![2019-12-03_21h24_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/a251e745-78df-2c1c-7d1f-155550ff8b0a.png)

## Twilio Serverless Pluginのインストール

続いてTwilio Serverless Pluginです。さきほどインストールしたTwilio CLIのtwilioコマンドで以下を実行します。

```shell
twilio plugins:install @twilio-labs/plugin-serverless in your terminal.
```

前述のとおり、私の環境ではnode.jsのバージョンエラーがでました。

![2019-12-03_21h27_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/6bc41f6d-9a14-ded5-58c7-4581ca3465a2.png)

そこで、8.9.4をアンインストールして、12.18.1をインストールしました。あとで知ったのですが、執筆時点のTwilio Functionsは8.10.0で動作しているらしいので、本番環境を想定する方はバージョンを意識したほうがよさそうです。

再度twilioコマンドを実行すると、今度はエラーは起きず、無事にインストールされました。

![2019-12-03_21h34_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/6e3af325-d3ca-4a3a-1836-ffd496be1a0c.png)

## VSCode Twilioのインストール

最後にVSCodeの拡張機能で「VSCode Twilio」を検索し、インストールします。

![2019-12-03_21h20_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/28ce0fa8-f558-9b53-41c3-a6916adb2d64.png)

環境設定は以上です。

# コマンドパレットの確認

VSCodeのコマンドパレットを起動します。

![2019-12-03_21h35_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/9ee429ac-202a-52ac-e20f-aa3ae4fd89ba.png)

Twilioと入力して以下のコマンドが確認できればOKです。

![2019-12-03_21h35_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/4002eb71-6f27-b81a-c0cd-864cdb6ac9ab.png)

# Twiilo Functionsのプロジェクト作成

コマンドの「Create Project」でTwilio Functionsのプロジェクトを作成してみます。コマンドを実行して保存先のフォルダを選んだら、プロジェクト名を入力します。ここでは「MyFirstTwilioProject」としました。

![2019-12-03_21h36_32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/5d657a79-17b3-e7b8-88a0-7c0ef1c36787.png)

Enterを押して、プロジェクト作成～と思ったらエラーになりました。VSCodeのデフォルトターミナルがPowerShellだったのですが、それだとこけるようです。。

![2019-12-03_21h37_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/28c27c8b-b4b6-507e-328a-4df25e68e137.png)

仕方がないので、コマンドパレットで「>Terminals」と打って既存のターミナルをコマンドプロンプトに戻しました。

![2019-12-03_22h36_23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/ed1baa2c-ccc4-0efd-23f6-8dca12312edf.png)

![2019-12-03_22h36_33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/845ba3bd-d65c-1ec9-13cd-0cdb66c17365.png)

で、再度プロジェクト作成を実行。今度はうまくいきましたが「No profile configred」というメッセージがでて、プロジェクトは作成されませんでした。

![2019-12-03_21h40_49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/2e0d6df4-fbc8-0a56-06cd-da4571d6ad51.png)

[Twilio CLIでプロファイルの割り当て](https://qiita.com/mobilebiz/items/456ce8b455f6aa84cc1e#%E3%83%97%E3%83%AD%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E5%89%B2%E3%82%8A%E5%BD%93%E3%81%A6)をして、アカウントと紐づけておく必要があるそうです。以下のコマンドでプロファイルの作成をします。

```shell
twilio profiles:create
```
プロファイルに対する名前をいれて、あとはTwilioのSIDとAuth Tokenを入力するだけです。

![2019-12-03_21h45_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/bc03f336-0c16-4c92-17c4-ac741cc62de3.png)

SIDとAuth TokenはTwilioの管理画面で取得できます。
![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_47737_c49c33bd-2206-c19e-c93b-e227e9d258b3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/48540c34-98c9-f518-da6b-bdef84d7a6ab.jpeg)

これで再度プロジェクト作成を試みると…無事にプロジェクトが作成されました！

![2019-12-03_21h52_51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/63dd3581-5cb1-8adb-e7c4-521d02721aeb.png)

この状態でコマンドパレットの「Start Local Server」を選ぶと、node.jsのサーバが起動します。

![2019-12-03_22h45_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/36eab6e7-5d93-f380-c1c0-8fb1d317a9dc.png)

アクセスポイントの一覧が表示されます。

![2019-12-03_21h57_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/78aa352f-8684-c9fd-6f45-cf6e17b78a73.png)

hello-worldにアクセスするとTwilioのSayを使った応答形式でレスポンスが返ってきました。

![2019-12-03_21h56_58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47737/5b5b8462-c063-9d68-68ba-7dc3abf15917.png)

デプロイはまだ試していませんが、とりあえずローカル環境でVSCode + Twilio Functionsの動作確認ができました。