整理整頓

思考を整理するためにアウトプットするブログ。

読書 Atomic Design ～堅牢で使いやすいUIを効率良く設計する 前半まとめ

React デザイン 読書

作業概要

Atomic Design ～堅牢で使いやすいUIを効率良く設計するを読んで、背景や基礎知識など3章までの内容をまとめた。記事のボリュームが大きくなってきたので、4~6章の実践編は時間に分けよう。

作業時間/見積：4h / 4h

学び

  • デザインとエンジニアリングの境界はますます曖昧になってきている
    • 実装を見据えたデザイン/デザインの全体を理解した実装、ができるチームじゃないと使いこなすの大変だなぁという所感
      • デザインは全体から細部へ落とし込んでいくトップダウンのワークフロー
      • エンジニアリングは細部に焦点を充て、どう他と関わらせるか考えるボトムアップのワークフロー
    • チームメンバーが等しく知識を持っている前提となるので啓蒙活動が大変そう
      • 実際の取り組みの話聞いてみたい&読んでみたい
  • UIコンポーネントの設計するときに意識すること
    • 単一責任の法則：1コンポーネントが責任を持つ課題は1つまで
    • 関心の分離：コンポーネントが目的別に分離されていれば、変更したい目的のものだけを修正すれば済む
      • Atomic Designはそのスタート地点
  • Reactを学ぶ意味が明確になった

メモ

  • UI設計が抱えてきた問題
    • 1:javascriptの大規模開発が難しかった
      • モジュールを切り分けられなかったのが原因だが、最近は改善されてきている
    • 2:CSSが破綻しやすい
    • 3:スタイルガイドがプロダクトから乖離する
      • プロダクトの成長とともに管理する必要があるが、放置されてしまう
    • 4:デザインカンプで表現できないものを求められる
      • レスポンシブやインタラクションなど
      • 結果、設計と開発でギャップが生まれてしまう
    • 5:デザイナー不在の現場がある
      • 汎用的な課題はフレームワークで解決できるように、デザイン・パターンを再利用できるように運用する
      • サービスのコアとなるような複雑な課題は解決できない
    • 6:SPA(Single Page Application)が普及したことでフロントエンド・フレームワークの重要性が高まっている
  • コンポーネント・ベースの開発を学ぶ意味
    • 開発者へのメリット
      • 複雑なUIを確実かつ堅牢に組み上げられる
        • 各UIが独立しているので干渉するリスクが減る
        • 各コンポーネント毎に実装やテスト、メンテナンスなどができる
      • 開発を効率化する
    • ユーザーへのメリット

  • React, webpack, CSS Modulesを学ぶ意味

  • 未調査

    • GraphQL
    • プロトタイプベース言語
    • create-react-appがやってること
    • yarn test用いた開発フロー

学習計画