[入門]Ant Design 完全に理解した

https://qiita.com/advent-calendar/2021/easyeasy

# はじめに
この記事はEasy Easyというコミュニティの「完全に理解したTalk Advent Calendar 2021」12/12の投稿記事です。

>完全に理解した、それはまさに「分かった気になったくらい」の理解できたくらいのもの！
「覚えたての知識」や「この知識なら自信出てきた！」みたいなものから「あれ、ちょっと怪しいかも？」となり始めた知識まで自分が話したい知識をなんでもゆるーく話をしてみませんか！
みんなにOUTPUTして、是非自分の実力を高めちゃいましょう！

今回のアドベントカレンダー以外にも毎月オンラインでLT会を開催されているので、もし興味を持ってもらえた方はぜひそちらも参加してみてください。

今月は２周年ということで運営さん達がビックリするような企画を持ってきてくれるらしいです!!!

https://easy2.connpass.com/event/232105/


# Ant Designとは？

中国のAlibabaが開発したUIフレームワークです。日本だと[Material UI(MUI)](https://mui.com/)や[Chakra UI](https://chakra-ui.com/)がメジャーであまり聞かないかもしれません。

しかしグローバルで見ると人気なUIフレームワークの1つなのです。

| フレームワーク |   Weekly Downloads    | 
|---:|-------------|
|Ant Design  |          58.2k  |   
|  MUI |     43.0k        |  
|Chakra UI  |       16.3k   |     



今回はハンズオン形式でAnt Designを使用しながらQiitaのヘッダーを作って「完全に理解した」を目指します！


![スクリーンショット 2021-12-12 18.28.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/2a969a95-0871-d9c0-3ca0-541acf08f8bc.png)




# 環境構築
手早く環境を作るために```create-react-app```を使用します。

ターミナルを使いたくない方は[CodeSandbox](https://codesandbox.io/)で2クリックでReactの環境構築ができるのでそちらを使用してみて下さい。

```
$ npx create-react-app sample-antd
$ cd sample-antd
```

一緒にAntDesignもインストールします。

```
$ npm install antd
```


一旦試しに```npm start```立ち上げてみましょう。起動したら```http://localhost:3000```で下の画像のようになれば問題ありません。


![react.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/cbe4103e-1e5e-ecb6-7c52-ed8906754fd4.png)


次にデフォルトで作成される```scr```ディレクトリ内の```index.js```と```App.js```以外削除して、それに応じて```App.js```を以下のように修正します。

```jsx:App.jsx
function App() {
  return (
    <div className='App'>
      <header className='App-header'>
      </header>
    </div>
  );

```

# ヘッダーの要素を準備

そしたらヘッダーに必要なタイトルや検索バー、アイコンを準備します。

今回は検索バーに[input](https://ant.design/components/input/)、タイトルに[Typography](https://ant.design/components/typography/)、プロフィール画像に[Avatar](https://ant.design/components/avatar/)、各種アイコンに[Icon](https://ant.design/components/icon/)、グリッドシステムに[Row,Col](https://ant.design/components/grid/)を使います。

それらを使用して要素のみを洗い出します。

```jsx:App.jsx
import {
  BellFilled,
  CaretDownOutlined,
  FormOutlined,
  UserOutlined,
} from '@ant-design/icons/lib/icons';
import { Avatar, Col, Input, Row, Typography } from 'antd';

const { Title, Text } = Typography;

function App() {
  return (
    <div className='App'>
      <header className='App-header'>
        <div>
          <Title>Qiita</Title>
          <div>
            <CaretDownOutlined />
            <Input placeholder='キーワードを入力' />
          </div>
          <div>
            <div>
              <FormOutlined />
              <Text>
                投稿する
              </Text>
            </div>
            <div>
              <BellFilled />
            </div>
            <Avatar size='large' icon={<UserOutlined />} />
          </div>
        </div>
      </header>
    </div>
  );
}

export default App;
```

これで再度サーバーを立ち上げてみましょう。いい感じにAntDesignのUIコンポーネントが表示されてると期待するのですが、恐らく思っていたのとは違う感じで表示されるかと思います。

(大体こんな感じですかね↓)

![スクリーンショット 2021-12-12 19.01.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/9f53dabf-d9c7-ee8f-8dff-c70f4f2fdab2.png)


これが起きる理由は、今はantd.cssを適用してないからです。これを使用しないとUIライブラリのメリットを享受できないので、忘れずに挿入しといて下さい！

```diff_jsx:App.jsx
import {
  BellFilled,
  CaretDownOutlined,
  FormOutlined,
  UserOutlined,
} from '@ant-design/icons/lib/icons';
import { Avatar, Col, Input, Row, Typography } from 'antd';
+ import 'antd/dist/antd.css'; 
```

そうするといい感じにコンポーネントが表示されるようになりました。

![スクリーンショット 2021-12-12 19.15.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/7d159ecd-a3c6-30d1-ab28-b0b568a7ade3.png)

# スタイリング

後はここからドキュメントを参照しながらCSSを適用させていきます。AntDesignで用意されているAPIを使用しながら且つない場合はそれぞれにスタイルを当てていきます。

今回個別のCSSをインラインスタイルで書いています。現場では```lessファイル```や```styledComponents```を使い分けてると思うのですが、今回はあくまでAnt Designを使用してみることに焦点を置いてるのでご了承ください🙇‍♂️

```jsx:App.jsx
import {
  BellFilled,
  CaretDownOutlined,
  FormOutlined,
  UserOutlined,
} from '@ant-design/icons/lib/icons';
import { Avatar, Col, Input, Row, Typography } from 'antd';
import 'antd/dist/antd.css';

const { Title, Text } = Typography;

function App() {
  return (
    <div className='App'>
      <header className='App-header' style={{ backgroundColor: '#54C500' }}>
        <Row align='middle' style={{ height: '50px' }}>
          <Col offset={4}>
            <Title
              level={3}
              style={{
                color: 'white',
                marginBottom: '0',
                paddingRight: '5px',
              }}
            >
              Qiita
            </Title>
          </Col>
          <CaretDownOutlined
            style={{ color: 'white', backgroundColor: '#3F8001' }}
          />
          <Col span={6} style={{ paddingLeft: '10px' }}>
            <Input placeholder='キーワードを入力' />
          </Col>
          <Col
            offset={6}
            style={{
              color: 'white',
              backgroundColor: '#3F8001',
              padding: '5px 10px',
            }}
          >
            <FormOutlined />
            <Text strong style={{ color: 'white' }}>
              投稿する
            </Text>
          </Col>
          <BellFilled
            style={{ fontSize: '18px', padding: '15px', color: 'white' }}
          />
          <Avatar
            shape='circle'
            style={{ backgroundColor: 'gray' }}
            icon={<UserOutlined />}
          />
        </Row>
      </header>
    </div>
  );
}

export default App;
```

最終的にこんな感じになっていたら完成です。

![スクリーンショット 2021-12-12 21.13.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/481470/cb454130-a654-aad0-93f0-c46466835fa3.png)


# 最後に
今回はグローバルでは人気だけれども日本ではあまり使用されていないAntDesignについてハンズオン形式で書いてみました。
(個人的にはMUIやChakra UIよりもドキュメントが読みやすいと感じていて好きです。)

今後も他のUIライブラリや他の技術についてアウトプットしていきたいと思います。

最後まで読んで頂きありがとうございました！