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

2020年7月27日 Brigit Murtaugh著、@BrigitMurtaugh

多くの教育者から、学期の最初の数日または数週間が、学生向けの適切な環境設定に費やされてしまうという話を伺っています。それでも、学生は質の低い開発体験や、課題の不十分な評価に終わってしまう可能性があります。

「私の学生のセットアップには通常、5時限かかります。対処すべきPythonのバージョンがあります。多くの複雑さがあります。悲しいことに、その複雑さを解決するには多くの時間と費用がかかります。」 -[コミュニティカレッジ 米国 教授 CS 101]

「Pythonインストール用に特別にセットアップされたバージョンのVS Codeを希望します...」 -[リベラルアーツカレッジ 助教授]

Visual Studio Codeの開発コンテナーは、学生が一貫したコーディング環境を確実に利用できるようにするための、教育における素晴らしいツールとして役立ちます。これらはセットアップを処理するため、学生とインストラクターは構成をすぐに終えて、代わりに本当に重要なこと、つまり学習と素晴らしいコーディングに集中できます！

開発コンテナー

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

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

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

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

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

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

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

私たちはすでに、インストラクターがDev Containersを教室で成功裏に使用しているのを見てきました。UCサンディエゴのコースでdev containerを使用した3人の研究者の経験について詳しく知るには、DevContainersを使用して学生の開発環境を標準化する：経験レポートをご覧ください。

この記事は、学生にとってよりスムーズで一貫性のある環境を作成するために、教室に開発コンテナーを実装しようとしているインストラクター向けのガイドとして役立ちます。

dev containerの動作と、学生がわずか5分で開始する方法を確認するには、学生向け入門ビデオをご覧ください。

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

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

一般的な問題は、ツールの異なるバージョンを管理することです。例としてPythonを取り上げましょう。Python 2とPython 3があり、マイナーバージョンも異なります。複数のバージョンのPythonと、リンターなどの複数の付随するツールがあると、混乱し、エラーが発生する可能性があります。

時間と混乱を大幅に節約するために、dev containerを使用して、クラス全体で標準化された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拡張機能をインストールしていることを確認してください。

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

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

クラスのコンテナーへのアクセス

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

Python dev containerと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で起動します。

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

課題の作成と共有

dev containerを作成したので、リポジトリにアップロードして、学生が課題にアクセスできるようにすることができます。課題の手順をREADMEに含めるだけでなく、課題に必要なベースコードまたはテンプレートコード、および.devcontainerフォルダーを含めて、全員が一貫した開発エクスペリエンスを得られるようにすることができます。これらのファイルはすべて、単一のリポジトリとしてアップロードできます。

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

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

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

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

ブラウザーでGitHubを更新すると、ファイルを表示できるようになりました！

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

課題へのアクセス

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

フィードバックと参考資料

コンテナーを使用したVS Codeの設定を支援するために、VS Codeのリモート開発ドキュメントに関する詳細な記事を用意しています。チームへの質問やフィードバックがある場合は、VS Codeのリモート開発GitHubリポジトリで問題をオープンするか、@codeにツイートしてください。

ハッピーコーディング！

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