Vueの書籍一覧

Vue.jsは、まだまだその技術書が少なく、入門書と言いながらも分かりにくかったり、不要な情報に振り回されることが多いのが現状です。本書では、Vueに関する基本的な情報に重点を置いています。入門書の定番であるTODOアプリの作成をしていきますが、構文の説明だけでなくどのような場面で使うのかなど、できる限り実践に即して解説しています。本書の目的は「Webアプリの実装を通し、最新バージョンであるVue3の基本的な動きを理解する」ことです。

【目次】
第1章　Vueの準備
第2章　VSCodeの設定
第3章　GitHubとVercelの設定
第4章　Vueの基本
第5章　TODOアプリ
第6章　TODOの登録
第7章　TODOの一覧表示
第8章　TODOの編集・削除
第9章　ロジックの分離
第10章　TODOのチェック
第11章　その他の重要機能
第12章　ライフサイクル
第13章　Vue Router
第14章　外部API連携
第1章　Vueの準備
第2章　VSCodeの設定
第3章　GitHubとVercelの設定
第4章　Vueの基本
第5章　TODOアプリ
第6章　TODOの登録
第7章　TODOの一覧表示
第8章　TODOの編集・削除
第9章　ロジックの分離
第10章　TODOのチェック
第11章　その他の重要機能
第12章　ライフサイクル
第13章　Vue Router
第14章　外部API連携

本書は筆者が業務を通じて獲得したNuxt.jsとFirebaseを組み合わせて使う際のテクニックをまとめたものです。複数の技術を横断してアプリなどをスピード重視で開発する際、事前に知っておくべき情報を掲載しています。さらに最新リリースのVue.js 3.0をキャッチアップ。サンプルコードではComposition APIに対応しています。

【目次】
第1章　Nuxt.js & Firebase という技術選定
第2章　コンポーネント設計
第3章　サーバーサイドレンダリング
第4章　ユーザー認証機能

本書は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アプリ」へのソースファイルの紐づけ方法

本書はVue.jsを利用してシングルページアプリケーションの作成を考えているエンジニア、特にコンポーネントの設計や分類に悩んでいる方のためのガイドブックです。テストの書き方がわからない、コンポーネントのアンチパターンを知りたい、といった方のために、テストしやすい、またはしづらいコンポーネントとはなにか、単体テストの書き方などについて丁寧に解説しています。
〈本書の対象読者〉
・Vue.jsのコンポーネント設計に自身がない
・Vue.jsのコンポーネントの分類で悩んでいる
・Vue.jsのコンポーネントのアンチパターンを知りたい
・Vue.jsのコンポーネントのテストの書き方がわからない

【目次】
第1章　なぜテストを書くのか
1.1　なぜ「私」はテストを書くようになったのか
第2章　テストしやすいコンポーネントと、テストしづらいコンポーネント
2.1　テストしやすい/しづらいコンポーネント
2.2　機能を少なくシンプルに保つ
2.3　依存は少なく
2.4　なるべく状態を持たせない
2.5　propsの型指定で避けたほうがいい型
2.6　親子コンポーネント間のやりとり
2.7　Storeのgettersに注意
2.8　ライフサイクルフックに直接処理を書かない
第3章　コンポーネントを分類する
3.1　コンポーネントの種類を知る
3.2　２種類で足りる？
第4章　ディレクトリ構成とコンポーネントの分類
4.1　UIのサンプル
4.2　basicsディレクトリ
4.3　componentsディレクトリ
4.4　containersディレクトリ
4.5　pagesディレクトリ
第5章　なにをテストするか
5.1　テストの対象
5.2　コンポーネントのテスト項目
5.3　Vuexのテスト
5.4　どうやってテストするか
第6章　テスト実行環境の構築
6.1　Vue CLIを使った環境構築
6.2　Vue CLI UIを使う
6.3　テストのサンプル
第7章　テストを書く
7.1　サンプルアプリケーション
7.2　テストの実行方法
7.3　ディレクトリとファイル構成
7.4　Jestの使い方と機能
7.5　vue-test-utils
7.6　basicのテスト
7.7　componentのテスト
7.8　containerのテスト
7.9　pageのテスト

【Vue.jsとNuxt.jsでユニバーサルアプリを構築！】

