2018年11月21日2021年2月4日

初登場、大西です。コエテコというプログラミング教育のサービスでフロントエンドデザイナーをしています。
デザイン周り全般を担当しています。また、サービスデザイン部にも所属しています。

今回、2018年下半期にサービスデザイン部のグループミッションの一貫として、私を含む4名で改善・品質担保チームになり、以下のミッションを行うことになりました。（グループミッションについては、社内横断のデザイン活動を始めるまででまとめられています。）

ミッション

• デザイン制作をスピードアップさせ、全体的な作業の効率化を実現する。
• あるあるな手戻り・イライラする作業・一貫性のないデザイン等に対し業務プロセスの見直しやフレームワークの導入等によって改善を行う

「コーディング手法を全社で浸透させることで、迷いや手間を減らして、他作業時間の確保や、横への移動をしやすくする」
↑
（※チームで最終的にこのようにまとめてみました。）

現状抱えている課題の抽出

どこに課題を抱えているのかまずは、コーディングを担当しているデザイナー（新卒）へヒアリングを行いました。
内容は以下（いくつかピックアップ）

• どこに時間がかかるか
  • class名などの命名
  • パーツの名前のつけ方
  • BEMとは
  • どのファイルに書くべきか
  • 全体のCSS設計
  • などなど…
• コーディングの進め方
  • 全体のデザイン作ってから？コンポーネントごと？
• などなど…

アクション項目決定

半年で行うアクション項目を以下に設定しました。

• 勉強会・読書会で知識を深める
• コーディング規約作成（メディアの基準を作る）
• コンポーネントカタログ作成アップデート
• class名サンプル集のアップデート
• コード規約、コードレビュー文化社内浸透させる

というわけで、アクション第1弾として勉強会を行うことになりました！
フロントエンド勉強会ここに誕生！

弊社でも以前に何度かフロントエンド勉強会を行っていましたが、
推進者やフロントエンドに精通していた社員の退職などに伴い、デザイナー大半にノウハウが行き届いていないという現状でした。

選定理由

• 弊社で行っているBEM手法の参加予定者の理解が曖昧だった
  • 新卒研修でつかみだけは教えていたし理解はしていたが、その後特に個人での深掘りはしていなかった
• class名の決め方や付け方に時間がかかっていた
  • 同じ課題を複数者が抱えていた

目的

1. フロントエンドで時間がかかる箇所をなるべく取り除き、業務効率化を目指す
2. 1の課題解決の目的の一環として、全社コーディング規約を作成する
3. 2を理解できるくらいの知識を得る

最終的なゴール（アクション項目の）

目的が達成できることで、現在の新卒1年目が次の新卒へコーディングについての説明（コンポーネント設計やBEMについて）ができる。

フロントエンド勉強会の内容

（※お見せできる内容だけチラチラと紹介します）

全5回（各2時間ずつ）合計10時間業務時間中に開催しました 弊社にある自販機を使ってBEMの説明しましたw
意外と使えたw

座学 – 内容（2回分）

（※実際の講義では、質問などに応じて以下内容を一部変更しています）

事前知識として欲しいものや、実際に弊社媒体で起こっている事例などをできるだけわかりやすくまとめました。

• なぜCSS設計が必要なのか
  • CSS設計以前
    • 複雑かつ詳細度無視のセレクタ
    • はびこるimportant
  • 打ち消し
  • カスケーディング
    • 優先度
      • スタイルシートの優先度の話
      • ブラウザのスタイルシート（一番下）、製作者スタイルシート、ユーザースタイルシート
    • 詳細度
      • （例題出してみる）
    • 継承
• 設計手法の紹介
  • 良いCSSについて
    • 予測しやすい、再利用しやすい、保守しやすい、拡張しやすい
  • OOCSSとは何か
  • なぜBEMなのか
    • BEMとは
    • Mind BEMding
  • （SMACSSとは何か）
    • SMACSSとは
    • なぜSMACSSじゃないのか
  • ITCSS
  • その他の考え方（FLOCSS、ECSSとか）
• 現在のうちの実装例
  • 媒体1
    • ファイルが探せない
  • 媒体2
    • ページに引きずられた設計
• class名つけ方（一例として）
  • 接頭辞のお話（l-〇〇, c-〇〇, u-〇〇）
  • コンポーネントの形 + 目的（.card .card-round）
• その他に気を付けたいこと（実装の話）
  • ブラウザ間で見え方が違う
    • CSSリセット
  • ショートハンドプロパティ
  • マージンの相殺
    • マージンは誰に持たせるべきか
  • widthの持ち方
    • 可変サイズのコンポーネント
    • 固定サイズのコンポーネント

手を動かす会（3〜5回）

目的

• 適切にコンポーネントを切り出せるか
  • どこからどこまでがそのコンポーネントなのか
  • コンポーネントの粒度
  • 単一のコンポーネントにするべきか、コンポーネントの中にコンポーネントが入ってるパターンにするべきかを適切に判断できるようになる

内容

• 座学で得た知識を元に、サンプルサイトからコンポーネントを適切に抜き出し、class命名するまでを行う
• ハサミでコンポーネントを切り出す
• 抜き出したものをまとめて、命名

大変だったこと

• 推進者が4人で資料作成を進めていく中で、コンポーネントのサンプルとなる見本を作ろうと思ったが、コンポーネントの作り方、考え方の認識がバラバラだった。。
  • 見本2つほど用意したが、認識合わせで2時間くらいかかったのはここだけの話
• CSS設計が必要になるシチュエーションなど、参加者へ伝えること
  • HTML&CSSはコードをわちゃっと書いても画面にも表示されるので

今後

勉強会までは無事完了しました。（理解できるようになったはず…）
今後は、コード規約の項目を作成を行っていきます。