目次

はじめに

参考書籍
必要な開発環境とアカウント、その入手先
利用するテスト用のフレームワークとライブラリについて
サンプルのソースコードについて
免責事項
表記関係について
底本について

第1章 ライフログを記録するWebアプリケーションのサーバー側のテストを作成する

1.1 ユーザー登録機能のテストを設計する
1.2 Mochaとは?Chaiとは?Sinonとは?
1.3 ユーザー登録機能のテストの不足分を追加する
1.4 ユーザー削除機能のテストを設計する(重要度に応じてPendingを利用する)

第2章 サーバー側の機能を実装して、テストをpassさせる

2.1 フォルダ構造とアプリの構成概要について
2.2 テストの実行例と最初のテスト結果
2.3 ユーザー登録機能を実装してテストをpassさせる
2.4 ユーザー削除機能を実装してテストをpassさせる

第3章 ライブラリのI/Oの実動作をテストで確認しながら実装する

3.1 テストフレームワークから実際の外部I/Oを試行する
3.2 外部I/Oをスタブ化する
3.3 現在時刻を内部的に利用する関数のテスト作成

第4章 ライフログを記録するWebアプリのクライアント側UIを作る

4.1 関数内の時間変換のテストを作成する
4.2 関数内の時間変換を実装する

第5章 全体を実装して、Azureに公開する。

5.1 ローカルで、全体の動作確認を行う
5.2 Azure上に公開して、設定と動作確認を行う
5.3 Azureでの公開後の機能強化について

付録A Sinonライブラリで良く使うAPIについて

A.1 スタブ関数の動作を設定するAPI
A.2 実行後のスタブ関数の呼び出し状況を取得するAPI

付録B Expressフレームワークの使い方

あとがき

