Vue.js入門 基礎から実践アプリケーション開発まで

[表紙]Vue.js入門 基礎から実践アプリケーション開発まで

B5変形判/480ページ

定価(本体3,380円+税)

ISBN 978-4-297-10091-9

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

Vue.jsを初歩から実践まで徹底的に解説。使いやすくかつ,プロダクションでも活躍するVue.jsをVue.jsコントリビューターの著者らが解説する一番わかりやすい入門書です。小規模な適用例やjQueryからの移行サンプルに加え,大規模開発を想定したアプリケーション開発も体験できます。Vue.jsはGitHubで2017年最も人気のあったJavaScriptフレームワークに選ばれるなど大注目の技術です。

こんな方におすすめ

  • Vue.jsに興味のあるWebエンジニア
  • Vue.jsを本番で使いたいが課題があるエンジニア
  • Vue.jsを動かしてみたいWebデザイナー,コーダー

この書籍に関連する記事があります!

『Vue.js入門 基礎から実践アプリケーション開発まで』刊行記念特別インタビュー~Vue.jsの魅力とこれから~
『Vue.js入門 基礎から実践アプリケーション開発まで』の発売を記念して,著者陣にVue.js関連のインタビューを行いました。
Vue.jsの進化を感じるカンファレンス――Vue Fes Japan 2018
2018年11月3日,Vue.jsに関する初の国内大規模カンファレンス,Vue Fes Japan 2018が開催されました。

目次

1. プログレッシブフレームワークVue.js

  • 1.1 現代のWebフロントエンド開発の複雑化
    • 1.1.1 Webの誕生とWebベースシステムへの発展
    • 1.1.2 Ajaxの登場
    • 1.1.3 HTML5,Node.js,ES2015,React以降の世界
    • Column AltJSの登場
    • 1.1.4 現在の課題とVue.js
  • 1.2 Vue.jsの特徴
    • 1.2.1 学習コストが低い
    • 1.2.2 コンポーネント指向によるUIの構造化
    • 1.2.3 リアクティブなデータバインディング
  • 1.3 Vue.jsの設計思想
    • 1.3.1 フレームワークの複雑性
    • 1.3.2 要求の変化に追随できるフレームワーク
  • 1.4 プログレッシブフレームワークの解決する段階的な領域
    • 1.4.1 宣言的レンダリング(Declarative Rendering)
    • 1.4.2 コンポーネントシステム(Component System)
    • 1.4.3 クライアントサイドルーティング(Client-side Routing)
    • 1.4.4 大規模向け状態管理(Large-scale State Management)
    • 1.4.5 ビルドシステム(Build System)
    • 1.4.6 クライアントサーバーデータ永続化(Client-server Data Persistence)
  • 1.5 Vue.jsを支える技術
    • 1.5.1 コンポーネントシステム
    • 1.5.2 リアクティブシステム
    • Column リアクティブシステムの内側
    • 1.5.3 レンダリングシステム
    • Column Vue.jsの仮想DOMの処理の流れ
  • 1.6 Vue.jsのエコシステム
  • 1.7 Vue.jsのはじめの一歩
    • Column JSFiddleで実践
    • Column Vue.jsのドキュメンテーション
    • Column Vue.jsコミュニティ
    • Column Vue.jsの対応ブラウザ

