みんなのVue.js

［表紙］みんなのVue.js

紙版発売
電子版発売

B5変形判／224ページ

定価2,508円（本体2,280円＋税10%）

ISBN 978-4-297-11902-7

電子版

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

書籍の概要

この本の概要

本書は，日本国内で爆発的な人気を誇るVue.jsの最新ノウハウ・アイデアを1つにまとめた新しい「Vue本」です。アプリケーション開発のためのルーティング・レンダリングから，CSS設計，状態管理，コンポーネント開発，パフォーマンス改善まで，Vue.jsをプロジェクトで使用するうえのさまざまな開発上の観点をまとめつつ，現場のエンジニアによる解決方法をまとめています。
さらに，Vue.jsコアチームメンバーでもある川口和也（@kazu_pon）氏のインタビューを収録。川口氏が開発するVue18nや，企業に所属しながらのOSS活動についてもたっぷりと語っていただきました。Vue.jsエンジニア必携の1冊です。

こんな方におすすめ

  • Vue.jsを現場で使うエンジニア，デザイナー

著者の一言

本書は，日頃からVue.jsを使用してWebアプリケーションを開発している，エンジニアやデザイナーによって書かれています。著者らがサービス開発の際にたどってきたさまざまな経験やアイデアをまとめています。
本書は，Vue.jsを使用したアプリケーション開発についての本ですが，Vue.jsの入門書ではありません。また，この方法が正解である，といったことを示すものでもありません。当然，Vue.js自体が最良の選択肢とも限りません。この本に書かれていることをそのまま真似してもうまくいかないこともあるでしょう。サービス開発は，事業や組織，プロジェクトの状況に依存し，特定のプロジェクトの事例を直接当てはめてもうまくいかないことが多々あるからです。さまざまな選択肢のなかから優先順位をつけ，状況に応じて適切に取捨選択をしていかなければならないため，最適な方法はそのプロジェクトの状況に応じて異なる，と言わざるを得ません。しかし，問題にぶつかったり，迷ったりしたときの1つの考え方のヒントになることがあるかもしれません。アプリケーション開発に取り組むエンジニアやデザイナーの皆様に，少しでも本書がお役に立てば幸いです。
Vue.jsはいまや日本国内において爆発的な人気を誇り，フロントエンド開発をおこなう際のフレームワーク選定の選択肢として，ReactやAngularJSなどと共に挙げられるようになってきました。Vue.jsが日本においてここまで多く使用されるようになったのは，ドキュメントが日本語に翻訳されていることや，コミュニティ活動が活発であることなど，さまざまな理由が挙げられると思います。しかし，コミュニティ活動や技術ブログ，書籍等で多くの事例が公開されている一方で，サービスの開発開始フェーズから大規模化に至るまで，また，開発組織によるさまざまな試行錯誤についてまとめたものはあまり見かけません。そこで本書では，それらについてまとめる試みをおこないました。
著者らが所属する株式会社プレイドでは，「KARTE」というSaaSを開発していますが，Vue.jsが0.x系の2014年からその管理画面の開発にVue.jsを使い続けています。開発の初期段階からサービスが大規模化する今日に至るまで，理想の状態を目指してトライアンドエラーを重ねてきました。
近年，フロントエンド開発技術は目まぐるしい発展をとげ，さまざまな用語が飛び交っています。しかしながら，世の中で流行っている技術があるからといって，必ずしも自分たちの目的や状況に合ったものであるとは限らず，我々も最新技術を闇雲に導入していくことはしていません。それらの選定の際に，プロダクトの開発フェーズがどういった状況か，チームがどういった状況か，今後の採用計画はどうなのか，また，そもそもどういった事業進捗を目指すのか，などによって結果が異なるでしょう。つまり，それぞれのエンジニアが事業からブレークダウンして仮説を立て，検証して良いものを残していくという態度が必要だと考えています。
世の中にはベストプラクティスがさまざまな形で共有されています。新しいツールや開発手法も次々と生み出されており，日々便利になっています。しかし，プロジェクトの規模感や特性，状況に応じて，それらを導入すべきか否かは適切に判断しなければなりません。プロジェクトが小さな時にはある手法を使わずに開発したほうが効率が良くても，大規模化が進むにつれてその手法の導入を検討すべきタイミングが来るということもあります。弊社のプロジェクトも，小さなものが徐々に大きくなっていくにつれて，さまざまな問題にぶつかってきました。しかしながら，実際にその問題にぶつかる前にすべてをきれいに整備しておくべきであったかというと，そうとも限りません。それよりも，何か問題があったときにすばやく実装を変えられる状態を保つほうが，プロジェクトとしては健全かもしれません。ましてや，ビジネス的な観点でも不確実性が高いスタートアップなどではなおさらです。
本書では，Vue.jsをプロジェクトで使用するうえでのさまざまなフェーズにおける「開発上の観点」について紹介しつつ，それに対する「アイデア」を紹介します。それらの観点やアイデアが，ひとつでもプロジェクトをより良い方向に促進するお役に立てば幸いです。
（「はじめに」より）

