Windows 上の React のラボを設定する

React は、ユーザー インターフェイス (UI) を構築するための一般的な JavaScript ライブラリです。 React は、Web サイト用に再利用可能なコンポーネントを作成するための宣言型の方法です。 JavaScript ベースのフロントエンド開発には、他にも多くの一般的なライブラリがあります。 ラボを作成する際に、これらのライブラリのいくつかを使用します。 Redux は、JavaScript アプリ用の予測可能な状態コンテナーを提供するライブラリであり、多くの場合、React を補完するために使用されます。 JSX は、UI の外観を記述するために React でよく使用される、JavaScript のライブラリ構文拡張機能です。 NodeJS は、React アプリケーション用の Web サーバーを実行する便利な方法です。

この記事では、React Web 開発クラスに必要な、開発環境用の Visual Studio 2019、およびツールやライブラリをインストールする方法について説明します。

ラボの構成

このラボを設定するには、Azure サブスクリプションとラボ計画が必要です。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

ラボ計画の設定

Azure サブスクリプションを取得したら、Azure Lab Services で新しいラボ計画を作成できます。 新しいラボ計画の作成の詳細については、ラボ計画の設定方法に関するチュートリアルを参照してください。 既存のラボ計画を使用することもできます。

次の表の説明に従って、ラボ計画の設定を有効にします。 Azure Marketplace イメージを有効にする方法の詳細については、「ラボ作成者が利用できる Azure Marketplace イメージを指定する」を参照してください。

ラボの設定

ラボを作成する方法については、チュートリアル: ラボの設定に関するページを参照してください。 ラボの作成時には、次の設定を使用します。

ワークロードをテストして、より大きなサイズが必要かどうかを確認することをお勧めします。 各サイズの詳細については、「VM のサイズ設定」のセクションを参照してください。

テンプレート マシンの構成

このセクションの手順では、テンプレート VM を設定するために以下の操作を行う方法を示します。

1. 開発ツールをインストールします。
2. Web ブラウザー用のデバッガー拡張機能をインストールします。
3. ファイアウォール設定を更新します。

開発ツールをインストールする

'Visual Studio 2019 Community (最新リリース) on Windows Server 2019 (x64)' イメージには、Visual Studio 2019 に必要な Node.js の開発ワークロードがすでにインストールされています。

1. 任意の Web ブラウザーをインストールします。 イメージには、既定で Internet Explorer がインストールされています。
2. Node.js の Web サイトにアクセスし、ダウンロード ボタンを選択します。 最新の長期サービス (LTS) バージョン、最新の機能が備わった現在のバージョン、または以前のリリースを使用できます。 NodeJS をインストールすると、ノード パッケージ マネージャーもインストールされます。これは、React、Redux、および JSX のインストールに使用されます。
3. 必要に応じて、Visual Studio 2019 を最新のリリースに更新します。

React ベースの Web サイトに必要なその他のコンポーネントは、NPM を使用して特定のアプリケーションにインストールされます。 NPM パッケージを追加するには、Visual Studio での NPM パッケージの管理に関するページを参照してください。

たとえば、プロジェクトで Node.js 対話型ウィンドウを使用する場合は、次のコマンドを入力して React、Redux、および JSX ライブラリをインストールします。

.npm install react
.npm install react-dom
.npm install react-redux
.npm install react-jsx

Visual Studio で初めての React を使用した Node.js アプリを作成するには、「チュートリアル: Visual Studio で Node.js と React のアプリを作成する」を参照してください。

デバッガー拡張機能をインストールする

ブラウザー用に React 開発者ツールの拡張機能をインストールして、React コンポーネントの調査とパフォーマンス情報の記録ができるようにします。

• Microsoft Edge 用 React Developer Tools アドオン
• React 開発者ツール Chrome 拡張機能
• React 開発者ツール FireFox アドオン

ファイアウォール設定の更新

既定では、Node.js サーバーへの受信トラフィックはブロックされます。 実行中の学生の Web サイトにアクセスしたい場合は、インバウンドのファイアウォール規則を追加して、トラフィックを許可してください。 デバッグ中に使用されるポートを確認するには、アプリケーション ポート プロジェクト プロパティを参照してください。 次の例では、New-NetFirewallRule PowerShell コマンドレットを使用して、ポート 1337 へのアクセスを許可しています。

New-NetFirewallRule -DisplayName "Allow access to Port 1337" -Direction Inbound -LocalPort 1337 -Protocol TCP -Action Allow

コスト

このクラスのコスト見積もりの例について説明します。 学生数が 25 名のクラスがあるとします。 各学生には、20 時間の授業時間が予定されています。 予定された授業時間の他に、宿題や課題を行うための時間として、追加の 10 時間が各学生に割り当てられます。 ここで選択した仮想マシンのサイズは、55 ラボ ユニットの中です。

• 25 人の学生 x (予定された 20 時間 + 10 クォータ時間) x 55 ラボ ユニット x 0.01 USD/時間 = 412.50 USD

次のステップ

テンプレート イメージをラボに発行できるようになります。 詳細については、「テンプレート VM の発行」を参照してください。

ラボを設定するときは、次の記事を参照してください。

• クォータを設定する
• スケジュールを設定する
• ユーザーの追加
• 登録リンクを学生に電子メールで送る