(No.9) おじさんが、LINE風アプリを開発する - VS Code(Visual Studio Code)をインストールする

# 前回までのあらすじ
- GitHubを利用して、おじさんの成果物を公開する準備が整いつつあるよ
    - [(No.1) おじさんが、Git・GitHubを利用できるようにしてみる - GitHubにユーザを登録する](https://qiita.com/resojisan/items/4cd09b7a5f33ca8a925d)
    - [(No.2) おじさんが、Git・GitHubを利用できるようにしてみる - GitHubを利用してみる](https://qiita.com/resojisan/items/75dcc83ea55af0db329f)
    - [(No.3) おじさんが、Git・GitHubを利用できるようにしてみる - GitHubからリポジトリを複製（クローン）する](https://qiita.com/resojisan/items/f119d8b71e3bba9eadec)
- 目標を立てたよ、LINE風アプリが作れるようになることを目指すよ
    - [(No.4) おじさんが、何を開発するのか目標を立てるよ](https://qiita.com/resojisan/items/6a8690d21fe9ab00189d)
    - [(No.5) おじさんが、LINE風アプリを開発する - メッセージの送受信を考えてみるよ](https://qiita.com/resojisan/items/6418171fcc80bc3122cf)
- 開発環境の差異を軽減することが出来ないか考えてみるよ
    - [(No.6) おじさんが、LINE風アプリを開発する - 仮想機械、コンテナについて調べてみるよ - その１](https://qiita.com/resojisan/items/b08490e013067994d11e)
    - [(No.7) おじさんが、LINE風アプリを開発する - 仮想機械、コンテナについて調べてみるよ - その２](https://qiita.com/resojisan/items/e9d84723286a297f9a72)
    - [(No.8) おじさんが、LINE風アプリを開発する - Docker Desktopをインストールする](https://qiita.com/resojisan/items/c2e44b85c2657ea5b4b1)

# 今回やること
- 今後はDockerに限らず、テキストファイルの編集が必要になるみたい。  
→ テキストファイルの編集を補助するアプリをインストールするよ。
- 前回、Dockerを操作すると意気込んだけど、今回はVS Codeのインストールまで実施するよ。
- Dockerは次回に試していくことにするよ！

# VS Code(Visual Studio Code)
- 今後はDockerに限らず、テキストファイルの編集が必要になるみたい。
- テキストファイルを編集するアプリが必要。
    - macOSの場合はテキストエディットアプリがあるし、Windowsの場合はメモ帳(Notepad)があるけど・・・。
        - 開発環境（WindowsやmacOSなど）の差異をなるべく減らしたい。  
        （おじさん以外の人も、Qiita上の記録を読むことで、おじさんの奮闘ぶりを追体験出来るようにしたい）
            - [Why did we build Visual Studio Code?](https://code.visualstudio.com/docs/editor/whyvscode)
                - VS Codeは、macOS、Linux、Windowsに対応。（開発環境を選ばない）
        - すんごい高速に動作する編集アプリ。
        - 多目的に使用することが出来る。
- [無料らしいよ。](https://code.visualstudio.com/)
- [開発元はMicrosoftらしいよ。初版リリース日は2015年4月らしいよ。](https://ja.wikipedia.org/wiki/Visual_Studio_Code)
- [ここに](https://code.visualstudio.com/License/)、VS Codeのライセンス規約が書かれているよ。
- [2019年6月時点でも更新頻度は高そうだよ。](https://github.com/microsoft/vscode/releases)おじさん、小心者だから、セキュリティの問題であるとか、アプリ自体に欠陥があったらと考えると、なんだか怖いんだ。継続的に更新されているということは、それだけ手厚い対応が期待出来ることだって、おじさんは思うんだよ。
- おじさんの場合はVS Codeを使用することにしたけど、その他のアプリでも良いと思うよ。
    - 例えば、[Atom](https://atom.io/)と呼ばれるアプリもあるよ。

# VS Codeインストールする手順
- [公式サイトからダウンロードする。](https://code.visualstudio.com/Download)
- Windows、Linux、Mac(macOS)の3種類ある。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/bcd42435-5a0f-0852-e894-702bf2c5bf37.png)
- ダウンロードしたファイルは「VSCode-darwin-stable.zip」。（おじさんの開発環境はmacOSだからね）
- [ZIPファイル](https://ja.wikipedia.org/wiki/ZIP_\(%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88\))なので解凍が必要。ファイルをダブルクリックするなどして解凍する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/66defc46-4cbf-f825-8763-01809c9690c2.png)

- 解凍すると、「Visual Studio Code.app」が手に入る。このファイルがVS Codeアプリそのものなので、アプリケーションフォルダに移動しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/58447d88-3933-7f3d-f015-d13f3c0497e3.png)
↓ドラッグ＆ドロップするなどして、「Visual Studio Code.app」をアプリケーションフォルダに移動。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/30e805fb-0d32-42f1-4876-7ae38626671f.png)

- Launchpadから、Visual Studio Code.appを起動する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/8488b57c-fbf5-c71b-dea4-f06f0a036c4c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/eb720476-05eb-6c26-decd-b5e794abf236.png)

- 警告が表示されるが、「開く」をクリックする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/96d735b9-5806-3999-3e4b-bf9ba2575dab.png)

- 次のイメージのように起動すればインストールは完了だよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/e3b6c558-bbfd-4421-e8fc-8f3f2fc3a087.png)

- 起動したVS Codeの画面上に、ファイルを放り投げる（ドラッグ＆ドロップ）などすれば、手軽に編集出来るようになるよ。（ファイルメニューから開くでも同様）
- 試しにおじさんの日記ファイルをVS Code上にドラッグ＆ドロップして開いてみるよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/407bc282-a00c-9b7b-cdbd-f96e00531809.png)
- お見事。開いたよ。これでテキストファイルをVS Code上で編集出来るようになったよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/c9246694-a612-4532-469a-6e3798e52589.png)

- ファイルメニューから、新規にファイルを作成したり、既存のファイルを開いたり、色々出来るみたいだよ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/419842/447aad1a-f377-114c-4dd7-090374967a3d.png)



# あとがき
- 次回こそDockerを操作して、Webサーバとやらを動かしていくよ!!

# 参照・メモ
[screenコマンドで、仮想マシンにアクセスするメモ](https://forums.docker.com/t/host-path-of-volume/12277/9)