JavaScript

【APIサーバー】データ一覧取得する機能の追加【Model実装】

どうも、つよぽんです!

今回は「APIサーバーを実装するシリーズ」の第2回目の記事となります。

前回記事「【APIサーバー】Modelファイルの作成【事前準備】」をまだ読んでいなくて、APIサーバーの実装経験が無い方は前回記事を読んでおくことをおすすめします。

第2回目の今回は、前回用意したModel(Todoモデル)に、データ一覧を取得する機能を追加実装します。

また、追加機能の実装だけでなく、追加した機能が正しく動作することを確認するために「テストコード」も作成していきます。

今回の記事内容は、以下のリンク先で使っているスライドの一部を補足した記事になります。

実際に手を動かしながら覚えたい方は、以下のスライドも参考にすると良いでしょう。

あわせて読みたい
【Model実装】Todo一覧を取得する機能を実装【テスト含む】 動画解説 スライド解説 スライドの解説を以下の記事でも行っております。上のスライドと以下の解説記事をあわせて使う...

今回の記事は次のような方に向けて書きました。

想定読者
  1. APIサーバーの実装の流れを理解したい方
  2. Modelにデータ一覧を取得するための機能を追加する方法を知りたい方
  3. 追加した機能のテストコードを書きたい方

この記事を読み終えた後のあなたは次のことがわかるようになっています。

この記事を読み終えた後のあなた
  • Modelにデータ一覧を取得する機能の実装の流れがわかる
  • 追加実装した機能のテストコードを書けるようになる

それでは以下の内容で話を進めていきます。

今回の内容
  1. ダミーデータを事前に用意する
  2. データ一覧取得する機能を追加実装する
  3. データ一覧取得する機能のテストコードを作成する

ダミーデータを事前に用意する

ダミーデータの用意

前回記事でもお話したように今回のAPIサーバー実装シリーズの目的は、「APIサーバーの実装の流れを理解すること」となります。

そのため、今回実装する「データ一覧取得するための機能」の動作を確認するためには、事前にダミーのデータベース(=今回だとJavaScriptの配列)にダミーのデータを事前に用意する必要があります。

ダミーのデータの用意は簡単で、ダミーのデータベースに、今回作成するTodoデータを追加すれば良いだけです。

以下の画像の赤枠内のコードではTodoモデルのファイル内でfor文を使って5件のダミーのTodoデータをダミーのデータベースに追加しています。(※画像をクリックすると別タブで画像が開きます)

ダミーデータの用意ダミーデータの用意

上のコードを追加した後に、ダミーのデータが正しく保存されているかを「console.log」を使って確認すると良いです。

以下の画像では「console.log(todos);」を先ほどのfor文の後に実装して、nodeコマンドを使ってTodoモデルのファイルを実行した様子を表しています。(※画像をクリックすると別タブで画像が開きます)

console.logでダミーデータが用意できたことを確認するconsole.logでダミーデータが用意できたことを確認する

上の画像のオレンジ枠部分を見ると分かる通り、ダミーデータが保存されているのがわかります。

データが入っていることが確認できたら、「console.log(todos);」の役目は終わりなので、console.logの1行を削除しておきましょう。

console.logをコード内に残し続けると次の弊害がある

  • console.logを書きすぎて、確認したいログがすぐに見つけられなくなる
  • 「最終的に削除すれば良いや」と後回しにすると、console.logがどんどん増えていき、削除作業でさえも面倒になる

データ一覧取得する機能を追加実装する

Modelに「データ一覧を取得する機能」を追加するためには、メソッドを1つ追加する必要があります。

今回は「findAll」メソッドという名前にします。

以下の画像はTodoモデルのファイルの「module.exports」に「findAll」メソッドを追加実装した様子になります。(※画像をクリックすると別タブで画像が開きます)

findAllメソッドを追加実装するfindAllメソッドを追加実装する

画像内にも書いていますが、今回は単純にデータ一覧を返すだけで良いので「return todos;」の1行を追加して終了です。

この1行によって、findAllメソッドの実行元に「todos」、つまりダミーデータの一覧が返るようになります。

データ一覧取得する機能のテストコードを作成する

findAllメソッドを追加実装しましたが、正しく動作しているかまだ確認していません。

今回は、動作確認も兼ねて、findAllメソッドのテストコードを実装します。

テストツールをインストールする

現時点では、まだテストツールをインストールしていないので、以前書いた記事「【Node.JS】テストツールの種類とインストール方法を覚える」を参考に「mocha」と「power-assert」をnpmでインストールしましょう。

インストール後のpackage.jsonは以下の画像のように「devDependencies」に「mocha」と「power-assert」が追加されている状態になっているかと思います。(※画像をクリックすると別タブで画像が開きます)

テストツールをインストールした後のpackage.jsonの中身テストツールをインストールした後のpackage.jsonの中身

テストツールのインストールが終わったら、後はテストコードを実装していきます。

テストコードの実装

テストファイル作成と、テストコード実装の流れは以下の3つの画像それぞれに説明つきで書いてあるので、そちらを参考にしていただけたらと思います。(※画像をクリックすると別タブで画像が開きます)

テストコード実装その1

テストコード実装その1テストコード実装その1

テストコード実装その2

テストコード実装その2テストコード実装その2

テストコード実装その3

テストコード実装その3テストコード実装その3

「mocha.opts」ファイルを用意する

mocha.optsは「mocha」で使うファイルで、mochaコマンド実行時に利用できるオプションを事前にファイルに記述できます。

事前に「mocha.opts」にオプションを記述することで、毎回オプションを書く手間が省けます。

今回の場合、以下の画像でmocha.optsファイルに「–recursive」オプションを付けていますが、その理由は、今回実装したテストファイル「findAll.test.js」はtestディレクトリ直下にあるわけではなく、「test/models/Todo」ディレクトリ配下になるためです。(※画像をクリックすると別タブで画像が開きます)

mocha.optsの用意mocha.optsの用意

「–recursive」オプションの使い方に関してもっと知りたい方は、ドキュメント「THE TEST/ DIRECTORY」も参考にすると良いでしょう。

テストを実行して成功することを確認する

実装したテストコードが意図通り動いているか確認するために、テストを実行してすべてのテストが成功することを確認しましょう。(※画像をクリックすると別タブで画像が開きます)

テストを実行して成功することを確認するテストを実行して成功することを確認する

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  • ダミーデータを用意した
  • データ一覧取得する機能「findAllメソッド」を実装した
  • 「findAllメソッド」のテストコードを実装した

今回の内容は以下の記事内のスライドでも学習できます。

あわせて読みたい
【Model実装】Todo一覧を取得する機能を実装【テスト含む】 動画解説 スライド解説 スライドの解説を以下の記事でも行っております。上のスライドと以下の解説記事をあわせて使う...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です