「Atomic Design ～堅牢で使いやすい UI を効率良く設計する」[2018, 五藤佑典]を読みました。
感想
フロントエンドのデザインパターンの一つの「Atomic Design」について、React を用いながら実践的なソースコードとともに解説をおこなう本です。
著者の五藤佑典さんが Abema TV で Atomic Design を導入して行った経験を元に、執筆された本です。
この本を読んだ理由は、React を用いた Web アプリの作成時にディレクトリ構成や共通項の抽出などについて悩んだ経験があったからです。
第１章で、UI や JavaScript、SPA などのフロントエンド技術に取り巻く歴史についての解説から本書は始まります。第２章で SPA からコンポーネント・ベースの UI 開発によるメリットや導入方法、要点などについてまとめられます。そして第３章で AtomicDesign の解説、第４章で JavaScript と React を用いた実装方法の解説、第５章でコンポーネントテストの解説、第６章で開発現場における導入ポイントについてまとめています。
ページ数とソースーコードが多いため、途中で読み進めるのが難しい箇所もありますが、React を触ったことがある人なら、読み進めることはできそうです。（まったく触ったことがなければ難しそう）。
良かった点
良かった点は３つあります。
１つ目は具体的な実装方法、メリット、思考方法について記述していることです。
Atomic Design を調べても、Atoms、Molecules などの用語はでてきますが、踏み込んだ内容の記事はないように思われます。この本は具体的な実装方法、改善方法でボトムアップに進めていくので、今後導入していくときに参考になる箇所が多いと思います。
２つ目はコンポーネントテストについての豊富な情報です。
React に限らずのフレームワークの解説書や動画は数多くありますが、テストについて詳細に記述している本は少ないと思います。その中で、この本では UI テストに必要な様々なテストを列挙し、それぞれのテスト方法や利用するライブラリを実際に使っているため、他の書籍と比較して大きな優位点に感じました。
３つ目はデザイナーやチームにおける Atomic Design の導入方法やメリットの紹介です。
Atomic Design は個人開発では、規模感や他人が書いたソースコードがないことから、メリットを感じる場面があまりないような気がします。そこで、本書の６章目で実際の経験を元にした実務における活用方法はとても貴重な内容だと思いました。
悪かった点
悪かった点は２つあります。
１つ目は誤字が多いことです。Amazon レビューにもある通り、誤字が多く評価を下げている要因になっています。 出版社の正誤表にも載っていない誤字が多くありました。
２つ目はソースコードが zip 管理であることです。章ごとにブランチを切ったり、テストを実行することで、少なくともソースコード誤字は減らせたのではないでしょうか。
注意点
本書は React で作成されているので、Vue.js で実装したい人は置き換える必要があります。
グローバルな状態管理には Redux を使っていて、普段 useReducer や useContext を使っている人も置き換える必要があります。
また、デザインカンプから Atomic に分割するには、自分で何個か作成したり、参考になるサイトを見つける必要があると感じました。
感想まとめ
数少ない、Atomic Design の実践方法についてまとめられた本です。（他にあるのでしょうか？）。
具体的なソースコードが載っているので、具体的な Atomic Design を実装したい人にはうってつけだと思います。Atomic Design 以外にもテストや導入方法については一読の価値があります。
上記の悪かった点、注意点は改訂版などがでなければ修正が難しいため、合わない人は購入を避けた方がいいかもしれません。
概要
はじめに
- UI をより効率良く開発したい
- コンポーネント・ベースで，確実で効率が良い開発を実現する
第１章 UI 設計における現状の問題を振り返る
UI、JavaScript、フレームワークについての解説です。
とても簡潔にまとまっていてわかりやすいと思います。
より React も交えた深堀をしたのであれば、りあクトという書籍がおすすめです。
第２章 コンポーネント・ベースの UI 開発
この章は一言で言えば、「なぜ、コンポーネント・ベースで UI 開発するのか」です。
開発や技術的なメリットについての説明がされています。
第３章 Atomic Design による UI コンポーネント設計
Atomic Design の概要についての解説です。
特徴、メリットの他、関心の分離や階層を分けることによる依存関係の分離なども記述されており、クリーンアーキテチャのような思想を学べます。
第４章 UI コンポーネント設計の実践
Atomic Design の具体的な実装方法です。
デザインカンプを Atomic Design 的にわけるところから始まり、最も小さな Atomic を作り、組み合わせて、Molecules、Organisms を作るようにして、ボトムアップな解説がすすんでいきます。
章のページ数が多いので、一気にやらないと忘れてしまうかもしれません。
第５章 UI コンポーネントのテスト
テストについての解説です。
リグレッションテスト、ロジックテスト、インタラクションテスト、パフォーマンステスト、インクルーシブユーザービリティテスト、などと数多くのテスト手法についてのテスト方法が記載されています。
逐一やるのは大変なので、ある程度読み進めて個人開発の際にもう一度読みな直すなどが良いと思います。
第６章 現場におけるコンポーネント・ベース開発のポイント
デザイナーと働いたり、チームで並行して開発を進めるときのポイントについて書かれています。
個人開発では、Atomic Design はメリットを教授しづらいので、これらを意識した開発を進めたり、実際にデザインカンプを作る経験などをしたりすることで、多くのことを得られそうです。
