LINEBotをみんなで作ろう〜環境構築編〜【１日目】

この記事は下記の [#GWアドベントカレンダー](https://gw-advent.9wick.com/calendars/2020/72)の 1日目の記事になります。

すごくなりたい @inoue2002  ） | GWアドベントカレンダー

# はじめに
#####全く触った事がない人でも読み進められる記事を目指して、「実際に動くもの」を作ることを重視して解説をしていきます。
最初は環境構築から始め、最終的にはサーバレスで動くLINEBotを作成し、色々な物を作ってもらえたら嬉しいです。
僕の持っている知識を全部書いていこうと思いますのでよろしくお願いします！
あと、基本的にはMac環境で説明していきますのでよろしくお願いします。
では1週間よろしくお願いします！

#今日やる事
・[LINE Developerのサイト](https://developers.line.biz/console/)にログインできるようにする。
・[ngrok](https://ngrok.com/)をインストールする
・[node.js](https://nodejs.org/ja/download/)(v10以上推奨）をインストールする
・[git](https://git-scm.com/)をインストールする
・[エディタ](https://code.visualstudio.com/download/)(どのエディタでもいいですが、VSCodeをリンクに入れています。) をインストールする


##LINE Developerのサイトにログインする
[LINE Developerのサイト](https://developers.line.biz/console/)に行くと以下のような画面が出る
<img width="1382" alt="スクリーンショット 2020-04-29 22.23.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/ad9ada66-58b7-3169-3715-ee401d7931e4.png">
自分のLINEアカウントでログインする。
もしメールアドレスが登録していない、わからない時はLINEをスマートフォンから開き、メールアドレスの設定をする。
<img width="677" alt="スクリーンショット 2020-04-29 22.25.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/2bf66a37-1f7f-8826-adf5-cdaba947cfa1.png">
このような画面がでてログインボタンが押せれば成功。


##ngrokをインストールする
[サイト](https://ngrok.com/)上部のバーよりダウンロードをクリック、以下のような画面が出ると、お使いの環境に合わせたバージョンをダウンロード。
ダウンロードしたあと、解凍すれば完了。
<img width="1433" alt="スクリーンショット 2020-04-29 22.46.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/643162e6-be06-6b1b-e219-5adf149c3b44.png">

##node.jsをインストールする
[サイト](https://nodejs.org/ja/download/)に行き、推奨板をインストール、解凍すれば準備完了

##gitをインストールする
[サイト](https://git-scm.com/)にいき、インストール、解凍するだけ。

##VSCodeをインストール
サイトに行ってインストールをポチっと！！


##一通りできたら確認

＊ターミナルを開く


###ngrokのバージョンを調べる
`ngrok -v`
と打ち込みenterを押す。
`ngrok version 2.3.35`このような形で表示されればインストールできています。
でてこない場合はインストールできていません。
一番下にどうしてもインストールできない場合のヒントあり。
###node.jsのバージョンを調べる
`node -v`
と打ち込み、enterを押すと
`v12.13.0`
のように表示されると成功です。

###gitのバージョンを調べる
`git --version `
と打ち込みenterを押すと
`git version 2.23.0`のように表示されると成功です。

###エディタがインストールできたか確認
上記のエディタをインストールするに書いたリンクからインストールした人は以下のアイコンがパソコン内にあれば成功！
<img width="160" alt="スクリーンショット 2020-04-29 22.12.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488939/341c095e-8ce1-abc6-a5a3-47ec38c58376.png">

##最後に
これらを使って明日からLINEBotを作っていきます！よろしくお願いします！

本記事：[LINEBotをみんなで作ろう〜環境構築編〜](https://qiita.com/inoue2002/items/a87df2b520f8b6e37f42)
次の記事：[LINEBotをみんなで作ろう〜LINEBot is 何？編](https://qiita.com/inoue2002/items/3a5019c07801bcf5ff75)

[LINEBotをみんなで作ろう〜おうむ返しbotを作ろう編〜](https://qiita.com/inoue2002/items/dcf40d5ebfe2454796fa)
[LINEBotをみんなで作ろう〜色々なメッセージを送ってみよう編](https://qiita.com/inoue2002/items/35fab5b7901aa94fafd2)
[LINEBotをみんなで作ろう〜Messageを分岐させるぞ編](https://qiita.com/inoue2002/items/650eca3f7dd6a5fccb63)
[LINEBotをみんなで作ろう〜AWSアカウントを作るぞ編](https://qiita.com/inoue2002/items/ad945981150c859911fc)
[LINEBotをみんなで作ろう〜レイヤーとAPIgateway設定編](https://qiita.com/inoue2002/items/ab226d9836a891b01bc9)
[LINEBotをみんなで作ろう〜コードを実装編](https://qiita.com/inoue2002/items/dbbd862d6149c83f6513)

##ngrokがインストールできない場合の参考に。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">こちらを参考にBotに再挑戦！まずは1日目クリア(^-^) 初心者につき、ターミナルを開く作業は初めてで。何度も「&#39;ngrok&#39; は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチ ファイルとして認識されていません。」の表示が。ngrok.exeをownerフォルダに保存して、やっと終了です。 <a href="https://t.co/mJDvABViBi">https://t.co/mJDvABViBi</a></p>&mdash; まゆ (@mi73mayumi) <a href="https://twitter.com/mi73mayumi/status/1259784149872721922?ref_src=twsrc%5Etfw">May 11, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2020/7/6追記----
####Windowsユーザーがngrokの導入で躓きやすいので対処法を追記します。

```cmd
'ngrok' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```
というような表示が出て、ngrokのバージョンを確認できない場合の対処法です。
環境変数にPathを通すことで解決します。

①Winキー＋Pause/Break　を同時押し
②システムの詳細設定へと進む
③詳細設定のタブから環境変数というボタンをクリックする
④システム環境変数欄からPathの項目を探し、編集を行う
⑤参照をクリックし、ngrokがインストールされているディレクトリを追加する
⑥コマンドプロント立ち上げ直し、再びバージョン確認ができるか行う


[追記するにあたって参考にした記事](https://ingwer-design.com/blog/cat29/post.html)





-----2020/7/6


##記事を読んで作ってくださった方の感想
2020/5/11更新
https://twitter.com/mi73mayumi/status/1259784149872721922?s=20