教育における開発コンテナー: インストラクター向けガイド

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をうまく活用している事例を見てきました。カリフォルニア大学サンディエゴ校のコースで開発コンテナーを使用した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バックエンドを設定したくない学生のために、Docker Desktop for Windows は、Windows 10 Pro、Enterprise、またはEducation（ビルド16299以降）でも使用でき、Hyper-VとContainersのWindows機能を有効にする必要があります。

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

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

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

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

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

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

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

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

Clone Repository in Container Volume... を呼び出しましょう。

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

Create a unique volume. を選択できます。ボリュームは、コンテナー内にファイルが保存される場所です。

コンテナーリポジトリを選択したので、VS Codeはリロードしてイメージをビルドし、コンテナーを開始します。

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

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

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

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

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

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

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

Dev Containers: Add Dev Container Configuration Files… を選択して、開発コンテナーに必要なファイルのセットアップを開始します。

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

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

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`ファイルがあるという通知が表示されました。Reopen in Containerを選択しましょう。

新しい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 Remote Development GitHubリポジトリでIssueを開くか、Twitterで@codeまでお気軽にお知らせください。

ハッピーコーディング！

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