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/