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

2020年7月27日 Brigit Murtaugh、@BrigitMurtaugh

学期の最初の数日間または数週間が、学生のための正しい環境を構成するために費やされてしまうと、多くの教育者から聞いています。それでも、学生は低品質の開発体験や不十分な課題の採点に終わることがあります。

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

「VS Codeのバージョン、特にPythonのインストール用に設定されたものが欲しいです…」 -[リベラルアーツカレッジ助教授]

Visual Studio Codeによる開発コンテナーは、学生が consistent なコーディング環境を持つことを保証するための教育における素晴らしいツールとして機能します。セットアップを処理するため、学生とインストラクターは構成を迅速にスキップし、代わりに本当に重要なこと、つまり学習と素晴らしいコーディングに集中できます！

開発コンテナー

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

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

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

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

VS Codeでの開発コンテナー

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

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

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

この投稿は、教室で開発コンテナーを導入して学生によりスムーズで一貫した環境を作成しようとしているインストラクター向けのガイドとして機能します。

Devコンテナーの動作と、学生がわずか5分で始める方法を見るには、学生向け入門ビデオをご覧ください。

インストラクター向けガイド

従来のセットアップアプローチでは、学生は環境をセットアップする際にさまざまな問題に遭遇する可能性があります。たとえば、独自のOSの違い、プロジェクトファイルの保存場所、ランタイムやインストールされているツールの小さな違いなどです。インストラクターは、これらの問題を学生が解決できるよう、これらすべての微妙な点に精通している必要があります。

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

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

前提条件

• Visual Studio Code をインストールします。
• Docker Desktopをインストールします。
  • Dockerは、コンテナーの構築と共有のための業界標準です。Docker Desktop Stable 2.3.0.3がDocker Desktopの最新かつ最もパフォーマンスの高いバージョンであるため、これをお勧めします。
  • 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拡張機能がインストールされていることを確認してください。

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

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

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

学生が consistent なコーディング環境を得るのに役立つ Dev コンテナーの例を見ていきましょう。教室では、同じ技術スタックを共有する演習を格納するために、1つのGitHubリポジトリを作成できます。たとえば、すべてのPython課題は同じコンテナーを使用し、同じリポジトリに格納できます。

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

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

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

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

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

コンテナーのリポジトリを選択したので、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フォルダーとその中に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ファイルができたという通知が表示されました。Reopen in Containerを選択しましょう。

VS Codeの新しいインスタンスが起動し、イメージがビルドされ、アプリが開発コンテナーで起動します。

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

課題の作成と共有

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

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 Repositoryでissueを開くか、@codeまでツイートしてください。

ハッピーコーディング！

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