Docker初心者に試して欲しい、VSCodeでDockerを簡単に使って開発する(PythonでHelloworldまで)

# この記事でやってる事

- Dockerコンテナを使った開発環境をGUI操作だけで構築
- VisualStudioCodeを使ってコンテナにアクセスし、Pythonコードを書いてHelloworld


Dockerを少しづつ弄ってみてはいたのですが、開発環境として使うには、色々な知識が必要だったり、コマンド打ったりとか、中々初心者には敷居が高かったのですが、今年リリースされたVisualStudioCodeの`Remote`という拡張機能を使う事で、Docker内でのデバッグなども簡単にできるようになりました。

難しい事抜きに、とりあえずDokcer使ってみたい！！という人にもおすすめです。

# 対象
- とりあえず、Docker触ってみたい
- Docker使いたいけど、コマンド打つのメンドくさい

# 事前準備
- DockerHubアカウント
- VisualStudioCodeインストール
- GitHubアカウント

# GitHubでリポジトリ作成〜クローン
とりあえず、勉強用でもGitHubでリポジトリ作っちゃうのをおすすめします。
この辺は特に問題ないと思いますので、サクっと作っちゃいましょう。

<img width="1099" alt="スクリーンショット 2019-08-16 20.30.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/adb9b3bc-331f-2579-49d9-0ab779333cf8.png">

できたら、次はクローンですね。`CloneorDownload`からサクっとクローンしちゃいます。
<img width="1100" alt="スクリーンショット 2019-08-16 20.33.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/666c8a4c-a548-c4b8-c49f-a312f13bdb0b.png">

ここで、GitHubDesktopをインストールしておくと、クローン〜VSCodeでリポジトリのディレクトリ開くまでがシームレスに行えるので、簡単ですよね。

<img width="498" alt="スクリーンショット 2019-08-16 20.35.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/9ad29b78-796b-259d-839a-531642b92669.png">

クローンが終わったら、あとは、そのまま開くだけですね。`Open in Visual Studio Code`でサクっとVSCode開きましょう。

<img width="1072" alt="スクリーンショット 2019-08-16 20.37.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/f28bcbe4-162c-34d5-f560-929feb87a1db.png">

# VSCodeでDocker環境構築

次に、VSCodeの拡張機能のRemoteをインストールします。
<img width="1136" alt="a1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/a593c250-b8d3-1a02-2fa7-9d96d4f5cf37.png">

終わったら、左下に`><`こんなマーク出てるのわかりますか？
そこをクリックします。


次に出てきたダイアログの中の一番上の`Remote-Containers:Open in Container...`を選びます

<img width="1459" alt="b2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/e184d94b-9458-4a8e-cc70-676add1148ee.png">

次に出てくるダイアログで、Dockerの環境を選べますので、今回は`Python３`を選びます。

<img width="1136" alt="c3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/a901cd7d-1d71-f112-5c1b-e03eaaa3102b.png">


ここで、Dockerコンテナのビルドが走りますので、少し時間がかかります。
ビルドが終わったら、VSCodeの中は、既にDockerに接続されている状態です。
試しに、`HelloWorld.py`というファイルを作ってみましょう。

<img width="1136" alt="スクリーンショット 2019-08-16 20.50.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/8f117fc2-16a7-413e-704b-070cd06f7f24.png">

ここで、追加でおすすめの拡張機能が、VSCodeのPython拡張機能です。
Pythonの普通のファイルをJupyterNotebookのように使う事ができます。

<img width="1136" alt="スクリーンショット 2019-08-16 20.51.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/e4570b60-2a16-c565-0b7e-81252ae36bc3.png">

この拡張機能をインストールして、一番最初の行に`# %%`と書けば、あとはJupyterNotebookのように`Shitf+Enter`で実行ができるようになります。

<img width="1245" alt="スクリーンショット 2019-08-16 21.05.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/91c82815-932e-b8ff-7a5c-ad2cbd336425.png">

試しに、Helloworldを書いて、`Shift+Enter`で実行してみましょうか。
右下に、Jupyterインストールする？って聞いてくると思うので、OKでインストールしちゃいましょう。（ごめんなさいSS撮り忘れました・・・）
Jupyterインストール後、再度実行した結果が下のような感じです。

<img width="1245" alt="スクリーンショット 2019-08-16 21.10.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/173479/bc0a272a-ede0-2b74-5631-866f3fd23cad.png">

イエイ！！:laughing:
ここまで、コマンド叩く事なく、GUIのみの操作でできましたね。

# あとがき
Dockerをチームで使って開発を行いたかったのですが、個人的にコマンドって覚えにくいし、打ち間違うしで、あまり使いたくなかったんですよね。
ですが、Remote拡張機能のおかげで、開発環境の構築が全てGUIで行えるようになったので、とても便利になりました。
リポジトリ作成〜コンテナでの開発開始まで、慣れれば３分もあればできるので、色々な環境の色々な言語でのトライ＆エラーがやりやすくなりました。