本書はVue.jsでユニバーサルなアプリケーションを構築するためのフレームワークである「Nuxt.js」の入門書です。ユニバーサルアプリをNuxt.jsを使って実現するための手法をわかりやすく解説しています。
〈本書の対象読者〉
Vue.jsは使ったことがあるがNuxt.jsは使ったことがない人
Nuxt.jsの使い方が今ひとつわからない人

【目次】
第1章　Nuxt.jsとは
1.1　ユニバーサルアプリ
1.2　サーバーサイドレンダリング
1.3　静的ファイルジェネレータ
第2章　Nuxt.jsのはじめ方
2.1　npmを使う
2.2　vue-cliを使う
第3章　Nuxt.jsの設定について
3.1　build
3.2　css
3.3　dev
3.4　env
3.5　generate
3.6　head
3.8　modules
3.9　plugins
3.10　rootDir　他
第4章　ディレクトリ構成と役割
4.1　pages
4.2　components
4.3　layouts
4.4　plugins
4.5　middleware　他
第5章　ページコンポーネント
5.1　コンテキスト
5.2　.vueファイルに追加されたオプション
第6章　レイアウト
6.1　デフォルトレイアウト
6.2　エラーページ
6.3　カスタムレイアウト
第7章　プラグイン
7.1　プラグインとは
7.2　OSSのVueプラグインを使用する場合
7.3　アプリケーションのルートやcontextに挿入する
7.4　クライアントサイドでのみプラグインを利用したい場合
7.5　サーバサイドでのみプラグインを利用したい場合
第8章　ミドルウェア
8.1　ミドルウェアとは
8.2　ミドルウェアを実装する
第9章　ストア
9.1　ストアの使い方
9.2　プラグインの作成
第10章　モジュール
10.1　OSSのモジュールを使用する
10.2　モジュールの作成方法
第11章　コマンド
11.1　nuxt
11.2　nuxt build
11.3　nuxt start
11.4　nuxt generate
第12章　Nuxt.jsでのWebアプリケーション開発
12.1　Nuxt.jsをフロントエンドサーバーとして使う方法
12.2　静的ファイルジェネレータで出力したものをホスティングサービスで利用する
12.3　expressのミドルウェアとして使用する場合
付録A　Nuxtバージョン2について

【Vue.jsを現場で使いこなすためのTips集！】

本書は、筆者がこれまで携わってきた開発の経験から得たVue.jsの使いこなしTips集です。FormやVuexなどについての即現場でも使えるようなテストコード付きのサンプルコードを多数収録しています。
〈本書の対象読者〉Vue.jsをある程度使いこなしている中級者以上のユーザー
仕事でVue.jsをさらに活用したいプログラマ

【目次】
第1章　computedとfilterの使い分け
1.1　computed
1.2　filter
1.3　どのような使い分けをするか
1.4　まとめ
第2章　お問い合わせフォームと戦う
2.1　フォームは難しい、そしてめんどくさい
2.2　お問い合わせフォームの要件
2.3　解説の流れ
2.4　ライブラリーの完成形の紹介
2.5　基礎クラスと基礎ミックスインの役割
2.6　基礎クラスと基礎ミックスインの関係
2.7　ライブラリーの使い方
2.8　ライブラリーを使ってフォームを作る
2.9　ページ間のデータの受け渡し
2.10　まとめ
第3章　フォームのライブラリー実装編
3.1　BaseFormItemクラス
3.2　BaseFormクラス
3.3　form-itemミックスイン
3.4　フォームのユニットテストについて
3.5　章のまとめ
第4章　Vuexのtips
4.1　ユースケース
4.2　Vuexの使い方
4.3　まとめ
第5章　vue-test-utilsでなにをテストするか
5.1　最低限のコンポーネントテスト
5.2　テストの方針
5.3　テストコードの実例解説
5.4　まとめ
第6章　vue-i18nのLazy loadingとvue-router
6.1　説明の前の補足
6.2　言語テキストはどう分ける？
6.3　言語テキストのLazy loading
6.4　まとめと課題

【Vue.jsとFirebaseを使って、はじめてのシングルページアプリケーションを作る！ボリューム増の改訂新版】

