Vue.js + Firebaseで作るリアルタイムアンケート / real time questionnaire

by masahito.ando

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

© ZOZO Technologies, Inc. 先日、ZOZOTOWNに出店いただいているブランド様655社1206名の方にお集まり頂いただき  日頃の感謝とブランドの皆様と共に創っていきたい未来についての共有を目的とした  ZOZOTOWN Brand Conference 2019というカンファレンスを開催しました。        3 ZOZOTOWN Brand Conference 2019

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

© ZOZO Technologies, Inc.     7 ● Firebase ○ 手軽にリアルタイムリスナーが使用できる（Firestore） ○ この規模なら無料枠（Sparkプラン）で収まりそう ○ 手軽にホスティングが可能  ● Vue.js  ○ 他のフレームワークより学習コストが低い ○ その分スピーディーに開発ができそう ○ データ駆動設計 + Tweenライブラリ = 状態アニメーションが容易に実装可能  技術選定理由

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

© ZOZO Technologies, Inc.     15 { "status": { "current": { "questionIndex": 0, "deadlineTimeStamp": 1560487021599 } }, "votes": { "00mLbY71Rm88Nz11gxAA": { "questionIndex": 0, "selectedAnswerIndex": 0 }, "021tVyGd46luzFmrkeQp": { "questionIndex": 0, "selectedAnswerIndex": 1 }, "02GH3o3FUuS110IO5ZFX": { "questionIndex": 1, "selectedAnswerIndex": 1 },... } } コンポーネント内で扱いやすいように Vuex Storeとの連携の際にデータ構造を変換 → statusCollection → statusModule votesCollection → questionModule Cloud Firestore  { status: { currentQuestionIndex: 0, deadlineTimeStamp: 1560487021599 }, question: { questions: [ { text: '質問テキスト1', answers: [ { votesCount: 0, text: 'YES' }, { votesCount: 0, text: 'NO' } ] }... ] } } Vuex Store  FirestoreとVuex Storeの連携 

Slide 16

Slide 16 text

© ZOZO Technologies, Inc.     16 import { VuexModule, Action, Mutation, Module, getModule } from 'vuex-module-decorators'; import store from '@/store/index'; import firestore from '@/firestore'; @Module({ dynamic: true, store, name: 'question', namespaced: true }) class Question extends VuexModule { // state questions = initializeQuestions();// stateの初期化を行う // mutation @Mutation updateQuestions(vote) { this.questions[vote.questionIndex].answers[vote.selectedAnswerIndex].votesCount++; } // actions @Action observeVotes() { firestore.collection('votes').onSnapshot((snapshot) => { snapshot.docChanges().forEach((change) => { const vote = change.doc.data(); this.updateQuestions(vote); }); }); } } export const questionStore = getModule(Question); questionModule   FirestoreとVuex Storeの連携  vuex-module-decoratorsを使用 ● クラス形式で記述できる ● 型補完、インテリセンスが効く ● thisを使ってお互いを呼び出せるメンバ変数 → State @Mutation + メンバ関数 → Mutation @Action + メンバ関数 → Action

Slide 17

Slide 17 text

Slide 18

Slide 18 text

© ZOZO Technologies, Inc. 18 ● 自身によるサーバ構築が不要、フロントエンドの知識のみでリアルタイムリスナーを使用したアプリケーションが作成できる  ● 参加規模にもよるが(1000人位のアンケートなら) 基本無料(Firebase Spark プラン)でアプリケーションが作成できる  ● 充実した日本語ドキュメント + 単一ファイルコンポーネント(.vue)で学習コストが低いうえ開発スピードが爆速  ● Vue.js(データ駆動設計) + TweenMaxは状態のトランジション制御が楽に行えるし、ロジックとアニメーションコードを分離しやすい    実装を通して思ったこと   