• ..

React Native

    React と AtomicDesign - Atom編

    HTML 要素と同じように < と > で囲んで使う要素は Atom

    <div><span> のようにある要素を組み上げるための部品が Atom です。 僕はよくstyled-componentsを使いますが、これで生成したコンポーネントは全て最小単位の部品で Atom に属すと考えれます。

    // FlexはAtom
    const Flex = styled.div`
      display: flex;
    `;
    // MyFormはAtom
    const MyForm = styled.form`
      /* ... */
    `;
    // MyInputはAtom
    const MyInput = styled.input`
      /* ... */
    `;

    これらはこのように使えます。

    <Flex>
      <MyForm>
        <MyInput />
      </MyForm>
    </Flex>

    Styled Components を使っていないなら単一要素の SFC と1対1で CSS ファイルを作成し管理するのがいいと思います。

    foo
     ├─ index.jsx
     └─ foo.css
    // atoms/index.js
    const Flex = props => <div className="atom-Flex" {...props} />;
    /* atoms/flex.css */
    .atom-Flex {
      display: flex;
    }

    属性値で見た目の情報を変える

    HTML の<input>readonlydisabledといった属性を渡すとスタイルが変わるようにaria-*data-*といった属性を振り、それでスタイルを振り分けます。

    const Flex = styled.div`
      display: flex;
    
      &[aria-orientation='vertical'] {
        flex-direction: column;
      }
    `;
    
    const FlexItem = styled.div`
      flex: 0;
    
      & + & {
        margin-left: 1em;
      }
    
      &[aria-label='main'] {
        flex: 0 1 1000px;
      }
    `;
    
    // <Flex>
    //   <FlexItem>...</FlexItem>
    //   <FlexItem aria-label="main">
    //     <Flex aria-orientation="vertical" />
    //   </FlexItem>
    // </Flex>

    使えそうなaria-*属性一覧

    追記 (2019-01) - 使えるaria-*属性一覧

    と思いましたが、要素にはもともとデフォルトでroleが割り当てられていて、このroleにこのaria-*は相応しくないというようなルールがあるようです。なので適当に上の属性を当てているとその辺りで Lighthouse のアクセシビリティのスコアが結構下がってしまいます。

    僕的にはaria-*を使ってのスタイル制御は分かりやすく管理しやすいと思っているので、ariadataに変えたもの(data-hidden)を今は使っています。