2. Vue.jsの基本

  • 2.1 Vue.jsでUIを構築する際の考え方
    • 2.1.1 旧来のUI構築の問題点
    • 2.1.2 Vue.jsのUI構築
  • 2.2 Vue.jsの導入
    • Column Vue.jsの高度な環境構築
  • 2.3 Vueオブジェクト
    • 2.3.1 コンストラクタ
    • Column MVVMパターン
    • 2.3.2 コンポーネント
  • 2.4 Vueインスタンスのマウント
    • 2.4.1 Vueインスタンスの適用(el)
    • 2.4.2 メソッドによるマウント($mountメソッド)
    • Column Vue.jsを既存アプリケーションに導入する
  • 2.5 UIのデータ定義 (data)
    • 2.5.1 Vueインスタンスの確認
    • 2.5.2 データの変更を検知する
  • 2.6 テンプレート構文
    • 2.6.1 テキストへの展開
    • 2.6.2 属性値の展開
    • 2.6.3 JavaScript式の展開
  • 2.7 フィルタ(filters)
    • Column フィルタの連結
  • 2.8 算出プロパティ(computed)
    • 2.8.1 thisによる参照
    • 2.8.2 サンプルアプリケーションでの実装
  • 2.9 ディレクティブ
    • 2.9.1 条件付きレンダリング(v-if/v-show)
    • 2.9.2 クラスとスタイルのバインディング
    • 2.9.3 リストレンダリング(v-for)
    • Column リストレンダリングパフォーマンス
    • 2.9.4 イベントハンドリング(v-on)
    • 2.9.5 フォーム入力バインディング(v-model)
    • Column 修飾子による動作の変更
  • 2.10 ライフサイクルフック
    • 2.10.1 ライフサイクルフック一覧とフロー
    • 2.10.2 createdフック
    • 2.10.3 mountedフック
    • 2.10.4 beforeDestroyフック
  • 2.11 メソッド(methods)
    • 2.11.1 イベントオブジェクト
    • Column 算出プロパティのキャッシュ機構
    • 2.11.2 サンプルでのメソッドの呼び出し

3. コンポーネントの基礎

  • 3.1 コンポーネントとは何か
    • 3.1.1 全てはUIコンポーネントから構成される
    • 3.1.2 コンポーネント化のメリットと注意点
    • 3.1.3 Vue.jsのコンポーネントシステム
    • Column Vue.jsのコンポーネントとWeb Components
  • 3.2 Vueコンポーネントの定義
    • 3.2.1 グローバルコンポーネントの定義
    • 3.2.2 コンストラクタベースの定義
    • Column ReactのRender Props
    • 3.2.3 ローカルコンポーネントの定義
    • 3.2.4 テンプレートを構築するその他の手段
    • Column コンポーネントの命名規則について
    • 3.2.5 コンポーネントのライフサイクル
    • 3.2.6 コンポーネントのデータ
    • Column オブジェクトを指定した場合の警告
  • 3.3 コンポーネント間の通信
    • 3.3.1 親コンポーネントから子コンポーネントへデータの伝播
    • 3.3.2 子コンポーネントから親コンポーネントへの通信
    • Column propsとイベントを用いない親子間のやりとり
    • Column 親子以外のコンポーネントでデータをやりとりする
    • Column 子から親のネイティブDOMイベントを取得したい場合 ― .native修飾子
    • Column propsの値に関して双方向バインディングを実現したい場合 ― .sync修飾子
  • 3.4 コンポーネントの設計
    • 3.4.1 コンポーネントの分割方針
    • 3.4.2 コンポーネント自体の設計
    • Column Atomic Design
    • 3.4.3 スロットコンテンツを活かしたヘッダーコンポーネントの作成
    • 3.4.4 ログインフォームコンポーネントの作成
    • Column コンポーネント単位のテスト

4. Vue Routerを活用したアプリケーション開発

  • 4.1 Vue Routerによるシングルページアプリケーション
    • 4.1.1 シングルページアプリケーションとルーティング
    • 4.1.2 Vue Routerとは
  • 4.2 ルーティングの基礎
    • 4.2.1 ルーターのインストール
    • 4.2.2 ルーティング設計
  • 4.3 実践的なルーティングのための機能
    • 4.3.1 URLパラメーターの扱いとパターンマッチング
    • 4.3.2 名前付きルート
    • 4.3.3 router.pushを使った遷移
    • 4.3.4 フック関数
  • 4.4 サンプルアプリケーションの実装
    • 4.4.1 リストページの実装
    • 4.4.2 APIによるデータ通信
    • 4.4.3 詳細ページの実装
    • 4.4.4 ユーザー登録ページの実装
    • 4.4.5 ログイン・ログアウトの実装
    • 4.4.6 サンプルアプリケーションの全体像
  • 4.5 Vue Routerの高度な機能
    • 4.5.1 RouterインスタンスとRouteオブジェクト
    • 4.5.2 ネストしたルーティング
    • 4.5.3 リダイレクト・エイリアス
    • 4.5.4 履歴の管理
    • Column Vue Routerを使った大規模なアプリケーションの実装
    • Column Vue RouterとReact Router

