【無料講座】初心者向けWebエンジニア養成講座はこちら
JavaScript

【APIサーバー】データ一覧取得するAPIを追加【Controller実装】

  /

どうも、つよぽんです！

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

前回記事「【APIサーバー】データ一覧取得する機能の追加【Model実装】」をまだ読んでいなくて、APIサーバーの実装経験が無い方は前回記事を読んでおくことをおすすめします。

第3回目の今回は、前回Model(Todoモデル)に実装した「データ一覧を取得する機能」を利用して、ControllerとRouterを追加していきます。

Routerの使い方に関しては、以前書いた記事「【express】2ページ分のルーティング処理を実装する【express.Router】」でも解説しています。

Routerの使い方を詳しく知りたい方はそちらも参考にしていただけたらと思います。

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

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

あわせて読みたい
【Controller実装】Todo一覧を取得するAPIを実装する今回はAPIサーバーのControllerを作成して、Todo一覧を取得するAPIを実装します。また、作成したControllerとRouterを紐づけてルーティングの設定も行います。最後に、実装したAPIの挙動を確認するためにWebブラウザにアクセスして、Todo一覧が返ってくるのを確認します。...

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

想定読者
  1. APIサーバーの実装の流れを理解したい方
  2. ルーティング設定と実処理を分離した書き方を知りたい方

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

この記事を読み終えた後のあなた
  • ルーティング(Router)と実処理(Controller)を分離して、紐付ける実装方法がわかる

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

今回の内容
  1. 事前準備 : 必要なライブラリのインストール
  2. ルーティング用のファイルと実処理用のファイルを分けて、紐付ける
  3. サーバーを起動して、APIの動作を確認する

事前準備 : 必要なライブラリのインストール

expressをインストール

以下の画像のように「npm install express」でexpressをインストールします。(※画像をクリックすると別タブで画像が開きます)

expressをインストールした様子expressをインストールした様子

expressのインストール方法は、以前書いた記事「expressをインストールする【Node.jsのフレームワーク】」でも解説しているので、そちらも参考にしていただけたらと思います。

nodemonをインストール

以下の画像のように「npm install -D nodemon」でnodemonをインストールします。(※画像をクリックすると別タブで画像が開きます)

nodemonをインストールした様子nodemonをインストールした様子

nodemonの導入の流れは、以前書いた記事「nodemonでサーバー開発を効率化する【修正後に自動再起動】」でも解説しているので、そちらも参考にしていただけたらと思います。

ルーティング用のファイルと実処理用のファイルを分けて、紐付ける

実処理の実装用ファイル : controllers/todos.jsを作成する

以下の画像のように、「controllers」ディレクトリを作成して、その中にtodos.jsを作成します。(※画像をクリックすると別タブで画像が開きます)

controllers/todos.jsを作成した様子controllers/todos.jsを作成した様子

「controllers/todos.js」にはgetTodosメソッドを用意して、外部から実行できるように、module.exportsで公開しておきます。

上の画像の右の赤枠内にgetTodosメソッドを実装していますが、中身はまだ実装していません。

getTodosメソッドの中身は後ほど実装するので、今はこのままで問題ありません。

ルーティング設定用ファイル : routers/todos.jsを作成する

以下の画像のように、「routers」ディレクトリを作成して、その中にtodos.jsを作成します。(※画像をクリックすると別タブで画像が開きます)

routers/todos.jsを作成した様子routers/todos.jsを作成した様子

「express.Router」でrouterオブジェクトを作成したら、以下のコードを実装します。(上の画像の③の部分)

router.route(/).get(controller.getTodos)

このコードが意味することは次のとおりです。

  1. router.route(/) : 「/」、つまりルートにリクエストが来た時の処理を紐付ける
  2. get(controller.getTodos) : HTTPメソッドのGETでリクエストが来たら、「controller.getTodos」メソッドを実行する

つまり、「GET /」でリクエストが来たときに「controller.getTodos」メソッドを実行するということになります。

controller.getTodosメソッドは、先ほど作成した「controller/todos.js」内に実装したgetTodosメソッドを指します。

ここまででルーティングの設定(=Router)と実処理(=Controller)の紐付けが完了しました。

あとは、Controllerに実装したgetTodosメソッドの中身を実装して、サーバー起動周りのコードを実装すれば完成です。

Controllerの実処理を実装する

「controllers/todos.js」のgetTodosメソッドの実装内容は以下の画像の左側のコードになります。(※画像をクリックすると別タブで画像が開きます)

