もじゃ（@s10akir）です。paizaラーニングでプログラミング学習動画制作のアルバイトをしている専門学生です。
以前こんな記事を書かせていただきました。
今回は、VSCodeとDockerを使って簡単に開発環境を構築する方法について書いてみたいと思います。
ちなみに前回はプレビューリリースされた「Remote Development with VSCode」と「PaizaCloud」を使って、面倒な環境構築なしで快適に開発しようぜという記事だったのですが、しばらくして「Remote Development with VSCode」が正式版のVSCodeでも使えるようになりましたね！わざわざInsider版のVSCodeを入れなくてもよくなりましたね。
前提の環境について
この記事の内容が試せるのは
- Hyper-V仮想化支援が利用できるWindows10（Pro, Educationなど）ユーザの方
- Linuxユーザの方
- macOSユーザの方
です。というのも、残念ながら現時点ではVSCode側が「Docker Toolbox」に対応していないので…Hyper-Vが無効化されているWindows10Homeでは使えません…。Windows10Homeの方は、前回の記事を見ていただいてVSCode + PaizaCloudをお試しいただければと思います。
もしくは、いっそお手元のマシンにLinuxをインストールしてしまう手もありますね。（悪いLinuxオタクの顔）（私はLinuxオタクでございます）
余談ですが、DockerはLinuxカーネルというものの上で動作するため、Linux以外のOSでDockerを動かす際は、いったん間に仮想的なLinuxが介入してきます。その点、そもそもホスト側のカーネルが使えるLinux環境ならめちゃくちゃ軽くて快適で便利です。（悪いLinuxオタクの顔）
Dockerについて
Dockerとはどんなもんなのか、ざっくり説明すると、ホストOSの上にコンテナとして独立した別の環境を作る仮想化アプリケーションです。
Container Runtime with Docker Engine | Docker
一般的な仮想マシンと比べるといろいろなメリットがありますが、今回最も重要なのは「違う場所でも同じ環境を簡単に再現できる」ということです。
Dockerの設定を書いたファイルを共有すれば、どこでも常に同じコンテナを作ることができちゃいます。
Dockerを使っていればコンテナの中身はどこでも同じなので、「自分のPCでは動くのに人のPCではうまく動かない…」などといった環境依存のトラブルに悩まされることもありません。
実際に、私は学校でプロジェクトを起こしてアプリケーション開発をおこなう演習もあるのですが、開発チームではVSCode + Dockerを使って全員の開発環境を統一しています。
また、いろいろな企業や個人が構築済みのコンテナイメージを共有してくれています。それらをそのまま利用させてもらえば、誰かが一生懸命作ってくれたいい感じの環境を簡単に構築することが可能です。
まとめると、
エディタにVSCodeを使うメリット
- 高機能な開発支援機能が使える
- 豊富な拡張機能がインストールできる
PaizaCloudを組み合わせる場合のメリット
- 環境構築が数クリックで済む
- 手元の環境を汚さないで済む
Dockerを組み合わせる場合のメリット
- 誰でも全く同じ環境で検証ができる
- 手元の環境を汚さないで済む
という感じですね。チーム開発など複数人で開発したいときはDockerの環境再現性がうれしいのですが、とにかく簡単に環境構築したいときはPaizaCloudが強いので、お好みで試してみてください。
VSCodeとDockerで開発環境構築して使ってみよう
Dockerのインストール
前置きはこれぐらいにして、実際にやってみましょう。まずはDockerを導入します。導入方法はご利用の環境によって異なりますので、公式の手順をご確認ください。
インストール後、ターミナルやコマンドプロンプト等でdocker -vコマンドが正常に実行できればOKです！
> docker -v Docker version 18.09.6-ce, build 481bc77156（環境によってバージョンは異なります）
- Windows10
Install Docker Desktop for Windows | Docker Documentation
※ 導入の過程でHyper-Vが有効になりますが、他の仮想化支援機能と競合するため、VirtualBoxやVMwareといった仮想化ソフトが動作しなくなります。Windowsの機能でHyper-Vを無効化すればもとの状態に戻りますが、ご注意ください。
- Mac
Install Docker Desktop for Windows | Docker Documentation
- Linux（Ubuntuの例）
Get Docker CE for Ubuntu | Docker Documentation
ちなみにUbuntuユーザの方はsnapでのインストールも手軽でおすすめです！
Remote Development with VSCodeのインストール
拡張機能を追加するだけなので、サクッと入れてしまいましょう。VSCode左側の拡張機能メニューから「Remote Development」をインストールすればOKです。
プロジェクト作成
VSCodeで利用できるDockerのプロジェクトの作成には、「Dockerfile」もしくは「docker-compose.yml」というDockerコンテナの設定を記述したファイルが必要になります。
今回はお試しということで、Microsoft公式のサンプルプロジェクトでやってみましょう。
Node.js sample project for trying out the VS Code Remote - Containers extension
まずは上記リンクのgitリポジトリをclone、もしくは右上付近の「Clone or download」という緑のボタンから「Download zip」をクリックしDLされたzipファイルを展開しておきます。
次にVSCodeを起動し、左下角の「><」をクリックして表示されるポップアップメニューから、「Remote-Containers: Open Folder in Container…」をクリックして先程用意しておいたプロジェクトのフォルダを開きましょう。
初回のみ、Dockerfileの設定に従ってコンテナの構築が始まるため時間がかかります。
右下にこの表示が出ている間は構築中です。YouTubeでこちらの動画でも見ながら気長に待ちましょう。
「ハリーポッター: 魔法同盟」、トレーラーの吹き替え声優が内田姉弟さんなので始めようかと思っています。
しばらくして、ファイラー部分にいろいろ表示されたらコンテナへの接続は完了です！
できた環境を使ってみる
見た目はほとんど普段のVSCodeと変わりませんが、本当にコンテナに接続できているのかな？
試しにターミナルを立ち上げてみましょうかね。上部メニューバーから、「Terminal > New Terminal」で起動できます。
Windows環境の方は、普段のコマンドプロンプトやPowershellではなくbashが起動している時点で、「ああ、Linuxだ…」と実感が持てるかもしれません。
このコンテナはNode.jsの環境が構築されています。node -vコマンドでバージョンを確認してみましょう。
バージョンが表示されました。右側は私の「ホストOSに入っている」node.jsです。バージョンが違いますね？
というわけで、ちゃんと隔離された環境が作られていてその中でVSCodeが動いているようです！
このサンプルプロジェクトではNode.jsで書かれたWebサーバが用意されていますので、せっかくだから起動してみましょう。（server.jsがサーバプログラムです。）
ターミナルからnpm startと実行して、
> docker_web_app@1.0.0 start /workspaces/vscode-remote-try-node > node server.js Running on http://0.0.0.0:3000
と表示されればサーバが起動しています。
実際にブラウザから見てみましょう。
ブラウザを立ち上げて…localhost:3000に接続すると〜…はい！「Hello remote world!」と表示されました！
というわけで、ちゃんと隔離されたコンテナに接続できましたし、その中でプログラムも実行できています。同じ設定ファイルを使えば、みなさんのお手元でも私とまったく同じ環境を試したり、複数人のチームで共有したりできます。
まとめ
ちなみに、このサンプルプロジェクトでは
Dockerの設定ファイル: ./devcontainer/Dockerfile
VSCodeの設定ファイル: ./devcontainer/devcontainer.json
が、それぞれ用意されています。
これらを用意することで、同じようにVSCodeで使えるDocker開発環境が構築できますので、興味のある方はぜひ試してみてください。
「初心者なのでよくわからなかった…」という方は、前回の記事に書いたPaizaCloudであれば「ぽちぽちしていくだけで簡単に開発環境が整えられる」ので、お好きなほうで試してみてください。
「PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
