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


frontend

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

感想

  • CSS の管理とか設計は現場ごとに課題があって、それを解決する形になるんだろうなと思いました

    • なので、つらみとかやったこととかを聞けて良かった
  • UNIQLO の Global 対応すごいし面白かった
  • GraphQL は Client にはだいぶ良さそう(Backend 視点だとどうなんだろう・・・)

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

Creating Serverless CMS from Scratch

by @sottar_ さん => Slide

自分が気になったとこメモ

  • 以前はデザイナーにデザインをお願いして、html/css を書いて(pug/css)、frontend エンジニアが js とか jquery をレビューする形だった(これ今のうちと似てる)
  • 一文字変えるだけでもデザイナーがコード書いてレビューが必要だったり課題が多かったので社内 CMS を作った
  • CMS に OSS を使わなかった理由は、自在に Component を組み合わせられるような自分たちにマッチしたものがなかったから。
  • 最初はミニマムで要件を決めた。(Slide 参照)ちなみにそれら 1 つ 1 つがアジャイルのストーリーになったイメージ(これなるほどーと思った)
  • なぜ S3 と GCP 両方使ってるのか?

    • S3 で GithubPage 的な仕組みが既存であったのでそれに乗っかった
  • CloudFunction 使った理由(直接ストレージアクセスしない理由)は今後権限周りとか色々追加できるように。
  • レポジトリ(サービス)は CMS の結果をレンダリングするレポと CMS 作る側のレポに別れている。

Vue.js での CSS 設計

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

The Challenge of Web re-architecture using GraphQL and Apollo

by @lightnet328 さん => Slide

自分が気になったとこメモ

  • GraphQL 使う理由

    • スキーマは実装を縛るので、実装と乖離がおきにくい
    • クエリの可読性が高い
  • Apollo Client とは GraphQL クライアントの 1 つ

    • データの正規化できる(Redux で使われることのある normalizr 的な奴!!)
    • 正規化したデータをキャッシュできる
    • Apollo Link というのを使って前処理・後処理ができる
  • Apollo Server

    • GraphQL サーバーの 1 つ
    • Apollo Client を当然サポートしてる
  • 開発の流れ

      1. API Client をかく
      1. スキーマを定義する
      1. リゾルバーを書く
      1. クエリを書く
    • (1.)が一番辛い!

Practical tips for making a global EC site

by @yayoc_ さん => Slide は今はなし(多分)

自分が気になったとこメモ

  • UNIQLO では機能が国によって異なったりする!
  • AKAMAI 使ってる
  • ベース URL に contry,language をつけてる
  • Global だと googlebot 以外も考慮しないといけなかった
  • デイリーで webPageTest / Lighthouse を国別に実行している
  • webpack-bundle-analyzer よく使ってる

    • 不要な翻訳ファイルが入ってたりとか検知
  • i18n-webpack-plugin でローカライゼーションしてる
  • 言語別にエントリポイントを分けてる、翻訳データをビルド時に埋め込んでいる
  • babel の preset を使って古いブラウザでもなるべく動くように心がけている
  • (自分の感想)聞いてて面白かった!!!!

以上!!