趣味エンジニアの技術メモ

Mercari x Merpay Frontend Tech Talk vol.3

2019-11-27

先日、Mercari x Merpay Frontend Tech Talk vol.3 に参加させていただいたのでそのメモです。

以下、メモについては自分が気になったところだけ + 殴り書きなんで自分しか読めないかも

by @sottar_ さん => Slide

以前はデザイナーにデザインをお願いして、html/css を書いて(pug/css)、frontend エンジニアが js とか jquery をレビューする形だった（これ今のうちと似てる）
一文字変えるだけでもデザイナーがコード書いてレビューが必要だったり課題が多かったので社内 CMS を作った
CMS に OSS を使わなかった理由は、自在に Component を組み合わせられるような自分たちにマッチしたものがなかったから。
最初はミニマムで要件を決めた。（Slide 参照）ちなみにそれら 1 つ 1 つがアジャイルのストーリーになったイメージ（これなるほどーと思った）
なぜ S3 と GCP 両方使ってるのか？
- S3 で GithubPage 的な仕組みが既存であったのでそれに乗っかった
CloudFunction 使った理由（直接ストレージアクセスしない理由）は今後権限周りとか色々追加できるように。
レポジトリ（サービス）は CMS の結果をレンダリングするレポと CMS 作る側のレポに別れている。

by @tacamy さん => Slide

要素セレクタへ直接スタイル指定すると属性セレクタと組み合わせるとめっちゃ遅くなる
- これあとで調べよう
- クラスセレクタに対する指定なら問題なし
子コンポーネントのルート要素は親のクラスもかかる
deep セレクタは scoped を破壊できる（ので怖い）
BEM の BLOCK = Vue のコンポーネントと考えると割とわかりやすい
- ルートが BEM の block
Component の命名規則については Vue の StyleGuide を参考にしてる - 将来追加される HTML 要素のことも考慮云々がなるほどと思った Vue のお勧めとしては名前をつなげて書いていく
components の分類について
- atomic design パターン
- container パターン（store 分離）
議論に時間がかかる場合は分類が Too much（分類しすぎ）
全てのスタイルを外部 css にかくパターンついて
- 長期的にはきつい。負債がたまる（うちがコレなんで確かにと思った
Karte ではどうしてるか（あくまで現状）
- 外部 CSS と scoped のハイブリッド
- 外部 CSS には共通コンポーネントの CSS が書いてある (接頭辞使ってる）
- それ以外は scoped CSS
- 詳しくは Slide

GraphQL 使う理由
- スキーマは実装を縛るので、実装と乖離がおきにくい
- クエリの可読性が高い
Apollo Client とは GraphQL クライアントの 1 つ
- データの正規化できる（Redux で使われることのある normalizr 的な奴！！）
- 正規化したデータをキャッシュできる
- Apollo Link というのを使って前処理・後処理ができる
Apollo Server
- GraphQL サーバーの 1 つ
- Apollo Client を当然サポートしてる
開発の流れ
- 1. API Client をかく
- 1. スキーマを定義する
- 1. リゾルバーを書く
- 1. クエリを書く
- (1.)が一番辛い！

by @yayoc_ さん => Slide は今はなし（多分）

以上！！