「Vue.js入門 基礎から実践アプリケーション開発まで」が発売されます!

kazuya kawaguchi
Sep 21, 2018 · 9 min read

事前に Twitter 等で告知していましたが、この度「Vue.js入門 基礎から実践アプリケーション開発まで」という書籍が、技術評論社より出版されます。このブログはその書籍のご案内です。

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

本書は、@kitakさん、@positiveflatさん、@tejitakさん、そして@ktsnさんといっしょに執筆した書籍になります。

本ブログ公開1週間前から一部の書店で先行販売しておりましたが、いよいよ明日2018年9月22日に全国書店で発売になります。

書店以外にもオンライン上で以下のリンク先で購入することもできます。

本書の概要

本書は、小規模から大規模まで柔軟に対応できる Vue.js について徹底的に解説した書籍です。

本書のまえがきにも書いてありますが、Vue.js はシンプルさが売りで導入しやすいライブラリです。公式ドキュメントも充実していますが、ここ数年の発展に伴い Vue.js の関連領域全体を俯瞰して学習するのが難しくなってきています。

こういう状況になってきているため本書では、基礎文法から、様々なライブラリや開発ツールを駆使した実践的な開発まで、幅広く学んでいけるように目指して執筆した書籍となっております。

本書の構成ですが、大まかに以下のような章立てとなっております。

  • 1 章: プログレッシブフレームワーク Vue.js
    Vue.js が必要とされるに至った背景から基礎や概念を解説
  • 2 章: Vue.js の基本
    Vue.js の基礎文法を解説
  • 3 章: コンポーネントの基礎
    コンポーネントについて解説
  • 4 章: Vue Router を活用したアプリケーション開発
    Vue Router を用いたルーティングについて解説
  • 5 章: Vue.js の高度な機能
    Vue.jsの高度な機能について解説
  • 6 章: 単一ファイルコンポーネントによる開発
    単体ファイルコンポーネントという Vue.js の独自のテンプレート記法について解説
  • 7 章: Vuex によるデータフローの設計・状態管理
    Vuex によるアプリケーションの状態管理について解説
  • 8 章、9 章、10 章: 中規模・大規模向けのアプリケーション開発
    Vue.js を使った大規模なアプリケーション開発について解説
  • Appendix: jQuery からの移行、TypeScript 連携、Storybook、Nuxt.js

詳細な目次については、技術評論社の Web サイトの目次をご覧ください。

本書を順に読みながら学習することで、ランディングページのような小規模な開発から、シングルページアプリケーションのような大規模な開発まで体験できるような1冊になっています。

本書の一番の読みどころ

Vue.js 初期の頃から触ってきているメンバーによって執筆された書籍であるためどの部分も読みどころ満載ですが、一番の読みどころは、私が一番力を入れた9章、10章まで中規模、大規模向けのアプリケーション開発の設計と実装の部分です。

アプリケーションの設計

一般的にアプリケーション(ソフトウェア)の設計は、Web アプリケーションに限らず、規模が大きいアプリケーション開発において、開発効率、メンテナンス、そして品質にも影響するため、重要です。

9章では、8章で定義したサンプルアプリケーションの仕様を元に、UI構造からのコンポーネントへ落とし込み、状態のモデリングとデータフロー、そしてWebアプリケーションでは欠かせないURLのルーティングの設計について解説しています。

実際、コンポーネント設計では、Atomic Design でどういった基準でコンポーネントを抽出し、その抽出したコンポーネントのAPIをどのように定義にしているのか解説しています。

Atomic Design を使ったコンポーネント設計の一例

アプリケーションの実装

アプリケーションの実装では、テスト、デバッグ、パフォーマンスチューニング、そしてエラーハンドリングは、高品質なアプリケーションを担保するためには必須です。

10章では、これらについて解説しています。

テストについては、テスト駆動開発のスタイルでチュートリアル形式で実際に手を動かしながらアプリケーションを実装することで単体テストについて解説しています。また、E2Eテストについても、NightWatchを使ったテストの仕方についても解説しています。

デバッグについては、ローカル環境で動作するAPIサーバーのモックを実装し、Vue DevTools の使い方について一通り説明して、それを使ったデバッギングについて解説しています。

Vue DevTools の解説の一例

エラーハンドリングについては、Vue.js が提供する errorCaptured を使ったコンポーネント単位のエラーハンドリング、そしてVue.config.errorHandler を使ったグローバル単位のエラーハンドリングについて図を使って解説しました。Vue.js のエラーハンドリングについては公式ドキュメントにもない部分なので、丁寧に解説しています。

エラーハンドリングの解説図の一例

パフォーマンスチューニングについては、Vue.js で Chrome DevTools を使った測定と改善について解説しています。

パフォーマンス測定については、@ahomuさん@1000chさんが執筆された「超速! Webページ速度改善ガイド」にも書いてありますが、なぜ必要なのか一通り解説し、こちらも Vue.js 公式ドキュメントにない、Chrome DevTools で測定できる箇所について解説しています。

そして、View ライブラリでよくボトルネックになるレンダリングパフォーマンス改善について、Vue.js における改善点についても解説しています。

Webアプリケーションの体系的な開発スキルを!

こういう思いから、私は、9章、10章については、かなり力を入れて執筆しました。

もっと書きたいことはあったのですが、ページの都合上、最低限必要な部分については解説したつもりです。本書を通して読者の方がWebアプリケーションの体系的な開発スキルを身につけられればと思います。

振り返り

本書の執筆は、2017年6月にスタートしました。いろいろとあって発売までほぼ1年がかりな執筆作業になってしまいました。執筆途中、Vue.js 本体のバージョンがアップしたり、VuePress、Vue CLI v3 といったエコシステム周りで大きいリリースがあって、いろいろとヒヤヒヤしたりしました。無事執筆を終えて本当にホッとしています。

謝辞にもありますが、レビューの方々のみなさんのおかげで、書籍の内容が充実したものとなりました。また、執筆にいっしょに携わって頂いたメンバーの方、そして Evan 氏はじめ、Vue.js や関連ライブラリ、コミュニティに貢献する数多くの方々にも感謝と敬意でいっぱいです。

今回初めての本書執筆という貴重な機会をくださった、技術評論社の野田さんには感謝します。

書籍執筆のために支えてくれた妻や子供たち👩‍👧‍👦にも、大変感謝しています。本当にありがとう!そしていろいろと迷惑かけてごめんなさい。🙇‍

最後に、みなさまにぜひ本書をご購入いただけますよう重ねて申し上げます!🙏

    kazuya kawaguchi

    Written by

    nickname kazupon. software engineer & emojineer. vue.js core team member. vuejs-jp users group organizer 😺. wasm love ❤️, i18n enthusiast 🌐.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade