UIT#5 わたしたちにとってのVue.js
https://gyazo.com/2fbdf4a33b16c20b1637d7b797347431
UITとは？
企業イベントっぽくしたくない
体験談に価値を置いている
体験に優劣はない
Vue歴4年
Nuxt歴半年
TS歴1ヶ月
ゆるふわプロジェクト（社内ツール）
Google App Enine Node.js Standard Enviroment
移行方針
開発者１人なので新規開発停止
かかった期間は約4週間
順序
1. components
2. utils, plugins, middleare, etc
3. store
4, test
testを通ることを確認しつつ移行
TS周りのライブラリ追加
vue-cli/tsconfig.json
allowJSだけ一時的にtrue
strict: trueなのでimplicit anyは弾く
Linter
ESLintのいい感じ集
CIのLintは一旦OFF
lint-stagedは.vue, .tsのみ有効
https://gyazo.com/9ae29b14bdbe81ef08c22d82f6f2e05f
ハマりポイント
typescript-eslint-parser
eslint-plugin-typescript
バグがあった
False Positive no-unused-vars
型引数にしか使ってない変数がエラー
offにする
False Positive new-cap
先頭大文字はコンストラクタだけにしなさいルール
capIsNewExceptionsを指定する
typescript/adjacent-overload-signatures
overloadの可読性を高めるルール
offにする
Componentの移行
vue-shims.d.ts
https://gyazo.com/61d1ecf1cc942a736acd334b95dd9a3b
Class styleにする
vue-convert -s class components/*.vue
だいぶショートカットできる（TSっぽくしてくれる）
Component properties
dataで@propで使うpropertyでエラー
defult値を設定するか、! をつける
path!: string
isLoading = false
$refsの型定義
https://gyazo.com/1cb7a34470cc132d39b2c319ed2d3476
Event.targetの型指定
targetがどのElement型なのかわからない
型定義だとtargetはEventTarget | nullになる
発火したElementに自分でキャスト
Testの移行
jest.config.js
mount/shallowMount時のComponent型
しょうがなくanyにキャストして回避
自前で型定義でもいけるが、面倒
Vuex の Action のTest
contextをmockにしてUnit Testしたい
Mockを多用していると大変
考え方によってはMockの仕様を抑制する
カメラを利用したアプリを作って約1,000人で遊んだ話 @KenjiroKubota
なぜ作るのか？
開発合宿でARシューティングゲームを作った
忘年会にて利用してみた
夏の迂回でもゲーム作成してほしい
どんなゲームをつくったか
多くの笑顔を撮った人が優勝
利用したもの
Vue.js（Webアプリ）
vue cli
vue router
vuex
vuetify
qecode.vue
vue-qrcode-reader
@vue/cli-plugin-pwa
clmtrackr
眉毛のライン・フェイスラインまで判定するのでメガネ・前髪長いと判定されない
動くスマホカメラだと認識わるい
対象１つなので複数人写ってもどれか判定
判定が厳しかったので閾値をゆるくした
Angular（スクリーン）
Hosting
RealtimeDatabase
Storage
facingMode : {ideal: "environment"}
バック側のカメラを取得
ハマりどころ
カメラの終了制御
device.stop()
video.srcObject = null
映像のアスペクト比
16:9から1:1
videoタグからcanvasにクロップした
どんどん重くなってくる現象
SPAなのでリロードされずコールバックが溜まってた beforeDestoryで破棄する
総撮影枚数
1769枚
MicrosoftのFace APIで再検証
Kyoto UIT Teams
技術スタックがレガシーなプロジェクトを
どう判断してプロジェクトを進めたのか？
現行ページと目指すゴール
LINE Web Login
デザインリニューアル
新機能追加
QRコードを読み込めばログイン
特徴
フレームワークなし
マークアップ、フロント、バックエンドが分業
なぜ置き換えるのか
各担当者の役割分担、スコープ化
CSS/HTMLの作業発症した時にバックエンド以外でおおよそ作業できるようにする
ルートコンポーネントだけが記載されたHTMLだけにする サーバーサイドのみでの変更要件がでたらバックエンドのみで対応
そのほかメリット
見やすくする
保守コスト
リッチ表現への担保
リファクタリング方針
リプレイス方法
Inputフィールドへの処理
v-bindとvuelidate
サーバーサイド特有の連携される変数
コンポーネントのpropsで連携
移行の例外
移行できないものは無理に移行しない
暗号化処理 gulp-concat 生成されたファイル
グローバル空間で宣言されてグローバルメソッドに依存している
concatしたファイルを外部ライブラリとして扱う
まとめ
担当のスコープが疎結合になった
データフローが明確になった
リファクタリングで危険な道は回避する
マークアップとフロントエンドの協業は模索中
コントロールパネル
フォーム
社内向け運用サービス
コーポレートサイト 等
デザイナとの協業
諸ツールが公式から出てて安心
資産があった
日本語ドキュメントが充実
アプリケーション
ディレクトリ構成
storeにアクセスしない
動的なパラメータは _id/ にした
エラー検知
リクエストは401と422エラー以外を記録
テスト
コンポーネントはあまり書かない
storeのメソッドのうちデータフロー以外のロジックを含んでいるものをテスト
git push単位でCIを回してテスト＋audit パッケージのアップデート
困ったこと
デザイナーとの協業
デザインの共有・実装がやや冗長
コンポーネントの細かい挙動・数値をSketchで伝えるのは大変 リソースがたりない
レストランボード
一部WebView
独自フレームワークをVueに置き換える話
独自フレームワークについて
完成度は高かったが継続性に不安
導入前にやったこと
足元の整理（２年弱）
npm script
async /await
心がけたこと
小さく移行する
レガシーコードのロジックは資産
Vue導入での大きなインシデントはあまりない
よかったこと
学習曲線がゆるい
それなりに書ける
わるかったこと
自由すぎて影響が肥大化する
watch or computed？
created or mounted ?
やらないことを決めるのが大事
まだまだ移行中
移行済：40%
のこり：60%
building better Vue components with storybook @julien Kyoto UIT Team
アプリを細かなパーツに分けられる
ベストプラクティス
parentとchildの関係
P => C のときpropertiesを参照
C => P のときeventsを参照
propertiesは簡素なものをつかう
siblings
同階層での参照は駄目
parentを間に入れる
問題
Vueコンポーネントが不安定になる
意図しないタイミングでリフレッシュする
イベントとプロパティを同時に見れない
vue-whiteroomを作った
AtomicDesignを重視
特徴
プロパティを自動生成
Vue.jsのライフサイクルを気にしなくていい
イベントをすべて見れる
プロパティとイベントを同時に見れる
https://gyazo.com/35490517c26f9c56581c2ecd68c72a7d