教育における開発コンテナ: 指導者向けガイド

2020年7月27日 Brigit Murtaugh、@BrigitMurtaugh

多くの教育者から、学期の最初の数日または数週間が、学生のための適切な環境設定に費やされてしまうという話を聞いています。その結果、学生は質の低い開発体験をしたり、課題の採点が不十分になったりする可能性があります。

「学生のセットアップには通常、5回の授業時間がかかります。Pythonのバージョンを扱う必要があり、多くの複雑さがあります。残念ながら、その複雑さを解決するには多くの時間とお金がかかります。」 -[米国のコミュニティカレッジ教授 CS 101]

「Pythonのインストール用に特別にセットアップされたVS Codeのバージョンがあればいいのにと思います…」 -[リベラルアーツカレッジ助教授]

Visual Studio Codeと開発コンテナを組み合わせることで、学生に一貫したコーディング環境を提供するための素晴らしい教育ツールとして活用できます。これにより、学生と指導者は設定に時間を取られることなく、真に重要なこと、つまり学習と素晴らしいコードの作成に集中できます。

開発コンテナ

では、開発コンテナとは何でしょうか？ コンテナは、コードと、そのコードを実行するために必要なランタイム、ツール、ライブラリ、設定を含むすべての依存関係をパッケージ化したソフトウェアです。コンテナは元々、一貫した環境でアプリケーションをデプロイおよび管理し、ハードウェアをより効率的に利用する方法として作成されました。その後、一貫したビルド環境を提供するために進化し、最近では開発環境にも利用されるようになりました。Dev Containerという名前はそこから来ています。

コンテナを作成すると、その初期内容は「イメージ」と呼ばれるものから取得されます。イメージは、オペレーティングシステムやその他のツールがプリインストールされたミニディスクドライブのようなものと考えることができます。Dockerfileを使用してイメージに何を含めるかを記述し、そのイメージを実行するとコンテナになります。

開発コンテナは、あなたのコンピュータとは別のコーディング環境を提供します。例えば、特定のバージョンの依存関係をダウンロードした場合、そのバージョンはそのコンテナに固有のものとなります。下の図で、コンテナがアプリケーションとその必要な依存関係を含み、コンピュータ（ホストOSとインフラストラクチャ）を依存関係から解放し、クリーンな状態に保っていることに注目してください。

指導者は、課題ごとに特定のイメージを作成できます。各学生は、自分のオペレーティングシステムやコンピュータに既にインストールされている他のファイルに関係なく、PythonやC++コンパイラの同じバージョンなど、まったく同じバージョンの依存関係を受け取ることができます。

VS Codeにおける開発コンテナ

Visual Studio CodeのDev Containers拡張機能を使用すると、コンテナをメインのコーディング環境として利用できます。教室では、指導者が既存の開発コンテナを利用したり、独自に作成したりして、クラスと共有できます。各学生はVS Codeでコンテナを開くと、アプリケーション開発に必要なツールとランタイムが自動的に利用できるようになります。学生はコーディング中に、IntelliSenseやデバッグを含むVS Codeの全機能も利用できます。

Dev Containers拡張機能はLinuxベースのコンテナのみで動作するため、学生が異なるオペレーティングシステムをコンピュータで使用していても、コーディング環境はすべてで一貫したものになります。

指導者がDev Containersを教室で成功裏に使用している例をすでに見てきました。UCサンディエゴのコースで開発コンテナを使用した3人の研究者の経験について詳しく知りたい場合は、「Using DevContainers to Standardize Student Development Environments: An Experience Report」をご覧ください。

この記事は、教室で開発コンテナを導入し、学生によりスムーズで一貫した環境を構築しようとしている指導者向けのガイドとして役立ちます。

開発コンテナの動作を実際にご覧になり、学生がわずか5分で始める方法を知るには、学生向け入門ビデオをご覧ください。

指導者向けガイド

従来の設定方法では、学生は環境設定中にさまざまな問題に遭遇する可能性があります。例えば、独自のOSの違い、プロジェクトファイルの保存場所、インストールされているランタイムやツールのわずかな違いなどが挙げられます。指導者は、これらの問題を学生が解決できるよう、すべての微妙な点に精通している必要があります。

よくある問題は、ツールの異なるバージョンを管理することです。Pythonを例にとると、Python 2とPython 3があり、さらに異なるマイナーバージョンが存在します。複数のPythonバージョン、そしてリンターなどの複数の付随ツールがある場合、混乱を招きエラーにつながる可能性があります。

