https://gyazo.com/9112d129906acee40daa4268e418ca52
スピーカー
Vuejs Amsterdamについて
Vue CLI UI
guijs
企業になってる
200万ドル
インスタグラムも熱かった
シンタックスハイライト
.vueが対応
各ブロックの言語機能を提供
補完
型チェック
変数にマウスカーソルを乗せたら情報を出す
テンプレート解析の現状
変数の中身を確認
型チェックでエラー
何を入れるのか教えてくれる
定義元を見る
実験的なので使用するときはフラグをONにする
Vetur > Experimental: Template Interpolation Service
https://gyazo.com/208ec8356e3d16efe28b737ead8e17b1
Vetur Terminal Interface
エディタのチェックだけだとまずい場合
CI上で動かして確認できるようにする
npm.icon npm i -g vti
vti diagnostics
型チェック
実装について
vue-eslint-parser AST
code:example-ast.js
{
type: 'VElement',
name: 'div',
startTag: {
type: 'VStartTag',
selfClosing: false,
attributes: []
},
children: [{
type: 'VExpressionContainer',
expression: {
type: 'Identifier',
name: 'message'
}
}],
endTag: {
type: 'VEndTag',
}
}
code:example-ast.ts
import __Component from "./Test.vue";
import { __vlsRenderHelper, __vlsComponentHelper,
__vlsIterationHelper } from "vue-editor-bridge";
__vlsRenderHelper(__Component, function () {
__vlsComponentHelper(this, "div", {
props: {},
on: {},
directives: []
}, [
this.message
]);
});
https://gyazo.com/30699fa09d70faa5a12d5196393cab0c
https://gyazo.com/30699fa09d70faa5a12d5196393cab0c
不正な Location でクラッシュ
"pos": -1でTypeScriptコンパイラにわたすとクラッシュする
Location ズレ問題
エラー表示箇所が正しい位置にハイライトされない
Source Map Generation
マッピング
だいたいこういうことをやってる
独自仕様のSource Mapping
code:mapping.ts
ts.setSourceMapRange(tsNode, {
pos: 13,
end: 37
});
Location を持たない ASTの場合
コードジェネレーションでTS化
パースして位置情報が保管される
計算
https://gyazo.com/7fddcabeb80e4ecdaaa49a35678541f4
実装予定
Props の型チェック
Template Transformer の改善
vuedts
yarn.iconyarn vuedts src --watch
ポケモンすばやさ比較ツールをつくる
2つのポケモンの素早さを条件に応じて比較できる
条件の変更はリアクティブに比較結果に反映される
バトル中に即座に計算しやすいUI
どう作るか
規約ルーティングが便利
nuxt generateで静的ページ生成
Vueテンプレート記法
CompositionAPIの基礎的な記述
フォーム入力バインディング（v-model）
Component設計
繰り返し使われる部分を、Propsで機能や値を渡せば動作するように、抽象的なコンポーネントに
OGP設定も一括でできる
マテリアルデザインのコンポーネントが利用できる
機能とデザインがセットになっているので実装コストを大幅に削減できる！
アイコンも簡単に利用できる
デザインテーマはDarkを使用
コンポーネントも流用
インクリメンタルサーチ
v-radio-group
v-checkbox
v-selectbox
v-progress-liner
レスポンシブ対応
グリッドシステムを採用
無料で使えるホスティングサービス
Github連携したデプロイが簡単に設定可能
無料SSL/カスタムドメイン/FaaSとかもあり
PR毎にプレビューサイトを作れる
Firebase と比較するとできることは少ないが、必要最低限なので設定が簡単で扱いやすい
Domainはサブドメインを自由に変更
デプロイする際に、<head>タグ内に埋め込む文字列を設定できる
結果
12時間でできた
SEOで1ページ目に表示されるように
Twitterでも反響あり
2ヶ月程で 1万人以上 が利用してくれている！
HTTP APIを作成してNuxtでフロントエンドを作る
Nuxt + TypeScript + Composition API
import VueCompositionApi from '@vue/composition-api
問題点
SSRの際にデータをフロント側に持ってくるときに
window._NUXT/_.~に出力
CompositionAPIのときはうまくいかなかった
出力された変数情報がからなのでAPI通信などでデータ取得時は再度取らないといけない
クラスベース
vue-module-decorators
Vanilla
型定義を利用して素朴に記述
クラスベースに慣れてないので採用
nuxt-typed-vuex
型定義の恩恵が得られそう？
https://gyazo.com/7f0a85a4740ae97d4ab95c50c876c2c5
なぜ途中で挟む？
型情報が失われるので定義し直すため
SFCで依存するものをcomposition APIのみにする
クライアントサイドだけで非同期通信して値を取得する場合はVuexを使わず、CompositionAPIだけで完結させている
テストする
LocalVueにVuexとCompositionAPIを登録
VuexStoreの登録
モジュールモードで登録されるように加工
APIレスポンスのモックを作成
モックの差し込み
アットコスメのブランドマーケティングシステムにVuexを導入した話 テクノロジー本部デザイン部所属
テクノロジー本部BIDソリューション開発部所属
マーケティングシステム「ブランドオフィシャル」というサービス
主に化粧品ブランドがマーケティング分析に活用
2018/3
サービスリリース
2020/1
新機能リリース
商品やコンテンツに接触したユーザーデータの分析画面
ユーザーの行動を絞り込み、接触した商品情報等を表示する機能
開発期間
7~10月 仕様をもとにひたすら開発
11月 単体テスト
12月 サービステスト
導入理由
新画面ということで新しい技術の選定
APIにて頻繁にデータを取得・更新
APIレスポンスのデータ形式が微妙に異なる、表示する項目が多く、
表示レイアウト形式も非常に複雑
リアルタイムで絞り込みかつ可視化が必要→ストアの機能を十全に活かせることができるのでは…
Vue.js使った人が多かった
学習
基礎から学ぶVue.js
プロジェクト構成
appディレクトリ配下
Laravel(blade.php)にて読み込むjsファイル類
components配下
vueコンポーネント、APIクライアント、エンティティ、Store、各種モジュール類
entities配下
企画側と認識を合わせた、このプロジェクトの共通言語(ドメインモデル)が定義されたクラスファイル類
ファクトリークラス
エンティティオブジェクトを作成
APIクライアント
config配下
定数を定義したモジュール
util配下
ユーティリティクラス
Storeディレクトリ配下
エンティティをStore(state)に保持し状態を管理
トップレベルのVueコンポーネント
実装について
DOM読み込み完了
画面に必要なトップレベルのVueインスタンスを生成
blade.php側からのdata属性をpropsで子コンポーネントに流し込む
受け取ったjsonをファクトリーを介してエンティティへ
Store(state)データを操作するjs
getters,mutations,actions実装
actionsにてAPIクライアントを呼びだし、mutations内のメソッドにてStateを変更しcommit
storeのactions内のメソッドを呼び出す
表示について
コンポーネント
ダッシュボード固有のパーツ
商品の個別パーツ
「商品画像」「商品名」「評価点」「コメント数」「順位」
記事のパーツ
情報構造（ブログ・商品情報・クチコミ）や、デザインの構造から再利用性を考えてコンポーネントをわける
Issue
Atomic Designが意識できなかった
コンポーネントを切るとき「UIとして再利用しやすいか」よりどちらかというと「作業分担がしやすいか」に重きをおいてファイルをわけてしまった
知見・経験の少なさから、コンポーネントとしての「あるべき」が見えていなかった
要件定義・マークアップと並行してデザインが進んでいたため（！）、UIとして「最小のパーツ」が見極められなかった
今なお答えは出ていないので、「あるべき」は模索していきたい
CSSのコンポーネント化が出来なかった
CSSは画面単位でファイルを作成、読み込むようにした
結果、自己完結するコンポーネントにならなかった
ただし、vue-loaderはコンポーネント内に記述されたcssの順番を担保しないため、vue-loaderのバージョンが変わり、cssの順番が入れ替わった時確認が必要（スコープがちゃんとしていれば大丈夫とはいえ、確認しないままリリースは出来ない。。）
保守性を高くする
現在 jasmin、karumaを使用している→Vue Test Utils、Jest導入
よかったこと
画面の関心事をエンティティとして取り扱い、Storeで管理することにより複雑な画面の状態変化に対応することができた
仕様変更にも柔軟に対応できた
今後の要望にて柔軟にカスタマイズができそう