Windows の WLS で Slack の bot を 作る part1～環境構築準備偏 Slackアプリの作成まで～

# 目的

- Slackで特定の言葉に反応して返信をくれるSlackのアプリの作り方をまとめる。

# この記事のターゲット

- Slack botを作成してみたいが、環境構築でなにをしたらいいのかわからない方
- Node.jsの開発環境が欲しい方
- 環境設定がうまくいかずに諦めたくなった方

# 実施概要

1. WSLのインストール
Windows10上にLinuxを仮想マシンとして作成するWSLをインストールする。
1. VisualStudioCodeのインストール
とっても便利なエディタと今回使用する拡張機能をインストールする。
1. 作るSlack botを動かすテスト用のワークスペースの作成
これから作っていくSlack botをテスト的に動かす場所を作る。
1. Slackアプリの作成(今回はここまで)
SlackアプリはSlack botを作るうえで、Slack側の「受け皿」になる存在、深く理解しようとせず、作ってみる。
1. Slackアプリの設定_1
権限や、どのチャンネルに対して返答するかを設定する。
1. ローカルサーバの導入
Slack botが動作するサーバを導入する。
1. ローカルサーバの設定
ローカルサーバの設定をして外部公開できるようにする。
1. Slackアプリの設定_2

# 実施詳細

1. WSLのインストール
    1. 下記記事を参考にして、WSLを導入する。  
    [Windows10 に WSL(Ubuntu18.04) を導入 する](https://qiita.com/miriwo/items/b28a2dab613266dd461c)
1. VisualStudioCodeのインストール  
    1. 下記記事を参考にして、VisualStudioCodeのインストールを行う。  
    [Visual Studio Code 導入方法 VSCode ダウンロードから日本語化対応まで～画像付き導入解説～](https://qiita.com/miriwo/items/306769d90d910944e471)
    1. 下記記事を参考にして、プラグイン「Remote Development」を導入する。(接続テスト(WSL)が正常にできていればOK)  
    [Visual Studio Code に Remote Development を 導入 しよう](https://qiita.com/miriwo/items/e98d586156ab516ad71f)
1. 作るSlack botを動かすテスト用のワークスペースの作成
    1. 下記サイトにアクセスする。  
    [https://slack.com/intl/ja-jp/signin](https://slack.com/intl/ja-jp/signin)
    1. 下記画像の「ワークスペースを新規作成する」をクリックする。
    ![slack_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/80eb11d1-8aec-2590-930a-7f13ebe92885.png)
    1. 画面の案内に沿って、メールアドレスの入力、送られてきたコードの入力、ワークスペース名などを入力して新規ワークスペースを作成する。(設定後、ワークスペース名を変更するのはちょっと面倒な作業があるので間違えないように注意)
    1. 下記画像の画面が出ればOK
    ![slack_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/57715fcf-577a-af68-a2dd-21248b8d14b4.png)
1. Slackアプリの作成
    1. 下記サイトにアクセスする。  
    [https://slack.dev/bolt/ja-jp/tutorial/getting-started](https://slack.dev/bolt/ja-jp/tutorial/getting-started)
    1. 下記画像の「Slackアプリを作成」をクリックする。
    ![slack_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/e85aef14-39b0-40a9-a251-7b4c95e48530.png)
    1. 下記画像のように「App name」に任意のアプリ名を入力する。「Development Slack Workspace」で先ほど作成したテスト用のワークスペース名を選択する。
    ![slack_05.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4637241e-f741-4cc4-abe4-64ff726b7a96.jpeg)
    1. 「Creat App」をクリックする。
    1. 下記画像の画面が出ればOK
    ![slack_07.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4fd791e5-983b-f525-5a6a-b93743fcc729.jpeg)
    1. 画面少し下の「Bots」をクリックする。「Save Chages」がクリックできるようになっていたらクリックする。
    ![slack_08.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/5a8ee8a5-4fda-c691-0f93-d1924574e026.jpeg)
    1. 下記画像の画面に勝手に遷移するか、しない場合は画面左の「Bot users」をクリックして下記画像の画面に移動する。
    ![slack_09.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/4032a9c2-a528-2ea2-7705-66ba34a28176.jpeg)
    1. 「Add a Bot User」のボタンがアクティブになったらクリックする。
    ![slack_09.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/62331be9-57bf-2092-34bf-64c22e27c421.jpeg)    
    1. 「Display name」「Default name」は自動で入力されるので特にこだわりがなければそのまま「Add Bot User」をクリックする。
    ![slack_10.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/306417/55446d90-e2dc-76ac-0576-e6fce62da895.jpeg)