本書は、簡単なWebサイトを作った事があるWebフロントエンド初心者がSPA（シングルページアプリケーションを）の基本を掴み、簡単なWebサービスが作れるようになることを目的としています。さらにこれを抑えた上で次の段階へステップアップするための足がかりになるような要素も掲載しています。
〈本書の対象読者〉
・HTML,CSS,Javascriptを利用して、簡単なWebサイトを作ったことがある人
・複数のページや状態管理をJavascript使って自力で行い、ごちゃついてしまい消耗している人
・普段デザイナーとしてマークアップしており、フロントエンドの新しめな環境でのサイト構築を経験してみたい人
・シングルページアプリーケーション、Vue.jsってものを触ってみたい、またはそれらの挫折経験がある人
・FirebaseのWeb版を使ってみたい人、どんな事が出来るのか知りたい人
・普段サーバーサイドやネイティブアプリを作っていて、Webフロントエンドをさらっと触ってみたい人
【目次】
第1章　はじめに
1.1　この本の目的・ターゲット
1.2　本書であまり触れない部分
1.3　本書の構成と対応環境について　　他
第2章　サーバーレスシングルページアプリケーションの基本
2.1　SPAとフレームワーク（Vue.jsの紹介）
2.2　サーバーレスってなに？
2.3　Firebaseは何ができる？
2.4　そのままの構成で本格的なWebサービスで使える？
第3章　開発環境のセットアップとデプロイまでの流れ
3.1　vue-templesのダウンロードとセットアップ
3.2　SFCでのコンポーネントの内容について
3.3　Firebaseのセットアップとデプロイ
第4章　Googleアカウントでのユーザー登録と、ログイン状態の判別
4.1　componentsを作成し表示する
4.2　Firebaseでログインの設定
4.3　Googleログインの実装　　　他
第5章　エディターの作成：データベース作成とデータ保存
5.1　メモを編集できるマークダウンエディターを作る
5.2　メモを複数作成可能にする
5.3　メモの削除機能追加
5.4　Firebase Realtime DBのruleを設定する　　　他
第6章　見た目を整える
6.1　リセットCSSを導入する
6.2　CSSファイルの管理
6.3　プレビュー用CSSの追加　　　他

【新しいフロントエンドフレームワーク「Vue.js」チュートリアルガイド！】

本書はシンプルなAPIやわかりやすい使い勝手で初心者でも活用しやすいJavaScriptフロントエンドフレームワーク「Vue.js」の解説書です。Vue.jsの始め方から基本的な使い方、実際に簡単なWebアプリケーションを作成するところまでをサクッと理解できます。
【目次】
第1章　Vue.jsことはじめ
1.1　フロントエンドフレームワークが必要なわけ
1.2　Vue.jsとは
1.3　Progressive Framework
1.4　コミュニティ
1.5　ガイド
1.6　派生プロジェクト
1.7　何故 Vue.jsを選ぶのか
1.8　まとめ
第2章　Vue.jsのはじめかた
2.1　JSFiddleを使う
2.2　CDNを使う
2.3　npmを利用して環境を構築する
2.4　vue-cliを利用して環境を構築する
2.5　Ruby on Railsで使う
2.6　Laravelで使う
2.7　まとめ
第3章　Vue.jsの基本的な使い方
3.1　Vueインスタンスの作成
3.2　ライフサイクル
3.3　リアクティブシステム
3.4　ディレクティブ
3.5　算出プロパティ（computed）
3.6　コンポーネント
3.7　まとめ
第4章　ToDoリストを作る
4.1　フォームを作る
4.2　リストの作成
4.3　listに追加できるようにする
4.4　ToDoを完了できるようにする
4.5　まとめ
第5章　単一ファイルコンポーネント
5.1　単一ファイルコンポーネントとは？
5.2　利点
5.3　まとめ
第6章　Vuex
6.1　Vuexとは
6.2　コア機能
6.3　module
6.4　まとめ
第7章　vue-router
7.1　vue-routerとは
7.2　動的ルートマッチ
7.3　ネストされたルートで表現するコンポーネントのネスト
7.4　プログラムで遷移させる
7.5　リダイレクト
7.6　コンポーネント内で動的なセグメントの値を取得したいとき。
7.7　まとめ