目次

  • はじめに

第1章　大規模なアプリケーションにも耐えられるルーティングとレンダリング

1-1　パフォーマンスの指標を知る

1-2　ルーティング

  • Vue Routerでのコード分割と遅延ローディング
  • ルーティングと権限管理

1-3　SSRとCSR

  • SSRの実装
  • SSRと権限管理
  • Nuxt.jsでSSRを実装する

1-4　アプリケーションの構成を考える

  • 静的なコンテンツ中心のサービスの場合
  • 静的なコンテンツ中心だが権限管理を詳細におこないたいサービスの場合
  • さまざまなデータを扱う動的なサービスの場合
  • そこまで大量のデータを扱うことは考えていないが，何らかの理由でNuxt.jsの採用はできない場合

第2章　状態管理パターン

2-1　状態管理とアプリケーションの構成要素

  • 状態管理とは
  • アプリケーションの構成要素
  • 状態データと派生データ

2-2　Vue.jsにおける状態管理

  • コンポーネントとは
  • コンポーネントの状態データ
  • コンポーネントの派生データ
  • コンポーネントと状態のスコープ
  • コンポーネント間でのデータ通信
  • 兄弟コンポーネント間でのデータ共有

2-3　Vue.jsコンポーネントのみを使った状態管理

  • 1.状態とコンポーネントの関係性がシンプルになる
  • 2.コンポーネントの依存関係の明確化
  • 3.SFC（Single File Component）による利点の最大化

2-4　アプリケーションの成長とコンポーネントのみを使った状態管理の課題

  • propsとeventによるデータの過剰なバケツリレー
  • アプリケーション全体の状態管理状況を把握しづらくなる

2-5　ストアを利用した状態管理

  • ストアによる状態管理の考え方

2-6　Vuexを利用した状態管理

  • Vuexにおける状態管理パターン
  • 単一ステートツリー
  • すべてのコンポーネントのための集中型のストア
  • Composition API
  • Vuexを利用した状態管理の実装例
  • Vuexを利用するメリット
  • Vuexを利用する際の注意点

2-7　Storeパターンを自前で実装する

  • Storeパターン実装例
  • Storeパターンを自前で実装するメリット
  • Storeパターンを自前で実装する際の注意点

2-8　状態管理における心構え

  • 状態の量を必要最小限に保つ
  • 状態への副作用を持つコードを小さくする
  • 状態のスコープを小さく保つ
  • 状態を重複して持たない
  • 暗黙的な状態の変更を避ける

第3章　UIコンポーネントの開発

3-1　コンポーネント指向開発への流れ

  • コンポーネント指向のフレームワークの登場
  • UIコンポーネント開発の変遷

3-2　コンポーネント駆動開発

  • コンポーネント駆動開発を支えるツール
  • COLUMN　共通コンポーネントを作成するタイミング

3-3　Vue.jsにおけるコンポーネント開発

  • 疎結合なコンポーネントにする
  • propsのバリデーション
  • propsかslotか

3-4　Vueコンポーネントの利用

3-5　Vue 3.0で登場した新機能

  • Fragments
  • Teleport
  • SFC State-driven CSS Variables（Experimental Features）

第4章　Vue.jsにおけるCSS設計

4-1　CSSのスコープ

  • Scoped CSS推奨への流れ

4-2　Scoped CSSのしくみ

  • Scoped CSSの特徴

4-3　VueコンポーネントにおけるCSSの命名ルール

  • BEM Likeなクラス名のルール
  • BEM Likeな命名ルールのメリット
  • COLUMN　要素セレクタを利用しない

4-4　CSSの全体設計

  • 定義ファイル
  • サイト全体の共通スタイル
  • ページ／コンポーネント固有のスタイル
  • 余白のコントロール

第5章　品質を高める

5-1　代表的なテスト手法と適切な選択

  • 静的解析
  • 単体テスト
  • 結合テスト
  • E2Eテスト
  • テスト手法の選定のポイント

5-2　静的解析を導入する

  • TypeScriptを利用する
  • ESLintを利用する

5-3　単体テストを実施する

  • Vue CLIによる導入
  • 生成されたコードの確認
  • ミニマムガイド
  • 「実装」ではなく「振る舞い」のテストをしよう

5-4　結合テストを実施する

  • 単体テストと結合テストの違い
  • Vue Testing Library

5-5　End-to-End Test（E2Eテスト）

  • Vue CLIによる導入
  • 生成された設定の確認
  • マークアップやデザインに依存したテストを書かない
  • COLUMN　Vue 3への対応