5. Vue.jsの高度な機能

  • 5.1 トランジションアニメーション
    • 5.1.1 transitionラッパーコンポーネント
    • 5.1.2 トランジションクラス
    • 5.1.3 fadeトランジションの実装
    • Column Vue Routerのトランジション
    • Column カスタムトランジションクラス
    • 5.1.4 JavaScriptフック
  • 5.2 スロット
    • 5.2.1 単一スロット
    • 5.2.2 名前付きスロット
    • 5.2.3 スロットのスコープ
  • 5.3 カスタムディレクティブ
    • Column コンポーネントやミックスインとの違い
    • 5.3.1 作成するカスタムディレクティブの定義
    • 5.3.2 ディレクティブ定義オブジェクト
    • 5.3.3 フック関数の引数
    • 5.3.4 image-fallbackディレクティブの機能追加
    • Column DOM操作を行うライブラリをラップする
  • 5.4 描画関数
    • 5.4.1 描画関数を用いないと書きづらい例
    • 5.4.2 描画関数による効率化
    • 5.4.3 createElement関数
    • Column h関数
    • Column JSX
  • 5.5 ミックスイン
    • 5.5.1 ミックスインで機能を再利用する
    • 5.5.2 グローバルミックスイン
    • Column ミックスインの命名規則

6. 単一ファイルコンポーネントによる開発

  • 6.1 ツールのインストール
    • 6.1.1 Vue CLI
  • 6.2 単一ファイルコンポーネントとは
  • 6.3 単一ファイルコンポーネントの仕様
    • 6.3.1 <template>ブロック
    • 6.3.2 <script>ブロック
    • 6.3.3 <style>ブロック
  • 6.4 単一ファイルコンポーネントのビルド
  • 6.5 単一ファイルコンポーネントの動作を体験する
    • 6.5.1 動作を押さえる
  • 6.6 単一ファイルコンポーネントの機能
    • 6.6.1 外部ファイルのインポート
    • 6.6.2 スコープ付きCSS
    • Column スコープ付きCSSのメリット
    • 6.6.3 CSSモジュール
    • 6.6.4 他言語実装のサポート
    • Column カスタムブロック
    • Column カスタムブロックの定義

7. Vuexによるデータフローの設計・状態管理

  • 7.1 複雑な状態管理
  • 7.2 データフローの設計
    • 7.2.1 信頼できる唯一の情報源(Single Source of Truth)
    • 7.2.2 「状態の取得・更新」のカプセル化
    • 7.2.3 単方向データフロー
  • 7.3 Vuexによる状態管理
    • 7.3.1 Vuexのインストール
  • 7.4 Vuexのコンセプト
    • 7.4.1 ストア
    • 7.4.2 ステート
    • 7.4.3 ゲッター
    • 7.4.4 ミューテーション
    • 7.4.5 アクション
  • 7.5 タスク管理アプリケーションの状態管理
    • 7.5.1 アプリケーションの仕様と準備
    • 7.5.2 タスクの一覧表示
    • 7.5.3 タスクの新規作成と完了
    • 7.5.4 ラベル機能の実装
    • 7.5.5 ラベルのフィルタリング
    • 7.5.6 ローカルストレージへの保存と復元
    • 7.5.7 Vuexによるアプリケーションの考察
  • 7.6 ストアのモジュール分割
    • 7.6.1 namespacedオプションによる名前空間
  • 7.7 VuexストアとVueコンポーネント間の通信
    • 7.7.1 コンポーネントからストアにアクセスする
    • 7.7.2 ストアにアクセスするコンポーネントを必要最小限にする
  • 7.8 VuexとVue Routerの連携

