デュアル・ベクトル・フォイルからの脱出：宇宙船打ち上げ制御

はじめに

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

👀 プレビュー

宇宙船打ち上げシミュレーションプレビュー

🎯 タスク

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

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

🏆 成果

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

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

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

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

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

├── 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 関数を実装して、打ち上げ結果に基づいて次のバッチの宇宙船の打ち上げを自動的に手配します。

提供されたプロジェクトの main.js ファイルを開きます。
RequestControl クラス内の run 関数を見つけます。
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();
    });
  }
}

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

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

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

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

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

宇宙船打ち上げ結果表示

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

まとめ

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