ReactアプリでAnt Designを試してみた

# やりたいこと
・JavaScriptでReactアプリを作る
・アリババ社のCSSフレームワークであるAnt Designを導入する

# ①Reactアプリを作る
まず、Reactアプリを構築

```
npx create-react-app react-app
```
すると、react-appというフォルダが作られ、フォルダへcdしてください

```
cd react-app
```
Reactアプリに必要なモジュールが自動で入れられ、package.jsonがこんな感じ

```ruby:package.json
{
  "name": "react-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```
フォルダ構成がこんな感じ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538617/4c37ad34-58ab-d63e-13e9-4389a5b9d301.png)

アプリを起動してみてください。
```
npm start
```
ブラウザで開くと、
http://localhost:3000/

Reactの画面が出たら成功！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538617/df21d265-f170-4816-1243-7442425f8671.png)

# ②Ant Designを入れてみる
まず、react-app配下にAnt Designの必要なモジュールを入れる

```
npm install antd --save
```

すると、package.jsonのdependenciesがこうなるはず

```ruby:package.json
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.13.2", #ここが追加された
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
```

これでAnt Designのソースコードが書けるようになった！

# ③Ant Designで画面を作る
srcフォルダの下にあるファイルは、Reactのコンポーネントなので、ここでAnt Design風の画面を作る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538617/2d390ddf-7fd0-639b-cee7-80291fd23db3.png)

まず、初期段階で作られたindex.jsを微修正

```ruby:index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Test from './Test'; #これから作るAnt Designのコンポーネント
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Test /> {/* Ant Designで作ったコンポーネントを入れ替える */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
```

次に、Test.jsというコンポーネントを作成し、src配下に入れる
このソースでは、シンプルな入力フォームとボタンを配置している～

```ruby:Test.js
import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
const onFinish = (values) => {
  console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo);
};
const App = () => (
  <Form
    name="basic"
    labelCol={{
      span: 8,
    }}
    wrapperCol={{
      span: 16,
    }}
    style={{
      maxWidth: 600,
    }}
    initialValues={{
      remember: true,
    }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="Username"
      name="username"
      rules={[
        {
          required: true,
          message: 'Please input your username!',
        },
      ]}
    >
      <Input />
    </Form.Item>

    <Form.Item
      label="Password"
      name="password"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
    >
      <Input.Password />
    </Form.Item>

    <Form.Item
      name="remember"
      valuePropName="checked"
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item
      wrapperCol={{
        offset: 8,
        span: 16,
      }}
    >
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </Form.Item>
  </Form>
);
export default App;
```
すると、もう一度で動作確認
http://localhost:3000/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3538617/77b6639e-ff2b-94fd-ecf5-0906c8e3f917.png)

このように、画面が出たら成功！

# 終わりに（Ant DesignとCloudScapeそれぞれ使った感想）

このまえ、CloudScapeバージョンのほぼ同じ内容の記事を作ってました（(笑)

https://qiita.com/curlneko/items/c062eed59e2f077f8915


CloudScapeとAnt Design両方を試した感想として、個人的にAnt Designが好きだと思います！

Ant DesignはCloudScapeより、実現できる画面設計がもっと幅広く、より細かいCSSの微調整ができ、よりお客様の要望に答えられそうかなと思います。

CloudScapeにはいろいろ制限があり、例えば、各要素の間隔調整のやり方はCloudScapeコンポーネントの属性により調整しないといけないようで、sサイズ、mサイズ、lサイズなど、パラメータが結構限られて、、、AWS風の画面しか作られないか感じました。

一方で、Ant Designは、コンポーネント属性による調整以外に、styleで直接CSS文を打つことで、24pxとか、color: #FFFFFFとか、いろんな微調整が一緒にできます「提供された綺麗なコンポーネント+伝統的なCSSでの微調整」で、より細かい画面設計ができます。

しかし、CSSがもともと苦手な人だと、Ant Designを使う場合、まずpaddingやmarginなど、基礎的なCSSの概念を勉強したほうがいいかもしれませんね。

CloudScapeはシンプルという特徴があっで、あまりCSSが詳しくない人でもコンポーネントをインポートすれば、すぐAWS風の画面がとりあえず作れます。

開発者のCSSスキルや、画面設計の要望、開発時間などを考慮しながら、必要なCSSフレームワークを選定することが大事だと、今回改めて感じました！



# 参考サイト
https://ant.design/docs/react/introduce

https://ant.design/components/form