This post is Private. Only a writer or those who know its URL can access this post.

Vue.js 入門の第10章「中規模・大規模向けのアプリケーション開発③実装」

[秋葉原] Vue.js入門 輪読会 10章 中規模・大規模向けアプリケーション開発 (実装)


自己紹介

  • 名前
  • 仕事
    • Go + k8sのマイクロサービスのバックエンドエンジニア
  • 趣味
  • モチベーション
    • フロントがVue.js + Nuxt.jsのでバックエンドがどういう感じだと嬉しいか・困るのか知りたい
    • サーバーレスSPAの文脈でのVue.jsの盛り上がりに乗りたい

10章の位置付け

中規模・大規模向けのアプリケーション開発

  • 8章: ①開発環境のセットアップ
  • 9章: ②設計
  • 10章: ③実装

8章でやったこと

  • アプリケーションの仕様確認
  • アプリケーションの雛形(vue init)
    • webpack向けテンプレート
    • ESLint: Standard
    • unit test: true
    • test runner: karma
    • e2e: Nightwatch
  • APIサーバー用のExpressの雛形準備

など


9章でやったこと

  • コンポーネント設計
  • 状態モデリング
  • Vuexを利用する前提のデータフロー設計
  • アクションの雛形作成
  • API通信用モジュール雛形作成
  • routerの仮定義

など


10章の様子

  • 10.1 開発方針の整理 p350〜351
  • 10.2 コンポーネントの実装 p351〜370
  • 10.3 データフローの実装 p370〜375
  • 10.4 ルーティングの実装 p375〜379
  • 10.5 開発サーバーとデバッグ p379〜388
  • 10.6 E2Eテスト p388〜390
  • 10.7 アプリケーションのエラーハンドリング p390〜398
  • 10.8 ビルドとデプロイ p398〜400
  • 10.9 パフォーマンス測定・改善 p401〜410

凡例

  • 概要
    • 本の内容をまとめたもの
  • 仕様
    • 本で使われている技術の仕様を確認するもの
  • 議論
    • 本で論点が提示されていて意見を聞いてみたいもの
  • 質問
    • 読んでてよくわからなかったので助けてください
  • 感想
    • 僕が感じたこと

10.1 開発の方針整理[概要]

  • テスト駆動でやっていく
p350〜351

10.1 開発の方針整理 [感想]

p350〜351

10.2 コンポーネントの実装 [概要]

  • ログインページ、ボードページ、タスク詳細ページのうちログインページに関連するコンポーネントを実装する。
  • テスト・本体の順で粒度の小さいものから実装していく。
    • atoms -> molecules -> templates
    • 粒度の大きいものから実装するとスタブしながら進めなければならない。
p351〜370

10.2 コンポーネントの実装 [概要]

実装するファイル

  • src/components/atoms/KbnButton.vue
    • test/unit/specs/components/atoms/KbnButton.spec.js
  • src/components/molecules/KbnLoginForm.vue
    • test/unit/specs/components/molecules/KbnLoginForm.spec.js
  • src/components/templates/KbnLoginView.vue
    • test/unit/specs/components/templates/KbnLoginView.spec.js

※ソースコードはサポートページに!

p351〜370

10.2 コンポーネントの実装 [概要]

  • 仕様(KbnButtonコンポーネントのAPI p332〜333)を満たしたら全て通るテストを先に書く
  • 仕様をテストで表現している

KbnButtonコンポーネントの仕様

  • プロパティ
    • type: ボタンの種別、文字列、text/button
    • disabled: ボタンが有効かどうか、真偽値、false/true
  • イベント
    • click: ボタンのクリックイベント
  • スロット
    • ボタンのコンテンツ
p351〜370

10.2 コンポーネントの実装 [感想]

  • npm run unit の実行結果がインデンと含め見やすかった
  • 見やすくなるように秩序立った describeitexpectを書くとテストケース漏れなど気付きやすくできそう
  • この節はどちらかというとふおおおテスト…!みたいなイメージが強かった

スクリーンショット 2018-12-05 22.47.57.png

p351〜370

10.2 コンポーネントの実装 [仕様]

import { mount } from '@vue/test-utils'

  • マウントされて描画された Vue コンポーネントを含む Wrapper を生成する
  • オプションはたくさんあるが本でもpropsDataslotsmocksstubslocalVueなどが使用されている
  • ドキュメントは日本語版も提供されていてとても親切!!!

vue-test-utils/docs/ja/api/mount.md

p351〜370

10.2 コンポーネントの実装 [質問]

Vue.nextTick( [callback, context] )

  • callbackを延期し、DOMの更新サイクル後に実行する
  • たとえば、ボタンを押すとフィールドが表示されてフォーカスがあたるようにしたいが、フォーカスするためのフィールドのDOM表示を待ちたいなど?
  • ライフサイクルを1つ待つ?

Vue-nextTick

p351〜370

10.3 データフローの実装 [概要]

  • loginアクションハンドラ
  • AUTH_LOGINミューテーションハンドラ
  • AuthAPIモジュール

スクリーンショット 2018-12-09 18.19.19.png

p337の図

p370〜375

10.4 ルーティングの実装 [概要]

  • ガードフックを利用してログイン済みでなければログインページに遷移させる実装
  • ログイン済みかどうかは認証トークンの有無で判定する簡易実装
    • 本番運用時には認証トークンをバックエンドAPI経由などで検証すべき
  • ログインが必要なページかどうかはマッチしたルートのレコードのメタフィールドのrequiresAuthの有無で判定