膨大な時間と混乱を省くために、開発コンテナを使用してクラス全体で標準化されたPython開発環境を作成できます。学生は全員同じバージョンのPythonを利用でき、新しいバージョンをインストールしたり古いものをアンインストールしたりする必要がなくなります。また、同じコンテナとソースコードを実行することで、全員がまったく同じ結果を得られます。

前提条件

• Visual Studio Code をインストールします。
• Docker Desktopをインストールします。
  • Dockerは、コンテナを構築し共有するための業界標準です。Docker Desktopの最新かつ最も高性能なバージョンであるDocker Desktop Stable 2.3.0.3を推奨します。
  • Windows Home版でのDocker Desktopサポートが新たに導入されました。これにはWindows 10、バージョン2004、およびWindows Subsystem for Linux 2 (WSL 2) バックエンドの有効化が必要です。WSL 2インストールガイドに従ってWSL 2を有効にしてください。
  • WSL 2バックエンドを構成したくない学生向けには、Windows 10 Pro、Enterprise、またはEducation（ビルド16299以降）でDocker Desktop for Windowsを代替として使用でき、Hyper-VおよびContainersのWindows機能が有効になっている必要があります。

まずVS Codeを起動しましょう。コマンドプロンプトまたはターミナルでcodeと入力するか（あるいはコンピュータでVS Codeを選択するだけでも可）、起動できます。

VS Codeが起動したら、Dev Containers拡張機能がインストールされていることを確認してください。

いずれかのRemote拡張機能をインストールすると、ステータスバーの左下に緑色のRemoteインジケーターが追加されます。

それをクリックするとコマンドパレットが開き、Dev Containersコマンドがリストされていることを確認できます。

クラスのコンテナにアクセスする

学生が一貫したコーディング環境を得るのに役立つ開発コンテナの例を見てみましょう。私たちの教室では、同じ技術スタックを共有する演習を保存するために、単一のGitHubリポジトリを作成できます。例えば、すべてのPython課題は同じコンテナを使用し、同じリポジトリに保存できます。

Python開発コンテナと2つのPython入門課題を含む、例のvscode-course-sample GitHubリポジトリがあります。これをVS Codeで開いてみましょう。

左下のRemoteインジケーターを選択するか、コマンドパレットを使用して、Dev Containersコマンドを呼び出すことができます。

コンテナボリュームでリポジトリをクローン...を呼び出しましょう。

コンテナが保存されているGitHubリポジトリのURLを入力する必要があります。私たちの場合は microsoft/vscode-course-sample です。

一意のボリュームを作成できます。ボリュームは、コンテナ内にファイルが保存される場所です。

コンテナリポジトリを選択すると、VS Codeが再読み込みされ、イメージのビルドとコンテナの起動が開始されます。

コンテナが構築され実行されると、ファイルが読み込まれ、Python環境内でコーディングを開始できます！

エクスプローラーでsort.pyをクリックして開き、F5（または右上の緑色の実行アイコン）を押して実行します。

ローカルコンピュータにPythonをセットアップすることなく、Pythonコードは正常に実行されました。

また、プログラムを一時停止してデバッグに役立つブレークポイントの設定など、VS Codeのすべての利点にアクセスできます。単語のリストをソートするときにブレークポイントを設定してみましょう。

F5でプログラムを実行できます。プログラムがブレークポイントに到達すると停止することに注目してください。

クラスのコンテナを作成する

コンテナの素晴らしい例を見たところで、Dev Containers拡張機能を使用して最初のコンテナを自分でセットアップしてみましょう。「Hello World」Pythonアプリケーションから始めます。

開発コンテナに必要なファイルのセットアップを開始するために、Dev Containers: 開発コンテナ構成ファイルの追加…を選択します。

コンテナ構成ファイルは、開発コンテナを作成しカスタマイズするために必要なものです。表示されるコンテナ定義のリストは、アプリケーションの内容に基づいてフィルタリングされます。今回の場合、Pythonファイルなので、Python 3を選択しましょう。

Dev Containers拡張機能は、自動的に.devcontainerフォルダーとその中に2つの構成ファイル（devcontainer.jsonとDockerfile）を追加します。両方のファイルを詳しく見てみましょう。

devcontainer.json

