【Ant Design チートシート】初心者でも大丈夫！React + TypeScriptで手軽にデザインを作ろう！Ant Designの使い方

## はじめに  
こんにちは！Naoと申します。普段は<a href="https://corp.xincere.jp/" target="_blank" rel="noopener noreferrer">株式会社xincere</a>という会社でWebアプリケーションの開発をしており、特にReactやTypeScriptを使った開発に取り組んでいます。  
今回は、UIライブラリの **Ant Design** を使って、初心者の方でも簡単にデザインを作成できる方法をご紹介します！  

<a href="https://corp.xincere.jp/" target="_blank" rel="noopener noreferrer">株式会社xincere</a>では、実務未経験のエンジニアの方や学生エンジニアインターンを採用し一緒に働いています。
※ シンシアにおける働き方の様子はこちら

https://www.wantedly.com/companies/xincere-inc/stories

シンシアでは、年間100人程度の実務未経験の方が応募し技術面接を受けます。
その経験を通し、実務未経験者の方にぜひ身につけて欲しい技術力（文法）をここでは紹介していきます。

## 各内容へのリンク

- [Ant Designとは？](#ant-designとは)
- [Buttonコンポーネントの基本的な使い方](#buttonコンポーネントの基本的な使い方)
- [Selectコンポーネントの基本的な使い方](#selectコンポーネントの基本的な使い方)
- [Tableコンポーネントの基本的な使い方](#tableコンポーネントの基本的な使い方)

公式サイト: <a href="https://ant.design/" target="_blank" rel="noopener noreferrer">Ant Design</a>  

## Ant Designとは？  
Ant Designは、Reactに特化したUIコンポーネントライブラリです。  
今回は、**ReactやTypeScriptの基礎はわかるけど、Ant Designは使ったことがない**という方を対象に、Ant Designの使い方をわかりやすく解説します！

この記事では、**環境構築やライブラリのインストールが済んでいる**ことを前提に話を進めます。  
「とりあえず使ってみたいけど、どう使えばいいかわからない…」という方に、基本的なコンポーネントの使い方を中心にチートシートとして活用いただける内容になっています。ぜひ最後までご覧ください！

また記事内容については、公式サイトを読んだだけではわかりにくい部分や、実際に実装する中で気づいたポイントをまとめています。Ant Designを使ったプロジェクトに取り組む際に役立てていただければ幸いです。

具体的な実装方法については、本記事の例と合わせて、該当コンポーネントの公式ドキュメントを参考にしてみてください。

公式サイト: <a href="https://ant.design/" target="_blank" rel="noopener noreferrer">Ant Design</a>  

## 基本的なコンポーネントの使い方  

以下では、Ant Designを使ったボタン、グリッド、フォームの実装例を順番にご紹介します。これらを使いながら、実際のUIを作成していきましょう！

### Buttonコンポーネントの基本的な使い方  

Ant DesignのButtonコンポーネントは、直感的に使える便利なボタンUIを提供してくれます。**`type`**や**`size`**、**`color`** などのプロパティを指定するだけで、多彩なデザインを簡単に適用できます。

公式ドキュメントの説明だけでは分かりづらい部分もあるので、実際のコード例を使いながら解説します。

公式サイト: <a href="https://ant.design/components/button" target="_blank" rel="noopener noreferrer">Ant Design Documentation: Button</a>  

```tsx
import { Button } from 'antd'
import { type FC } from 'react'

type CustomFunction<TArgs = void, TResult = void> = (args: TArgs) => TResult

interface ButtonExampleProps {
  disabled?: boolean
  type?: 'primary' | 'dashed' | 'link' | 'text' | 'default'
  color?: 'default' | 'primary' | 'danger'
  size?: 'large' | 'middle' | 'small'
  customFunction?: CustomFunction
}

export const ButtonExample: FC<ButtonExampleProps> = ({
  disabled,
  type,
  color,
  size,
  customFunction
}) => (
  <Button
    disabled={disabled} // ボタンの活性/非活性を指定
    type={type} // ボタンデザインの指定
    color={color} // ボタンの色を指定
    size={size} // ボタンの大きさを指定 (defaultは`middle`)
    // クリック時に呼び出すメソッド (customFunction が定義されていない場合は何もしない)
    onClick={() => customFunction?.()}
  >
    Example Button
  </Button>
)
```

### Selectコンポーネントの基本的な使い方  

Ant DesignのSelectコンポーネントは、直感的で柔軟な選択式のUIを提供してくれます。**defaultValue** や **placeholder**、 **mode** などのプロパティを指定するだけで、多彩な機能やデザインを簡単に実現できます。

公式ドキュメントの説明だけでは分かりづらい部分もあるので、実際のコード例を使いながら解説します。

公式サイト: <a href="https://ant.design/components/select" target="_blank" rel="noopener noreferrer">Ant Design Documentation: Select</a>  

```tsx
import { Select } from 'antd'
import { type FC } from 'react'

interface CustomSelectProps {
  // 実際のvalue値に合わせる (呼び出し元でuseStateを利用すると使いやすい)
  defaultValue?: string
  selectedValue?: string

  // 選択肢として用意したいデータを配列で渡す (こちらも実際の値に合わせよう)
  selectOptions: { key: string; value: string; label: string }[]

  disabled?: boolean
  size?: 'large' | 'middle' | 'small'

  // こちらの引数も実際の値に合わせる
  handleOnChange?: (value: string) => void
  handleOnSelect?: (value: string) => void

  // CSSスタイリングはこちらで指定
  style?: { [key: string]: string }[]
}

export const CustomSelect: FC<CustomSelectProps> = ({
  defaultValue,
  selectedValue,
  selectOptions,
  disabled,
  size,
  handleOnChange,
  handleOnSelect,
  style
}) => (
  <Select
    defaultValue={defaultValue} // デフォルト値の設定
    value={selectedValue} // 選択された値を制御(useStateなどと組み合わせよう)
    disabled={disabled} // セレクトの活性/非活性を指定
    size={size} // セレクトの大きさを指定 (defaultは`middle`)
    // 選択が確定した時に呼び出される(基本的にはこちらを使用しよう)
    onChange={(value) => {
      handleOnChange?.(value)
    }}
    // 選択をクリックした時に即時実行
    onSelect={(value) => {
      handleOnSelect?.(value)
    }}
  >
    {selectOptions.map(({ key, value, label }) => (
      <Select.Option key={key} value={value} style={{ ...style }}>
        {label}
      </Select.Option>
    ))}
  </Select>
)
```

### Tableコンポーネントの基本的な使い方  

Ant DesignのTableコンポーネントは、直感的で柔軟なUIを提供します。**columns** や**dataSource** といったプロパティを指定するだけで、多彩な機能やデザインを簡単に実現できます。また、Tableコンポーネントはカスタマイズ性が高いため、別の記事でさらに詳しく解説する予定です。

公式ドキュメントでは分かりづらい部分もあるかと思いますので、実際のコード例を交えながら解説していきます。

公式サイト: <a href="https://ant.design/components/table" target="_blank" rel="noopener noreferrer">Ant Design Documentation: table</a>  

```tsx
import { Table, type TableColumnsType } from 'antd'
import { type FC } from 'react'

interface CustomTableType {
  /** key */
  key: number

  // 以下はデータソースとして保持したいデータを設定します。(仮にユーザーに関するテーブルとします)
  /** ユーザー名 */
  userName: string
  /** 性別 */
  gender: string
  /** 年齢 */
  age: number
  /** メールアドレス */
  email: string
}

export const CustomTable: FC = () => {
  // 下記でカラム(テーブルで表示される値)を設定します。
  // 今回は「key」と「メールアドレス」はデータとして保持しますが、表示はしません。
  const columns: TableColumnsType<CustomTableType> = [
    {
      title: 'ユーザー名',
      dataIndex: 'userName',
      key: 'userName',
      align: 'center' // (left | right | center) カラムの表示位置を設定します(defaultはleftです)
    },
    {
      title: '性別',
      dataIndex: 'gender',
      key: 'gender',
      align: 'center' // (left | right | center) カラムの表示位置を設定します(defaultはleftです)
    },
    {
      title: '年齢',
      dataIndex: 'age',
      key: 'age',
      align: 'center' // (left | right | center) カラムの表示位置を設定します(defaultはleftです)
    }
  ]

  // テーブルが保持するデータをオブジェクトの配列で指定します。
  // 配列の数だけ、テーブルの内容が表示されます。
  const dataSource: CustomTableType[] = [
    {
      key: 1, // keyについては使用頻度が高いので、DBから値を取得する場合、主キーなどを設定するといい
      userName: 'テスト太郎',
      gender: '男性',
      age: 32,
      email: 'taro@example.com'
    },
    {
      key: 2, // keyについては使用頻度が高いので、DBから値を取得する場合、主キーなどを設定するといい
      userName: 'パソ子',
      gender: '女性',
      age: 24,
      email: 'pc@example.com'
    }
  ]

  return (
    <Table
      columns={columns}
      dataSource={dataSource}
      // こちらについては、特に設定しなければデフォルトのページネーションが実装されますが、別途ページネーションコンポーネントが用意されているので、
      // そちらを利用すると使い勝手がいいと思っています。
      pagination={false}
      // large / middle / smallから選択できます。(default値は「large」)
      size={'middle'}
    />
  )
}

```

# 記事のまとめ

この記事では、Ant Designの基本的なコンポーネントである **Button**、**Select**、**Table** の使い方を詳しく解説しました。これらのコンポーネントは、React + TypeScriptでの開発において非常に役立つツールです。Ant Designを使うことで、迅速に洗練されたUIを構築することができます。

今後、さらに **Tableコンポーネント** の詳細な使い方や、その他のAnt Designのコンポーネントについても解説する予定です。これにより、Ant Designをより深く活用できるようになるでしょう。

この記事が、あなたのReact + TypeScriptのプロジェクトに役立つことを願っています！

## その他

https://naminori.xincere.jp/

https://portfolio.xincere.jp/