ControllerのgetTodosメソッドの実装その1ControllerのgetTodosメソッドの実装その1

getTodosメソッド内でやっている内容を順番に説明すると、前回記事「【APIサーバー】データ一覧取得する機能の追加【Model実装】」で作成したModelのfindAllメソッドを使って次の2つを行っているだけです。

  1. ModelのfindAllメソッドでデータ一覧を取得する
  2. 取得したデータ一覧を「res.json」メソッドを使ってクライアントに返す

詳しくは以下の画像内に書かれている説明も読んでいただけたらと思います。(※画像をクリックすると別タブで画像が開きます)

ModelのfindAllメソッドを実行してデータ一覧を取得ModelのfindAllメソッドを実行してデータ一覧を取得
取得したデータ一覧をres.jsonメソッドを使ってクライアントに返す取得したデータ一覧をres.jsonメソッドを使ってクライアントに返す

サーバー起動周りのコードを実装して、Routerをapp.useする

RouterとControllerの実装は終わったので、後はサーバー起動周りのコードを実装して、Routerをapp.useで紐付けるだけです。

Routerをapp.useで紐付ける方法は「【express】2ページ分のルーティング処理を実装する【express.Router】」で解説しているので、そちらを参考にしていただけたらと思います。

ここでは、プロジェクトのルートディレクトリ直下に「index.js」を作成して、index.jsの中にサーバー起動周りのコードを実装します。

index.jsの中身のコードと、説明は以下の画像を参考にして頂けたらと思います。(※画像をクリックすると別タブで画像が開きます)

index.jsの用意

プロジェクトのルートディレクトリ直下にindex.jsを作成して、サーバー起動周りのコードを実装するプロジェクトのルートディレクトリ直下にindex.jsを作成して、サーバー起動周りのコードを実装する

Routerを読み込む

Routerを読み込むRouterを読み込む

Routerをapp.useでセットして、基準パスを「/api/todos」に設定

Routerをapp.useでセットして、apiの基準のパスを「/api/todos」に設定したRouterをapp.useでセットして、apiの基準のパスを「/api/todos」に設定した

「npm start」でサーバー起動するようにpackage.jsonを修正

「npm start」でサーバー起動できるようにする「npm start」でサーバー起動できるようにする

サーバーを起動して、APIの動作を確認する

ブラウザでAPIの実行結果を確認する

ここまででデータ一覧を取得するAPIの実装が完了したので、実際にサーバーを起動してブラウザのURL入力欄に「localhost:8080/api/todos」と打ち込んで実行してみましょう。

正しく実装ができていれば、以下の画像のように、データ一覧がJSON形式で表示されるようになります。(※画像をクリックすると別タブで画像が開きます)

「localhost:8080/api/todos」にアクセスしたときのブラウザの出力「localhost:8080/api/todos」にアクセスしたときのブラウザの出力

JSON形式でデータが返っているのは、ControllerのgetTodosメソッドで「res.json」を使ってデータをクライアントに返しているからです。

Chrome拡張「JSONView」でブラウザのJSON表示を見やすくする

こちらはインストールする必要はありませんが、JSONデータをブラウザで見やすくしたい場合は、「JSONView」というChrome拡張をインストールするとデータ内容が見やすくなるのでオススメです。

以下の画像は、先ほどのブラウザのデータ出力と同じもので、違いはChrome拡張である「JSONView」をインストールしているか、していないかの違いだけです。(※画像をクリックすると別タブで画像が開きます)

JSONViewをインストールしている状態でのブラウザのJSONデータの表示JSONViewをインストールしている状態でのブラウザのJSONデータの表示

まとめ

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

今回のまとめ
  • APIサーバーの開発に必要なライブラリをインストールした
  • RouterとControllerを実装して、ルーティングと実処理を紐付けた
  • サーバー起動周りのコードを実装して、Routerをapp.useでセットして、基準のパスを「/api/todos」とした
  • サーバーを起動して、ブラウザで「localhost:8080/api/todos」にアクセスしたJSON形式でデータ一覧が返ってくるのを確認した
  • Chrome拡張「JSONView」の紹介をした

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

あわせて読みたい
【Controller実装】Todo一覧を取得するAPIを実装する今回はAPIサーバーのControllerを作成して、Todo一覧を取得するAPIを実装します。また、作成したControllerとRouterを紐づけてルーティングの設定も行います。最後に、実装したAPIの挙動を確認するためにWebブラウザにアクセスして、Todo一覧が返ってくるのを確認します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

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

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

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

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

無料特典を受け取る

 

関連記事

COMMENT

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