React Native

Atomic Designってなんですか!?

React Native
この記事は約4分で読めます。

ReactNativer(?)の皆さん、こんにちは。
我々が普段使っているプログラミング言語は、それぞれ思想がございます。
僕が好きなRubyという言葉は「ユーザーが触るとコードがごちゃつくからこっちでルール決めとくわ」という優しいジャイアンみたいな考え方を持っています。
レールから外れると、文法的にはあってても「あ、うちではそういう書き方認めてないから」と言ってきます。

さて、最近僕はReactNativeを触り始め、Atmic Designという概念を知ったので、どういったものなのかを解説します。

この記事を読むのに向いてる人

・Atmic Designについて知りたいけど、現状よく分からない開発者
・素のコーディングと何が違うのか、とりあえず知りたい人

なぜAtomic Designは必要か?

Aさん「ここコンポーネント分けしてください」
Bさん「え、ちゃんと分けてるじゃないですか。」
Aさん「何だその粒度!?片面だけ網目が粗いザルか!?

てなわけで、実装はどうしても個々人のクセが出る部分なので、そこは統一しようぜということで生まれました。
RubyとかPHPみたいに規約とルールだったらどっちを優先するんでしょうか?
コンポーネント処理してねくらいしか書いてなかった….。

設計原則 – Reacthttps://ja.reactjs.org

Atomic Designの思想

Atomic Design by Brad Frosthttps://atomicdesign.bradfrost.com

そも、UIデザイン手法にモジュラーデザインという概念があります。
モジュラーデザインは構成要素を集めて、組み合わせて完成品を作る考え方です。
車の部品だけ作って、あとで組み立てる発想と一緒ですね。

これを元に編み出された考え方が「アトミックデザイン」になります。

何が変わったのか

従来の考え方は、とりあえず全部ページを作ってから分け方を考えるものでした。
しかしこれでは個別のコンポーネントに要する役割が独自のものになり、再利用が難しかったのです。
これに対しアトミックデザインは、最初に最小の単位で作り、それを組み合わせて作っていく手法でした。
これによってそれぞれが独立した機能を持ち、再利用性をぐんと上昇させることに成功しました。

もっと詳しく!Atmic Design

画像はアトミックデザインに沿った粒度の管理です。


Atoms / 原子

UIを構成する最小単位(ボタン/カラーパレット/フォント/アニメーション/ラベル/インプット)

Molecules / 分子

複数の原子を集めて作ります。

[例]ラベル+インプット+ボタン = 入力ボタン

Organism / 有機体

原子と分子を集めて作ります

[例]ラベル+検索ボックス+ナビゲーション = ヘッダー)

この辺でやっと機能するものになります。

Template / テンプレート

原子と分子と有機体を足すとテンプレートになります。

[例]ヘッダー+ボディ+フッター = テンプレート

このテンプレートでやっとデザイン的にラフ画のような扱いになります。
システム的に言うとワイヤーフレームとほぼ同義です。
この時点でUIが崩れている場合は修正していくことになります。

Pages / ページ

テンプレートに独自のコンテンツを入れたものがページです。
さまざまな情報が入力でき、それで画面をレンダリングしていきます。

メリット&デメリット

[メリット]
・原理原則(原子・分子など)は中学生の理科知識でも理解できる
・シンプルに保守、メンテナンスが楽
・テンプレート単位の再利用性が高い
・命名規則がわかりやすい ….etc

[デメリット]
・ファイル分割の粒度の意識統一が必要
・システムが複雑になりやすい、必然的にコードソース量が多くなる

参照

https://offers.jp/media/design/a_860
https://uxdaystokyo.com/articles/glossary/atomic-design/
https://www.creativevillage.ne.jp/94262
https://qiita.com/akashixi/items/63c63792f0b6e457b3e5
https://www.fiorano.com/jp/blog/microservices/atomic-composite/