p375〜379

10.4 ルーティングの実装 [仕様]

グローバルルートガード

  • リダイレクト、キャンセルによって遷移をガードする
  • 作られた順番で呼び出される
  • ルート単位ガード、コンポーネント内ガードもある
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

ナビゲーションガード

p375〜379

10.5 開発サーバーとデバッグ [概要]

開発サーバー

  • ログイン確認にあたってはローカル環境の開発サーバーに該当エンドポイントのモックを実装する
  • build/dev-server.jsauth/loginのハンドラーを実装する
  • 認証できるユーザー情報をメモリにもつ簡易実装
    • 'foo@domain.com': { password: '12345678', userId: 1, token: '1234567890abcdef'
p379〜388

10.6 開発サーバーとデバッグ [概要]

デバッグ

  • Vue DevToolsはChromeであればエクステンションを登録
  • 本のバージョン(2.5.8)と現行のバージョン(2.5.17)ではデザインに差異

スクリーンショット 2018-12-09 19.00.13.png

p388〜390

10.6 開発サーバーとデバッグ [仕様]

デバッグ

  • Components
    • ツリー構造
    • データの中身
  • Vuex
    • コミット履歴
    • ステート確認
    • ペイロードの中身
    • タイムトラベルデバッグ などなど
  • Events
    • $emit発行したイベントがトリガーされた履歴
p388〜390

10.6 E2Eテスト [概要]

  • NightWatchのbrowserのコマンドAPIを使用してWebブラウザを操作
  • アプリケーショントップ画面にアクセスしてログインが成功しボードページに遷移するまでのケースを実装
  • npm run e2e
p388〜390

10.7 アプリケーションのエラーハンドリング [概要]

  • 子コンポーネントのエラーを補足するためにerrorCapturedフックを利用
    • エラーハンドリング用のユーティリティコンポーネントを実装し、src/main.js、src/App.vueで読み込む
  • グローバルなエラーをハンドリングするためにVue.config.errorHandlerフックを利用
    • errorCapturedフックと組み合わせる
p390〜398

10.7 アプリケーションのエラーハンドリング [仕様]

Sentry × Vue

import * as Sentry from '@sentry/browser'

Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: [new Sentry.Integrations.Vue({ Vue })]
})
  • Additionally, the Vue integration will capture the name and props state of the active component where the error was thrown. This is reported via Vue’s config.errorHandler hook.
  • リアルタイムにエラー検知するだけなら無料
  • Slack 連携や分析ができる有料プランも
p390〜398

10.8 ビルドとデプロイ [概要]

  • npm run buildでビルドしたファイル群がdistディレクトリに出力される
  • HTTPサーバーのドキュメントルートに配置すると動作する
p398〜400

10.9 パフォーマンス測定・改善 [概要]

パフォーマンス測定

  • Vue.config.performance = trueに設定
  • Chrome DevToolsのPerformanceタブのvue<コンポーネント名>処理を確認する
    • init
    • compile
    • render
    • patch
  • renderは実際にライブラリの利用者が触ることが多く、改善の余地が生まれやすい
p401〜410

10.9 パフォーマンス測定・改善 [概要]

パフォーマンス改善

  • v-ifとv-showを使い分ける
  • データバインドはメソッドより算出プロパティを利用する
  • 算出プロパティとウォッチャを使い分ける
  • v-forによるリストのレンダリングではなるべくkey属性を利用する
  • v-onceでコンポーネントのコンテンツをキャッシュする
  • 関数型コンポーネントを利用する
  • テンプレートを事前コンパイルする
  • テンプレートのコンパイラオプションを利用する
p401〜410

10.9 パフォーマンス測定・改善 [概要]

パフォーマンス改善

算出プロパティとウォッチャを使い分ける

  • 算出プロパティでなくウォッチャを使うべき例外的ケース
    • ループのような処理コストが高い処理
    • 非同期が伴う処理
p401〜410

10.9 パフォーマンス測定・改善 [概要][議論]

パフォーマンス改善

v-forによるリストのレンダリングではなるべくkey属性を利用する

  • リストの内容がガラリと変わる更新が頻繁に起こるようなものにおいては性能向上はそこまで期待できない
    • あえてkeyを指定せずin-place patchアルゴリズムに任せるとよくなることがある
    • 他に方法はある?
p401〜410

10.9 パフォーマンス測定・改善 [仕様]

パフォーマンス改善

関数型コンポーネントを利用する

  • 状態を持たない(リアクティブデータが無い)でインスタンスを持たない(thisのコンテキストが無い)
  • コンポーネントが必要とするものはcontextを通して渡される

関数型コンポーネント

p401〜410

10.9 パフォーマンス測定・改善 [概要]

パフォーマンス改善

テンプレートを事前コンパイルする

  • webpackテンプレートを使っていればビルド時(実行時でなく)にテンプレートをVue Loaderが描画関数にコンパイルしてくれる
p401〜410

10.9 パフォーマンス測定・改善 [概要]

パフォーマンス改善

テンプレートのコンパイラオプションを利用する

  • 基本的にアプリケーション向けでなくプラグインやUIライブラリ開発向け

参考資料

p401〜410
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.