デュアル・ベクトル・フォイルからの脱出

はじめに

このプロジェクトでは、宇宙船の打ち上げ要求を収集し、宇宙船の結果に基づいて次のバッチの宇宙船の打ち上げを自動的に手配する RequestControl クラスを開発する方法を学びます。これにより、人間が三体問題の「双ベクトルフォイル」の影響から逃れることができ、三次元空間を二次元平面に崩壊させます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

• RequestControl クラスの run 関数を実装して、宇宙船の打ち上げを処理する方法。
• render 関数を使用して、ページに打ち上げ結果をレンダリングする方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• プロミスを使用して宇宙船の打ち上げプロセスをシミュレートする。
• 打ち上げキューを管理し、一度に打ち上げられる宇宙船の数を制御する。
• ユーザーインターフェイスを更新して、打ち上げ結果を表示する。

Skills Graph

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造を設定します。以下の手順に従ってこのステップを完了します。

プロジェクトフォルダを開きます。ディレクトリ構造は以下のとおりです。

├── index.html
└── main.js

そのうち：

• index.html はメインページです。
• main.js はコードを補完する必要があるjsファイルです。

main.js ファイル内で：

• createRequest メソッドは宇宙船の打ち上げ要求を行う promise です。
• RequestControl クラスの addRequest メソッドは宇宙船の打ち上げ要求を収集します。宇宙船の打ち上げ要求は this.requestQueue 打ち上げキューに配置されます。
• run メソッドは打ち上げ結果に基づいて次のバッチの宇宙船の打ち上げを自動的に手配します。
• render メソッドはページに打ち上げ結果をレンダリングするために使用されます。

max = 2 を例にとると、宇宙船の打ち上げプロセスは以下のとおりです。

WebIDEの右下隅の Go Live ボタンをクリックして、プロジェクトを実行します。最初は何の影響もありません。

RequestControl クラスの run 関数を実装する

このステップでは、RequestControl クラスの run 関数を実装して、打ち上げ結果に基づいて次のバッチの宇宙船の打ち上げを自動的に手配します。

1. 提供されたプロジェクトの main.js ファイルを開きます。
2. RequestControl クラス内の run 関数を見つけます。
3. run 関数の中に、宇宙船の打ち上げを処理するために以下のコードを追加します。

run() {
  // 要求キューの長さを取得する
  let len = this.requestQueue.length;

  // 要求キューが空の場合は、返す
  if (len === 0) return;

  // 最大宇宙船数と要求キューの長さの最小値を取得する
  let min = Math.min(this.max, len);

  // 宇宙船を1つずつ打ち上げる
  for (let i = 0; i < min; i++) {
    // 打ち上げ可能な最大宇宙船数を減らす
    this.max--;

    // キューから次の要求を取得する
    let req = this.requestQueue.shift();

    // 宇宙船を打ち上げて結果を処理する
    req()
   .then((res) => {
      this.render(res);
    })
   .catch((error) => {
      this.render(error);
    })
   .finally(() => {
      // 打ち上げ可能な最大宇宙船数を増やす
      this.max++;
      // 次のバッチの宇宙船を打ち上げるために再帰的にrun関数を呼び出す
      this.run();
    });
  }
}

実装のポイントは以下の通りです。

1. 要求キューの長さを取得する (this.requestQueue.length)。
2. 要求キューが空の場合は、返す。
3. 最大宇宙船数と要求キューの長さの最小値を取得する (Math.min(this.max, len))。
4. 宇宙船を1つずつ打ち上げ、打ち上げ可能な最大宇宙船数を減らす (this.max--)。
5. req() が返すプロミスの then と catch メソッドを使って、宇宙船の打ち上げ結果を処理する。
6. 打ち上げ可能な最大宇宙船数を増やす (this.max++) と、次のバッチの宇宙船を打ち上げるために再帰的に run 関数を呼び出す。

プロジェクトをテストする

1. main.js ファイルを保存します。
2. ブラウザでWebページを更新します。
3. ページに表示される打ち上げ結果を観察します。ページには宇宙船の成功した打ち上げと失敗した打ち上げが表示されるはずです。

最終的なページのエフェクトは以下のとおりです。

おめでとうございます！宇宙船の打ち上げを自動的に手配する RequestControl クラスの実装を完了しました。このプロジェクトはこれで完全に機能するはずです。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるためにLabExでさらに多くの実験を行うことができます。