第6章　パフォーマンスを改善する

6-1　ユーザー体験の質を向上させることを目的にしよう

6-2　パフォーマンスの状況を把握する

6-3　パフォーマンスを計測する

  • 何を計測するか
  • どう計測するか
  • パフォーマンス計測の事例

6-4　パフォーマンスを改善する

  • 何から改善するか
  • JavaScriptのファイルサイズを小さくする
  • メインスレッドを占有しない

6-5　継続的に高いパフォーマンスを維持するために

  • COLUMN　Vue 3のパフォーマンス関連トピック

第7章　アプリケーションの提供範囲を広げる

7-1　サービスの価値をより多くのユーザーに届けるために

7-2　国際化（i18n，Internationalization）とVueI18n

  • 国際化（i18n; Internationalization）の目的
  • 継続的な翻訳を目指すために
  • Vue.jsにおけるi18n対応の基本
  • リソースの持ち方

7-3　Vue I18nの使い方

  • Vue I18nのインストールとwebpackの設定
  • Vue I18nを便利にするエコシステム
  • Vue I18nの具体的な使用方法

7-4　i18n対応が複雑になるケースに対応する

  • storeには文言を持たずに，リソースのキーのみを持つ
  • 文言を含んだmixinの多用を避ける
  • 語順に依存するUIの多用を避ける

7-5　翻訳フローをつくる

  • 継続的翻訳フローに必要な観点
  • 具体例からフローを考えてみる
  • COLUMN　i18nに関する参考資料

7-6　アクセシビリティ（a11y; Accessibility）

  • アクセシビリティとそのガイドライン
  • COLUMN　JIS X 8341・WCAG
  • Webにおけるアクセシビリティの考慮点

7-7　Vue.jsにおけるアクセシビリティ

  • 実装上におけるアクセシビリティの観点
  • アクセシビリティ対応状況の可視化
  • Vue.jsのアクセシビリティ対応に関する現状
  • COLUMN　アクセシビリティに関する参考情報

第8章　川口和也氏に聞く「エコシステムの活用と貢献」〜特別インタビュー

  • Vue I18nを開発したきっかけ
  • 登場したてのVue.jsに惚れた理由は？
  • Vue I18nを開発したときの困ったこと・障壁
  • OSSを開発する2つの意義
  • 「KARTE」に自分の開発したOSSを入れるときの苦労とは
  • 開発フローと翻訳フローを両立するむずかしさ
  • OSSとプロダクトを並行して開発する難しさ
  • 自作のOSS導入のススメ
  • 今後のVue I18nと新しいOSSへの展望
  • 最後に
  • 索引
  • 著者プロフィール

著者プロフィール

野田陽平（のだようへい）

株式会社プレイド所属のエンジニア。日本IBMソフトウェア開発研究所を経て，2015年より現職。CX（顧客体験）プラットフォームKARTEの開発をおこなう。プロダクトの機能開発に加え，採用，社内勉強会の立ち上げ，国際化，新プロダクトの開発などにも関わる。共著に『Vue.js入門 基礎から実践アプリケーション開発まで』（技術評論社）がある。

門脇恒平（かどわきこうへい）

株式会社プレイド所属のソフトウェアエンジニア。Webアプリケーションのバックエンド，フロントエンド，iOS/Androidアプリケーション，クラウドインフラなど，幅広く開発を経験。現在は，エンジニアチームの生産性向上やプロダクト開発のプランニングにも取り組む。

山田敬美（やまだたかみ）

株式会社プレイド所属のデザインエンジニア。Web制作会社でのCSS設計やフロントエンド開発の経験を経て，現在はKARTEのUI実装を担当するかたわら，デザインシステムの構築にも取り組み中。共著に『Sass入門 ～より効率的なCSSコーディング』（Gihyo Degital Publishing）などがある。

高橋和樹（たかはしかずき）

デザイナー/マークアップエンジニア。1985年生まれ知床出身。制作会社，フリーランスを経て2018年より株式会社プレイド所属。UIデザインとHTML/CSSコーディングを軸にさまざまなプロジェクトを経験。プレイドでは新機能のプロトタイピングや，情報設計，フロントエンドの実装を担当。

藤川淳史（ふじかわあつし）

株式会社プレイド所属のソフトウェアエンジニア。新卒で株式会社プレイドに入社し，CX（顧客体験）プラットフォームであるKARTEのフロントエンド/バックエンド開発を担当。現在は，新規事業開発チームにて新プロダクトの設計と開発をおこなう。

韓徹（かんてつ）

株式会社プレイド所属のソフトウェアエンジニア。2018年より現職。プレイドではCX（顧客体験）プラットフォームKARTEの開発をしている。現在はKARTEの管理画面の改善と新機能開発をおこなっている。