devcontainer.jsonは、VS Codeがコンテナをどのように起動し、接続後に何をすべきかを記述します。このファイルは.devcontainer/devcontainer.jsonの下に配置することも、プロジェクトのルートにdevcontainer.jsonとして直接保存することもできます。

devcontainer.jsonの簡単な例を以下に示します。これは事前に構成されたNodeイメージをプルし、ポート3000のポートフォワーディングを自動的に設定し、コンテナが作成されるときにeslint拡張機能をインストールします。

私たちのPythonプロジェクトにおける、もう少し手の込んだdevcontainer.jsonの例を以下に示します。これはdockerfileプロパティを使用してイメージを直接参照するのではなく、Dockerfileを参照しています。また、Python拡張機能を自動的にインストールし、コンテナが作成されるとリンティングなどのコンテナ固有の設定群を確立します。

devcontainer.jsonは、学生の特定のニーズに合わせてカスタマイズされたコーディング環境を作成する絶好の機会です。いくつかの変数を指定することで、各クラスや課題ごとに独自の環境を作成できます。

教育目的のdevcontainer.jsonで推奨する変数は以下の通りです。

このファイルに少数の変数を設定することで、長期的にはクラスの時間を節約できます。例えば、extensions変数を使用することで、すべての学生が同じ拡張機能セットを自動的にインストールするようにできます。パスの設定も学生のコンピュータで困難になったり問題を引き起こしたりすることがありますが、settings変数でパス情報を指定することで、クラスの時間を節約し、学生のコンピュータのパス変数がその過程で損なわれないようにすることができます。

この構成ファイルに含めることができるすべての利用可能なプロパティについては、devcontainer.jsonリファレンスに表があります。

Dockerfile

Dockerは、Dockerfileの指示を読み取ることによって、イメージを自動的にビルドできます。このファイルには少なくともFROMを使用してベースイメージが指定されており、コマンドラインの指示を含めることもできます。

私たちのPythonアプリケーションにおけるDockerfileは次のようになります。

コンテナを開く

コンテナ構成ファイルが追加されると、フォルダにdevcontainer.jsonファイルができたという通知が表示されました。コンテナで再度開くを選択しましょう。

VS Codeの新しいインスタンスが起動し、そこでイメージがビルドされ、私たちのアプリケーションが開発コンテナで起動しています。

コンテナが構築されると、すべてのファイルは同じですが、左下のインジケーターには「Dev Container: Python 3」と表示され、私たちがコンテナ内にいることを示しています。ローカルマシンにどのバージョンのPythonがインストールされているか（あるいは何もインストールされていないか）に関わらず、簡単にコードを実行できます！

課題の作成と共有

開発コンテナが用意できたので、それをリポジトリにアップロードし、学生が課題のためにアクセスできるようにすることができます。課題の指示をREADMEに含めたり、課題に必要なベースコードやテンプレートコード、そして一貫した開発体験のために.devcontainerフォルダーを含めたりできます。これらのファイルはすべて単一のリポジトリとしてアップロードできます。

Gitがインストールされていることを確認してください。VS Codeでコンテナプロジェクトから新しいGitリポジトリを初期化できます。または、コマンドラインでプロジェクトのディレクトリからgit initを使用することもできます。

次のステップは、ローカルリポジトリをブラウザでGitHubの新しいリポジトリに接続することです。

次に、ローカルのGitリポジトリ（コンピュータ上のコンテナプロジェクト）をリモートリポジトリ（ブラウザで作成したGitHubリポジトリ）に接続します。

GitHubへのログインを求められる場合があります。サインインすると、ファイルがリモートGitリポジトリに追加されます。

ブラウザでGitHubを更新すると、ファイルを確認できるようになります！

リポジトリをGitHubにアップロードする方法の詳細については、「既存のプロジェクトをGitHubに追加するガイド」をご覧ください。

課題にアクセスする

学生がGitHubから開発コンテナにアクセスし、簡単にプログラミングを始める方法については、5分間のクイックビデオをご覧ください。

フィードバックとその他のリソース

コンテナでVS Codeをセットアップするのに役立つ、VS Codeのリモート開発ドキュメントに詳細な記事があります。当チームへのご質問やフィードバックがございましたら、VS Codeのリモート開発GitHubリポジトリでイシューを開くか、@codeまでツイートしてください。

ハッピーコーディング！

Brigit Murtaugh、VS Code プログラムマネージャー @BrigitMurtaugh