8. 中規模・大規模向けのアプリケーション開発① 開発環境のセットアップ

  • 8.1 Vue.jsのプロジェクト構築の特徴
    • 8.1.1 Vue.jsで本格的な開発をするための心構え
  • 8.2 本章で作成するアプリケーション
    • 8.2.1 アプリケーション仕様概要
    • 8.2.2 アプリケーションアーキテクチャ
    • Column バックエンドの設計
  • 8.3 アプリケーションの開発環境構築
    • 8.3.1 開発環境構築をサポートするVue CLI
    • 8.3.2 JavaScriptの環境構築とVue CLI
    • Column vue init について
  • 8.4 Vue CLIによる開発環境の構築
    • 8.4.1 アプリケーションプロジェクトの作成
    • 8.4.2 プロジェクト構造
    • 8.4.3 タスクコマンド
    • 8.4.4 アプリケーションの起動確認
    • 8.4.5 アプリケーションの環境変数
  • 8.5 アプリケーションのビルド
    • 8.5.1 アセット処理
    • 8.5.2 リントツール
  • 8.6 テスト環境
    • 8.6.1 単体テスト
    • 8.6.2 E2Eテスト
  • 8.7 フロントエンド・バックエンド連携
    • 8.7.1 APIのプロキシ
    • 8.7.2 バックエンドとのインテグレーション
  • 8.8 さらなる開発環境の強化
    • 8.8.1 Vue.jsコーディング環境の構築
    • 8.8.2 Vue.js公式ESLintプラグインの導入
    • 8.8.3 デバッグとプロファイリングの環境構築
    • 8.8.4 バックエンドAPIサーバーの環境構築
    • 8.8.5 状態管理ライブラリの導入
    • 8.8.6 HTTPクライアントライブラリの導入
    • 8.8.7 単体テストユーティリティの導入
    • 8.8.8 E2Eテストのコマンド登録

9. 中規模・大規模向けのアプリケーション開発② 設計

  • 9.1 コンポーネント設計
    • 9.1.1 Atomic Designによるコンポーネントの抽出
    • 9.1.2 Atoms
    • 9.1.3 Molecules
    • 9.1.4 Organisms
    • 9.1.5 Templates
  • 9.2 単一ファイルコンポーネント化
    • 9.2.1 ディレクトリの構造化と各ファイルの配置
    • 9.2.2 コンポーネントのAPI
    • 9.2.3 KbnButtonコンポーネントのAPI
  • 9.3 状態モデリングとデータフローの設計
    • 9.3.1 状態モデリング
    • 9.3.2 データフロー
    • 9.3.3 データフロー周りの雛形コードのセットアップ
    • 9.3.4 アクションの雛形
  • 9.4 ルーティング設計
    • 9.4.1 ルートフロー
    • 9.4.2 ルート定義

10. 中規模・大規模向けのアプリケーション開発③ 実装

  • 10.1 開発方針の整理
    • 10.1.1 アプリケーションの実装に入る前に
  • 10.2 コンポーネントの実装
    • 10.2.1 KbnButtonコンポーネント
    • 10.2.2 KbnLoginFormコンポーネント
    • 10.2.3 KbnLoginViewコンポーネント
  • 10.3 データフローの実装
    • 10.3.1 loginアクションハンドラ
    • 10.3.2 AUTH_LOGINミューテーションハンドラ
    • 10.3.3 Auth APIモジュール
  • 10.4 ルーティングの実装
    • 10.4.1 beforeEachガードフックを活用したナビゲーションガード
  • 10.5 開発サーバーとデバッグ
    • 10.5.1 開発サーバーによる開発
    • 10.5.2 Vue DevToolsによるデバッグ
  • 10.6 E2Eテスト
    • 10.6.1 E2Eテストの実装
    • 10.6.2 テストの実行
  • 10.7 アプリケーションのエラーハンドリング
    • 10.7.1 子コンポーネントのエラーハンドリング
    • 10.7.2 グローバルなエラーハンドリング
  • 10.8 ビルドとデプロイ
    • 10.8.1 アプリケーションのビルド
    • 10.8.2 アプリケーションのデプロイ
    • Column Vue.jsのバックエンド
  • 10.9 パフォーマンス測定・改善
    • 10.9.1 パフォーマンス測定の設定方法
    • 10.9.2 測定できる処理
    • 10.9.3 レンダリングパフォーマンスの向上
    • Column Vue CLIの対話的な選択時の注意点
    • Column テンプレートコンパイラのオプションを利用する