はじめに

 本書は「JavaScriptのテスト駆動開発でWebアプリケーションを作成しよう。ChaiとSinonを用いたスタブの作り方と検証コードの表現に触れよう」を目的とした本です。Node.js環境を前提とします。テストフレームワークとライブラリにはMochaとChaiとSinon、そしてpromise-test-helperを用います。Windows上で開発を行います。

 小さなWebアプリケーションを作成しながら、テスト用ライブラリによる具体的なコード表現の事例、コード作成の進め方、を説明します。Webアプリケーションの公開場所は、設定と操作がGUIでわかりやすいMicrosoft Azure(以降、Azureと略記)を利用します。

 「テストを先に書き、後から実装する」進め方は、「テスト駆動開発」と呼ばれます。この方法の良いところは、「テストコードがそのまま設計仕様書になること」です。

 開発するタイミングが飛び飛びに成る場面などでも効果を発揮します。例えば、一週間前に考えていた設計は、忘れてしまうことが多いのではないでしょうか?実装から読み取っても良いのですが、間違わずに読み取ることは手間です。もちろん「設計仕様書」を書いてから、実装を進めれば「設計を忘れる」問題は発生しませんが、仕様書の通りに実装されたか否かを「人間の目で、動作を見て確認」する必要があり、これも手間です。

 そこで「テストコードを書いて設計し、具体的なInput/Outputを定めておく。細かい実装は後回しにする」という手法が効果を発揮します。実装後の動作検証は、テスト実行のコマンドひとつで行うことができます。

 なお、「テストコードを書く」と「大雑把に実装する」は並行して進めます。実装して初めて見えてくる問題もあるので、必ずしも最初にすべて設計を終える必要はありません。実装の一歩先の設計=テストコードがあればよいのです。

 本書では、次のように「テスト駆動」で「Webアプリケーションを開発する方法」を解説します。せっかく作ったWebアプリケーションは公開したいので、Azureで公開することを前提にして設計していきます。次の流れで進めます。

  

 1.サーバー側に必要な機能をテストベースで設計する

 2.サーバー側の機能を、実装してテストをパスさせる

 3.理解に不安のあるI/Oを、「実動作→テスト」で学びながら設計と実装をする

 4.クライアント側のデーター変換をテストベースで設計する

 5.クライアント側のデーター変換を実装してテストをパスさせる

 6.Azureに公開して動作を確認する

  

 Webアプリケーションは、データーベースを備えたAPIサーバーと、UIとしてのブラウザー側クライアントの構成とします1。サーバー側とクライアント側のデーターのやり取りにはRESTful API2を利用します。RESTful APIは、HTTP/HTTPSでの通信から、グラフィカルな部分を落として、データーの送受信だけに特化したもの、と捉えてください。本書では、SQLiteデーターベースを用いたWebアプリケーションのサンプルに沿って解説しますが、SQLコマンドの知識が無くとも動作の意図が読み取れるサンプルです。Webアプリケーションの実装方法ではなく、「どのようにしてテストコードを書くか?頭の中にある設計(Input/Output)をテストコードでどう表現するか?」にフォーカスします。

 Azureへの公開手順についての説明や、サーバー側(Azure側)とクライアント側(ブラウザー側)の通信方法、クライアント側のGUI機能の設計については、必要最小限の範囲の解説に留めます。なお、より詳細な「公開手順」や「通信方法」、「GUIの実装方法」については、筆者による「Azure無料プランで作る!初めてのWebアプリケーション開発」(インプレスR&D刊 https://nextpublishing.jp/book/9639.html)にて同一のサンプルコードを用いて解説しています3

 本書を読み進めるためには、初歩のJavaScript言語の知識があることを前提としています。必要に応じて書籍やインターネットなどで事前学習をお願いします。

 また本書で用いるサンプルのソースコードは「JavaScriptそのもの以外への背景知識を極力不要とすること、簡単であること」と「テストコードの表現がわかりやすい事」を優先しております。「テスト駆動開発」そのものの理念や、開発サイクルの進め方、拡張性やセキュリティなどについては関連書籍などを参照ください。

参考書籍

 ・実践テスト駆動開発 著、Steve Freeman, Nat Pryce 翻訳、和智右桂、高木正弘

 ・node.js超入門 著、掌田津耶乃

 ・JavaScript Promiseの本 著、azu4

 ・RESTful Webサービス 著、Leonard Richardson, Sam Ruby 監訳、山本陽平 訳、株式会社クイープ

 ・わかばちゃんと学ぶGit使い方入門 著、湊川あい

必要な開発環境とアカウント、その入手先

 クライアントPCはWindows OS環境とします。本章のゴールにたどり着くには、次の物が必要となります。

必要な道具

 1.クレジットカード、Short Message Service(以降、SMSと略記)が利用可能な携帯電話

 Azureのアカウント作成時の個人認証に必要です。携帯電話は、SMSが利用可能であればフューチャーフォン(ガラケー)でもスマートフォンでもタブレットでも問題ありません。クレジットカードの登録を行いますが、料金が発生しないコースを選択するので、実際の支払いは発生しません。

インストール必須なアプリケーション

 2.Node.js

 https://nodejs.org/ja/

 ローカル環境での、Node.jsのソースコードの動作の確認に必要です。

  

 3.GitHub Desktop

 https://desktop.github.com/

 GitHubへのかんたんなコミット操作のためにおすすめです5

作成が必要なアカウント

 4.GitHub(無料枠)

 https://github.com/

 作成したWebアプリケーションのソースコードの管理とAzureへの紐づけを行います。

  

 5.Microsoft Azure (無料枠)

 https://azure.microsoft.com/ja-jp/

 作成したWebアプリケーションの公開用クラウドスペースです。

ローカル環境での開発で利用するアプリケーション

 6.cURL (curl.exe)

 https://curl.haxx.se/download.html

 コマンドラインからhttp通信(GET/POST/)を行うツールです。ブラウザーで代替可能ですが、あると便利です。

あると便利なアプリケーション

 7.Microsoft Visual Code

 https://code.visualstudio.com/

 Node.jsのコーディングを行います。任意のエディタで代替できますが、おすすめします。

  

 8.DB Browser for SQLite Windows

 http://sqlitebrowser.org/

 SQLiteデーターベースの内容をグラフィカルに参照することができます。コマンドラインから参照で操作上の問題はありませんが、あると便利です。

利用するテスト用のフレームワークとライブラリについて

 本書では、Mochaフレームワークを用いてテストコードを作成します。動作検証にはChaiライブラリを、スタブ作成には Sinonライブラリを用います。非同期のテストにおける取り回しを容易にするため、promise-test-helperライブラリも用います。

サンプルのソースコードについて

 本書でのサンプルの記載は、多くの場合はキーとなるコード部分の抜粋となります。サンプルコードの全体は次のサポートページで公開しています。実際に動作確認を行う際には、GitHub側のソースコードを利用してください。

 https://github.com/hoshimado/tdd-azure-book

免責事項

 本書に記載された内容は、情報の提供のみを目的としています。したがって、本書を用いた開発、製作、運用は、必ずご自身の責任と判断によって行ってください。これらの情報による開発、製作、運用の結果について、著者はいかなる責任も負いません。

表記関係について

 本書に記載されている会社名、製品名などは、一般に各社の登録商標または商標、商品名です。会社名、製品名については、本文中では©、®、™マークなどは表示していません。

底本について

 本書籍は、技術系同人誌即売会「技術書典4」で頒布されたものを底本としています。

1. APIサーバーとは、人間向けのUIの提供ではなく、アプリケーションの機能(データーの管理)提供に特化したサーバー、と捉えてください。APIサーバーとのデーターのやり取りの結果を表示するUIはクライアント側ブラウザーで実装します。

2. RESTful Webサービス(API)とも呼ばれます。本書では以降、RESTful APIのWebサービス、もしくは略してRESTful APIと表記します。簡単のため、RESTful APIは「Webブラウザーで特定のURLにアクセスすると、jsonが返る(ブラウザーに表示される)」動作のこと、といただければ充分ですので難しく考える必要はありません。

3. 本書は、「テスト駆動で簡単なWebアプリケーションを作る」の観点での解説となります。対して、「Azure無料プランで作る!初めてのWebアプリケーション開発」本では、「Webアプリケーションを作成してAzure上に公開する」の観点で解説しております。

4. 次のURLにて、Creative Commons Attribution-NonCommercialの ライセンス で公開されている本になります。http://azu.github.io/promises-book/

5. Github Desktop以外にも、SourceTreeやgit for windowsなど様々なGitクライアントツールがありますので、好みのものをお使いいただいて構いません。



第1章 ライフログを記録するWebアプリケーションのサーバー側のテストを作成する

 本書では「ライフログを記録するWebアプリケーション」(以降、Webアプリと略記)を作りながら、テスト駆動で設計と実装を行う様を紹介します。

 Webアプリは、起床時と就寝時にボタンを押すことで時刻を記録する簡単なアプリとします。ライフログはサーバー側にSQLiteデーターベースを設けて記録します。

 不特定多数にアプリを公開することを考えると、データーベースの容量を考慮して「利用ユーザー数」をサーバー側で管理することが必要です。本書では、解説を簡単にするため、「ユーザー数」を「管理用SQLデーターベースに記録する」ことで管理します。これにより、少なくとも次のふたつの機能が必要です。


 ・新規ユーザーの登録を受け付けて管理用データーベースに記録する。

 ・登録済みのユーザーを削除する。


 では、このサーバー側の機能をテストで表現してみましょう。MochaとChaiとSinonを利用しますが、それぞれの詳しい説明は後回しとして、「こんな風に表現できる」というポイントで解説します。

 本章では、サンプルのテストコードの概要を紹介します。記載したサンプルコードを用いた実際のテストの実行方法と結果については、第2章「サーバー側の機能を実装して、テストをpassさせる」を参照ください。

1.1 ユーザー登録機能のテストを設計する

 ひとつめの「ユーザーの新規登録」から設計を行います。ここでは、必要なデーターはPOSTメソッドの形式で渡されてくるものとします。少なくとも“新規ユーザー名”と“認証用のパスワード”が、入力データーとして必要でしょう。この機能の実装に必要な動作を書き出すと、次のようになります。

 ・新規ユーザーの登録を受け付けて、管理用データーベースに記録する。

  ─ユーザーが新規ユーザーだった場合、管理用データーベースにユーザーとパラメータを記録する。

  ─ユーザー数が上限値と等しいか、もしくは超えている場合は、「上限に達しました」の応答を返す。


 次に、この機能の設計をテストコードで表現してみます。「ユーザーの新規登録」を提供する関数を「api_v1_activitylog_signup()」と仮定し、POSTデーターで新規ユーザー名が「username」で、認証用のパスワードが「passkey」で渡されてくるとして関数の呼び出し方を考えると、リスト1.1のようになります1it()はMochaフレームワークでのテストケースの書く方法ですが、後ほど説明します。



リスト1.1: api_v1_activitylog_signup()の呼び出し

it("正常系:新規ユーザー追加", function(){
    var queryFromGet = null;
    var dataFromPost = {
        "username" : "nyan1nyan2nyan3nayn4nayn5nyan6ny",
        "passkey"  : "cat1cat2"
    };
    api_v1_activitylog_signup( queryFromGet, dataFromPost )
});
試し読みはここまでです。
この続きは、製品版でお楽しみください。