5/10 学習の報告17
やったこと
・英単語400
・英文日記
・オンライン英会話
・Grammar in use 7こま
・React コンポーネント設計について。
・React コンポーネント間のPropsの受け渡しについて。
今日はコンポーネント設計でAtomic Design について学びました。
Atomic Designとは？
Atomic Designとは画面を構成する要素を5つの階層に分けて、それらの組み合わせで画面を作るという構造のことです。
具体的には
.Atoms
.molecule
.Organism
.Templates
.Pages
の5つで分ける行為のことです。
まず最初にAtomsからみていきましょう。
Atomsとは英語から見てわかる通り化学の原子からきてる名前です。
UIのコンポーネントの最小単位のことで、それ以上分解できないもののことです。
代表例はButton formなどでしょうか。
次にMoleculeです。
moleculeはAtomsのUIコンポーネントの組み合わせのことで、先ほどのButtonとformの組み合わせなどです。
次はOrganismeを見ていきましょう。
これはAtomsとMoleculeの組み合わせです。
次にTempletesがきます。
これは複数のPagesの使い回すことを想定したOrganismeの集まりのことです。
最後にPages
これは実際のページですね。
以上です。
確かにこういうきっちりとした法則に従ったほうがReactのコンポーネントデザインがやりやすいのかなと思います。
また、デザインの基本だと思うので、デザイナーとの意思疎通もできるのではないでしょうか。
