東京で開催された「CSS Nite LP54 Corder’s High 2017」の参加レポートです。

セッション3つめはトゥーアールの中村さん。

デザインシステムとコンポーネント

デザインシステム？

  • Google Material Design
  • Lightning Design
  • Primer

デザインの考え方を構造化したもの
↓
一貫性を保ちつつ、高速に開発するため

デザインシステムが有ると？

  • デザイン・実装の指針になる
  • みんなが開発に参加できる
  • みんな = 前後工程の人、これからの人、未来の自分

パターンライブラリ

UIコンポーネント実装を可視化したもの

今時のWeb開発の流れ、統一指針

パーツを規格化 & 取り決めどおりに実装
↓
一貫性と効率化の両立を図る

コンポーネント指向で出来ているもの

Vue.js, React.js, BEM, Sass, Web Componentsなどなど…

コンポーネント指向の設計をHTMLでやろう！

Pugの紹介

  • HTMLを分割して挿入できる
  • Node.jsで動く、JSが書ける
  • インデント強制の言語
  • 閉じタグ不要
  • 親子関係はインデントで
  • 改行処理はパイプ（|）で

なんか気持ち悪い

Pug × コンポーネント指向

  • 1つあたりのファイル容量を減らせる
  • 状況把握にかかるコストを削減
  • 修正がしやすくなる
  • 役割ごとに分割する
    • header, content, footer など
    • .pug で切り分ける
  • 共通パーツを使いまわす
  • セットでCSSを書けば完璧
  • 変数を使ってページごとのパターン差分を管理する
    • コンポーネントに実データを持たせない（テンプレートとしての役割をもたせる）
    • 例えば title という変数を作り、ページごとに挿入していく
  • 繰り返す要素は for で簡潔に回していく
    • 表示する情報量を減らすことで、コードを読み解くストレスを減らせる
  • 条件分岐 if でUIの表示・非表示の制御を行う
  • コードを見せるだけでコンポーネントの意味を伝えやすくなる

F&Q

  • JavaScriptで書くのに抵抗がある

    • まずは繰り返しだけ、forだけ使ってみる「繰り返し警察」になる
    • まずは動かす、次にリファクタリング
    • 繰り返しに慣れたら条件分岐など高度な機能へ
    • 一歩ずつ慣れていこう！

  • 独自記法を覚えるのが大変

    • html2pug という変換ツールがある
    • 使っていればいずれすぐ慣れる

  • 記法がキモい…

    • メリットは記述量が減ること
    • 人はミスする生き物、読み書きは少ない方が良い
    • キモイと言われたら「慣れるって」で返そう

  • デメリットはないの？

    • 簡単にマークアップを放棄できる
      • 要素は省略できる
        • 省略した場合は全部divになる

  • Pugが死んだらどうするの?

    • 喜びましょう
      • もっといいものに淘汰される

  • フロントエンドは流れが早い

    • 少しずつアップデートしていきましょう
    • 運用で得た知見はいずれ次に活かせる

まとめ

  • 分割・使い回しで情報を整理
  • JSでロジカルな設計、デザインの言語化
  • いろいろな人が開発に参加できるような環境を作っていこう！