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

はじめに

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

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

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

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

Ant Designとは？

中国のAlibabaが開発したUIフレームワークです。日本だとMaterial UI(MUI)やChakra UIがメジャーであまり聞かないかもしれません。

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

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

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

環境構築

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

ターミナルを使いたくない方はCodeSandboxで2クリックでReactの環境構築ができるのでそちらを使用してみて下さい。

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

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

$ npm install antd

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

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

App.jsx

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

ヘッダーの要素を準備

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

今回は検索バーにinput、タイトルにTypography、プロフィール画像にAvatar、各種アイコンにIcon、グリッドシステムにRow,Colを使います。

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

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コンポーネントが表示されてると期待するのですが、恐らく思っていたのとは違う感じで表示されるかと思います。

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

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

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'; 

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

スタイリング

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

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

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;

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

最後に

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

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

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