ReactのAtomicDesignについて学ぶ

学んだこと

AtomicDesign とは

• デザインシステムの一つ
• 画面要素を 5 段階にわけ、組み合わせることで UI を実現する
• コンポーネント化された要素が画面を構成しているという考え方
• React,Vue 用ではない
• モダン JS と相性が良い
  • React などと組み合わせると、コンポーネント分割に秩序が生まれる。

5 段階のコンポーネント

• Atoms
  • 原子
  • 最も小さくそれ以上分解できない要素
    • (例)Twitter
      • ボタン
      • ツイート入力テキストボックス
      • アイコンなど
• Molecules
  • 分子
  • Atom の組み合わせで意味を持つデザインパーツ
  • (例)Twitter
    • アイコン+メニュー名
    • プロフィール画像+テキストボックス
    • アイコンセット
• Organisms
  • 有機体
  • Atom や Molecule の組み合わせで構成される単体である程度の意味を持つ要素群
  • (例)Twitter
    • ツイート入力エリア
    • サイドメニュー
    • 1 つのツイートエリア
• Templates
  • テンプレート
  • ページのレイアウトのみを表現しする要素(実際のデータは持たない)
  • (例)Twitter
    • サイドメニュー
    • ツイートエリア
    • トピックエリア等のレイアウト情報
• Pages
  • ページ
  • 最終的に表示される 1 画面
  • (例)Twitter
    • ページ遷移毎に表示される各画面

Atom の作成

• 今回は Button の Atoms を作成する。

前提

• react-router-domとstyled-componentsの 2 つのライブラリを使用するため、インストールする。

react-router-dom のインストール方法

• 前提として、StackBlitz の React プロジェクト作成後の環境では動作できない。必要なライブラリのインストールやライブラリのバージョンをダウングレードする必要がある。

  • ReactRouter バージョン5.2.0をインストールする。
    • npm install react-router-dom@5.2.0
  • ReactRouter のバージョンに伴い、React と React-dom をダウングレードする必要がある。
    • npm install -save react@17.0.1 react-dom@17.0.1

• 上記対応後、main.jsxのエラーを潰す。

  • エラーを潰す為下記のコードに置き換える。

import React from "react";
import ReactDom from "react-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDom.render(<App />, rootElement);

styled-components のインストール方法

• コマンドラインにてnpm install --save styled-componentを実行し、インストールを行う。

Atoms の作成

BaseButton.jsx

• ボタンのベースとなる CSS を作成。
• Button を作る場合は BaseButton を呼び、CSS を上書きするようにする。

import styled from 'styled-components';

export const BaseButton = styled.button`
  color: #fff;
  padding: 6px;
  border: none;
  outline: none;
  border-radius: 9999px;
  &:hover{
    cursor: poiner;
    opacity: 0.8;

  }
`;

PrimaryButton.jsx

• PrimaryButton の定義と、BaseButton の CSS に背景色を上書き。
• CSS の上書きはstyled(CSSの変数名)で CSS の上書きを行うことができる。

import styled from 'styled-components';
import { BaseButton } from './BaseButton';

export const PrimatyButton = (props) => {
  const { children } = props;
  return <SButton>{children}</SButton>;
};

const SButton = styled(BaseButton)`
  background-color: #40514e;
`;

SecondaryButton.jsx

• PrimaryButton と同様 SecondaryButton の定義と、BaseButton の CSS を背景色のみ上書き。

import styled from 'styled-components';
import { BaseButton } from './BaseButton';

export const SecondaryButton = (props) => {
  const { children } = props;
  return <SButton>{children}</SButton>;
};

const SButton = styled(BaseButton)`
  background-color: #11999e;
`;

App.jsx

• 上記で作成したPrimaryButtonとSecondaryButtonを呼び出し。
• ほとんどデザインは一緒だが、背景色が異なる状態でボタンが表示される。

import { BrowserRouter, Link } from 'react-router-dom';
import './App.css';
import { PrimatyButton } from './components/atoms/button/PrimaryButton';
import { SecondaryButton } from './components/atoms/button/SecondaryButton';

export default function App() {
  return (
    <div className="App">
      <PrimatyButton>テスト</PrimatyButton>
      <SecondaryButton>aaaa</SecondaryButton>
    </div>
  );
}