はじめに

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

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

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

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

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

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

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

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

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

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

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

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

　６．Azureに公開して動作を確認する

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

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

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

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

参考書籍

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

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

　・JavaScript Promiseの本　著、azu⁴

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

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

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

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

必要な道具

　１．クレジットカード、Short Message Service（以降、SMSと略記）が利用可能な携帯電話

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

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

　２．Node.js

　https://nodejs.org/ja/

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

　３．GitHub Desktop

　https://desktop.github.com/

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

作成が必要なアカウント

　４．GitHub（無料枠）

　https://github.com/

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

　５．Microsoft Azure （無料枠）

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

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

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

　６．cURL (curl.exe)

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

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

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

　７．Microsoft Visual Code

　https://code.visualstudio.com/

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

　８．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章　ライフログを記録するWebアプリケーションのサーバー側のテストを作成する

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

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

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

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

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

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

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

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

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

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

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

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

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

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

it("正常系：新規ユーザー追加", function(){
    var queryFromGet = null;
    var dataFromPost = {
        "username" : "nyan1nyan2nyan3nayn4nayn5nyan6ny",
        "passkey"  : "cat1cat2"
    };
    api_v1_activitylog_signup( queryFromGet, dataFromPost )
});

目次