Vue.jsとAngularの使われ方を聞いてきた

１１月２日。
マーケティング事業の開発現場でリアルに使われるＪＳ事情
で、Vue.jsとAngularの使われ方を聞いてきたので、メモ

---

■会場案内
・会場説明
・市ヶ谷ぎーくナイト

■注意事項
・登壇テーマの説明

■プロダクトに１からVue.jsを取り入れた話
・自己紹介／会社紹介（ウィルゲート）
　コンテンツマーケティング
　　　Ｗｅｂマーケティング→きょうこれ
　メディア

・チームに導入した話
　背景
　４人、サーバーサイド、社内開発
　４月、新規プロダクト　Ｗｅｂコンサルタントのノウハウをシステム化
　　動きのある画面が必要になってくる
　　チームとしてりっち
　Laravel→Vue.jsを公式採用

　導入のためにやったこと
　　チュートリアル
　　導入方針
　　フォローアップ

　チュートリアル
　　ハンズオン　３０分くらい
　　githubに公開されている

　方針整備
　　ビルドシステム（gulp,webpack）を使わない
　　強制しない
　　基本ルール

　メンバーのフォローアップ
　　一緒にロジック
　　slackやプルリクのコメント

　チームとして使える

　良かったこと
　　複雑な画面を想定より早く、バグも少なく
　　新しいメンバーもスムーズ

　学んだこと
　　フロント設計の必要性
　　Vue.jsを強制しないことが裏目に出た
　　パッケージ管理ツールを使わないとつらい

　今後の展望
　　フロント設計
　　ビルドシステムの導入　Laravel Mix

・実際に使った話
　開発開始６月、完了１０月
　これまで　JQuery
　　状態の管理が複雑
　　導入 v-model

　良かった点
　　画面はんえいが簡単
　　コードが読みやすくなった
　コンポーネントによって、共通部分を再利用
　　グラフ

■広告管理画面におけるAngular4のメリット・導入事例
・自己紹介
　ぎーくハウスとは：コンセプト型のシェアハウス

・Angular4の概要
　AngularJS １系
　Angular2系以降からAngular
　Angular5でた（２以降は下位互換）４系　ＬＴＳ
　幻のバージョン３→混乱をさけるため
　Angular5

　世界Angular強い。日本React多い

・メリット
　共通のコンポーネント
　　　HTML
　　　CSS
　　　TypeScript
　Typescript
　テストフレームワークが充実

・ng2-adminを活用した管理画面作成

・コンポーネント指向
　多言語対応 localStorageのロケール

・単体テスト
　karma,jasmine
　karma:テストフレームワーク　　

■MAJINを支えるフロントエンド技術
・自己紹介
・Ｍａｊｉｎの紹介
　マーケティングオートメーションツール
・MajinのフロントエンドとJavascript
　ＥＳ６＋Ｖｕｅ．ｊｓを使っている
・ＡＰＩファースト
・Vue.js
　学習コストが低い
　初めから少しづつ
　ＭＶＶＭ
　コミュニティ活発
・活用事例
　シナリオとVeux
　Vueの状態管理
・undo/Redoの実装が容易に

・自作プラグインでVue.jsをカスタマイズ
　yamlファイル

・TypeScript＆Yeomanによる効率向上
　コンポーネントの作成は面倒くさい
　　→自動生成 yeomanのyo

■広告の効果測定サービスで利用している、計測用のJavascriptタグで
　SafariのITP対応した話
・自己紹介
・Safari11 Intelligent Tracking Prevention(ITP)帰納が入った
　→Cookie利用に制限
・ITP昨日と引き起こされる問題
　クロスサイトトラッキングと行っていると判定されると、制限
・ユーザー行動の計測
　　クリック→計測サーバー→ＵＩＤをクッキーが食べる
　計測の種類
　　直接計測サーバーアクセス→ＣＶへ：リダイレクト計測
　　ＣＶにいき、そこがJSで計測サーバーへ：ダイレクト計測
・要件
　ブラウザ環境の考慮幅広い
　DOMのＡＰＩに潜む罠

・利用しているライブラリ
　typescript

・何が問題
　リダイレクト計測　uidをLPドメインに書き込めない
　何をした
　リダイレクト時にもダイレクト計測
　　ＡＤ→計測サーバー→ＬＰにJavascript→計測サーバー

・クロスドメインの問題
　ドメイン跨ぎ　ＲＦＣ６２６５

・モブプロ、ブラウザテスト