Appendix A jQueryからの移行

  • A.1 移行の判断
  • A.2 jQueryで実装していた機能のVue.jsによる実装
    • A.2.1 イベントリスナー
    • A.2.2 表示の切り替え
    • A.2.3 要素の挿入・削除
    • A.2.4 属性値の変更
    • A.2.5 クラスの変更
    • A.2.6 スタイルの変更
    • A.2.7 フォーム(ユーザー入力)

Appendix B 開発ツール

  • B.1 Storybook
    • B.1.1 開発プロジェクトに導入する
    • B.1.2 Storybookを動作させる
    • B.1.3 ストーリーを実装する
    • B.1.4 Storybookを公開する
  • B.2 静的型付き言語
    • B.2.1 TypeScript
    • B.2.2 TypeScriptの記述例
    • B.2.3 セットアップ
    • Column TypeScriptコンパイラ
    • B.2.4 コンポーネントの実装
    • Column 単一ファイルコンポーネント用の設定
    • B.2.5 エディタ
    • B.2.6 ライブラリの型定義
    • Column TypeScriptの型定義がないとき
    • Column Vue.jsとFlow

Appendix C Nuxt.js

  • C.1 Nuxt.jsとは
  • C.2 Nuxt.jsの特徴
    • C.2.1 サーバーサイドレンダリングのサポート
    • Column サーバーサイドレンダリング環境の構築
    • Column サーバーサイドレンダリングの必要性
    • C.2.2 すぐに開発着手できる開発環境と拡張性の提供
    • C.2.3 静的なHTMLファイル生成のサポート
  • C.3 Nuxt.jsをはじめる
  • C.4 Nuxt.jsで静的サイトを作成する
    • C.4.1 画面仕様
    • C.4.2 ルーティングを追加する
    • C.4.3 グローバルナビゲーションのコンポーネントを追加する
    • C.4.4 レイアウトにグローバルナビゲーションを追加する
    • C.4.5 開発サーバーで動作確認する
    • C.4.6 静的なHTMLファイルにビルドする
    • Column Nuxt.jsにおけるサーバーサイドレンダリング

著者プロフィール

川口和也(かわぐちかずや)

Vue.jsコアチームメンバ。オープンソースソフトウェア活動に関わりながら,日本のVue.js日本ユーザーグループの代表であり,コミュニティの運営活動をしている。i18n Enthusiast(エンスージアスト:熱狂者)でもある。Webフロントエンド技術以外に,関心のあるWebAssemblyなどの最新Web技術動向も追いかけている。フルタイムオープンソースソフトウェア開発者としての活動を模索中。本書では,1章,6章,8章,9章,10章,Appendix B,Appendix Cを執筆。本書内容全般を監修。

GitHub:kazupon
Twitter:@kazu_pon
Patreon: kazupon


喜多啓介(きたけいすけ)

LINE株式会社にて,JavaScriptを中心にクライアントサイドの実装を担当。Vue.jsの柔軟性に注目し,業務・趣味を問わず活用している。本書では2章,5章,Appendix Aを執筆。

GitHub:kitak
Twitter:@kitak


野田陽平(のだようへい)

IBMにて電子情報開示関連のソフトウェア開発にQA及びフロントエンドエンジニアとして約5年間携わる。その後株式会社プレイドに入社し,CX(顧客体験)プラットフォームKARTEの開発を行う。本書では3章を執筆。

GitHub:positiveflat
Twitter:@positiveflat


手島拓也(てじまたくや)

IBMやLINEにて主にWeb製品開発を約7年間担当。その後,共同創業者兼CTOとしてUPSTAYを設立,事業譲渡を経験。現在はエンジニア向けの事務所GAO GAO Asiaを設立し代表を務める。本書では4章を執筆。

GitHub:tejitak
Twitter:@tejitak


片山真也(かたやましんや)

Vue.jsコアチームメンバーとして主にVue.js本体と周辺ライブラリのTypeScriptサポートに貢献。静的型付けやソースコード解析に興味を持っており,それらを活用することによる開発体験の向上を模索している。UIやインタラクションにも関心を持ち,CSSの勉強会の運営も務める。本書では7章,Appendix B.3を執筆。

GitHub:ktsn
Twitter:@ktsn