本書はVue.jsをCDN版で少し触れてみた人に向けて、Vue CLIへ移行するまでと、Vue CLI上でテスト駆動開発(TDD)をするまでの手順を解説します。合わせて、フロントエンドのVue CLIから利用するバックエンドのREST APIをExpressにて実装する際に、HTTPリクエスト部分をテスト駆動で開発する方法も掲載しています。Vue CLIの前提となっているwebpackとBabelについて「詳しく知らなくとも、とりあえず使えるようになる」ことを目指します。フロントエンドVue.jsとバックエンドExpressで「Azure上でそのまま公開できる簡単なWebアプリ」を説明のサンプルに用いています。
【目次】
第1章 Vue.jsのCDN版からVue CLI版へ移行
第2章 Vue CLIでテスト駆動開発する(TDD)
第3章 ExpressによるWebAPIサーバーをテスト駆動開発する(TDD)
第4章 フロントエンドVue.jsとバックエンドExpressを接続してAzureにDeployする
付録A 詳しくて細かいこと
付録B ExpressフレームワークのAzure向け導入方法
付録C Azureポータルでの「Webアプリ」インスタンスの作成方法
付録D Azureポータルで「Webアプリ」へのソースファイルの紐づけ方法
目次プレビュー
- はじめに
- 第1章 Vue.jsのCDN版からVue CLI版へ移行
- 第2章 Vue CLIでテスト駆動開発する(TDD)
-
サンプルのソースコードについて
-
動作確認環境
-
免責事項
-
表記関係について
-
底本について
-
1.1 CDN版でのWebアプリから開始
-
1.2 Vue CLI環境を導入
-
1.3 Vueファイルにまとめる
-
1.4 fontawesomeの利用(簡易版)
-
1.5 公開用のトランスパイル
-
2.1 MochaとChaiによるテスト(検証)の仕組み
-
2.2 Vueの表示状態をテストする
-
2.3 リファクタリングしてファイルを分割する
-
2.4 javascriptファイルのみを直接にMochaでテストする
-
2.5 sinon.jsによるスタブをMochaから利用する
-
A.1 Vue CLIでのfontawesomeの使いかた
-
A.2 Vue CLIのファイル構成と表示のされ方
-
A.3 Vue CLIの標準のUnitTest「Mocha + Chai」とヘルパー関数
-
A.4 babel.config.jsとは?Mocha向けに設定するには?
-
A.5 Expressのhttpサーバー上でVue CLIのファイルを表示する方法
付録C Azureポータルでの「Webアプリ」インスタンスの作成方法
付録D Azureポータルで「Webアプリ」へのソースファイルの紐づけ方法