2019/09/25 【シューマイ】Tech Lead Engineerから最新技術を学べ！Vue.js編 参加してきました！
2019-09-25（水）に開催された【シューマイ】Tech Lead Engineerから最新技術を学べ！Vue.js編 に参加してきました！
1人30分のLTなので、LongTalkでした！
以下雑なメモです。
「Nuxt.js + Firebaseでの開発と高速化に挑んだ話」
株式会社リビルド 代表取締役 鈴木 孝之氏
ざっくりすぎる概要
Firebase をなぜ導入したの？
- 技術スタック
- 関連ドメイン
- 各画面でチャット機能を作りたい
- どう作っていくのかを議論
- 様々な調査
- ロングポーリング
- WebSocket
- LaravelEchoで実現する方法を調べたものの難しそう
- Firebase の導入前の懸念点(2019年1月時)
- 無料枠だと1GBしか使えない
- 検索クエリに制限あり
FireBaseを使ってみた
- JSONの構成
- usersコレクション
- roomsコレクション
- メッセージなどの情報が入っている
- roomsコレクション
- usersコレクション
- シーケンス図
- フロントだけの図
- Usersにサブコレクション理由
- 実装当時は検索が困難だったので、Usersにサブコレクションをもたせた
- リアルタイムを担保する部分
- 変更を感知してチャットを更新
ビルド高速化でやったこと
- Webpack Bundle Analyzer をファイルの関連性の可視化ができる
- 改善案
- moment.js が重い
- 複数の言語を全部読み込んでいる
- 日本語だけでいいのに他の言語も読み込んでいた
- 必要な分だけに絞った
- 日本語だけでいいのに他の言語も読み込んでいた
- 複数の言語を全部読み込んでいる
- loadsh.js が重い
- ディープコピーにしか使っていない
- クリーンJSに変更
- 1MB軽量化に成功！
- moment.js が重い
まとめ
- 思ったより導入コスト高め
- 少し複雑なアーキテクチャになった
- 知見があれば回避できたかも
質疑応答
「Firestoreから(チャットユーザの)プロフィール画像は取れない」とおっしゃっていた理由が気になります。URLをFirestoreに保存しておくのならできるのでは、と思ったのですが、どんな設計だったのでしょうか？また、RDBとNoSQLの使いわけについて詳しくお聞きできたらうれしいです！
- やり方はある
- DBのS3に画像のURLを付与すれば可能なはず
- Usersによけいな情報を持ちたくない
- DBが分断していたため
Day.js は検討されなかったのでしょうか？
- 日付周りでなにか原因があると思ったので、検討してなかった
ちゃんと聞いてなかったかもなのですがmoment.jsやlodash.jsが遅いっていうのを可視化してた図は何かのツールですか？？
- webpack-bundle-analyzer
- コマンドを叩くだけで確認できる
GMOインターネット株式会社 デベロッパーエバンジェリスト 成瀬 允宣氏
Vue.js × フロントエンドのつくりかた
ソースコードを見ながら説明してくださる形式！
ざっくり内容
- BuildersConで登壇されていた内容を寄りコードに関して説明する形でお話されていました！
つつましいエラーハンドリング
- エラーハンドリング
- エラーハンドリングは、ソフトウェアの使い勝手を決定づける
- やりたいことをやってもらうがソフトウェアの本質のはず
- 拾ってあげるべきエラー
- ユーザーが回復できるエラー
- クライアントの回復できるエラー
- バリデーションを表示
- 画面ごとでハンドリング
- サーバーの回復エラー
- 画面ごとにハンドリングしたい→したくない！
- 通信ライブラリ(axios)をラップ
- 細かく制御したいときもある
- オプションパラメータを付ける
- 確認画面から入力画面に戻るエラーを追加
- オプションパラメータを付ける
- 画面ごとにハンドリングしたい→したくない！
- クライアントの回復できるエラー
- ユーザーが回復できるエラー
- エラーハンドリングは場合分け
- 成功したときはハンドリングする
- 失敗/例外
- ハンドリングする？しない？
- ハンドリングするときにオプションで対応する
- 基本的にはなにもしなくてよい状態に
- 必要なときに差し込めるように
- 基本的にはなにもしなくてよい状態に
認証認可の戦略
- 強力な仕組みが必要
- 人力を排除する
- 認証と認証切れ
- 認可が必要ではないページを設定する
- ルートの認可
- すべてのルートは最高権限が必要にする
- 認証が不要な画面は設定
- すべてのルートは最高権限が必要にする
- リソースの認可
- サーバー側で403を発行
全体的なコンポーネント構造
- サーバー側で403を発行
- 子同士がやりとりするのはNG
- 相互参照しあってはいけない
- 親のルートページが司令塔になるべき
- 上から下はメソッドで、下から上はイベントで実装するべき
- ページ遷移や通信をする箇所
まとめ
- 無駄な努力はせず必要な努力をする
- チームで注力するべきところはどこかを考えながらコアな部分を作っていこう
質疑応答
エラーメッセージなんですがサーバーからどれくらい詳細に返しますか？？詳しく返しすぎると良くないケースがある場合がある気がしています。
- フロントで返している
wraxiosはかなり作り込んでるように思えますが、どれくらい時間かけて作りましたか？おおよそでいいので教えてほしいです。
- 数時間ぐらい
SPAの認証はJWTでやっていますか？？まだなんとなく怖いのですが…
- JWTはSessionとは違うものらしい
- ヘッダーでトークンを返して、ページに埋め込んでいる
stateのバケツリレーしたくない時はvuex使うかな
- 書くときに楽するじゃなくて、読むときにどうなのかを意識して成瀬さんはつかっていない
- コンポーネントが会話し始めちゃうため
複数ページで全く同じ通信内容が発生した場合はどうやってコードの重複を防ぎますか？api.jsなど通信をライブラリ化してページからはそれを呼び出しますか？
- コンポーネントが独立をさせることで重複を防ぐ
懇親会
- シューマイを食べながら懇親会！
感想
- はじめの登壇者の方のBDD＝ビーチ駆動開発は斬新で面白いなーと思いました！
- わりと初心者向けの内容だった印象なので、初心者エンジニアとしてはなるほどなーと思うことが多かったです！
- またフロントエンド関連の会があれば参加します🌟
