Azure Cosmos DB の MongoDB 用 API で Angular アプリを作成する - アプリに CRUD 関数を追加する

[アーティクル]
06/01/2023

適用対象: MongoDB

複数のパートから成るこのチュートリアルでは、Express と Angular を使用して Node.js に記入された新しいアプリを作成した後、Azure Cosmos DB の MongoDB 用 API を使用して構成された Azure Cosmos DB アカウントにそれを接続する方法を紹介します。このチュートリアルのパート 6 では、パート 5 の内容をベースとして、次のタスクについて取り上げます。

ヒーローサービスに Post、Put、Delete の各関数を作成する
アプリを実行する

前提条件

本チュートリアルのこのパートに取り組む前に、パート 5 の手順を済ませておいてください。

ヒント

このチュートリアルでは、アプリケーションを作成する手順を段階的に説明しています。完成したプロジェクトをダウンロードしたい場合は、GitHub の angular-cosmosdb リポジトリから完全なアプリケーションを取得できます。

Post 関数をヒーローサービスに追加する

Visual Studio Code で、[エディターの分割] ボタンを押して、routes.js と hero.service.js を左右に並べて表示します。

hero.service.js の 5 行目にある getHeroes 関数が、routes.js の 7 行目で呼び出されていることがわかります。これと同じペアリングを Post、Put、Delete の各関数についても作成する必要があります。

それでは、ヒーローサービスのコーディングを始めましょう。

hero.service.js の getHeroes 関数の後 (module.exports の前) に次のコードをコピーします。このコードによって以下が行われます。

ヒーローモデルを使って新しいヒーローをポストする。
応答をチェックしてエラーが発生しているかどうかを調べ、状態値 500 を返す。

function postHero(req, res) {
  const originalHero = { uid: req.body.uid, name: req.body.name, saying: req.body.saying };
  const hero = new Hero(originalHero);
  hero.save(error => {
    if (checkServerError(res, error)) return;
    res.status(201).json(hero);
    console.log('Hero created successfully!');
  });
}

function checkServerError(res, error) {
  if (error) {
    res.status(500).send(error);
    return error;
  }
}

hero.service.js の module.exports に新しい postHero 関数を追加します。
```
module.exports = {
  getHeroes,
  postHero
};
```
routes.js の get ルーターの後に、post 関数のルーターを追加します。このルーターは一度に 1 つのヒーローをポストします。このような構造をルーターファイルに持たせることで、利用可能なすべての API エンドポイントを明確化しつつ、実際の処理を hero.service.js ファイルに委ねることができます。
```
router.post('/hero', (req, res) => {
  heroService.postHero(req, res);
});
```
アプリを実行して正常に動作するかどうかを確かめます。 Visual Studio Code で、すべての変更を保存し、左側の [デバッグ] ボタンを選択してから、[デバッグの開始] ボタンを選択します。
インターネットブラウザーに戻り、デベロッパーツールの [Network] タブを開きます。ほとんどのマシンでは、F12 キーを押すと、デベロッパーツールが表示されます。 http://localhost:3000 にアクセスして、ネットワーク上で実行される呼び出しを観察します。
[Add New Hero] ボタンを選択して新しいヒーローを追加します。 ID に「999」を、名前に「Fred」を、台詞に「Hello」と入力して、 [Save] を選択します。 [Network] タブを見ると、新しいヒーローの POST 要求が送信されたことを確認できます。

今度は、Put 関数と Delete 関数をアプリに追加しましょう。

Put 関数と Delete 関数を追加する

routes.js で、post ルーターの後に put ルーターと delete ルーターを追加します。

router.put('/hero/:uid', (req, res) => {
  heroService.putHero(req, res);
});

router.delete('/hero/:uid', (req, res) => {
  heroService.deleteHero(req, res);
});

hero.service.js の checkServerError 関数の後に次のコードをコピーします。このコードによって以下が行われます。

put 関数と delete 関数を作成する
ヒーローが見つかったかどうかのチェックを実行する
エラー処理を実行する

function putHero(req, res) {
  const originalHero = {
    uid: parseInt(req.params.uid, 10),
    name: req.body.name,
    saying: req.body.saying
  };
  Hero.findOne({ uid: originalHero.uid }, (error, hero) => {
    if (checkServerError(res, error)) return;
    if (!checkFound(res, hero)) return;

   hero.name = originalHero.name;
    hero.saying = originalHero.saying;
    hero.save(error => {
      if (checkServerError(res, error)) return;
      res.status(200).json(hero);
      console.log('Hero updated successfully!');
    });
  });
}

function deleteHero(req, res) {
  const uid = parseInt(req.params.uid, 10);
  Hero.findOneAndRemove({ uid: uid })
    .then(hero => {
      if (!checkFound(res, hero)) return;
      res.status(200).json(hero);
      console.log('Hero deleted successfully!');
    })
    .catch(error => {
      if (checkServerError(res, error)) return;
    });
}

function checkFound(res, hero) {
  if (!hero) {
    res.status(404).send('Hero not found.');
    return;
  }
  return hero;
}

hero.service.js で、新しいモジュールをエクスポートします。
```
module.exports = {
  getHeroes,
  postHero,
  putHero,
  deleteHero
};
```
コードを更新したので、Visual Studio Code の [再起動] ボタン () を選択します。
インターネットブラウザーでページを最新の情報に更新し、 [Add New Hero] ボタンを選択します。新しいヒーローを追加します。ID に「9」を、名前に「Starlord」を、台詞に「Hi」を入力してください。 [Save] ボタンを選択して新しいヒーローを保存します。
次に [Starlord] ヒーローを選択し、その台詞を "Hi" から "Bye" に変更して、 [Save] ボタンを選択します。

[Network] タブで ID を選択すると、ペイロードが表示されます。ペイロードを見ると、台詞が "Bye" に設定されていることが確認できます。

いずれかのヒーローを UI で削除して、削除操作にかかった時間を確認することもできます。 "Fred" というヒーローの [Delete] ボタンを選択して試してみましょう。

ページを最新の情報に更新すると、ヒーローを取得するのに要した時間が [Network] タブに表示されます。これらはごく短時間ではありますが、どの国にデータが置かれているかや、ユーザーの近隣エリアで geo レプリケーションを実行できるかどうかによって、大きく変動します。 geo レプリケーションの詳細については、近日中に次のチュートリアルで取り上げる予定です。

次のステップ

本チュートリアルのこのパートでは、次の手順を行いました。

Post、Put、Delete の各関数をアプリに追加しました。

このチュートリアルシリーズには、今後も新しい動画が追加される予定ですので、定期的にチェックしてください。

Azure Cosmos DB への移行のための容量計画を実行しようとしていますか? 容量計画のために、既存のデータベースクラスターに関する情報を使用できます。

既存のデータベースクラスター内の仮想コアとサーバーの数のみがわかっている場合は、仮想コア数または仮想 CPU 数を使用した要求ユニットの見積もりに関するページを参照してください
現在のデータベースワークロードに対する通常の要求レートがわかっている場合は、Azure Cosmos DB Capacity Planner を使用した要求ユニットの見積もりに関するページを参照してください

Azure Cosmos DB の MongoDB 用 API で Angular アプリを作成する - アプリに CRUD 関数を追加する

前提条件

Post 関数をヒーロー サービスに追加する

Put 関数と Delete 関数を追加する

次のステップ

その他のリソース

Post 関数をヒーローサービスに追加する