はじめに
こんにちは！Naoと申します。普段は株式会社xincereという会社でWebアプリケーションの開発をしており、特にReactやTypeScriptを使った開発に取り組んでいます。
今回は、UIライブラリの Ant Design を使って、初心者の方でも簡単にデザインを作成できる方法をご紹介します！
各内容へのリンク
公式サイト: Ant Design
Ant Designとは？
Ant Designは、Reactに特化したUIコンポーネントライブラリです。
今回は、ReactやTypeScriptの基礎はわかるけど、Ant Designは使ったことがないという方を対象に、Ant Designの使い方をわかりやすく解説します！
この記事では、環境構築やライブラリのインストールが済んでいることを前提に話を進めます。
「とりあえず使ってみたいけど、どう使えばいいかわからない…」という方に、基本的なコンポーネントの使い方を中心にチートシートとして活用いただける内容になっています。ぜひ最後までご覧ください！
また記事内容については、公式サイトを読んだだけではわかりにくい部分や、実際に実装する中で気づいたポイントをまとめています。Ant Designを使ったプロジェクトに取り組む際に役立てていただければ幸いです。
具体的な実装方法については、本記事の例と合わせて、該当コンポーネントの公式ドキュメントを参考にしてみてください。
公式サイト: Ant Design
基本的なコンポーネントの使い方
以下では、Ant Designを使ったボタン、グリッド、フォームの実装例を順番にご紹介します。これらを使いながら、実際のUIを作成していきましょう！
Buttonコンポーネントの基本的な使い方
Ant DesignのButtonコンポーネントは、直感的に使える便利なボタンUIを提供してくれます。typeやsize、color などのプロパティを指定するだけで、多彩なデザインを簡単に適用できます。
公式ドキュメントの説明だけでは分かりづらい部分もあるので、実際のコード例を使いながら解説します。
公式サイト: Ant Design Documentation: Button
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 などのプロパティを指定するだけで、多彩な機能やデザインを簡単に実現できます。
公式ドキュメントの説明だけでは分かりづらい部分もあるので、実際のコード例を使いながら解説します。
公式サイト: Ant Design Documentation: Select
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コンポーネントはカスタマイズ性が高いため、別の記事でさらに詳しく解説する予定です。
公式ドキュメントでは分かりづらい部分もあるかと思いますので、実際のコード例を交えながら解説していきます。
公式サイト: Ant Design Documentation: table
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のプロジェクトに役立つことを願っています！
その他