「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」を読んだ
初めに
もともと実務でやっていたプロジェクトのコンポーネントが結構でかくなっていて、アトミックデザインに興味を持っていました。 この本自体は 2018 年のものなので決して新しくはないのですが、アトミックデザイン自体の考え方は変わっていないと思うので、まだまだ読む価値のある良い本だと思いました。
今から読む場合に気をつけること
React やその他のツールについては情報が古くなっている可能性があります。例えば React のフックは当時はまだリリースされておらず、React のクラスコンポーネントを使用しています。 あくまでアトミックデザインについて学ぶということを目的として、紹介されているツールなどは個別に現状を調べるのが良いと思います。
読んで考えたこと
内容の詳細に関しては本を読んでみてくださいなと。
ポジティブ
小さくすることで、再利用ができる、並行して開発ができる、問題の特定がしやすいなどは、Atomic にかかわらず小さく作成することで得られる恩恵だと思いました。 ルールが決まっているとチームが大きくなっても共通認識をもった上で開発できるのは良い点だと思っています。
またコンポーネント設計のポイントとして、単一責任の法則と関心の分離が挙げられていましたが、これに関してはプログラミング全体に共通する内容ですよね。 本の中でも紹介されていたのですが、良いところだけ取り入れるという考え方もあり、取り入れられそうなところからやっていくのはありだなと思います。
ネガティブ
最初に読んだ感想としては、ボタンから細かく作っていき、階層をちゃんと5つに分類していくのをチームで行うのが大変そうだと感じました。 開発スピードが求めれる時は UI フレームワークに乗っかってしまって、Atoms とかはほとんど UI フレームワークのコンポーネントを使うようにしたいです。
なんで自分がアトミックデザインにそこまでポジティブな印象じゃないのかなと思ったのですが、この記事を読んでなんとなくわかりました。
単純に今までいた現場にアトミックデザインを導入してもうまくいくイメージがなかったからですね。 結局は流行ってるから取り入れるというよりも、デザイナーとちゃんと対話をしてどうやっていくのかを決めていく必要があるのかなと思いました。 もともとアトミックデザインをエンジニア目線でしか考えていなかったので、デザイナー目線で考えたりユーザー目線で考えたりする機会ができて良かったです。
Bootstrap などの UI フレームワークを使う場合
本の中の説明は全て自前でボタンからアイコンの表示までを作るということでしたが、Bootstrap や Bulma を使う場合にどうするのがスタンダードなのでしょうか。そもそも Atoms から作るのだから使わないのか？ UI フレームワークについては少し記述があり、UI フレームワークで解決できるものは、あくまで汎用的なデザイン課題だけであって、サービス特有のデザイン課題を解決はできないとのことでした。 そういう意味では、UI フレームワークを使用する場合にはサービス特有のものだけ Atoms から作成すれば良さそうです。
前の職場では Buefy を使っていたのですが、実際にアトミックデザインを取り入れるとしたら、Atoms はかなり少なくできそうです。 基本は Buefy のコンポーネントを使用するとして、必要に応じて Buefy のコンポーネントをラップしたコンポーネントを作成したり、一部自前で用意するという感じでしょうか。 Molecules と Organisms に関しては、Buefy のコンポーネントを組み合わせて作るという感じになるのかな。
デザインの自由度が下がるので、ここら辺はエンジニアだけでどうするか決めるというよりはデザイナーと対話して落とし所を決めていく必要があるのかなと思います。
この後何をやるか
React で 1 つサンプルのアプリを作る予定なので、その際にアトミックデザインで作ってみようかと思っています。 最初は厳密にアトミックデザインとして 5 つに分けてみて、良いところ悪いところを感じてみたいです。
